Column-width presets — structural sanity
backdrop · col-full —
Baseline: 16:9 source in a full-width column. Sizes should resolve to the col-full preset.
backdrop · col-half —
Half-width at large+. Sizes string should reflect the col-half breakpoint chain.
backdrop · col-quarter —
col-quarter preset should resolve to multiple breakpoints — never a flat 25vw.
backdrop · full-bleed · priority —
Edge-to-edge hero (LCP candidate). Sizes = 100vw, loading=eager, fetchpriority=high.
backdrop · immersive-content —
Immersive bleed past grid margins — sizes should cap at viewport-width breakpoints.
Aspect-container coercion — source ≠ container
backdrop in 1:1 container —
16:9 source, 1:1 container. Container aspect enforced; default cover crops to square.
free (~6:5) · col-full —
Free-aspect source at natural shape. Intrinsic dims should match the largest slot.
free in 16:9 container —
Free source forced into 16:9 — tests object-fit cover cropping with default focal.
free in 2:3 container —
Free source cropped into portrait 2:3 — stress test of the tall-crop path.
free in 2:3 · focal 10%/90% —
Same container as above with focal pushed to bottom-left. Computed object-position should read 10%/90%.
Fixed-aspect poster — CMS-native 2:3
poster (2:3) · col-quarter —
2:3 poster in narrow column — the MoviePosterCard pattern.
poster · full-bleed (extreme coercion) —
2:3 source at 100vw — deliberately extreme. Tests that object-fit cover fills the box instead of letterboxing.
poster · col-full · priority=high —
Explicit priority=high value (not boolean). loading=eager + fetchpriority=high.
Caller overrides
backdrop · objectFit=contain in 1:1 —
Caller passes objectFit=contain. Image letterboxes inside the 1:1 box instead of cropping.
backdrop · placeholder + dominantColor + slow —
3-second artificial delay exposes placeholder UX. CSS var inherits; placeholder class flips on load.
Per-slot overrides — art-direction pipeline
override · srcset-driven (browser picks by viewport) —
Slots are single-color WebPs at free-responsive widths (sm=640/md=1024/lg=1440/xl=2048/xxl=2880). With sizes=100vw the browser picks one slot per project breakpoint (base→sm, medium→md, large→lg, xlarge→xl). Resize — fill color + badge flip together.
override · per-slot grid (no srcset) —
Five cells, one per slot — bypass the srcset picker. Authoritative proof that the adapter emits five distinct renditions.
