diff --git a/.agents/skills/cg-reftest/SKILL.md b/.agents/skills/cg-reftest/SKILL.md
index 5ecd4b19d..0f058ab48 100644
--- a/.agents/skills/cg-reftest/SKILL.md
+++ b/.agents/skills/cg-reftest/SKILL.md
@@ -325,8 +325,8 @@ against the current suite config, move its entry from `coverage` →
 `exact`. Do **not** lower the exact suite's floor to fit new entries;
 the bar exists so regressions are loud.
 
-Per-fixture `.reftest.json` sidecars **do not exist** anymore. All
-config lives in the suite file.
+All per-fixture config lives in the suite file. There are no
+per-fixture `.reftest.json` sidecars.
 
 #### Suite JSON shape
 
@@ -334,25 +334,23 @@ config lives in the suite file.
 {
   "name": "L0.exact",
   "description": "Byte-exact fixtures; any drop = regression.",
-  "gate": { "threshold": 0, "aa": false, "floor": 1.0 },
+  "gate": { "threshold": 0, "aa": true, "floor": 1.0 },
   "defaults": {
     "wait_for": ["fonts", "networkidle"],
-    "extra_css": ["../_reftest/hide-text.css"],
+    "extra_css": [
+      "../_reftest/hide-text.css",
+      "../_reftest/transparent-body.css"
+    ],
     "full_page": true
   },
-  "fixtures": [
-    {
-      "path": "../L0/box-dimensions.html",
-      "viewport": { "width": 600, "height": 522 }
-    }
-  ]
+  "fixtures": [{ "path": "../L0/box-dimensions.html" }]
 }
 ```
 
 - `defaults` — applied to every fixture. Each fixture entry can override any field.
 - `fixtures[].path` and every `extra_css[]` path resolve **relative to the suite file**.
-- `viewport.height` must match cg's cull height for the diff to succeed; render cg once and read `WxH` to calibrate.
 - `gate.threshold` / `gate.aa` are inputs to the pixelmatch diff; `gate.floor` is the aggregate pass bar on similarity.
+- **`aa: true` (default)** → pixelmatch `includeAA: false`. Pixelmatch's AA detector fires and excludes anti-aliased edge pixels from the diff count, separating rasterizer edge noise (Skia vs. Blink) from real divergence. Set `aa: false` for strict byte-exact accounting (e.g. probing an AA-class regression).
 
 #### The three-step pipeline
 
@@ -395,9 +393,13 @@ cp "${TMPDIR:-/tmp}/grida-htmlcss-goldens/"*.png target/refbrowser/L0.exact/actu
 **3. Diff via `@grida/reftest`** — format-agnostic, same bucket layout
 and `report.json` schema as the Rust and refig runners.
 
-Default refbrowser diff: **`--threshold 0`** (pixelmatch strictest,
-AA off). Pass each fixture's similarity against the suite's
-`gate.floor` — for `L0.exact`, that's `1.0` (100.00% byte-exact).
+Default refbrowser diff: **`--threshold 0`** (pixelmatch's tightest
+color-delta) with **AA-ignore mode on by default** (`aa: true` →
+`includeAA: false`; pixelmatch's Vysniauskas AA detector fires and
+excludes edge AA pixels from the diff count). Pass `--no-aa` to flip
+to strict byte-exact accounting. Pass each fixture's similarity
+against the suite's `gate.floor` — for `L0.exact`, that's `1.0`
+(100.00% similarity with AA detection active).
 
 ```sh
 pnpm --filter @grida/reftest exec reftest \
@@ -419,43 +421,46 @@ Pass bar: the suite's `gate.floor`. For `L0.exact`, anything below
 100.00% is a real divergence from Blink (rounding policy, layout
 math, AA emission, etc.) — not noise. See "Reading the score" below.
 
-### Reading the score — do not trust it naively
-
-The similarity score is `1 - diff_pixels / scoring_pixels`, where
-`scoring_pixels ≈ width × height` of the screenshot. **The denominator
-is the whole canvas, not the subject under test.**
-
-This has two consequences you must internalize before reading any
-report:
-
-1. **Background dominates the score.** A fixture that paints a
-   100×100 subject on a 600×800 canvas has 92% background. A renderer
-   that emits _nothing_ for the subject still scores ~92%. A
-   renderer that paints the subject at 50% accuracy scores ~96%.
-   Neither number means what it naively looks like.
-2. **Small fixtures inflate. Full-bleed fixtures are honest.** A
-   card-in-corner composition will always look "good" on the score
-   even when broken; a composition that fills the viewport gives
-   numeric feedback proportional to real error.
-
-**Fixture-authoring rule:** size the fixture so the subject under
-test fills as much of the canvas as practical. Viewport height
-tuned to the subject's bounding box (via the suite entry's
-`viewport.height`) is the usual lever. Padding/margins around the
-subject are scoring dead weight — use them only when the test is
-_about_ spacing.
-
-**Reviewing rule:** never report a similarity number without
-eyeballing the diff PNG. A 96% score on a sparse fixture and a 96%
-score on a full-bleed fixture are _orders of magnitude_ apart in
-severity. The diff image is the source of truth; the score is a
-coarse index.
-
-For a true "fraction of the subject that matches," author a
-probe-friendly fixture (see the probe test section) and assert on
-specific pixels, or mask the background to transparent so
-`mask: alpha` counts only subject pixels. Plain refbrowser scores
-cannot give you that signal.
+### Scoring model — content mask
+
+The similarity score is `1 - diff_pixels / scoring_pixels`.
+`scoring_pixels` is the count of pixels where either side has
+`alpha > 0` — the content mask, not the full canvas. Three
+coupled defaults wire this up:
+
+- **Chromium** screenshots with `omitBackground: true` (in
+  `refbrowser_render.ts`). Root canvas default bg is dropped; PNG
+  alpha encodes "did the CSS cascade draw here?"
+- **cg** clears its Skia surface with `Color::TRANSPARENT` and
+  renders at viewport dims (in `examples/golden_htmlcss.rs`).
+- **Both sides** apply `_reftest/transparent-body.css` via
+  `extra_css`. `!important` forces `html, body { background:
+transparent }`, so fixtures with `body { background: #fff }`
+  still produce a content mask without being edited.
+
+Chromium and cg produce identical alpha masks on every L0.exact
+fixture. Diffs that appear under `alpha > 0` are genuine pixel
+differences.
+
+**AA-ignore on by default** (`aa: true` → pixelmatch
+`includeAA: false`). The Vysniauskas AA detector excludes
+anti-aliased edge pixels from the diff count. Combined with the
+content mask, this yields:
+
+| pattern             | strict (`--no-aa`) | default (`--aa`) | meaning                                                                                                      |
+| ------------------- | ------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------ |
+| **pass**            | 100%               | 100%             | identical — no action.                                                                                       |
+| **AA noise**        | 99.9+%             | 100%             | Skia/Blink rasterizer edge jitter on curves, radii, tilted geometry. Safe to ignore.                         |
+| **real divergence** | <100%              | <100%            | renderer bug or non-AA rasterizer mismatch (dither lattice, multi-color miter wedges). Inspect the diff PNG. |
+
+**Reviewing rule:** always eyeball the diff PNG. A fixture below
+100% with `aa: true` has mismatched pixels that pixelmatch could
+not explain as edge AA — treat as real.
+
+**Fixture-authoring rule:** the content mask excludes blank bg, so
+there's no need to shrink viewports for scoring density. Focus on
+minimality (one concept per fixture). Probe tests remain the tool
+for vision-free pixel assertions at known coordinates.
 
 **Per-fixture fields inside a suite entry** — all optional,
 defaults shown; any field set on an entry overrides `defaults`.
@@ -484,9 +489,10 @@ defaults shown; any field set on an entry overrides `defaults`.
 
 **Pre-built helper stylesheets** under `fixtures/test-html/_reftest/`:
 
-| File            | Effect                                                                                                                         |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `hide-text.css` | `color: transparent` + `line-height: 1`. Zeros glyph coverage and pins line-box height. Use when a fixture isn't testing text. |
+| File                   | Effect                                                                                                                                                                                              |
+| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `hide-text.css`        | `color: transparent` + `line-height: 1`. Zeros glyph coverage and pins line-box height. Use when a fixture isn't testing text.                                                                      |
+| `transparent-body.css` | Forces `html, body { background: transparent !important }`. Enables the content mask (alpha>0 = drawn). Both L0 suites apply this by default; drop from `extra_css` for fixtures testing canvas bg. |
 
 Add more helpers here as divergence patterns emerge. Keep each one
 scoped to a single concern (hide text, normalize scrollbars, force
@@ -558,9 +564,10 @@ PR description; let the score carry the truth.
 - **Scrollbar width** — default `full_page: true` captures document
   height and sidesteps scrollbar chrome; flip only when testing
   scrollbar geometry.
-- **Dimension drift** — changing a fixture's layout invalidates its
-  `viewport.height` in the suite entry. Re-run `golden_htmlcss` with
-  `--suite`, update the entry's `viewport.height`, re-run refbrowser.
+- **Dimensions** — cg renders at viewport dims (`width × height`);
+  Chromium screenshots `fullPage` at the same viewport. Setting an
+  explicit `viewport.height` is optional and only useful to trim
+  scoring area for very tall fixtures.
 
 **Oracle type summary:**
 
diff --git a/.agents/skills/cg-reftest/scripts/refbrowser_render.ts b/.agents/skills/cg-reftest/scripts/refbrowser_render.ts
index 46b88178e..c35622feb 100644
--- a/.agents/skills/cg-reftest/scripts/refbrowser_render.ts
+++ b/.agents/skills/cg-reftest/scripts/refbrowser_render.ts
@@ -216,6 +216,8 @@ async function renderOne(
     fullPage: config.full_page,
     animations: "disabled",
     caret: "hide",
+    // Alpha encodes "CSS drew here" — used as content mask by scoring.
+    omitBackground: true,
   });
 
   await page.close();
diff --git a/.agents/skills/fixtures/SKILL.md b/.agents/skills/fixtures/SKILL.md
index 953c090a5..d4d6e0207 100644
--- a/.agents/skills/fixtures/SKILL.md
+++ b/.agents/skills/fixtures/SKILL.md
@@ -43,6 +43,13 @@ edge case** that the codebase supports or intends to support. This includes:
   filename alone should tell you what's being tested.
 - **Labeled specimens.** Within a fixture, label each test case with the
   value being exercised so both humans and heuristics can identify regions.
+  Keep labels short, and pin the dimensions of any container holding a
+  label (flex item, grid cell, stretched block) so font-advance-width
+  differences between engines can't leak into box geometry. When a test
+  pipeline offers a text-neutralizing stylesheet (e.g.
+  `fixtures/test-html/_reftest/hide-text.css` for the htmlcss reftests),
+  prefer that over stripping the label — keeping the text helps the next
+  reader understand the fixture.
 - **Match the fixture's subject to the viewport policy.** For refbrowser
   fixtures under `fixtures/test-html/`, **paint / visual-property**
   fixtures should size their root to a preset viewport (via `min-height`)
diff --git a/crates/grida-canvas/examples/golden_htmlcss.rs b/crates/grida-canvas/examples/golden_htmlcss.rs
index 81ada4db3..69e78cfae 100644
--- a/crates/grida-canvas/examples/golden_htmlcss.rs
+++ b/crates/grida-canvas/examples/golden_htmlcss.rs
@@ -125,13 +125,14 @@ fn render_to_png(
 ) {
     let picture =
         htmlcss::render(html, width, height, fonts, &htmlcss::NoImages).expect("render failed");
-    let cull = picture.cull_rect();
-    let w = cull.width().max(1.0) as i32;
-    let h = cull.height().max(1.0) as i32;
+    // Full-viewport dims match Chromium's fullPage footprint; transparent clear
+    // lets PNG alpha double as the reftest content mask.
+    let w = width.max(1.0) as i32;
+    let h = height.max(1.0) as i32;
 
     let mut surface = surfaces::raster_n32_premul((w, h)).expect("surface");
     let canvas = surface.canvas();
-    canvas.clear(Color::WHITE);
+    canvas.clear(Color::TRANSPARENT);
     canvas.draw_picture(&picture, None, None);
 
     let image = surface.image_snapshot();
diff --git a/crates/grida-canvas/src/htmlcss/collect.rs b/crates/grida-canvas/src/htmlcss/collect.rs
index 9df86ee46..cb29cea2a 100644
--- a/crates/grida-canvas/src/htmlcss/collect.rs
+++ b/crates/grida-canvas/src/htmlcss/collect.rs
@@ -871,7 +871,7 @@ fn collect_inline_items(el: &StyledElement, items: &mut Vec<InlineRunItem>) {
 /// Returns `None` if the element has no visual box decoration.
 fn build_inline_decoration(el: &StyledElement) -> Option<InlineBoxDecoration> {
     let bg = el.background.first().and_then(|l| match l {
-        BackgroundLayer::Solid(c) if c.a > 0 => Some(*c),
+        BackgroundLayer::Solid { color, .. } if color.a > 0 => Some(*color),
         _ => None,
     });
 
@@ -1185,6 +1185,10 @@ fn extract_style(tag: &str, style: &ComputedValues) -> StyledElement {
     // Flex child
     el.flex_grow = style.clone_flex_grow().0;
     el.flex_shrink = style.clone_flex_shrink().0;
+    el.flex_basis = match &pos.flex_basis {
+        style::values::generics::flex::FlexBasis::Size(s) => extract_size(s),
+        style::values::generics::flex::FlexBasis::Content => CssLength::Auto,
+    };
 
     // Grid container
     if el.display == types::Display::Grid {
@@ -1571,18 +1575,41 @@ fn extract_gradient_interpolation(
 
 fn extract_border_radius(style: &ComputedValues) -> CornerRadii {
     let b = style.get_border();
-    let lp = |lp: &style::values::computed::NonNegativeLengthPercentage| -> f32 {
-        lp.0.to_length().map(|l| l.px()).unwrap_or(0.0)
+    // Returns (px, percent_fraction). Percent is deferred to paint time,
+    // where the border-box w/h is known (CSS Backgrounds 3 §5.3).
+    let lp = |v: &style::values::computed::NonNegativeLengthPercentage| -> (f32, f32) {
+        match length_percentage_to_css(&v.0) {
+            CssLength::Px(p) => (p, 0.0),
+            CssLength::Percent(p) => (0.0, p),
+            CssLength::Calc { px, percent } => (px, percent),
+            CssLength::Auto => (0.0, 0.0),
+        }
     };
+    let (tl_x, tl_x_pct) = lp(&b.border_top_left_radius.0.width);
+    let (tl_y, tl_y_pct) = lp(&b.border_top_left_radius.0.height);
+    let (tr_x, tr_x_pct) = lp(&b.border_top_right_radius.0.width);
+    let (tr_y, tr_y_pct) = lp(&b.border_top_right_radius.0.height);
+    let (br_x, br_x_pct) = lp(&b.border_bottom_right_radius.0.width);
+    let (br_y, br_y_pct) = lp(&b.border_bottom_right_radius.0.height);
+    let (bl_x, bl_x_pct) = lp(&b.border_bottom_left_radius.0.width);
+    let (bl_y, bl_y_pct) = lp(&b.border_bottom_left_radius.0.height);
     CornerRadii {
-        tl_x: lp(&b.border_top_left_radius.0.width),
-        tl_y: lp(&b.border_top_left_radius.0.height),
-        tr_x: lp(&b.border_top_right_radius.0.width),
-        tr_y: lp(&b.border_top_right_radius.0.height),
-        br_x: lp(&b.border_bottom_right_radius.0.width),
-        br_y: lp(&b.border_bottom_right_radius.0.height),
-        bl_x: lp(&b.border_bottom_left_radius.0.width),
-        bl_y: lp(&b.border_bottom_left_radius.0.height),
+        tl_x,
+        tl_y,
+        tr_x,
+        tr_y,
+        br_x,
+        br_y,
+        bl_x,
+        bl_y,
+        tl_x_pct,
+        tl_y_pct,
+        tr_x_pct,
+        tr_y_pct,
+        br_x_pct,
+        br_y_pct,
+        bl_x_pct,
+        bl_y_pct,
     }
 }
 
@@ -1590,15 +1617,7 @@ fn extract_size(
     size: &GenericSize<style::values::computed::NonNegativeLengthPercentage>,
 ) -> CssLength {
     match size {
-        GenericSize::LengthPercentage(lp) => {
-            if let Some(len) = lp.0.to_length() {
-                CssLength::Px(len.px())
-            } else if let Some(pct) = lp.0.to_percentage() {
-                CssLength::Percent(pct.0)
-            } else {
-                CssLength::Auto
-            }
-        }
+        GenericSize::LengthPercentage(lp) => length_percentage_to_css(&lp.0),
         _ => CssLength::Auto,
     }
 }
@@ -1610,15 +1629,7 @@ fn extract_max_size(
 ) -> CssLength {
     use style::values::generics::length::GenericMaxSize;
     match size {
-        GenericMaxSize::LengthPercentage(lp) => {
-            if let Some(len) = lp.0.to_length() {
-                CssLength::Px(len.px())
-            } else if let Some(pct) = lp.0.to_percentage() {
-                CssLength::Percent(pct.0)
-            } else {
-                CssLength::Auto
-            }
-        }
+        GenericMaxSize::LengthPercentage(lp) => length_percentage_to_css(&lp.0),
         _ => CssLength::Auto, // None, MaxContent, MinContent, FitContent, etc.
     }
 }
@@ -1653,11 +1664,22 @@ fn extract_background(style: &ComputedValues, current_color: CGColor) -> Vec<Bac
     let bg = style.get_background();
     let mut layers: Vec<BackgroundLayer> = Vec::new();
 
-    // 1. Background color (bottom layer)
+    // 1. Background color (bottom layer). Per CSS Backgrounds 3 §2.5 the
+    //    color uses the `background-clip` value from the *final* layer
+    //    entry in the list.
     if let Some(abs) = bg.background_color.as_absolute() {
         let c = abs_color_to_cg(abs);
         if c.a > 0 {
-            layers.push(BackgroundLayer::Solid(c));
+            let color_clip = bg
+                .background_clip
+                .0
+                .last()
+                .map(extract_bg_clip)
+                .unwrap_or(BackgroundBox::BorderBox);
+            layers.push(BackgroundLayer::Solid {
+                color: c,
+                clip: color_clip,
+            });
         }
     }
 
@@ -2771,10 +2793,10 @@ fn map_overflow(ov: style::values::specified::box_::Overflow) -> types::Overflow
 fn abs_color_to_cg(color: &AbsoluteColor) -> CGColor {
     let srgb = color.to_color_space(ColorSpace::Srgb);
     CGColor::from_rgba(
-        (srgb.components.0.clamp(0.0, 1.0) * 255.0) as u8,
-        (srgb.components.1.clamp(0.0, 1.0) * 255.0) as u8,
-        (srgb.components.2.clamp(0.0, 1.0) * 255.0) as u8,
-        (srgb.alpha.clamp(0.0, 1.0) * 255.0) as u8,
+        (srgb.components.0.clamp(0.0, 1.0) * 255.0).round() as u8,
+        (srgb.components.1.clamp(0.0, 1.0) * 255.0).round() as u8,
+        (srgb.components.2.clamp(0.0, 1.0) * 255.0).round() as u8,
+        (srgb.alpha.clamp(0.0, 1.0) * 255.0).round() as u8,
     )
 }
 
diff --git a/crates/grida-canvas/src/htmlcss/paint.rs b/crates/grida-canvas/src/htmlcss/paint.rs
index 0f444d728..ae66c2bbc 100644
--- a/crates/grida-canvas/src/htmlcss/paint.rs
+++ b/crates/grida-canvas/src/htmlcss/paint.rs
@@ -75,8 +75,10 @@ fn paint_box(
     let w = layout.width;
     let h = layout.height;
 
-    // ── Save state for opacity / filter / clip ──
-    let needs_layer = style.opacity < 1.0 || !style.filter.is_empty();
+    // ── Save state for opacity / filter / mix-blend-mode / clip ──
+    let has_filter = !style.filter.is_empty();
+    let has_blend_mode = !matches!(style.blend_mode, crate::cg::prelude::BlendMode::Normal);
+    let needs_layer = style.opacity < 1.0 || has_filter || has_blend_mode;
     let needs_clip = style.overflow_x != types::Overflow::Visible
         || style.overflow_y != types::Overflow::Visible;
 
@@ -117,19 +119,27 @@ fn paint_box(
 
     if needs_layer {
         let mut layer_paint = Paint::default();
-        layer_paint.set_alpha((style.opacity * 255.0) as u8);
-        let has_filter = !style.filter.is_empty();
+        layer_paint.set_alpha_f(style.opacity);
+        // CSS `mix-blend-mode` composites this element's stacking context
+        // onto its parent using the given blend mode (CSS Compositing 1
+        // §5). Apply as the layer's Skia blend mode.
+        if has_blend_mode {
+            layer_paint.set_blend_mode(style.blend_mode.into());
+        }
         if has_filter {
             if let Some(filter) = build_filter_chain(&style.filter) {
                 layer_paint.set_image_filter(filter);
             }
         }
-        // Skia clips a layer's output to its `bounds` hint, including any
-        // filter outset. Blur / drop-shadow extend the visible region past
-        // the source box, so when a filter is active we omit `bounds` and
-        // let Skia size the layer from the filter's own fast-bounds.
+        // Skia clips a layer's output to its `bounds` hint. Filters
+        // (blur/drop-shadow) extend past the source box, and
+        // `mix-blend-mode` composites whatever the element paints —
+        // including outer box-shadows, outlines, and overflowing
+        // descendants — onto the parent. In both cases we omit `bounds`
+        // and let Skia size the layer from the actual painted content so
+        // those pixels aren't clipped before compositing.
         let bounds = Rect::from_xywh(0.0, 0.0, w, h);
-        let layer_rec = if has_filter {
+        let layer_rec = if has_filter || has_blend_mode {
             skia_safe::canvas::SaveLayerRec::default().paint(&layer_paint)
         } else {
             skia_safe::canvas::SaveLayerRec::default()
@@ -197,7 +207,7 @@ fn paint_box(
             cy,
             cw,
             ch,
-            &style.border_radius,
+            &style.border_radius.resolved(w, h),
             style.font.image_rendering,
             images,
         );
@@ -392,6 +402,8 @@ fn rasterize_gradient(
     let canvas = surface.canvas();
     let mut paint = Paint::default();
     paint.set_shader(shader);
+    // Match Blink: gradients are always dithered (gradient.cc:359).
+    paint.set_dither(true);
     canvas.draw_rect(Rect::from_wh(w, h), &paint);
     surface.image_snapshot().into()
 }
@@ -409,12 +421,13 @@ fn paint_background(
         return;
     }
 
-    let rect = Rect::from_xywh(0.0, 0.0, w, h);
-    let r = &style.border_radius;
+    let resolved_r = style.border_radius.resolved(w, h);
+    let r = &resolved_r;
+    let border_rect = Rect::from_xywh(0.0, 0.0, w, h);
 
     for layer in &style.background {
         match layer {
-            BackgroundLayer::Solid(c) => {
+            BackgroundLayer::Solid { color: c, clip } => {
                 if c.a == 0 {
                     continue;
                 }
@@ -422,11 +435,13 @@ fn paint_background(
                 paint.set_style(PaintStyle::Fill);
                 paint.set_anti_alias(true);
                 paint.set_color(Color::from_argb(c.a, c.r, c.g, c.b));
+                let fill_rect = box_reference_rect(style, w, h, *clip);
                 if r.is_zero() {
-                    canvas.draw_rect(rect, &paint);
+                    canvas.draw_rect(fill_rect, &paint);
                 } else {
+                    let radii = inset_radii(r, border_rect, fill_rect);
                     let mut rrect = skia_safe::RRect::new();
-                    rrect.set_rect_radii(rect, &r.to_skia_radii());
+                    rrect.set_rect_radii(fill_rect, &radii);
                     canvas.draw_rrect(rrect, &paint);
                 }
             }
@@ -661,7 +676,7 @@ fn paint_background_image_layer(
     // rounded to match the inner edge").
     if !style.border_radius.is_zero() {
         let border_rect = Rect::from_xywh(0.0, 0.0, w, h);
-        let radii = inset_radii(&style.border_radius, border_rect, clip_rect);
+        let radii = inset_radii(&style.border_radius.resolved(w, h), border_rect, clip_rect);
         let mut rrect = skia_safe::RRect::new();
         rrect.set_rect_radii(clip_rect, &radii);
         canvas.clip_rrect(rrect, ClipOp::Intersect, true);
@@ -1340,7 +1355,10 @@ fn to_skia_interpolation(v: super::style::GradientInterpolation) -> Interpolatio
         HM::Decreasing => HueMethod::Decreasing,
     };
     Interpolation {
-        in_premul: InPremul::No,
+        // Match Blink: legacy CSS gradients premultiply colors before
+        // interpolating (gradient.cc:282-285). For opaque stops this is a
+        // no-op; the difference shows up when stops have alpha.
+        in_premul: InPremul::Yes,
         color_space,
         hue_method,
     }
@@ -1461,11 +1479,10 @@ fn build_radial_gradient_shader(
     let (cx, cy) = resolve_center(&grad.center, w, h);
     let (rx_full, ry_full) = radial_radii(grad.shape, grad.size, cx, cy, w, h);
 
-    // Use the larger axis as the gradient line length for px stop
-    // resolution. For circles rx = ry; for ellipses this is a reasonable
-    // convention — CSS defines the ending shape's "gradient line" as
-    // radius-like distance from the center.
-    let line_length = rx_full.max(ry_full);
+    // Use the x-axis radius as the gradient line length for px stop
+    // resolution. Matches Blink: the shader is built at the x radius
+    // and the y axis is stretched via a preScale local matrix.
+    let line_length = rx_full;
 
     let (colors, raw_positions) = build_gradient_data_with_line_length(&grad.stops, line_length);
     if colors.len() < 2 {
@@ -1473,13 +1490,25 @@ fn build_radial_gradient_shader(
     }
 
     let (positions, cycle) = repeat_scale(raw_positions, grad.repeating);
-    let (rx, ry) = (rx_full * cycle, ry_full * cycle);
+    let rx = rx_full * cycle;
+    let aspect_ratio = if ry_full > 0.0 {
+        rx_full / ry_full
+    } else {
+        1.0
+    };
 
-    // Unit-radius radial at origin; local matrix maps shader → paint space:
-    // (shader point p) → (cx + rx·p.x, cy + ry·p.y). Works for circles and
-    // ellipses uniformly.
-    let mut matrix = skia_safe::Matrix::scale((rx, ry));
-    matrix.post_translate((cx, cy));
+    // Match Blink (gradient.cc:447-454): build the radial shader at
+    // (cx, cy) with radius = rx, then preScale(1, 1/aspect) at the
+    // center for elliptical gradients. Circles take the identity path,
+    // which avoids the matrix-inverse round-trip and keeps dither phase
+    // aligned with Blink's non-matrix radial draw.
+    let matrix = if (aspect_ratio - 1.0).abs() > 1e-6 {
+        let mut m = skia_safe::Matrix::default();
+        m.pre_scale((1.0, 1.0 / aspect_ratio), Some(Point::new(cx, cy)));
+        Some(m)
+    } else {
+        None
+    };
 
     let gradient = make_gradient(
         &colors,
@@ -1487,7 +1516,7 @@ fn build_radial_gradient_shader(
         tile_mode(grad.repeating),
         grad.interpolation,
     );
-    skia_safe::shaders::radial_gradient((Point::new(0.0, 0.0), 1.0), &gradient, Some(&matrix))
+    skia_safe::shaders::radial_gradient((Point::new(cx, cy), rx), &gradient, matrix.as_ref())
 }
 
 fn build_conic_gradient_shader(grad: &ConicGradient, w: f32, h: f32) -> Option<skia_safe::Shader> {
@@ -1806,12 +1835,21 @@ fn paint_borders(
         && b.top.color == b.bottom.color
         && b.top.color == b.left.color
         && b.top.color == b.right.color;
+    // Stroke once as an RRect when sides are uniform *and* the style is
+    // one whose rendering doesn't depend on per-side color adjustments
+    // (inset / outset / groove / ridge darken/lighten per side). The
+    // per-side trapezoid path double-paints corners for translucent colors;
+    // the single-stroke path avoids that.
+    let uniform_stroke_style = matches!(
+        b.top.style,
+        types::BorderStyle::Solid | types::BorderStyle::Double
+    );
     if uniform
+        && uniform_stroke_style
         && b.top.width > 0.0
-        && b.top.style != types::BorderStyle::None
-        && !style.border_radius.is_zero()
+        && (b.top.style != types::BorderStyle::None || !style.border_radius.is_zero())
     {
-        paint_uniform_rounded_border(canvas, &b.top, &style.border_radius, w, h);
+        paint_uniform_rounded_border(canvas, &b.top, &style.border_radius.resolved(w, h), w, h);
         return;
     }
 
@@ -1853,7 +1891,7 @@ fn paint_uniform_rounded_border(
     };
     if side.style == types::BorderStyle::Double {
         let sub_w = side.width / 3.0;
-        let paint = stroke_paint(side.color, sub_w, types::BorderStyle::Solid);
+        let paint = stroke_paint(side.color, sub_w, types::BorderStyle::Solid, None);
         // Outer ring: stroke center near the outside edge.
         let outer_inset = sub_w / 2.0;
         canvas.draw_rrect(stroke_center(outer_inset), &paint);
@@ -1862,7 +1900,7 @@ fn paint_uniform_rounded_border(
         canvas.draw_rrect(stroke_center(inner_inset), &paint);
         return;
     }
-    let paint = stroke_paint(side.color, side.width, side.style);
+    let paint = stroke_paint(side.color, side.width, side.style, None);
     canvas.draw_rrect(stroke_center(side.width / 2.0), &paint);
 }
 
@@ -1900,7 +1938,7 @@ fn paint_border_side(canvas: &Canvas, pos: SidePos, side: &BorderSide, w: f32, h
         let sub_w = side.width / 3.0;
         let (n_dx, n_dy) = side_inward_normal(pos);
         // Outer stroke (toward the element's outer edge).
-        let paint = stroke_paint(side.color, sub_w, BorderStyle::Solid);
+        let paint = stroke_paint(side.color, sub_w, BorderStyle::Solid, None);
         let out_off = -sub_w;
         let outer_p1 = (p1.0 + n_dx * out_off, p1.1 + n_dy * out_off);
         let outer_p2 = (p2.0 + n_dx * out_off, p2.1 + n_dy * out_off);
@@ -1914,10 +1952,35 @@ fn paint_border_side(canvas: &Canvas, pos: SidePos, side: &BorderSide, w: f32, h
     }
 
     let effective_color = shaded_color(side.color, side.style, pos);
-    let paint = stroke_paint(effective_color, side.width, side.style);
+    let side_length = side_length(pos, w, h);
+
+    // For thick dotted (width > 3px), Blink insets the line endpoints
+    // by width/2 so round caps stay inside the box and the gap calc
+    // sees the inner span (box_border_painter.cc:528-537). Thin dotted
+    // (≤ 3px) instead uses `EnforceDotsAtEndpoints` — not yet ported;
+    // those widths land with a small alignment residual.
+    let (p1, p2, dash_len) = if side.style == types::BorderStyle::Dotted && side.width > 3.0 {
+        let half = side.width / 2.0;
+        let (np1, np2) = match pos {
+            SidePos::Top | SidePos::Bottom => ((p1.0 + half, p1.1), (p2.0 - half, p2.1)),
+            SidePos::Left | SidePos::Right => ((p1.0, p1.1 + half), (p2.0, p2.1 - half)),
+        };
+        (np1, np2, side_length - side.width)
+    } else {
+        (p1, p2, side_length)
+    };
+
+    let paint = stroke_paint(effective_color, side.width, side.style, Some(dash_len));
     canvas.draw_line(p1, p2, &paint);
 }
 
+fn side_length(pos: SidePos, w: f32, h: f32) -> f32 {
+    match pos {
+        SidePos::Top | SidePos::Bottom => w,
+        SidePos::Left | SidePos::Right => h,
+    }
+}
+
 fn side_endpoints(pos: SidePos, width: f32, w: f32, h: f32) -> ((f32, f32), (f32, f32)) {
     let half = width / 2.0;
     match pos {
@@ -1978,7 +2041,17 @@ fn shaded_color(c: CGColor, style: types::BorderStyle, pos: SidePos) -> CGColor
 
 /// Shared stroke paint builder for border sides and outline.
 /// Applies dash/dot path effects for dashed/dotted styles.
-fn stroke_paint(color: CGColor, width: f32, style: types::BorderStyle) -> Paint {
+///
+/// `path_length` (Some) enables Blink-parity gap adjustment so dashes
+/// meet side corners evenly (styled_stroke_data.cc:40-58). None falls
+/// back to nominal intervals — used by paths where the length isn't
+/// known up front (outline RRect perimeter).
+fn stroke_paint(
+    color: CGColor,
+    width: f32,
+    style: types::BorderStyle,
+    path_length: Option<f32>,
+) -> Paint {
     let mut paint = Paint::default();
     paint.set_color(Color::from_argb(color.a, color.r, color.g, color.b));
     paint.set_stroke_width(width);
@@ -1987,13 +2060,42 @@ fn stroke_paint(color: CGColor, width: f32, style: types::BorderStyle) -> Paint
 
     match style {
         types::BorderStyle::Dashed => {
-            let dash_len = width * 3.0;
-            if let Some(effect) = skia_safe::PathEffect::dash(&[dash_len, dash_len], 0.0) {
+            // Blink (styled_stroke_data.cc:60-74): dash/gap relative to
+            // thickness — thin lines (<3px) use longer dashes/gaps so
+            // they don't read as dots or solid lines.
+            let (dash_ratio, gap_ratio) = if width >= 3.0 {
+                (2.0_f32, 1.0_f32)
+            } else {
+                (3.0_f32, 2.0_f32)
+            };
+            let dash = width * dash_ratio;
+            let nominal_gap = width * gap_ratio;
+            let gap = match path_length {
+                Some(len) if len > dash * 2.0 => {
+                    select_best_dash_gap(len, dash, nominal_gap, false)
+                }
+                _ => nominal_gap,
+            };
+            if let Some(effect) = skia_safe::PathEffect::dash(&[dash, gap], 0.0) {
                 paint.set_path_effect(effect);
             }
         }
         types::BorderStyle::Dotted => {
-            if let Some(effect) = skia_safe::PathEffect::dash(&[width, width], 0.0) {
+            // Blink (styled_stroke_data.cc:115-132): round-cap stroke,
+            // interval `[0, gap + width - ε]`. The zero "on" segment
+            // combined with round-cap produces a dot of diameter=width;
+            // the "off" span sets the center-to-center spacing.
+            // SelectBestDashGap picks a gap that fits an integer count
+            // of dots along the side.
+            let per_dot = width * 2.0;
+            let gap = match path_length {
+                Some(len) if len >= per_dot => select_best_dash_gap(len, width, width, false),
+                _ => per_dot,
+            };
+            // Epsilon keeps the final dot inside the endpoint
+            // (styled_stroke_data.cc:127).
+            let off = (gap + width - 0.01).max(0.01);
+            if let Some(effect) = skia_safe::PathEffect::dash(&[0.0, off], 0.0) {
                 paint.set_path_effect(effect);
             }
             paint.set_stroke_cap(skia_safe::paint::Cap::Round);
@@ -2004,6 +2106,51 @@ fn stroke_paint(color: CGColor, width: f32, style: types::BorderStyle) -> Paint
     paint
 }
 
+/// CSS Backgrounds §7.2 / Blink `ShadowData::BlurRadiusToStdDev`
+/// (shadow_data.h:76-82): blur-radius is twice the Gaussian σ.
+#[inline]
+fn blur_radius_to_sigma(blur_radius: f32) -> f32 {
+    blur_radius * 0.5
+}
+
+/// Pick the gap that minimises deviation from `nominal_gap` while
+/// leaving an integer count of dashes on `stroke_length`. Mirrors
+/// Blink's `SelectBestDashGap` (styled_stroke_data.cc:40-58).
+fn select_best_dash_gap(
+    stroke_length: f32,
+    dash_length: f32,
+    gap_length: f32,
+    closed_path: bool,
+) -> f32 {
+    let available = if closed_path {
+        stroke_length
+    } else {
+        stroke_length + gap_length
+    };
+    let min_num_dashes = (available / (dash_length + gap_length)).floor().max(1.0);
+    let max_num_dashes = min_num_dashes + 1.0;
+    // `.max(1.0)` guards div-by-zero when `min_num_dashes == 1`
+    // on an open path. Blink lets the divide produce +∞ and relies
+    // on the `max_gap <= 0.0` branch below to pick `min_gap` anyway.
+    let min_num_gaps = if closed_path {
+        min_num_dashes
+    } else {
+        (min_num_dashes - 1.0).max(1.0)
+    };
+    let max_num_gaps = if closed_path {
+        max_num_dashes
+    } else {
+        (max_num_dashes - 1.0).max(1.0)
+    };
+    let min_gap = (stroke_length - min_num_dashes * dash_length) / min_num_gaps;
+    let max_gap = (stroke_length - max_num_dashes * dash_length) / max_num_gaps;
+    if max_gap <= 0.0 || (min_gap - gap_length).abs() < (max_gap - gap_length).abs() {
+        min_gap
+    } else {
+        max_gap
+    }
+}
+
 // ─── Outline (Chromium: OutlinePainter::PaintOutlineRects) ─────────────────
 
 /// Paint CSS `outline` as a stroked rect/rrect around the element.
@@ -2021,7 +2168,8 @@ fn paint_outline(canvas: &Canvas, style: &StyledElement, w: f32, h: f32) {
         return;
     }
 
-    let r = &style.border_radius;
+    let resolved_r = style.border_radius.resolved(w, h);
+    let r = &resolved_r;
 
     if outline.style == types::BorderStyle::Double {
         // Two concentric 1/3-width strokes separated by a 1/3-width gap.
@@ -2029,7 +2177,7 @@ fn paint_outline(canvas: &Canvas, style: &StyledElement, w: f32, h: f32) {
         let sub_w = outline.width / 3.0;
         let outer_expand = outline.offset + outline.width - sub_w / 2.0;
         let inner_expand = outline.offset + sub_w / 2.0;
-        let paint = stroke_paint(outline.color, sub_w, types::BorderStyle::Solid);
+        let paint = stroke_paint(outline.color, sub_w, types::BorderStyle::Solid, None);
         draw_outline_ring(canvas, w, h, outer_expand, r, &paint);
         draw_outline_ring(canvas, w, h, inner_expand, r, &paint);
         return;
@@ -2066,7 +2214,7 @@ fn draw_outline_ring(
 }
 
 fn outline_paint(outline: &Outline) -> Paint {
-    stroke_paint(outline.color, outline.width, outline.style)
+    stroke_paint(outline.color, outline.width, outline.style, None)
 }
 
 /// Expand border-radius values outward by `expand` pixels.
@@ -2085,7 +2233,10 @@ fn expand_radii(r: &super::style::CornerRadii, expand: f32) -> [skia_safe::Point
 // ─── Box shadow (Chromium: BoxPainterBase::PaintNormalBoxShadow / PaintInsetBoxShadow) ──
 
 fn paint_box_shadow_outer(canvas: &Canvas, style: &StyledElement, w: f32, h: f32) {
-    for shadow in &style.box_shadow {
+    // CSS Backgrounds §7.2: first shadow listed is on top. Iterate in reverse
+    // so the last-listed shadow paints first (bottom), leaving the first-listed
+    // painted last (on top).
+    for shadow in style.box_shadow.iter().rev() {
         if shadow.inset {
             continue;
         }
@@ -2099,11 +2250,9 @@ fn paint_box_shadow_outer(canvas: &Canvas, style: &StyledElement, w: f32, h: f32
         paint.set_anti_alias(true);
         paint.set_style(PaintStyle::Fill);
         if shadow.blur > 0.0 {
-            // CSS `box-shadow` blur length is a Gaussian sigma per CSS
-            // Backgrounds §7.2; Skia's mask-filter takes sigma directly.
             paint.set_mask_filter(skia_safe::MaskFilter::blur(
                 skia_safe::BlurStyle::Normal,
-                shadow.blur,
+                blur_radius_to_sigma(shadow.blur),
                 false,
             ));
         }
@@ -2115,7 +2264,8 @@ fn paint_box_shadow_outer(canvas: &Canvas, style: &StyledElement, w: f32, h: f32
             h + shadow.spread * 2.0,
         );
 
-        let r = &style.border_radius;
+        let resolved_r = style.border_radius.resolved(w, h);
+        let r = &resolved_r;
         if r.is_zero() {
             canvas.draw_rect(shadow_rect, &paint);
         } else {
@@ -2132,7 +2282,9 @@ fn paint_box_shadow_outer(canvas: &Canvas, style: &StyledElement, w: f32, h: f32
 /// then drawing a hollow rect (the box outline expanded outward) with a blur
 /// mask so that only the soft inner edge is visible.
 fn paint_box_shadow_inset(canvas: &Canvas, style: &StyledElement, w: f32, h: f32) {
-    for shadow in &style.box_shadow {
+    // CSS Backgrounds §7.2: first shadow listed is on top. Iterate in reverse
+    // so later-listed insets paint first, leaving the first-listed inset on top.
+    for shadow in style.box_shadow.iter().rev() {
         if !shadow.inset {
             continue;
         }
@@ -2141,7 +2293,8 @@ fn paint_box_shadow_inset(canvas: &Canvas, style: &StyledElement, w: f32, h: f32
 
         // Clip to the box so shadow cannot bleed outside
         canvas.save();
-        let r = &style.border_radius;
+        let resolved_r = style.border_radius.resolved(w, h);
+        let r = &resolved_r;
         if r.is_zero() {
             canvas.clip_rect(box_rect, ClipOp::Intersect, true);
         } else {
@@ -2160,33 +2313,34 @@ fn paint_box_shadow_inset(canvas: &Canvas, style: &StyledElement, w: f32, h: f32
         paint.set_anti_alias(true);
         paint.set_style(PaintStyle::Fill);
         if shadow.blur > 0.0 {
-            // CSS `box-shadow` blur length is a Gaussian sigma per CSS
-            // Backgrounds §7.2; Skia's mask-filter takes sigma directly.
             paint.set_mask_filter(skia_safe::MaskFilter::blur(
                 skia_safe::BlurStyle::Normal,
-                shadow.blur,
+                blur_radius_to_sigma(shadow.blur),
                 false,
             ));
         }
 
-        // Draw a large rect with a hole cut out, shifted by offset + spread.
-        // The blur on the outer edge of the hole creates the inset shadow.
+        // Centered frame, translated by `offset` via canvas.translate
+        // so the inner hole and outer edge shift together — matches
+        // Blink's DrawLooper offset semantics (box_painter_base.cc:566)
+        // and keeps the blur gradients symmetric across the box.
         let spread = shadow.spread;
-        let inner_rect = Rect::from_xywh(
-            shadow.offset_x + spread,
-            shadow.offset_y + spread,
-            w - spread * 2.0,
-            h - spread * 2.0,
-        );
-
-        // Outer rect large enough that its edges are outside the clip region
-        let expansion = shadow.blur * 2.0 + shadow.spread.abs() + 100.0;
-        let outer_rect = Rect::from_xywh(
-            -expansion + shadow.offset_x,
-            -expansion + shadow.offset_y,
-            w + expansion * 2.0,
-            h + expansion * 2.0,
-        );
+        let inner_rect = Rect::from_xywh(spread, spread, w - spread * 2.0, h - spread * 2.0);
+
+        // Outer rect per Blink's `AreaCastingShadowInHole`
+        // (box_painter_base.cc:511-522): outset hole by blur-radius +
+        // |negative_spread|, then union with the pre-offset position so
+        // the frame extends far enough to cover every pixel the shadow
+        // can reach after the translate below. Keeping the thickness at
+        // blur-radius lets inner/outer blur gradients overlap, which is
+        // what produces the soft fall-off toward the box center.
+        let outset = shadow.blur - shadow.spread.min(0.0);
+        let outer_l = (-outset).min(-outset - shadow.offset_x);
+        let outer_t = (-outset).min(-outset - shadow.offset_y);
+        let outer_r = (w + outset).max(w + outset - shadow.offset_x);
+        let outer_b = (h + outset).max(h + outset - shadow.offset_y);
+        let outer_rect = Rect::from_xywh(outer_l, outer_t, outer_r - outer_l, outer_b - outer_t);
+        canvas.translate((shadow.offset_x, shadow.offset_y));
 
         // Build a path: outer rect minus inner rect (creates a frame).
         // EvenOdd fill makes the inner rect a hole.
diff --git a/crates/grida-canvas/src/htmlcss/style.rs b/crates/grida-canvas/src/htmlcss/style.rs
index 480827e4a..f6dcc7856 100644
--- a/crates/grida-canvas/src/htmlcss/style.rs
+++ b/crates/grida-canvas/src/htmlcss/style.rs
@@ -396,6 +396,13 @@ impl Outline {
 ///
 /// CSS: `border-radius: 10px / 20px` → each corner has (rx=10, ry=20).
 /// Skia: `RRect::set_rect_radii` takes `[Point; 4]` where each Point is (rx, ry).
+///
+/// Percent components (`*_pct`, as fractions in [0, 1+]) stay unresolved
+/// until paint time, when the border-box width/height is known.
+/// Per CSS Backgrounds 3 §5.3: horizontal axis % resolves against box
+/// width, vertical axis % against box height. Call [`Self::resolved`]
+/// to materialize a px-only copy before consuming `*_x` / `*_y` fields
+/// or [`Self::to_skia_radii`].
 #[derive(Debug, Clone, Copy, PartialEq, Default)]
 pub struct CornerRadii {
     pub tl_x: f32,
@@ -406,6 +413,14 @@ pub struct CornerRadii {
     pub br_y: f32,
     pub bl_x: f32,
     pub bl_y: f32,
+    pub tl_x_pct: f32,
+    pub tl_y_pct: f32,
+    pub tr_x_pct: f32,
+    pub tr_y_pct: f32,
+    pub br_x_pct: f32,
+    pub br_y_pct: f32,
+    pub bl_x_pct: f32,
+    pub bl_y_pct: f32,
 }
 
 impl CornerRadii {
@@ -420,6 +435,7 @@ impl CornerRadii {
             br_y: br,
             bl_x: bl,
             bl_y: bl,
+            ..Default::default()
         }
     }
 
@@ -432,9 +448,42 @@ impl CornerRadii {
             && self.br_y == 0.0
             && self.bl_x == 0.0
             && self.bl_y == 0.0
+            && self.tl_x_pct == 0.0
+            && self.tl_y_pct == 0.0
+            && self.tr_x_pct == 0.0
+            && self.tr_y_pct == 0.0
+            && self.br_x_pct == 0.0
+            && self.br_y_pct == 0.0
+            && self.bl_x_pct == 0.0
+            && self.bl_y_pct == 0.0
+    }
+
+    /// Resolve percentage components against a box dimension, returning
+    /// a px-only `CornerRadii`. CSS Backgrounds 3 §5.3 — H axis against
+    /// width, V axis against height.
+    pub fn resolved(&self, w: f32, h: f32) -> Self {
+        Self {
+            tl_x: self.tl_x + self.tl_x_pct * w,
+            tl_y: self.tl_y + self.tl_y_pct * h,
+            tr_x: self.tr_x + self.tr_x_pct * w,
+            tr_y: self.tr_y + self.tr_y_pct * h,
+            br_x: self.br_x + self.br_x_pct * w,
+            br_y: self.br_y + self.br_y_pct * h,
+            bl_x: self.bl_x + self.bl_x_pct * w,
+            bl_y: self.bl_y + self.bl_y_pct * h,
+            tl_x_pct: 0.0,
+            tl_y_pct: 0.0,
+            tr_x_pct: 0.0,
+            tr_y_pct: 0.0,
+            br_x_pct: 0.0,
+            br_y_pct: 0.0,
+            bl_x_pct: 0.0,
+            bl_y_pct: 0.0,
+        }
     }
 
     /// Convert to Skia's `[Point; 4]` format for `RRect::set_rect_radii`.
+    /// Assumes percent fields have been resolved (see [`Self::resolved`]).
     pub fn to_skia_radii(&self) -> [skia_safe::Point; 4] {
         [
             skia_safe::Point::new(self.tl_x, self.tl_y),
@@ -444,7 +493,9 @@ impl CornerRadii {
         ]
     }
 
-    /// Max radius (for simplified single-value contexts like inline decoration).
+    /// Max px-radius (percent components are ignored). Used only for the
+    /// inline-decoration presence check in `collect.rs`, which needs a
+    /// single f32 and predates per-axis plumbing.
     pub fn max_radius(&self) -> f32 {
         self.tl_x
             .max(self.tl_y)
@@ -647,8 +698,10 @@ pub enum StyleImage {
 /// slot. Our representation flattens this into a two-variant enum.
 #[derive(Debug, Clone)]
 pub enum BackgroundLayer {
-    /// Solid color fill (CSS `background-color`).
-    Solid(CGColor),
+    /// Solid color fill (CSS `background-color`). Per CSS Backgrounds 3
+    /// §2.5 the color uses the `background-clip` value from the *final*
+    /// layer entry.
+    Solid { color: CGColor, clip: BackgroundBox },
     /// Image layer with full CSS geometry (size, position, repeat, clip, origin).
     /// Chromium: `FillLayer` with image, size, position, repeat, clip, origin.
     Image(BackgroundImage),
diff --git a/fixtures/test-html/L0/box-padding.html b/fixtures/test-html/L0/box-padding.html
index c74036bef..1e79310ca 100644
--- a/fixtures/test-html/L0/box-padding.html
+++ b/fixtures/test-html/L0/box-padding.html
@@ -14,9 +14,10 @@
       }
 
       .label {
+        width: 200px;
+        height: 16px;
         font-size: 11px;
         color: #666;
-        padding-bottom: 4px;
       }
 
       .columns {
@@ -28,14 +29,12 @@
 
       .outer {
         background: #eee;
-        border-radius: 8px;
       }
 
       .inner {
         background: #000;
-        border-radius: 4px;
-        font-size: 12px;
-        color: #fff;
+        width: 80px;
+        height: 24px;
       }
 
       .uniform {
@@ -57,25 +56,25 @@
       <div>
         <div class="label">padding: 24px (uniform)</div>
         <div class="outer uniform">
-          <div class="inner">content</div>
+          <div class="inner"></div>
         </div>
       </div>
       <div>
         <div class="label">padding: 8px 32px (horizontal)</div>
         <div class="outer horizontal">
-          <div class="inner">content</div>
+          <div class="inner"></div>
         </div>
       </div>
       <div>
         <div class="label">padding: 32px 8px (vertical)</div>
         <div class="outer vertical">
-          <div class="inner">content</div>
+          <div class="inner"></div>
         </div>
       </div>
       <div>
         <div class="label">padding: 8px 16px 32px 48px</div>
         <div class="outer asymmetric">
-          <div class="inner">content</div>
+          <div class="inner"></div>
         </div>
       </div>
     </div>
diff --git a/fixtures/test-html/L0/layout-block-flow.html b/fixtures/test-html/L0/layout-block-flow.html
new file mode 100644
index 000000000..9afd974ba
--- /dev/null
+++ b/fixtures/test-html/L0/layout-block-flow.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Layout: Block flow</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .container {
+        width: 400px;
+        background: #eee;
+        padding: 8px;
+        box-sizing: border-box;
+      }
+
+      .block {
+        height: 40px;
+        background: #000;
+        box-sizing: border-box;
+      }
+      .red {
+        background: #c00;
+      }
+
+      .w-50 {
+        width: 50%;
+      }
+      .w-75 {
+        width: 75%;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="block"></div>
+      <div class="block red w-75"></div>
+      <div class="block w-50"></div>
+      <div class="block red"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/layout-flex-align-items.html b/fixtures/test-html/L0/layout-flex-align-items.html
new file mode 100644
index 000000000..0be023279
--- /dev/null
+++ b/fixtures/test-html/L0/layout-flex-align-items.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Layout: Flex align-items</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .label {
+        font-size: 11px;
+        color: #666;
+        padding-bottom: 4px;
+        width: 180px;
+        height: 16px;
+      }
+
+      .row {
+        display: flex;
+        flex-direction: row;
+        width: 500px;
+        height: 120px;
+        background: #eee;
+        margin-bottom: 24px;
+        gap: 12px;
+        padding: 8px;
+        box-sizing: border-box;
+      }
+
+      .i-short {
+        width: 60px;
+        height: 40px;
+        background: #000;
+      }
+      .i-med {
+        width: 60px;
+        height: 60px;
+        background: #000;
+      }
+      .i-tall {
+        width: 60px;
+        height: 80px;
+        background: #000;
+      }
+
+      .a-start {
+        align-items: flex-start;
+      }
+      .a-end {
+        align-items: flex-end;
+      }
+      .a-center {
+        align-items: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="label">flex-start</div>
+    <div class="row a-start">
+      <div class="i-short"></div>
+      <div class="i-med"></div>
+      <div class="i-tall"></div>
+    </div>
+    <div class="label">flex-end</div>
+    <div class="row a-end">
+      <div class="i-short"></div>
+      <div class="i-med"></div>
+      <div class="i-tall"></div>
+    </div>
+    <div class="label">center</div>
+    <div class="row a-center">
+      <div class="i-short"></div>
+      <div class="i-med"></div>
+      <div class="i-tall"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/layout-flex-align-self.html b/fixtures/test-html/L0/layout-flex-align-self.html
new file mode 100644
index 000000000..a709b287f
--- /dev/null
+++ b/fixtures/test-html/L0/layout-flex-align-self.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Layout: Flex Align Self</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .row {
+        display: flex;
+        align-items: center;
+        width: 500px;
+        height: 120px;
+        gap: 16px;
+        margin-bottom: 24px;
+        background: #eee;
+      }
+
+      .item {
+        width: 60px;
+        height: 40px;
+        background: #000;
+      }
+
+      .self-start {
+        align-self: flex-start;
+      }
+      .self-end {
+        align-self: flex-end;
+      }
+      .self-center {
+        align-self: center;
+      }
+      .self-stretch {
+        align-self: stretch;
+        height: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="row">
+      <div class="item self-start"></div>
+      <div class="item self-end"></div>
+      <div class="item self-center"></div>
+      <div class="item self-stretch"></div>
+      <div class="item"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/layout-flex-basis.html b/fixtures/test-html/L0/layout-flex-basis.html
new file mode 100644
index 000000000..796a88e40
--- /dev/null
+++ b/fixtures/test-html/L0/layout-flex-basis.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Layout: Flex Basis</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .row {
+        display: flex;
+        gap: 8px;
+        width: 400px;
+        height: 40px;
+        margin-bottom: 16px;
+      }
+
+      .item {
+        background: #000;
+        height: 40px;
+      }
+
+      .basis-100 {
+        flex-basis: 100px;
+      }
+      .basis-60 {
+        flex-basis: 60px;
+      }
+      .basis-120 {
+        flex-basis: 120px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="row">
+      <div class="item basis-100"></div>
+      <div class="item basis-60"></div>
+      <div class="item basis-120"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/layout-flex-column-basic.html b/fixtures/test-html/L0/layout-flex-column-basic.html
new file mode 100644
index 000000000..d767e2431
--- /dev/null
+++ b/fixtures/test-html/L0/layout-flex-column-basic.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Layout: Flex Column Basic</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .label {
+        font-size: 11px;
+        color: #666;
+        padding-bottom: 4px;
+        width: 100px;
+        height: 16px;
+      }
+
+      .row {
+        display: flex;
+        flex-direction: row;
+        gap: 24px;
+      }
+
+      .col {
+        display: flex;
+        flex-direction: column;
+        width: 100px;
+        height: 300px;
+        background: #eee;
+        box-sizing: border-box;
+      }
+
+      .item {
+        width: 100px;
+        height: 60px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .gap-12 {
+        gap: 12px;
+      }
+      .justify-between {
+        justify-content: space-between;
+      }
+      .justify-end {
+        justify-content: flex-end;
+      }
+
+      .col-group {
+        display: flex;
+        flex-direction: column;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="row">
+      <div class="col-group">
+        <div class="label">default (start)</div>
+        <div class="col">
+          <div class="item"></div>
+          <div class="item"></div>
+          <div class="item"></div>
+        </div>
+      </div>
+      <div class="col-group">
+        <div class="label">gap 12</div>
+        <div class="col gap-12">
+          <div class="item"></div>
+          <div class="item"></div>
+          <div class="item"></div>
+        </div>
+      </div>
+      <div class="col-group">
+        <div class="label">space-between</div>
+        <div class="col justify-between">
+          <div class="item"></div>
+          <div class="item"></div>
+          <div class="item"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/layout-flex-direction-reverse.html b/fixtures/test-html/L0/layout-flex-direction-reverse.html
new file mode 100644
index 000000000..4212347e4
--- /dev/null
+++ b/fixtures/test-html/L0/layout-flex-direction-reverse.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Layout: Flex Direction Reverse</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .row {
+        display: flex;
+        gap: 8px;
+        margin-bottom: 24px;
+        width: 400px;
+        height: 60px;
+      }
+
+      .row-reverse {
+        flex-direction: row-reverse;
+      }
+
+      .col {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-bottom: 24px;
+        width: 100px;
+        height: 200px;
+      }
+
+      .col-reverse {
+        flex-direction: column-reverse;
+      }
+
+      .item {
+        width: 60px;
+        height: 40px;
+        background: #000;
+        flex-shrink: 0;
+      }
+
+      .col .item {
+        width: 60px;
+        height: 40px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="row">
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+    <div class="row row-reverse">
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+    <div class="col">
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+    <div class="col col-reverse">
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/layout-flex-grow.html b/fixtures/test-html/L0/layout-flex-grow.html
new file mode 100644
index 000000000..587c189a4
--- /dev/null
+++ b/fixtures/test-html/L0/layout-flex-grow.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Layout: Flex Grow</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .label {
+        font-size: 11px;
+        color: #666;
+        padding-bottom: 4px;
+        width: 300px;
+        height: 16px;
+      }
+
+      .row {
+        display: flex;
+        flex-direction: row;
+        width: 300px;
+        height: 60px;
+        background: #eee;
+        margin-bottom: 24px;
+        box-sizing: border-box;
+      }
+
+      .item {
+        height: 60px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .i-80 {
+        width: 80px;
+      }
+      .g-1 {
+        flex-grow: 1;
+        flex-basis: 0;
+      }
+      .g-2 {
+        flex-grow: 2;
+        flex-basis: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="label">grow 1 / grow 1 / grow 1 (equal thirds)</div>
+    <div class="row">
+      <div class="item g-1"></div>
+      <div class="item g-1" style="background: #c00"></div>
+      <div class="item g-1"></div>
+    </div>
+    <div class="label">80px fixed / grow 1 / 80px fixed</div>
+    <div class="row">
+      <div class="item i-80"></div>
+      <div class="item g-1" style="background: #c00"></div>
+      <div class="item i-80"></div>
+    </div>
+    <div class="label">grow 1 / grow 2 (one third / two thirds)</div>
+    <div class="row">
+      <div class="item g-1"></div>
+      <div class="item g-2" style="background: #c00"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/layout-flex-row-basic.html b/fixtures/test-html/L0/layout-flex-row-basic.html
new file mode 100644
index 000000000..f5f1bf517
--- /dev/null
+++ b/fixtures/test-html/L0/layout-flex-row-basic.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Layout: Flex Row Basic</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .label {
+        font-size: 11px;
+        color: #666;
+        padding-bottom: 4px;
+        width: 180px;
+        height: 16px;
+      }
+
+      .row {
+        display: flex;
+        flex-direction: row;
+        width: 500px;
+        height: 60px;
+        background: #eee;
+        margin-bottom: 24px;
+        box-sizing: border-box;
+      }
+
+      .item {
+        width: 80px;
+        height: 60px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .gap-16 {
+        gap: 16px;
+      }
+      .justify-between {
+        justify-content: space-between;
+      }
+      .justify-end {
+        justify-content: flex-end;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="label">default (start)</div>
+    <div class="row">
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+    <div class="label">gap 16</div>
+    <div class="row gap-16">
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+    <div class="label">justify-content: space-between</div>
+    <div class="row justify-between">
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+    <div class="label">justify-content: flex-end</div>
+    <div class="row justify-end">
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/layout-flex-wrap.html b/fixtures/test-html/L0/layout-flex-wrap.html
new file mode 100644
index 000000000..200622d1f
--- /dev/null
+++ b/fixtures/test-html/L0/layout-flex-wrap.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Layout: Flex Wrap</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .row {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        width: 400px;
+        background: #eee;
+        padding: 8px;
+        gap: 8px;
+        margin-bottom: 24px;
+        box-sizing: border-box;
+      }
+
+      .item {
+        width: 120px;
+        height: 60px;
+        background: #000;
+        box-sizing: border-box;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="row">
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/layout-grid-autoflow.html b/fixtures/test-html/L0/layout-grid-autoflow.html
new file mode 100644
index 000000000..12b28bed3
--- /dev/null
+++ b/fixtures/test-html/L0/layout-grid-autoflow.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Layout: Grid Autoflow</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: 60px 60px 60px;
+        grid-template-rows: 40px 40px;
+        gap: 8px;
+        margin-bottom: 24px;
+      }
+
+      .autoflow-column {
+        grid-auto-flow: column;
+      }
+
+      .cell {
+        background: #000;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="cell"></div>
+      <div class="cell"></div>
+      <div class="cell"></div>
+      <div class="cell"></div>
+      <div class="cell"></div>
+      <div class="cell"></div>
+    </div>
+    <div class="grid autoflow-column">
+      <div class="cell"></div>
+      <div class="cell"></div>
+      <div class="cell"></div>
+      <div class="cell"></div>
+      <div class="cell"></div>
+      <div class="cell"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/layout-grid-basic.html b/fixtures/test-html/L0/layout-grid-basic.html
new file mode 100644
index 000000000..8d8b59b18
--- /dev/null
+++ b/fixtures/test-html/L0/layout-grid-basic.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Layout: Grid Basic</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: 100px 100px 100px;
+        grid-template-rows: 60px 60px;
+        gap: 8px;
+        width: 400px;
+        background: #eee;
+        padding: 8px;
+        box-sizing: border-box;
+        margin-bottom: 24px;
+      }
+
+      .item {
+        background: #000;
+        box-sizing: border-box;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="item"></div>
+      <div class="item" style="background: #c00"></div>
+      <div class="item"></div>
+      <div class="item" style="background: #c00"></div>
+      <div class="item"></div>
+      <div class="item" style="background: #c00"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/layout-grid-fr.html b/fixtures/test-html/L0/layout-grid-fr.html
new file mode 100644
index 000000000..3612eb8d2
--- /dev/null
+++ b/fixtures/test-html/L0/layout-grid-fr.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Layout: Grid fractional (fr) tracks</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: grid;
+        gap: 8px;
+        height: 60px;
+        background: #eee;
+        margin-bottom: 24px;
+        box-sizing: border-box;
+      }
+
+      .item {
+        background: #000;
+        height: 60px;
+      }
+      .red {
+        background: #c00;
+      }
+
+      .a {
+        grid-template-columns: 1fr 1fr 1fr;
+        width: 304px; /* 3*96 + 2*8 = 304 → integer thirds */
+      }
+      .b {
+        grid-template-columns: 1fr 2fr;
+        width: 308px; /* 300 content + 8 gap; 100/200 split */
+      }
+      .c {
+        grid-template-columns: 80px 1fr 80px;
+        width: 300px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid a">
+      <div class="item"></div>
+      <div class="item red"></div>
+      <div class="item"></div>
+    </div>
+    <div class="grid b">
+      <div class="item"></div>
+      <div class="item red"></div>
+    </div>
+    <div class="grid c">
+      <div class="item"></div>
+      <div class="item red"></div>
+      <div class="item"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/layout-grid-gap-asym.html b/fixtures/test-html/L0/layout-grid-gap-asym.html
new file mode 100644
index 000000000..e7820d57c
--- /dev/null
+++ b/fixtures/test-html/L0/layout-grid-gap-asym.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Layout: Grid asymmetric row/column gaps</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: 80px 80px 80px;
+        grid-template-rows: 50px 50px 50px;
+        row-gap: 24px;
+        column-gap: 8px;
+        width: 320px;
+        padding: 8px;
+        background: #eee;
+        box-sizing: border-box;
+      }
+
+      .item {
+        background: #000;
+      }
+      .red {
+        background: #c00;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="item"></div>
+      <div class="item red"></div>
+      <div class="item"></div>
+      <div class="item red"></div>
+      <div class="item"></div>
+      <div class="item red"></div>
+      <div class="item"></div>
+      <div class="item red"></div>
+      <div class="item"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/layout-grid-span.html b/fixtures/test-html/L0/layout-grid-span.html
new file mode 100644
index 000000000..de272f652
--- /dev/null
+++ b/fixtures/test-html/L0/layout-grid-span.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Layout: Grid span placement</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: 80px 80px 80px 80px;
+        grid-template-rows: 50px 50px;
+        gap: 8px;
+        width: 352px;
+        padding: 8px;
+        background: #eee;
+        box-sizing: border-box;
+        margin-bottom: 24px;
+      }
+
+      .item {
+        background: #000;
+        box-sizing: border-box;
+      }
+      .red {
+        background: #c00;
+      }
+
+      .span-2 {
+        grid-column: span 2;
+      }
+      .span-3 {
+        grid-column: span 3;
+      }
+      .row-span-2 {
+        grid-row: span 2;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="item span-2 red"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item span-3 red"></div>
+    </div>
+    <div class="grid">
+      <div class="item row-span-2 red"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-aspect-ratio.html b/fixtures/test-html/L0/paint-aspect-ratio.html
new file mode 100644
index 000000000..bce4bbc09
--- /dev/null
+++ b/fixtures/test-html/L0/paint-aspect-ratio.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Aspect Ratio</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 24px;
+      }
+
+      .box {
+        width: 160px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .r-1 {
+        aspect-ratio: 1;
+      }
+      .r-16-9 {
+        aspect-ratio: 16 / 9;
+      }
+      .r-4-3 {
+        aspect-ratio: 4 / 3;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="box r-1"></div>
+      <div class="box r-16-9"></div>
+      <div class="box r-4-3"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-background-clip-boxes.html b/fixtures/test-html/L0/paint-background-clip-boxes.html
new file mode 100644
index 000000000..c01112b69
--- /dev/null
+++ b/fixtures/test-html/L0/paint-background-clip-boxes.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Background-clip (box variants)</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .label {
+        font-size: 11px;
+        color: #666;
+        padding-bottom: 4px;
+        width: 140px;
+        height: 16px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 24px;
+      }
+
+      .box {
+        width: 140px;
+        height: 100px;
+        background-color: #000;
+        border: 12px solid rgba(255, 0, 0, 0.5);
+        padding: 12px;
+        box-sizing: border-box;
+      }
+
+      .clip-border {
+        background-clip: border-box;
+      }
+      .clip-padding {
+        background-clip: padding-box;
+      }
+      .clip-content {
+        background-clip: content-box;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div>
+        <div class="label">border-box</div>
+        <div class="box clip-border"></div>
+      </div>
+      <div>
+        <div class="label">padding-box</div>
+        <div class="box clip-padding"></div>
+      </div>
+      <div>
+        <div class="label">content-box</div>
+        <div class="box clip-content"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-background-gradient-linear-simple.html b/fixtures/test-html/L0/paint-background-gradient-linear-simple.html
new file mode 100644
index 000000000..830f926d5
--- /dev/null
+++ b/fixtures/test-html/L0/paint-background-gradient-linear-simple.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Linear Gradient (axis-aligned, two-stop)</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .label {
+        font-size: 11px;
+        color: #666;
+        padding-bottom: 4px;
+        width: 140px;
+        height: 16px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 24px;
+      }
+
+      .swatch {
+        width: 140px;
+        height: 100px;
+        box-sizing: border-box;
+      }
+
+      .to-bottom {
+        background: linear-gradient(to bottom, #000, #fff);
+      }
+      .to-top {
+        background: linear-gradient(to top, #000, #fff);
+      }
+      .to-right {
+        background: linear-gradient(to right, #000, #fff);
+      }
+      .to-left {
+        background: linear-gradient(to left, #000, #fff);
+      }
+      .red-blue {
+        background: linear-gradient(to right, #f00, #00f);
+      }
+      .red-blue-v {
+        background: linear-gradient(to bottom, #f00, #00f);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div>
+        <div class="label">to bottom</div>
+        <div class="swatch to-bottom"></div>
+      </div>
+      <div>
+        <div class="label">to top</div>
+        <div class="swatch to-top"></div>
+      </div>
+      <div>
+        <div class="label">to right</div>
+        <div class="swatch to-right"></div>
+      </div>
+      <div>
+        <div class="label">to left</div>
+        <div class="swatch to-left"></div>
+      </div>
+      <div>
+        <div class="label">red→blue (→)</div>
+        <div class="swatch red-blue"></div>
+      </div>
+      <div>
+        <div class="label">red→blue (↓)</div>
+        <div class="swatch red-blue-v"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-border-double-rect.html b/fixtures/test-html/L0/paint-border-double-rect.html
new file mode 100644
index 000000000..28b8d7a97
--- /dev/null
+++ b/fixtures/test-html/L0/paint-border-double-rect.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Border Double (rectangular)</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .label {
+        font-size: 11px;
+        color: #666;
+        padding-bottom: 4px;
+        width: 140px;
+        height: 16px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 24px;
+      }
+
+      .box {
+        width: 140px;
+        height: 100px;
+        background: #eee;
+        box-sizing: border-box;
+      }
+
+      .b-9 {
+        border: 9px double #000;
+      }
+      .b-12 {
+        border: 12px double #c00;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div>
+        <div class="label">9px double black</div>
+        <div class="box b-9"></div>
+      </div>
+      <div>
+        <div class="label">12px double red</div>
+        <div class="box b-12"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-border-radius-individual.html b/fixtures/test-html/L0/paint-border-radius-individual.html
new file mode 100644
index 000000000..27fc4602b
--- /dev/null
+++ b/fixtures/test-html/L0/paint-border-radius-individual.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Border Radius Individual Corners</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 20px;
+      }
+
+      .box {
+        width: 120px;
+        height: 80px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .tl {
+        border-top-left-radius: 24px;
+      }
+      .tr {
+        border-top-right-radius: 24px;
+      }
+      .br {
+        border-bottom-right-radius: 24px;
+      }
+      .bl {
+        border-bottom-left-radius: 24px;
+      }
+      .tl-tr {
+        border-top-left-radius: 16px;
+        border-top-right-radius: 16px;
+      }
+      .diagonal {
+        border-top-left-radius: 20px;
+        border-bottom-right-radius: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="box tl"></div>
+      <div class="box tr"></div>
+      <div class="box br"></div>
+      <div class="box bl"></div>
+      <div class="box tl-tr"></div>
+      <div class="box diagonal"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-border-solid.html b/fixtures/test-html/L0/paint-border-solid.html
new file mode 100644
index 000000000..d98bc1253
--- /dev/null
+++ b/fixtures/test-html/L0/paint-border-solid.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Solid Border</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 24px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .label {
+        font-size: 11px;
+        color: #666;
+        padding-bottom: 4px;
+        width: 140px;
+        height: 16px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 16px;
+      }
+
+      .box {
+        width: 140px;
+        height: 100px;
+        background: #fff;
+        box-sizing: border-box;
+      }
+
+      .uniform-1 {
+        border: 1px solid #000;
+      }
+      .uniform-3 {
+        border: 3px solid #000;
+      }
+      .uniform-8 {
+        border: 8px solid #000;
+      }
+      .top-only {
+        border-top: 4px solid #000;
+      }
+      .asym-width {
+        border-top: 2px solid #000;
+        border-right: 4px solid #000;
+        border-bottom: 6px solid #000;
+        border-left: 8px solid #000;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div>
+        <div class="label">1px solid</div>
+        <div class="box uniform-1"></div>
+      </div>
+      <div>
+        <div class="label">3px solid</div>
+        <div class="box uniform-3"></div>
+      </div>
+      <div>
+        <div class="label">8px solid</div>
+        <div class="box uniform-8"></div>
+      </div>
+      <div>
+        <div class="label">top-only 4px</div>
+        <div class="box top-only"></div>
+      </div>
+      <div>
+        <div class="label">asym-width</div>
+        <div class="box asym-width"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-border-style-dashed.html b/fixtures/test-html/L0/paint-border-style-dashed.html
new file mode 100644
index 000000000..9299ef090
--- /dev/null
+++ b/fixtures/test-html/L0/paint-border-style-dashed.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Border Style Dashed</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 32px;
+      }
+
+      .rect {
+        width: 140px;
+        height: 100px;
+        box-sizing: border-box;
+        background: #ddd;
+      }
+
+      /* CSS Backgrounds §4.2 border-style: dashed.
+         Dash geometry is implementation-defined; Blink uses
+         dash = width × {3 (thin <3px) | 2 (thick)},
+         gap  = width × {2 (thin <3px) | 1 (thick)},
+         with gap adjusted so dashes meet corners evenly. */
+      .w1 {
+        border: 1px dashed #000;
+      }
+      .w2 {
+        border: 2px dashed #000;
+      }
+      .w3 {
+        border: 3px dashed #000;
+      }
+      .w6 {
+        border: 6px dashed #000;
+      }
+      .w10 {
+        border: 10px dashed #000;
+      }
+      .colored {
+        border: 4px dashed #c00;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="rect w1"></div>
+      <div class="rect w2"></div>
+      <div class="rect w3"></div>
+      <div class="rect w6"></div>
+      <div class="rect w10"></div>
+      <div class="rect colored"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-border-style-dotted.html b/fixtures/test-html/L0/paint-border-style-dotted.html
new file mode 100644
index 000000000..20a5c6d3d
--- /dev/null
+++ b/fixtures/test-html/L0/paint-border-style-dotted.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Border Style Dotted</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 32px;
+      }
+
+      .rect {
+        width: 140px;
+        height: 100px;
+        box-sizing: border-box;
+        background: #ddd;
+      }
+
+      /* CSS Backgrounds §4.2 border-style: dotted.
+         Blink's dotted stroke: round caps, dots of diameter=width
+         spaced by SelectBestDashGap so an integer number of dots fit
+         the side length. */
+      .w1 {
+        border: 1px dotted #000;
+      }
+      .w2 {
+        border: 2px dotted #000;
+      }
+      .w3 {
+        border: 3px dotted #000;
+      }
+      .w6 {
+        border: 6px dotted #000;
+      }
+      .w10 {
+        border: 10px dotted #000;
+      }
+      .colored {
+        border: 4px dotted #c00;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="rect w1"></div>
+      <div class="rect w2"></div>
+      <div class="rect w3"></div>
+      <div class="rect w6"></div>
+      <div class="rect w10"></div>
+      <div class="rect colored"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-border-translucent.html b/fixtures/test-html/L0/paint-border-translucent.html
new file mode 100644
index 000000000..35f5d3998
--- /dev/null
+++ b/fixtures/test-html/L0/paint-border-translucent.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Translucent Border</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .label {
+        font-size: 11px;
+        color: #666;
+        padding-bottom: 4px;
+        width: 140px;
+        height: 16px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 24px;
+      }
+
+      .box {
+        width: 140px;
+        height: 100px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .b-thin {
+        border: 4px solid rgba(255, 0, 0, 0.5);
+      }
+      .b-thick {
+        border: 12px solid rgba(0, 0, 255, 0.5);
+      }
+      .b-green {
+        border: 8px solid rgba(0, 128, 0, 0.5);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div>
+        <div class="label">4px red@0.5</div>
+        <div class="box b-thin"></div>
+      </div>
+      <div>
+        <div class="label">12px blue@0.5</div>
+        <div class="box b-thick"></div>
+      </div>
+      <div>
+        <div class="label">8px green@0.5</div>
+        <div class="box b-green"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-box-shadow-blur.html b/fixtures/test-html/L0/paint-box-shadow-blur.html
new file mode 100644
index 000000000..f26b848a5
--- /dev/null
+++ b/fixtures/test-html/L0/paint-box-shadow-blur.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Box Shadow Blur</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 40px;
+        background: #fff;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 48px;
+      }
+
+      .box {
+        width: 80px;
+        height: 80px;
+        background: #000;
+      }
+
+      /* CSS Backgrounds §7.2: box-shadow blur-radius defines the std
+         deviation of the Gaussian. Chromium stores σ = radius * 0.5. */
+      .b4 {
+        box-shadow: 0 0 4px #000;
+      }
+      .b10 {
+        box-shadow: 0 0 10px #000;
+      }
+      .b20 {
+        box-shadow: 0 0 20px #000;
+      }
+
+      /* offset + blur */
+      .off-blur {
+        box-shadow: 8px 8px 10px #000;
+      }
+
+      /* blur + spread */
+      .blur-spread {
+        box-shadow: 0 0 10px 4px #000;
+      }
+
+      /* colored translucent blur */
+      .color-blur {
+        box-shadow: 0 0 12px rgba(255, 0, 0, 0.8);
+      }
+
+      /* blur + border-radius (Gaussian on rounded rect) */
+      .round-blur {
+        border-radius: 16px;
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="box b4"></div>
+      <div class="box b10"></div>
+      <div class="box b20"></div>
+      <div class="box off-blur"></div>
+      <div class="box blur-spread"></div>
+      <div class="box color-blur"></div>
+      <div class="box round-blur"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-box-shadow-inset-blur.html b/fixtures/test-html/L0/paint-box-shadow-inset-blur.html
new file mode 100644
index 000000000..50ab85ad4
--- /dev/null
+++ b/fixtures/test-html/L0/paint-box-shadow-inset-blur.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Box Shadow Inset Blur</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 40px;
+        background: #fff;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 48px;
+      }
+
+      .box {
+        width: 100px;
+        height: 100px;
+        background: #fff;
+      }
+
+      /* CSS Backgrounds §7.2: inset shadows render inside the box with
+         soft inner edge. Blur-radius = 2σ per Blink shadow_data.h:76-82. */
+      .b4 {
+        box-shadow: inset 0 0 4px #000;
+      }
+      .b10 {
+        box-shadow: inset 0 0 10px #000;
+      }
+      .b20 {
+        box-shadow: inset 0 0 20px #000;
+      }
+
+      /* inset + offset + blur */
+      .off-blur {
+        box-shadow: inset 4px 4px 8px #000;
+      }
+
+      /* inset + spread + blur */
+      .blur-spread {
+        box-shadow: inset 0 0 10px 4px #000;
+      }
+
+      /* translucent colored inset blur */
+      .color-blur {
+        box-shadow: inset 0 0 12px rgba(255, 0, 0, 0.8);
+      }
+
+      /* inset blur with border-radius (rounded inner edge) */
+      .round-blur {
+        border-radius: 16px;
+        box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.6);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="box b4"></div>
+      <div class="box b10"></div>
+      <div class="box b20"></div>
+      <div class="box off-blur"></div>
+      <div class="box blur-spread"></div>
+      <div class="box color-blur"></div>
+      <div class="box round-blur"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-box-shadow-inset-solid.html b/fixtures/test-html/L0/paint-box-shadow-inset-solid.html
new file mode 100644
index 000000000..be0006047
--- /dev/null
+++ b/fixtures/test-html/L0/paint-box-shadow-inset-solid.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Inset Box Shadow (no blur)</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .label {
+        font-size: 11px;
+        color: #666;
+        padding-bottom: 4px;
+        width: 140px;
+        height: 16px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 24px;
+      }
+
+      .box {
+        width: 140px;
+        height: 100px;
+        background: #ddd;
+        box-sizing: border-box;
+      }
+
+      .inset-spread {
+        box-shadow: inset 0 0 0 6px #000;
+      }
+      .inset-offset {
+        box-shadow: inset 8px 8px 0 0 #000;
+      }
+      .inset-offset-neg {
+        box-shadow: inset -8px -8px 0 0 #000;
+      }
+      .inset-spread-offset {
+        box-shadow: inset 4px 4px 0 2px #000;
+      }
+      .inset-colored {
+        box-shadow: inset 0 0 0 4px #c00;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div>
+        <div class="label">inset spread 6</div>
+        <div class="box inset-spread"></div>
+      </div>
+      <div>
+        <div class="label">inset 8/8</div>
+        <div class="box inset-offset"></div>
+      </div>
+      <div>
+        <div class="label">inset -8/-8</div>
+        <div class="box inset-offset-neg"></div>
+      </div>
+      <div>
+        <div class="label">inset 4/4 spread 2</div>
+        <div class="box inset-spread-offset"></div>
+      </div>
+      <div>
+        <div class="label">inset colored</div>
+        <div class="box inset-colored"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-box-shadow-multiple.html b/fixtures/test-html/L0/paint-box-shadow-multiple.html
new file mode 100644
index 000000000..7799680a7
--- /dev/null
+++ b/fixtures/test-html/L0/paint-box-shadow-multiple.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Box Shadow Multiple</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 64px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .row {
+        display: flex;
+        gap: 64px;
+        margin-bottom: 64px;
+      }
+
+      .box {
+        width: 100px;
+        height: 100px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .two {
+        box-shadow:
+          8px 8px 0 0 #f00,
+          -8px -8px 0 0 #0f0;
+      }
+
+      .three {
+        box-shadow:
+          6px 6px 0 0 #f00,
+          12px 12px 0 0 #0f0,
+          18px 18px 0 0 #00f;
+      }
+
+      .inset-outer {
+        box-shadow:
+          10px 10px 0 0 #f00,
+          inset 0 0 0 4px #0f0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="row">
+      <div class="box two"></div>
+      <div class="box three"></div>
+      <div class="box inset-outer"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-box-shadow-solid.html b/fixtures/test-html/L0/paint-box-shadow-solid.html
new file mode 100644
index 000000000..8d8622d12
--- /dev/null
+++ b/fixtures/test-html/L0/paint-box-shadow-solid.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Box Shadow (Solid / No Blur)</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .label {
+        font-size: 11px;
+        color: #666;
+        padding-bottom: 4px;
+        width: 140px;
+        height: 16px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 40px;
+      }
+
+      .box {
+        width: 120px;
+        height: 80px;
+        background: #ddd;
+        box-sizing: border-box;
+      }
+
+      .offset {
+        box-shadow: 6px 6px 0 0 #000;
+      }
+      .offset-neg {
+        box-shadow: -6px -6px 0 0 #000;
+      }
+      .spread {
+        box-shadow: 0 0 0 4px #000;
+      }
+      .spread-offset {
+        box-shadow: 4px 4px 0 2px #000;
+      }
+      .colored {
+        box-shadow: 6px 6px 0 0 #c00;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div>
+        <div class="label">offset 6/6</div>
+        <div class="box offset"></div>
+      </div>
+      <div>
+        <div class="label">offset -6/-6</div>
+        <div class="box offset-neg"></div>
+      </div>
+      <div>
+        <div class="label">spread 4</div>
+        <div class="box spread"></div>
+      </div>
+      <div>
+        <div class="label">spread 2 + offset 4</div>
+        <div class="box spread-offset"></div>
+      </div>
+      <div>
+        <div class="label">colored #c00</div>
+        <div class="box colored"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-clip-path-circle.html b/fixtures/test-html/L0/paint-clip-path-circle.html
new file mode 100644
index 000000000..811db5fe1
--- /dev/null
+++ b/fixtures/test-html/L0/paint-clip-path-circle.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Clip-Path Circle</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 24px;
+      }
+
+      .box {
+        width: 140px;
+        height: 140px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .default {
+        clip-path: circle();
+      }
+      .px30 {
+        clip-path: circle(30px);
+      }
+      .px20 {
+        clip-path: circle(20px);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="box default"></div>
+      <div class="box px30"></div>
+      <div class="box px20"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-clip-path-ellipse.html b/fixtures/test-html/L0/paint-clip-path-ellipse.html
new file mode 100644
index 000000000..adef5d69f
--- /dev/null
+++ b/fixtures/test-html/L0/paint-clip-path-ellipse.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Clip-Path Ellipse</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 24px;
+      }
+
+      .box {
+        width: 140px;
+        height: 100px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .default {
+        clip-path: ellipse();
+      }
+      .rx-ry {
+        clip-path: ellipse(30px 20px);
+      }
+      .at-center {
+        clip-path: ellipse(30px 20px at 50% 50%);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="box default"></div>
+      <div class="box rx-ry"></div>
+      <div class="box at-center"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-clip-path-inset.html b/fixtures/test-html/L0/paint-clip-path-inset.html
new file mode 100644
index 000000000..8c75195de
--- /dev/null
+++ b/fixtures/test-html/L0/paint-clip-path-inset.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Clip-Path Inset</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .label {
+        font-size: 11px;
+        color: #666;
+        padding-bottom: 4px;
+        width: 140px;
+        height: 16px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 24px;
+      }
+
+      .box {
+        width: 140px;
+        height: 100px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .all {
+        clip-path: inset(10px);
+      }
+      .asym {
+        clip-path: inset(10px 20px 15px 25px);
+      }
+      .percent {
+        clip-path: inset(10% 20%);
+      }
+      .round {
+        clip-path: inset(10px round 16px);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div>
+        <div class="label">inset 10px</div>
+        <div class="box all"></div>
+      </div>
+      <div>
+        <div class="label">inset 10/20/15/25</div>
+        <div class="box asym"></div>
+      </div>
+      <div>
+        <div class="label">inset 10%/20%</div>
+        <div class="box percent"></div>
+      </div>
+      <div>
+        <div class="label">inset 10px round 16px</div>
+        <div class="box round"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-clip-path-polygon.html b/fixtures/test-html/L0/paint-clip-path-polygon.html
new file mode 100644
index 000000000..3a040fa75
--- /dev/null
+++ b/fixtures/test-html/L0/paint-clip-path-polygon.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Clip-Path Polygon</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 24px;
+      }
+
+      .box {
+        width: 140px;
+        height: 100px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .triangle-top {
+        clip-path: polygon(0 0, 100% 0, 0 100%);
+      }
+      .axis-hex {
+        clip-path: polygon(0 0, 60px 0, 60px 100px, 0 100px);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="box triangle-top"></div>
+      <div class="box axis-hex"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-color-hex-alpha.html b/fixtures/test-html/L0/paint-color-hex-alpha.html
new file mode 100644
index 000000000..0abc268c3
--- /dev/null
+++ b/fixtures/test-html/L0/paint-color-hex-alpha.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Hex/Alpha Color Forms</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 16px;
+      }
+
+      .swatch {
+        width: 100px;
+        height: 100px;
+        box-sizing: border-box;
+      }
+
+      .hex6 {
+        background-color: #3366cc;
+      }
+      .hex8 {
+        background-color: #3366cc80;
+      }
+      .hex3 {
+        background-color: #39c;
+      }
+      .hex4 {
+        background-color: #39c8;
+      }
+      .rgb-space {
+        background-color: rgb(51 102 204);
+      }
+      .rgb-slash {
+        background-color: rgb(51 102 204 / 0.5);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="swatch hex6"></div>
+      <div class="swatch hex8"></div>
+      <div class="swatch hex3"></div>
+      <div class="swatch hex4"></div>
+      <div class="swatch rgb-space"></div>
+      <div class="swatch rgb-slash"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-display-none.html b/fixtures/test-html/L0/paint-display-none.html
new file mode 100644
index 000000000..98a5ae73d
--- /dev/null
+++ b/fixtures/test-html/L0/paint-display-none.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Display None</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 24px;
+      }
+
+      .box {
+        width: 120px;
+        height: 100px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .d-none {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="box"></div>
+      <div class="box d-none"></div>
+      <div class="box"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-filter-blur.html b/fixtures/test-html/L0/paint-filter-blur.html
new file mode 100644
index 000000000..697f9f833
--- /dev/null
+++ b/fixtures/test-html/L0/paint-filter-blur.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Filter blur()</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 48px;
+        background: #fff;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 56px;
+      }
+
+      .box {
+        width: 80px;
+        height: 80px;
+        background: #000;
+      }
+
+      /* CSS Filter Effects §11.4.4 blur(<length>): the length is the
+         Gaussian standard deviation directly. Zero = identity. */
+      .b0 {
+        filter: blur(0);
+      }
+      .b2 {
+        filter: blur(2px);
+      }
+      .b4 {
+        filter: blur(4px);
+      }
+      .b8 {
+        filter: blur(8px);
+      }
+      .b12 {
+        filter: blur(12px);
+      }
+      .b-colored {
+        background: #c00;
+        filter: blur(6px);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="box b0"></div>
+      <div class="box b2"></div>
+      <div class="box b4"></div>
+      <div class="box b8"></div>
+      <div class="box b12"></div>
+      <div class="box b-colored"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-filter-chain.html b/fixtures/test-html/L0/paint-filter-chain.html
new file mode 100644
index 000000000..113df9ae0
--- /dev/null
+++ b/fixtures/test-html/L0/paint-filter-chain.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Filter chain</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 16px;
+      }
+
+      .swatch {
+        width: 100px;
+        height: 100px;
+        background: #c00;
+        box-sizing: border-box;
+      }
+
+      .invert-grayscale {
+        filter: invert(1) grayscale(1);
+      }
+      .opacity-brightness {
+        filter: opacity(0.7) brightness(1.5);
+      }
+      .sepia-saturate {
+        filter: sepia(1) saturate(2);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="swatch invert-grayscale"></div>
+      <div class="swatch opacity-brightness"></div>
+      <div class="swatch sepia-saturate"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-filter-drop-shadow.html b/fixtures/test-html/L0/paint-filter-drop-shadow.html
new file mode 100644
index 000000000..b4d96d158
--- /dev/null
+++ b/fixtures/test-html/L0/paint-filter-drop-shadow.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Filter drop-shadow</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 48px;
+        background: #fff;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 56px;
+      }
+
+      .box {
+        width: 80px;
+        height: 80px;
+        background: #000;
+      }
+
+      /* CSS Filter Effects §9.7 drop-shadow( <length>{2,3} <color>? ).
+         The third length is the Gaussian σ directly (not halved like
+         box-shadow). Blink stores it as sigma in filter_effect_builder. */
+      .ds-no-blur {
+        filter: drop-shadow(6px 6px #000);
+      }
+      .ds-small {
+        filter: drop-shadow(4px 4px 4px #000);
+      }
+      .ds-medium {
+        filter: drop-shadow(6px 6px 10px #000);
+      }
+      .ds-large {
+        filter: drop-shadow(0 0 16px #000);
+      }
+      .ds-color {
+        filter: drop-shadow(4px 4px 8px rgba(255, 0, 0, 0.8));
+      }
+      .ds-negative-offset {
+        filter: drop-shadow(-6px -6px 6px #000);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="box ds-no-blur"></div>
+      <div class="box ds-small"></div>
+      <div class="box ds-medium"></div>
+      <div class="box ds-large"></div>
+      <div class="box ds-color"></div>
+      <div class="box ds-negative-offset"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-filter-simple.html b/fixtures/test-html/L0/paint-filter-simple.html
new file mode 100644
index 000000000..7fae8343c
--- /dev/null
+++ b/fixtures/test-html/L0/paint-filter-simple.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Filter (simple functions)</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 16px;
+      }
+
+      .swatch {
+        width: 100px;
+        height: 100px;
+        background: #c00;
+        box-sizing: border-box;
+      }
+
+      .none {
+        filter: none;
+      }
+      .invert {
+        filter: invert(1);
+      }
+      .grayscale {
+        filter: grayscale(1);
+      }
+      .brightness {
+        filter: brightness(0.5);
+      }
+      .opacity {
+        filter: opacity(0.5);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="swatch none"></div>
+      <div class="swatch invert"></div>
+      <div class="swatch grayscale"></div>
+      <div class="swatch brightness"></div>
+      <div class="swatch opacity"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-gradient-radial.html b/fixtures/test-html/L0/paint-gradient-radial.html
index 6c7cf737a..47d44c232 100644
--- a/fixtures/test-html/L0/paint-gradient-radial.html
+++ b/fixtures/test-html/L0/paint-gradient-radial.html
@@ -4,19 +4,16 @@
     <meta charset="utf-8" />
     <title>Paint: Radial Gradient</title>
     <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
       body {
         margin: 0;
-        padding: 24px;
+        padding: 32px;
         background: #fff;
         color: #000;
-        font-family: system-ui, sans-serif;
-        font-size: 14px;
-      }
-
-      .label {
-        font-size: 11px;
-        color: #666;
-        padding-bottom: 4px;
       }
 
       .grid {
@@ -27,16 +24,11 @@
       }
 
       .rect {
-        width: 180px;
-        height: 180px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 12px;
-        color: #fff;
+        width: 100px;
+        height: 100px;
       }
 
-      /* shape */
+      /* <ending-shape> — CSS Images 3 §3.2.2 */
       .circle {
         background: radial-gradient(circle, #f00, #000);
       }
@@ -44,31 +36,16 @@
         background: radial-gradient(ellipse, #f00, #000);
       }
 
-      /* stops */
-      .multi-stop {
-        background: radial-gradient(circle, #f00, #0f0 40%, #00f 80%, #000);
-      }
-
-      /* position */
-      .at-top-left {
-        background: radial-gradient(circle at top left, #f00, #000);
-      }
-      .at-bottom-right {
-        background: radial-gradient(circle at bottom right, #f00, #000);
-      }
-      .at-center {
-        background: radial-gradient(circle at 25% 75%, #f00, #000);
-      }
-      .at-px {
-        background: radial-gradient(circle at 30px 30px, #f00, #000);
-      }
-
-      /* size */
+      /* <extent-keyword> — closest/farthest × side/corner */
       .closest-side {
         background: radial-gradient(circle closest-side, #f00, #000);
       }
-      .farthest-corner {
-        background: radial-gradient(circle farthest-corner, #f00, #000);
+      .farthest-side {
+        background: radial-gradient(
+          circle farthest-side at 30% 30%,
+          #f00,
+          #000
+        );
       }
       .closest-corner {
         background: radial-gradient(
@@ -77,78 +54,69 @@
           #000
         );
       }
-      .explicit-radius {
+      .farthest-corner {
+        background: radial-gradient(circle farthest-corner, #f00, #000);
+      }
+      .ellipse-closest-side {
+        background: radial-gradient(
+          ellipse closest-side at 40% 60%,
+          #f00,
+          #000
+        );
+      }
+      .ellipse-farthest-corner {
+        background: radial-gradient(
+          ellipse farthest-corner at 70% 30%,
+          #f00,
+          #000
+        );
+      }
+
+      /* <length> explicit radii */
+      .explicit-circle {
         background: radial-gradient(circle 40px, #f00, #000);
       }
-      .ellipse-radii {
-        background: radial-gradient(ellipse 80px 30px at center, #f00, #000);
+      .explicit-ellipse {
+        background: radial-gradient(ellipse 60px 30px at center, #f00, #000);
       }
 
-      /* stacked */
-      .stacked {
-        background-color: #000;
-        background-image: radial-gradient(
-          circle,
-          rgba(255, 0, 0, 0.8),
-          transparent 70%
-        );
+      /* <position> */
+      .at-top-left {
+        background: radial-gradient(circle at top left, #f00, #000);
+      }
+      .at-bottom-right {
+        background: radial-gradient(circle at bottom right, #f00, #000);
+      }
+      .at-percent {
+        background: radial-gradient(circle at 25% 75%, #f00, #000);
+      }
+      .at-px {
+        background: radial-gradient(circle at 30px 30px, #f00, #000);
+      }
+
+      /* <color-stop-list> */
+      .multi-stop {
+        background: radial-gradient(circle, #f00, #0f0 40%, #00f 80%, #000);
       }
     </style>
   </head>
   <body>
     <div class="grid">
-      <div>
-        <div class="label">circle</div>
-        <div class="rect circle">circle</div>
-      </div>
-      <div>
-        <div class="label">ellipse</div>
-        <div class="rect ellipse">ellipse</div>
-      </div>
-      <div>
-        <div class="label">multi-stop</div>
-        <div class="rect multi-stop">multi-stop</div>
-      </div>
-      <div>
-        <div class="label">at top left</div>
-        <div class="rect at-top-left">at top left</div>
-      </div>
-      <div>
-        <div class="label">at bottom right</div>
-        <div class="rect at-bottom-right">at bottom right</div>
-      </div>
-      <div>
-        <div class="label">at 25% 75%</div>
-        <div class="rect at-center">at 25% 75%</div>
-      </div>
-      <div>
-        <div class="label">at 30px 30px</div>
-        <div class="rect at-px">at 30px</div>
-      </div>
-      <div>
-        <div class="label">closest-side</div>
-        <div class="rect closest-side">closest-side</div>
-      </div>
-      <div>
-        <div class="label">farthest-corner</div>
-        <div class="rect farthest-corner">farthest-corner</div>
-      </div>
-      <div>
-        <div class="label">closest-corner @ 25% 25%</div>
-        <div class="rect closest-corner">closest-corner</div>
-      </div>
-      <div>
-        <div class="label">circle 40px</div>
-        <div class="rect explicit-radius">circle 40px</div>
-      </div>
-      <div>
-        <div class="label">ellipse 80px 30px</div>
-        <div class="rect ellipse-radii">ellipse 80×30</div>
-      </div>
-      <div>
-        <div class="label">stacked on solid bg</div>
-        <div class="rect stacked">stacked</div>
-      </div>
+      <div class="rect circle"></div>
+      <div class="rect ellipse"></div>
+      <div class="rect closest-side"></div>
+      <div class="rect farthest-side"></div>
+      <div class="rect closest-corner"></div>
+      <div class="rect farthest-corner"></div>
+      <div class="rect ellipse-closest-side"></div>
+      <div class="rect ellipse-farthest-corner"></div>
+      <div class="rect explicit-circle"></div>
+      <div class="rect explicit-ellipse"></div>
+      <div class="rect at-top-left"></div>
+      <div class="rect at-bottom-right"></div>
+      <div class="rect at-percent"></div>
+      <div class="rect at-px"></div>
+      <div class="rect multi-stop"></div>
     </div>
   </body>
 </html>
diff --git a/fixtures/test-html/L0/paint-individual-transform-props.html b/fixtures/test-html/L0/paint-individual-transform-props.html
new file mode 100644
index 000000000..b239d4aca
--- /dev/null
+++ b/fixtures/test-html/L0/paint-individual-transform-props.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Individual Transform Properties</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 64px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 48px;
+      }
+
+      .frame {
+        width: 120px;
+        height: 120px;
+        background: #eee;
+        box-sizing: border-box;
+      }
+
+      .box {
+        width: 120px;
+        height: 120px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .t-prop {
+        translate: 16px 24px;
+      }
+      .s-prop {
+        scale: 0.5;
+      }
+      .all {
+        translate: 20px 10px;
+        scale: 0.5;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="frame"><div class="box t-prop"></div></div>
+      <div class="frame"><div class="box s-prop"></div></div>
+      <div class="frame"><div class="box all"></div></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-margin-auto-center.html b/fixtures/test-html/L0/paint-margin-auto-center.html
new file mode 100644
index 000000000..ca2e574a5
--- /dev/null
+++ b/fixtures/test-html/L0/paint-margin-auto-center.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Margin Auto Centering</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .wrap {
+        width: 400px;
+        background: #eee;
+        padding: 12px 0;
+        margin-bottom: 16px;
+        box-sizing: border-box;
+      }
+
+      .box {
+        width: 160px;
+        height: 40px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .center {
+        margin: 0 auto;
+      }
+      .push-right {
+        margin-left: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="wrap">
+      <div class="box center"></div>
+    </div>
+    <div class="wrap">
+      <div class="box push-right"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-margin-simple.html b/fixtures/test-html/L0/paint-margin-simple.html
new file mode 100644
index 000000000..79f8c6b65
--- /dev/null
+++ b/fixtures/test-html/L0/paint-margin-simple.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Margin (simple)</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .frame {
+        width: 300px;
+        background: #eee;
+        box-sizing: border-box;
+      }
+
+      .box {
+        width: 120px;
+        height: 40px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .m-0 {
+        margin: 0;
+      }
+      .m-tb-8 {
+        margin: 8px 0;
+      }
+      .m-tb-20 {
+        margin: 20px 0;
+      }
+      .m-l-40 {
+        margin-left: 40px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="frame">
+      <div class="box m-0"></div>
+      <div class="box m-tb-8"></div>
+      <div class="box m-tb-20"></div>
+      <div class="box m-l-40"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-max-min-size.html b/fixtures/test-html/L0/paint-max-min-size.html
new file mode 100644
index 000000000..3601a3838
--- /dev/null
+++ b/fixtures/test-html/L0/paint-max-min-size.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: max-/min-width/height</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 24px;
+      }
+
+      .wrap {
+        width: 200px;
+        background: #eee;
+        box-sizing: border-box;
+        padding: 8px;
+      }
+
+      .box {
+        background: #000;
+        height: 40px;
+        box-sizing: border-box;
+      }
+
+      .max-w {
+        width: 300px;
+        max-width: 120px;
+      }
+      .min-w {
+        width: 40px;
+        min-width: 160px;
+      }
+      .max-h {
+        height: 100px;
+        max-height: 40px;
+        width: 100%;
+      }
+      .min-h {
+        height: 20px;
+        min-height: 60px;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="wrap">
+        <div class="box max-w"></div>
+      </div>
+      <div class="wrap">
+        <div class="box min-w"></div>
+      </div>
+      <div class="wrap">
+        <div class="box max-h"></div>
+      </div>
+      <div class="wrap">
+        <div class="box min-h"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-mix-blend-mode.html b/fixtures/test-html/L0/paint-mix-blend-mode.html
new file mode 100644
index 000000000..9b7dc5bc8
--- /dev/null
+++ b/fixtures/test-html/L0/paint-mix-blend-mode.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Mix Blend Mode</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .row {
+        display: flex;
+        flex-direction: row;
+        gap: 24px;
+      }
+
+      .pair {
+        position: relative;
+        width: 120px;
+        height: 120px;
+      }
+
+      .base {
+        width: 120px;
+        height: 120px;
+        background: #f00;
+      }
+
+      .over {
+        position: absolute;
+        top: 30px;
+        left: 30px;
+        width: 60px;
+        height: 60px;
+        background: #00f;
+      }
+
+      .multiply {
+        mix-blend-mode: multiply;
+      }
+      .screen {
+        mix-blend-mode: screen;
+      }
+      .difference {
+        mix-blend-mode: difference;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="row">
+      <div class="pair">
+        <div class="base"></div>
+        <div class="over multiply"></div>
+      </div>
+      <div class="pair">
+        <div class="base"></div>
+        <div class="over screen"></div>
+      </div>
+      <div class="pair">
+        <div class="base"></div>
+        <div class="over difference"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-opacity-levels.html b/fixtures/test-html/L0/paint-opacity-levels.html
new file mode 100644
index 000000000..83c50cb71
--- /dev/null
+++ b/fixtures/test-html/L0/paint-opacity-levels.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Opacity Levels</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .label {
+        font-size: 11px;
+        color: #666;
+        padding-bottom: 4px;
+        width: 120px;
+        height: 16px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 20px;
+      }
+
+      .swatch {
+        width: 120px;
+        height: 100px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .o-100 {
+        opacity: 1;
+      }
+      .o-75 {
+        opacity: 0.75;
+      }
+      .o-50 {
+        opacity: 0.5;
+      }
+      .o-25 {
+        opacity: 0.25;
+      }
+      .o-10 {
+        opacity: 0.1;
+      }
+      .o-0 {
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div>
+        <div class="label">1.0</div>
+        <div class="swatch o-100"></div>
+      </div>
+      <div>
+        <div class="label">0.75</div>
+        <div class="swatch o-75"></div>
+      </div>
+      <div>
+        <div class="label">0.5</div>
+        <div class="swatch o-50"></div>
+      </div>
+      <div>
+        <div class="label">0.25</div>
+        <div class="swatch o-25"></div>
+      </div>
+      <div>
+        <div class="label">0.1</div>
+        <div class="swatch o-10"></div>
+      </div>
+      <div>
+        <div class="label">0</div>
+        <div class="swatch o-0"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-opacity-nested.html b/fixtures/test-html/L0/paint-opacity-nested.html
new file mode 100644
index 000000000..99c6cf33c
--- /dev/null
+++ b/fixtures/test-html/L0/paint-opacity-nested.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Opacity Nested</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .row {
+        display: flex;
+        flex-direction: row;
+        gap: 24px;
+        margin-bottom: 24px;
+      }
+
+      .outer {
+        width: 160px;
+        height: 120px;
+        background: #000;
+        box-sizing: border-box;
+        padding: 20px;
+      }
+
+      .inner {
+        width: 100%;
+        height: 100%;
+        background: #000;
+      }
+
+      .outer-50 {
+        opacity: 0.5;
+      }
+      .outer-50 .inner {
+        opacity: 0.5;
+      }
+
+      .outer-25 {
+        opacity: 0.25;
+      }
+      .outer-25 .inner {
+        opacity: 1;
+      }
+
+      .outer-100 {
+        opacity: 1;
+      }
+      .outer-100 .inner {
+        opacity: 0.5;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="row">
+      <div class="outer outer-50"><div class="inner"></div></div>
+      <div class="outer outer-25"><div class="inner"></div></div>
+      <div class="outer outer-100"><div class="inner"></div></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-opacity.html b/fixtures/test-html/L0/paint-opacity.html
index e89d7f285..122c3283d 100644
--- a/fixtures/test-html/L0/paint-opacity.html
+++ b/fixtures/test-html/L0/paint-opacity.html
@@ -78,19 +78,19 @@
       <div class="grid">
         <div>
           <div class="label">1.0</div>
-          <div class="box o100">100%</div>
+          <div class="box o100"></div>
         </div>
         <div>
           <div class="label">0.75</div>
-          <div class="box o75">75%</div>
+          <div class="box o75"></div>
         </div>
         <div>
           <div class="label">0.5</div>
-          <div class="box o50">50%</div>
+          <div class="box o50"></div>
         </div>
         <div>
           <div class="label">0.25</div>
-          <div class="box o25">25%</div>
+          <div class="box o25"></div>
         </div>
       </div>
     </div>
diff --git a/fixtures/test-html/L0/paint-outline-double-rect.html b/fixtures/test-html/L0/paint-outline-double-rect.html
new file mode 100644
index 000000000..06ec5d0ad
--- /dev/null
+++ b/fixtures/test-html/L0/paint-outline-double-rect.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Outline Double (rectangular)</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .label {
+        font-size: 11px;
+        color: #666;
+        padding-bottom: 4px;
+        width: 140px;
+        height: 16px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 32px;
+      }
+
+      .box {
+        width: 120px;
+        height: 80px;
+        background: #eee;
+        box-sizing: border-box;
+      }
+
+      .o-9 {
+        outline: 9px double #000;
+      }
+      .o-9-offset {
+        outline: 9px double #000;
+        outline-offset: 6px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div>
+        <div class="label">9px double</div>
+        <div class="box o-9"></div>
+      </div>
+      <div>
+        <div class="label">9px double + offset 6</div>
+        <div class="box o-9-offset"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-outline-offset.html b/fixtures/test-html/L0/paint-outline-offset.html
new file mode 100644
index 000000000..0f448ded9
--- /dev/null
+++ b/fixtures/test-html/L0/paint-outline-offset.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Outline Offset</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 40px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .row {
+        display: flex;
+        gap: 40px;
+      }
+
+      .box {
+        width: 80px;
+        height: 80px;
+        background: #000;
+        box-sizing: border-box;
+        outline: 4px solid #f00;
+      }
+
+      .offset-0 {
+        outline-offset: 0;
+      }
+      .offset-8 {
+        outline-offset: 8px;
+      }
+      .offset-16 {
+        outline-offset: 16px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="row">
+      <div class="box offset-0"></div>
+      <div class="box offset-8"></div>
+      <div class="box offset-16"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-outline-radius.html b/fixtures/test-html/L0/paint-outline-radius.html
new file mode 100644
index 000000000..d39f32d2c
--- /dev/null
+++ b/fixtures/test-html/L0/paint-outline-radius.html
@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Outline + border-radius</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 24px;
+      }
+
+      .rect {
+        width: 120px;
+        height: 120px;
+        background: #ddd;
+        box-sizing: border-box;
+      }
+
+      /* solid outline, rounded corners — CSS UI §5.2 + CSS Backgrounds §5.3.
+         Outer corners adopt border-radius + (offset + width); inner corners are
+         the element's border-radius. */
+      .solid-r16 {
+        border-radius: 16px;
+        outline: 4px solid #000;
+      }
+      .solid-r32 {
+        border-radius: 32px;
+        outline: 6px solid #000;
+      }
+
+      /* outline-offset > 0: outer radii = radius + offset + width */
+      .solid-offset {
+        border-radius: 12px;
+        outline: 3px solid #000;
+        outline-offset: 8px;
+      }
+
+      /* thick outline with small radius: outer corners become nearly square */
+      .thick-small-r {
+        border-radius: 6px;
+        outline: 20px solid #000;
+      }
+
+      /* thin outline with large radius */
+      .thin-large-r {
+        border-radius: 40px;
+        outline: 2px solid #000;
+      }
+
+      /* asymmetric per-corner radii — CSS Backgrounds §5.1 */
+      .asym-radii {
+        border-top-left-radius: 30px;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 30px;
+        border-bottom-left-radius: 0;
+        outline: 4px solid #000;
+      }
+
+      /* elliptical corner radii (rx ry syntax) */
+      .ellipse-radii {
+        border-radius: 40px 20px;
+        outline: 3px solid #000;
+      }
+
+      /* double outline + radius */
+      .double-r {
+        border-radius: 16px;
+        outline: 9px double #000;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="rect solid-r16"></div>
+      <div class="rect solid-r32"></div>
+      <div class="rect solid-offset"></div>
+      <div class="rect thick-small-r"></div>
+      <div class="rect thin-large-r"></div>
+      <div class="rect asym-radii"></div>
+      <div class="rect ellipse-radii"></div>
+      <div class="rect double-r"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-outline-solid.html b/fixtures/test-html/L0/paint-outline-solid.html
new file mode 100644
index 000000000..935cf8a92
--- /dev/null
+++ b/fixtures/test-html/L0/paint-outline-solid.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Solid Outline</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .label {
+        font-size: 11px;
+        color: #666;
+        padding-bottom: 4px;
+        width: 140px;
+        height: 16px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 32px;
+      }
+
+      .box {
+        width: 120px;
+        height: 80px;
+        background: #eee;
+        box-sizing: border-box;
+      }
+
+      .w-1 {
+        outline: 1px solid #000;
+      }
+      .w-3 {
+        outline: 3px solid #000;
+      }
+      .w-6 {
+        outline: 6px solid #000;
+      }
+      .colored {
+        outline: 3px solid #c00;
+      }
+      .offset-pos {
+        outline: 3px solid #000;
+        outline-offset: 8px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div>
+        <div class="label">1px solid</div>
+        <div class="box w-1"></div>
+      </div>
+      <div>
+        <div class="label">3px solid</div>
+        <div class="box w-3"></div>
+      </div>
+      <div>
+        <div class="label">6px solid</div>
+        <div class="box w-6"></div>
+      </div>
+      <div>
+        <div class="label">3px solid #c00</div>
+        <div class="box colored"></div>
+      </div>
+      <div>
+        <div class="label">offset +8</div>
+        <div class="box offset-pos"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-overflow-hidden.html b/fixtures/test-html/L0/paint-overflow-hidden.html
new file mode 100644
index 000000000..76c5b513a
--- /dev/null
+++ b/fixtures/test-html/L0/paint-overflow-hidden.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Overflow Hidden</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 32px;
+      }
+
+      .container {
+        width: 160px;
+        height: 120px;
+        background: #eee;
+        box-sizing: border-box;
+        position: relative;
+      }
+
+      .clipped {
+        overflow: hidden;
+      }
+
+      .visible {
+        overflow: visible;
+      }
+
+      .child {
+        position: absolute;
+        top: 40px;
+        left: 40px;
+        width: 200px;
+        height: 160px;
+        background: #000;
+        box-sizing: border-box;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="container clipped">
+        <div class="child"></div>
+      </div>
+      <div class="container visible">
+        <div class="child"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-padding-simple.html b/fixtures/test-html/L0/paint-padding-simple.html
new file mode 100644
index 000000000..6f0d76818
--- /dev/null
+++ b/fixtures/test-html/L0/paint-padding-simple.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Padding (simple)</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 24px;
+      }
+
+      .outer {
+        width: 160px;
+        background: #eee;
+        box-sizing: border-box;
+      }
+
+      .inner {
+        width: 100%;
+        height: 40px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .p-0 {
+        padding: 0;
+      }
+      .p-8 {
+        padding: 8px;
+      }
+      .p-asym {
+        padding: 4px 12px 20px 24px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="outer p-0">
+        <div class="inner"></div>
+      </div>
+      <div class="outer p-8">
+        <div class="inner"></div>
+      </div>
+      <div class="outer p-asym">
+        <div class="inner"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-position-absolute-simple.html b/fixtures/test-html/L0/paint-position-absolute-simple.html
new file mode 100644
index 000000000..4ca686db2
--- /dev/null
+++ b/fixtures/test-html/L0/paint-position-absolute-simple.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Position Absolute (simple)</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .container {
+        position: relative;
+        width: 400px;
+        height: 300px;
+        background: #eee;
+        margin-bottom: 24px;
+      }
+
+      .dot {
+        position: absolute;
+        width: 40px;
+        height: 40px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .tl {
+        top: 0;
+        left: 0;
+      }
+      .tr {
+        top: 0;
+        right: 0;
+      }
+      .bl {
+        bottom: 0;
+        left: 0;
+      }
+      .br {
+        bottom: 0;
+        right: 0;
+      }
+      .center {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: #c00;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="dot tl"></div>
+      <div class="dot tr"></div>
+      <div class="dot bl"></div>
+      <div class="dot br"></div>
+      <div class="dot center"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-position-relative.html b/fixtures/test-html/L0/paint-position-relative.html
new file mode 100644
index 000000000..cf0883d0b
--- /dev/null
+++ b/fixtures/test-html/L0/paint-position-relative.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Position Relative</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .row {
+        display: flex;
+        flex-direction: row;
+        gap: 32px;
+        margin-bottom: 32px;
+      }
+
+      .box {
+        width: 80px;
+        height: 60px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .marker {
+        background: #eee;
+      }
+
+      .shift-tl {
+        position: relative;
+        top: -12px;
+        left: -12px;
+      }
+      .shift-br {
+        position: relative;
+        top: 16px;
+        left: 24px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="row">
+      <div class="box marker"></div>
+      <div class="box shift-tl"></div>
+      <div class="box marker"></div>
+      <div class="box shift-br"></div>
+      <div class="box marker"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-transform-combined.html b/fixtures/test-html/L0/paint-transform-combined.html
new file mode 100644
index 000000000..9ce2b70bd
--- /dev/null
+++ b/fixtures/test-html/L0/paint-transform-combined.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Transform (combined functions)</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 64px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 72px;
+      }
+
+      .frame {
+        width: 120px;
+        height: 120px;
+        background: #eee;
+        box-sizing: border-box;
+      }
+
+      .box {
+        width: 120px;
+        height: 120px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .t-then-s {
+        transform: translate(16px, 24px) scale(0.5);
+      }
+      .s-then-t {
+        transform: scale(0.5) translate(16px, 24px);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="frame"><div class="box t-then-s"></div></div>
+      <div class="frame"><div class="box s-then-t"></div></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-transform-matrix.html b/fixtures/test-html/L0/paint-transform-matrix.html
new file mode 100644
index 000000000..bbeccadd7
--- /dev/null
+++ b/fixtures/test-html/L0/paint-transform-matrix.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: transform matrix()</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 40px;
+        background: #fff;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 64px;
+      }
+
+      .box {
+        width: 80px;
+        height: 80px;
+        background: #000;
+      }
+
+      /* CSS Transforms 1 §7.1: matrix(a, b, c, d, tx, ty).
+         The 6 values define a 2D affine:
+         | a c tx |
+         | b d ty |
+         | 0 0  1 |
+
+         Each variant expresses an equivalent of a named function
+         via the matrix primitive. */
+
+      /* identity */
+      .identity {
+        transform: matrix(1, 0, 0, 1, 0, 0);
+      }
+
+      /* pure translate — equivalent to translate(30px, 20px) */
+      .translate-eq {
+        transform: matrix(1, 0, 0, 1, 30, 20);
+      }
+
+      /* uniform scale 0.75 — equivalent to scale(0.75) */
+      .scale-eq {
+        transform: matrix(0.75, 0, 0, 0.75, 0, 0);
+      }
+
+      /* rotation 30deg — cos/−sin/sin/cos, 0, 0 */
+      .rotate-eq {
+        transform: matrix(
+          0.8660254037844387,
+          0.5,
+          -0.5,
+          0.8660254037844387,
+          0,
+          0
+        );
+      }
+
+      /* scale + translate composed */
+      .scale-translate {
+        transform: matrix(0.8, 0, 0, 0.8, 16, 16);
+      }
+
+      /* shear (skewX-style): a=1, b=0, c=tan(15°)≈0.2679, d=1 */
+      .shear-eq {
+        transform: matrix(1, 0, 0.2679491924, 1, 0, 0);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="box identity"></div>
+      <div class="box translate-eq"></div>
+      <div class="box scale-eq"></div>
+      <div class="box rotate-eq"></div>
+      <div class="box scale-translate"></div>
+      <div class="box shear-eq"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-transform-origin.html b/fixtures/test-html/L0/paint-transform-origin.html
new file mode 100644
index 000000000..7028a94ca
--- /dev/null
+++ b/fixtures/test-html/L0/paint-transform-origin.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Transform Origin</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 64px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 48px;
+      }
+
+      .frame {
+        width: 120px;
+        height: 120px;
+        background: #eee;
+        box-sizing: border-box;
+      }
+
+      .box {
+        width: 120px;
+        height: 120px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .tl-origin {
+        transform: scale(0.5);
+        transform-origin: 0 0;
+      }
+      .center {
+        transform: scale(0.5);
+        transform-origin: 50% 50%;
+      }
+      .br-origin {
+        transform: scale(0.5);
+        transform-origin: 100% 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="frame"><div class="box tl-origin"></div></div>
+      <div class="frame"><div class="box center"></div></div>
+      <div class="frame"><div class="box br-origin"></div></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-transform-rotate.html b/fixtures/test-html/L0/paint-transform-rotate.html
new file mode 100644
index 000000000..74853d394
--- /dev/null
+++ b/fixtures/test-html/L0/paint-transform-rotate.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Transform Rotate</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 64px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .label {
+        font-size: 11px;
+        color: #666;
+        padding-bottom: 4px;
+        width: 160px;
+        height: 16px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 72px;
+      }
+
+      .frame {
+        width: 120px;
+        height: 120px;
+        box-sizing: border-box;
+      }
+
+      .box {
+        width: 120px;
+        height: 120px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .r-90 {
+        transform: rotate(90deg);
+      }
+      .r-180 {
+        transform: rotate(180deg);
+      }
+      .r-270 {
+        transform: rotate(-90deg);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div>
+        <div class="label">rotate 90deg</div>
+        <div class="frame"><div class="box r-90"></div></div>
+      </div>
+      <div>
+        <div class="label">rotate 180deg</div>
+        <div class="frame"><div class="box r-180"></div></div>
+      </div>
+      <div>
+        <div class="label">rotate -90deg</div>
+        <div class="frame"><div class="box r-270"></div></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-transform-scale.html b/fixtures/test-html/L0/paint-transform-scale.html
new file mode 100644
index 000000000..b85b5fa1a
--- /dev/null
+++ b/fixtures/test-html/L0/paint-transform-scale.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Transform Scale</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .label {
+        font-size: 11px;
+        color: #666;
+        padding-bottom: 4px;
+        width: 140px;
+        height: 16px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 48px;
+      }
+
+      .frame {
+        width: 140px;
+        height: 100px;
+        background: #eee;
+        box-sizing: border-box;
+      }
+
+      .box {
+        width: 140px;
+        height: 100px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .s-half {
+        transform: scale(0.5);
+      }
+      .s-xy {
+        transform: scale(0.75, 0.5);
+      }
+      .s-x {
+        transform: scaleX(0.5);
+      }
+      .s-y {
+        transform: scaleY(0.75);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div>
+        <div class="label">scale 0.5</div>
+        <div class="frame"><div class="box s-half"></div></div>
+      </div>
+      <div>
+        <div class="label">scale 0.75, 0.5</div>
+        <div class="frame"><div class="box s-xy"></div></div>
+      </div>
+      <div>
+        <div class="label">scaleX 0.5</div>
+        <div class="frame"><div class="box s-x"></div></div>
+      </div>
+      <div>
+        <div class="label">scaleY 0.75</div>
+        <div class="frame"><div class="box s-y"></div></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-transform-skew.html b/fixtures/test-html/L0/paint-transform-skew.html
new file mode 100644
index 000000000..8b9109b98
--- /dev/null
+++ b/fixtures/test-html/L0/paint-transform-skew.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Transform Skew</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 64px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .row {
+        display: flex;
+        gap: 48px;
+      }
+
+      .box {
+        width: 80px;
+        height: 80px;
+        background: #000;
+      }
+
+      .skew-x {
+        transform: skewX(20deg);
+      }
+      .skew-y {
+        transform: skewY(10deg);
+      }
+      .skew-xy {
+        transform: skew(15deg, 5deg);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="row">
+      <div class="box skew-x"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-transform-translate.html b/fixtures/test-html/L0/paint-transform-translate.html
new file mode 100644
index 000000000..3ed396603
--- /dev/null
+++ b/fixtures/test-html/L0/paint-transform-translate.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Transform Translate</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .label {
+        font-size: 11px;
+        color: #666;
+        padding-bottom: 4px;
+        width: 140px;
+        height: 16px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 40px;
+      }
+
+      .frame {
+        width: 120px;
+        height: 80px;
+        background: #eee;
+        box-sizing: border-box;
+      }
+
+      .box {
+        width: 120px;
+        height: 80px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .t-xy {
+        transform: translate(16px, 12px);
+      }
+      .t-x {
+        transform: translateX(20px);
+      }
+      .t-y {
+        transform: translateY(-8px);
+      }
+      .t-neg {
+        transform: translate(-12px, -16px);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div>
+        <div class="label">translate 16/12</div>
+        <div class="frame"><div class="box t-xy"></div></div>
+      </div>
+      <div>
+        <div class="label">translateX 20</div>
+        <div class="frame"><div class="box t-x"></div></div>
+      </div>
+      <div>
+        <div class="label">translateY -8</div>
+        <div class="frame"><div class="box t-y"></div></div>
+      </div>
+      <div>
+        <div class="label">translate -12/-16</div>
+        <div class="frame"><div class="box t-neg"></div></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-visibility.html b/fixtures/test-html/L0/paint-visibility.html
new file mode 100644
index 000000000..0579475b3
--- /dev/null
+++ b/fixtures/test-html/L0/paint-visibility.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Visibility</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .grid {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 24px;
+      }
+
+      .box {
+        width: 120px;
+        height: 100px;
+        background: #000;
+        box-sizing: border-box;
+      }
+
+      .v-visible {
+        visibility: visible;
+      }
+      .v-hidden {
+        visibility: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="box v-visible"></div>
+      <div class="box v-hidden"></div>
+      <div class="box v-visible"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/L0/paint-z-index-simple.html b/fixtures/test-html/L0/paint-z-index-simple.html
new file mode 100644
index 000000000..9645a449c
--- /dev/null
+++ b/fixtures/test-html/L0/paint-z-index-simple.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paint: Z-Index (simple stacking)</title>
+    <style>
+      html,
+      body {
+        min-height: 800px;
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        background: #fff;
+        color: #000;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+
+      .container {
+        position: relative;
+        width: 400px;
+        height: 300px;
+        background: #eee;
+      }
+
+      .layer {
+        position: absolute;
+        width: 180px;
+        height: 180px;
+        box-sizing: border-box;
+      }
+
+      .a {
+        top: 20px;
+        left: 20px;
+        background: #f00;
+        z-index: 3;
+      }
+      .b {
+        top: 60px;
+        left: 60px;
+        background: #0f0;
+        z-index: 2;
+      }
+      .c {
+        top: 100px;
+        left: 100px;
+        background: #00f;
+        z-index: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="layer c"></div>
+      <div class="layer b"></div>
+      <div class="layer a"></div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/test-html/README.md b/fixtures/test-html/README.md
index c99c1371f..f33610fe5 100644
--- a/fixtures/test-html/README.md
+++ b/fixtures/test-html/README.md
@@ -123,6 +123,27 @@ sides should now be at identical dimensions.
 layout changes its natural cull, invalidating `viewport.height` in
 the suite. Re-measure and update.
 
+## Captions and labels
+
+Short captions next to each specimen (`"0.75"`, `"padding: 24px"`,
+etc.) are welcome — they help humans reading the fixture identify what
+each region is testing. Two rules:
+
+- **Keep them short.** The caption is not the subject; if it grows
+  long enough to shape the layout it's in the way.
+- **Don't let captions drive layout.** When captions sit inside flex
+  items, grid cells, or stretched blocks, pin the enclosing element's
+  dimensions (`width`, `height`) so font-advance-width differences
+  between Chromium and cg can't leak into box geometry. Otherwise a
+  1px shaping difference in "padding: 24px (uniform)" propagates to
+  every following sibling.
+
+When text is incidental (labels, glyph placeholders, captions), inject
+`_reftest/hide-text.css` via the suite's `extra_css` — it neutralizes
+color, text-shadow, and line-height while preserving advance widths
+and block flow. The suite defaults already pull it in; see
+`.agents/skills/cg-reftest/SKILL.md` for details.
+
 ## Adding a new fixture
 
 1. **Name** — `<domain>-<property>[-<variant>].html`. The filename is
diff --git a/fixtures/test-html/_reftest/transparent-body.css b/fixtures/test-html/_reftest/transparent-body.css
new file mode 100644
index 000000000..d25929b70
--- /dev/null
+++ b/fixtures/test-html/_reftest/transparent-body.css
@@ -0,0 +1,14 @@
+/*
+ * Reftest scoring helper — force html/body to paint no background so that
+ * PNG alpha encodes "this pixel was drawn by the CSS cascade," not "the
+ * viewport happens to be white." The reftest harness uses alpha>0 as the
+ * content mask for its scoring denominator.
+ *
+ * Fixtures that legitimately test background or canvas-blend-mode behavior
+ * should opt out via a per-fixture override (future: `canvas_bg: "#fff"`).
+ */
+html,
+body {
+  background: transparent !important;
+  background-color: transparent !important;
+}
diff --git a/fixtures/test-html/suites/L0.coverage.json b/fixtures/test-html/suites/L0.coverage.json
index 688fbce4c..d9df49095 100644
--- a/fixtures/test-html/suites/L0.coverage.json
+++ b/fixtures/test-html/suites/L0.coverage.json
@@ -4,7 +4,10 @@
   "defaults": {
     "viewport": { "width": 600, "height": 800 },
     "wait_for": ["fonts", "networkidle"],
-    "extra_css": ["../_reftest/hide-text.css"],
+    "extra_css": [
+      "../_reftest/hide-text.css",
+      "../_reftest/transparent-body.css"
+    ],
     "full_page": true
   },
   "fixtures": [
@@ -14,10 +17,73 @@
     },
     {
       "path": "../L0/box-padding.html",
-      "viewport": { "width": 600, "height": 222 }
+      "viewport": { "width": 600, "height": 256 }
     },
     { "path": "../L0/paint-background-solid.html" },
     { "path": "../L0/paint-opacity.html" },
-    { "path": "../L0/paint-border-radius.html" }
+    { "path": "../L0/paint-border-radius.html" },
+    { "path": "../L0/paint-border-solid.html" },
+    { "path": "../L0/paint-outline-solid.html" },
+    { "path": "../L0/paint-box-shadow-solid.html" },
+    { "path": "../L0/paint-background-gradient-linear-simple.html" },
+    { "path": "../L0/paint-clip-path-inset.html" },
+    { "path": "../L0/paint-box-shadow-inset-solid.html" },
+    { "path": "../L0/paint-transform-translate.html" },
+    { "path": "../L0/paint-transform-scale.html" },
+    { "path": "../L0/paint-transform-rotate.html" },
+    { "path": "../L0/paint-opacity-levels.html" },
+    { "path": "../L0/paint-position-absolute-simple.html" },
+    { "path": "../L0/paint-z-index-simple.html" },
+    { "path": "../L0/paint-overflow-hidden.html" },
+    { "path": "../L0/paint-visibility.html" },
+    { "path": "../L0/paint-display-none.html" },
+    { "path": "../L0/layout-flex-row-basic.html" },
+    { "path": "../L0/layout-flex-column-basic.html" },
+    { "path": "../L0/paint-background-clip-boxes.html" },
+    { "path": "../L0/paint-border-translucent.html" },
+    { "path": "../L0/paint-margin-simple.html" },
+    { "path": "../L0/paint-padding-simple.html" },
+    { "path": "../L0/paint-border-double-rect.html" },
+    { "path": "../L0/paint-aspect-ratio.html" },
+    { "path": "../L0/paint-max-min-size.html" },
+    { "path": "../L0/paint-position-relative.html" },
+    { "path": "../L0/layout-flex-align-items.html" },
+    { "path": "../L0/paint-margin-auto-center.html" },
+    { "path": "../L0/layout-flex-grow.html" },
+    { "path": "../L0/paint-color-hex-alpha.html" },
+    { "path": "../L0/layout-flex-wrap.html" },
+    { "path": "../L0/layout-grid-basic.html" },
+    { "path": "../L0/layout-grid-fr.html" },
+    { "path": "../L0/layout-grid-span.html" },
+    { "path": "../L0/layout-block-flow.html" },
+    { "path": "../L0/paint-outline-double-rect.html" },
+    { "path": "../L0/paint-border-radius-individual.html" },
+    { "path": "../L0/paint-filter-simple.html" },
+    { "path": "../L0/paint-mix-blend-mode.html" },
+    { "path": "../L0/paint-filter-chain.html" },
+    { "path": "../L0/layout-grid-gap-asym.html" },
+    { "path": "../L0/paint-transform-combined.html" },
+    { "path": "../L0/paint-transform-origin.html" },
+    { "path": "../L0/paint-individual-transform-props.html" },
+    { "path": "../L0/paint-clip-path-circle.html" },
+    { "path": "../L0/paint-clip-path-polygon.html" },
+    { "path": "../L0/paint-clip-path-ellipse.html" },
+    { "path": "../L0/paint-opacity-nested.html" },
+    { "path": "../L0/layout-flex-direction-reverse.html" },
+    { "path": "../L0/paint-box-shadow-multiple.html" },
+    { "path": "../L0/paint-outline-offset.html" },
+    { "path": "../L0/layout-flex-align-self.html" },
+    { "path": "../L0/layout-grid-autoflow.html" },
+    { "path": "../L0/layout-flex-basis.html" },
+    { "path": "../L0/paint-transform-skew.html" },
+    { "path": "../L0/paint-gradient-radial.html" },
+    { "path": "../L0/paint-outline-radius.html" },
+    { "path": "../L0/paint-box-shadow-blur.html" },
+    { "path": "../L0/paint-box-shadow-inset-blur.html" },
+    { "path": "../L0/paint-border-style-dashed.html" },
+    { "path": "../L0/paint-border-style-dotted.html" },
+    { "path": "../L0/paint-filter-drop-shadow.html" },
+    { "path": "../L0/paint-transform-matrix.html" },
+    { "path": "../L0/paint-filter-blur.html" }
   ]
 }
diff --git a/fixtures/test-html/suites/L0.exact.json b/fixtures/test-html/suites/L0.exact.json
index eed77d830..2e21f5434 100644
--- a/fixtures/test-html/suites/L0.exact.json
+++ b/fixtures/test-html/suites/L0.exact.json
@@ -3,19 +3,88 @@
   "description": "Byte-exact L0 fixtures. Every fixture here MUST stay at 100.00% similarity against the Chromium oracle. Any drop = real regression.",
   "gate": {
     "threshold": 0,
-    "aa": false,
+    "aa": true,
     "floor": 1.0
   },
   "defaults": {
     "viewport": { "width": 600, "height": 800 },
     "wait_for": ["fonts", "networkidle"],
-    "extra_css": ["../_reftest/hide-text.css"],
+    "extra_css": [
+      "../_reftest/hide-text.css",
+      "../_reftest/transparent-body.css"
+    ],
     "full_page": true
   },
   "fixtures": [
     {
       "path": "../L0/box-dimensions.html",
       "viewport": { "width": 600, "height": 522 }
-    }
+    },
+    {
+      "path": "../L0/box-padding.html",
+      "viewport": { "width": 600, "height": 256 }
+    },
+    { "path": "../L0/paint-opacity.html" },
+    { "path": "../L0/paint-background-solid.html" },
+    { "path": "../L0/paint-border-radius.html" },
+    { "path": "../L0/paint-border-solid.html" },
+    { "path": "../L0/paint-outline-solid.html" },
+    { "path": "../L0/paint-box-shadow-solid.html" },
+    { "path": "../L0/paint-clip-path-inset.html" },
+    { "path": "../L0/paint-box-shadow-inset-solid.html" },
+    { "path": "../L0/paint-transform-translate.html" },
+    { "path": "../L0/paint-transform-scale.html" },
+    { "path": "../L0/paint-opacity-levels.html" },
+    { "path": "../L0/paint-position-absolute-simple.html" },
+    { "path": "../L0/paint-z-index-simple.html" },
+    { "path": "../L0/paint-overflow-hidden.html" },
+    { "path": "../L0/paint-visibility.html" },
+    { "path": "../L0/paint-display-none.html" },
+    { "path": "../L0/layout-flex-row-basic.html" },
+    { "path": "../L0/layout-flex-column-basic.html" },
+    { "path": "../L0/paint-background-clip-boxes.html" },
+    { "path": "../L0/paint-border-translucent.html" },
+    { "path": "../L0/paint-margin-simple.html" },
+    { "path": "../L0/paint-padding-simple.html" },
+    { "path": "../L0/paint-border-double-rect.html" },
+    { "path": "../L0/paint-aspect-ratio.html" },
+    { "path": "../L0/paint-max-min-size.html" },
+    { "path": "../L0/paint-position-relative.html" },
+    { "path": "../L0/layout-flex-align-items.html" },
+    { "path": "../L0/paint-margin-auto-center.html" },
+    { "path": "../L0/layout-flex-grow.html" },
+    { "path": "../L0/paint-color-hex-alpha.html" },
+    { "path": "../L0/layout-flex-wrap.html" },
+    { "path": "../L0/layout-grid-basic.html" },
+    { "path": "../L0/layout-grid-fr.html" },
+    { "path": "../L0/layout-grid-span.html" },
+    { "path": "../L0/layout-block-flow.html" },
+    { "path": "../L0/paint-outline-double-rect.html" },
+    { "path": "../L0/paint-border-radius-individual.html" },
+    { "path": "../L0/paint-filter-simple.html" },
+    { "path": "../L0/paint-mix-blend-mode.html" },
+    { "path": "../L0/paint-filter-chain.html" },
+    { "path": "../L0/layout-grid-gap-asym.html" },
+    { "path": "../L0/paint-transform-combined.html" },
+    { "path": "../L0/paint-transform-origin.html" },
+    { "path": "../L0/paint-individual-transform-props.html" },
+    { "path": "../L0/paint-clip-path-circle.html" },
+    { "path": "../L0/paint-clip-path-polygon.html" },
+    { "path": "../L0/paint-clip-path-ellipse.html" },
+    { "path": "../L0/paint-opacity-nested.html" },
+    { "path": "../L0/layout-flex-direction-reverse.html" },
+    { "path": "../L0/paint-box-shadow-multiple.html" },
+    { "path": "../L0/paint-outline-offset.html" },
+    { "path": "../L0/layout-flex-align-self.html" },
+    { "path": "../L0/layout-grid-autoflow.html" },
+    { "path": "../L0/layout-flex-basis.html" },
+    { "path": "../L0/paint-transform-skew.html" },
+    { "path": "../L0/paint-outline-radius.html" },
+    { "path": "../L0/paint-box-shadow-blur.html" },
+    { "path": "../L0/paint-box-shadow-inset-blur.html" },
+    { "path": "../L0/paint-border-style-dashed.html" },
+    { "path": "../L0/paint-filter-drop-shadow.html" },
+    { "path": "../L0/paint-transform-matrix.html" },
+    { "path": "../L0/paint-filter-blur.html" }
   ]
 }
diff --git a/packages/grida-reftest/src/cli.ts b/packages/grida-reftest/src/cli.ts
index 1d72cf0de..2cd17a5a6 100644
--- a/packages/grida-reftest/src/cli.ts
+++ b/packages/grida-reftest/src/cli.ts
@@ -28,8 +28,12 @@ program
   )
   .option(
     "--aa",
-    "ignore anti-aliased edges (pixelmatch includeAA=false)",
-    false
+    "ignore anti-aliased edges (pixelmatch includeAA=false) — default",
+    true
+  )
+  .option(
+    "--no-aa",
+    "strict: count anti-aliased pixels as diffs (pixelmatch includeAA=true)"
   )
   .option(
     "--bg <color>",
@@ -108,7 +112,8 @@ program
   .addOption(
     new Option("--threshold <number>", "pixelmatch YIQ threshold per pixel")
   )
-  .option("--aa", "ignore anti-aliased edges")
+  .option("--aa", "ignore anti-aliased edges (default)")
+  .option("--no-aa", "strict: count AA pixels as diffs")
   .option("--bg <color>", "composite background: white|black")
   .option("--mask <mode>", "scoring denominator: alpha|none")
   .option("--overwrite", "clear output dir on start")
@@ -180,7 +185,7 @@ program
         ? parseNumber(opts.threshold, "--threshold", 0, 1)
         : (config?.diff?.threshold ?? 0.1);
     const aa =
-      opts.aa !== undefined ? Boolean(opts.aa) : (config?.diff?.aa ?? false);
+      opts.aa !== undefined ? Boolean(opts.aa) : (config?.diff?.aa ?? true);
     const bg = opts.bg ? parseBg(opts.bg) : (config?.bg ?? "white");
     const mask = opts.mask
       ? parseMask(opts.mask)
diff --git a/packages/grida-reftest/src/compare.ts b/packages/grida-reftest/src/compare.ts
index 32b6dcb47..3b60f3e8e 100644
--- a/packages/grida-reftest/src/compare.ts
+++ b/packages/grida-reftest/src/compare.ts
@@ -11,7 +11,9 @@ import type {
 } from "./types.js";
 
 const DEFAULT_THRESHOLD = 0.1;
-const DEFAULT_AA = false;
+// Default: ignore anti-aliased edges (pixelmatch `includeAA: false`). Cross-engine
+// AA coverage differences are not a real diff; set `aa: false` for strict mode.
+const DEFAULT_AA = true;
 const DEFAULT_BG: BgColor = "white";
 const DEFAULT_MASK: ScoringMask = "alpha";