domotion-svg 0.2.2 → 0.3.2

package/dist/render/element-tree-to-svg.js

@@ -4,14 +4,15 @@
  * Uses Playwright to inspect DOM elements and recreate them as native SVG.
  */
 import { renderSingleLineText, renderMultiSegmentText, renderMultiLineText, renderInputText } from "./text.js";
-import { getGlyphDefs } from "./text-to-path.js";
+import { getGlyphDefs, measureLastGlyphRsb } from "./text-to-path.js";
 import { renderFormControl } from "./form-controls.js";
 import { r, esc, stopFmt } from "./format.js";
 import { parseColor, colorStr, sameColor } from "./colors.js";
-import { parseCornerRadii, insetCornerRadii, roundedRectSvg, parseSide, dashArrayForStyle, renderBorderImage, injectSvgSize, } from "./borders.js";
+import { parseCornerRadii, insetCornerRadii, outsetCornerRadiiForShadow, roundedRectPath, roundedRectSvg, parseSide, dashArrayForStyle, renderBorderImage, injectSvgSize, } from "./borders.js";
 import { parseBoxShadow } from "./box-shadow.js";
 import { cssTransformToSvg } from "./transforms.js";
 import { parseCssUrl, splitTopLevelCommas } from "./css-tokens.js";
+import { convertLegacyWebkitGradient } from "./gradients.js";
 import { embedResizedDataUri, setActiveHiDPIFactor, } from "../capture/embed.js";
 // Public-API re-exports kept here for backward compatibility — older imports
 // from `./render/element-tree-to-svg.js` keep resolving. Internal consumers
@@ -40,7 +41,12 @@ export function wrapSvg(inner, width, height, opts) {
     // when `rootBgComputed` is missing (back-compat with pre-DM-552 trees) or
     // explicitly transparent (the page intends a transparent SVG output).
     const rootBgRect = opts?.tree != null ? transparentRootBgRect(opts.tree, width, height) : "";
-    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}"${schemeAttr}>${rootBgRect}${inner}</svg>`;
+    // Captured inline SVG subtrees may carry `xlink:href` (gradient stop
+    // inheritance, `<use>`, mask/pattern refs). Without xmlns:xlink declared,
+    // XML parsing fails with "Namespace prefix xlink for href is not defined"
+    // and Chrome refuses to render past the first occurrence.
+    const xlinkAttr = inner.includes("xlink:") ? ` xmlns:xlink="http://www.w3.org/1999/xlink"` : "";
+    return `<svg xmlns="http://www.w3.org/2000/svg"${xlinkAttr} viewBox="0 0 ${width} ${height}" width="${width}" height="${height}"${schemeAttr}>${rootBgRect}${inner}</svg>`;
 }
 /**
  * DM-552: returns ` color-scheme="dark"` (with leading space, suitable for
@@ -124,6 +130,22 @@ hiDPIFactor = 2) {
     // suppressed via this set so we don't double-emit them. Populated by
     // `gatherStackingContextChildren()` whenever we cross into an SC root.
     const hoistedFromAncestor = new Set();
+    // DM-673: maps a hoisted positioned descendant to the
+    // `overflow != visible` ancestor it escaped through. Per CSS Overflow 3
+    // §2.2 such ancestors clip their content. When we hoist the descendant
+    // past the ancestor's `<g clip-path>` wrapper, we need to re-wrap the
+    // descendant's emission in the same clip-path so the visual effect is
+    // preserved. `position:fixed` descendants escape overflow clips per the
+    // spec, so they aren't added here.
+    const overflowClipForHoisted = new Map();
+    // DM-673: maps an overflow-clip ancestor element to the clip-path id that
+    // its `renderElement` generated when emitting its own `<g clip-path>`
+    // wrapper. The hoisted-descendant emission re-uses the same id so the
+    // `<defs>` block isn't duplicated. The ancestor renders BEFORE its
+    // hoisted descendants in `topLevelFlat` order (sections paint at body's
+    // step 3 / base bucket; positioned descendants at step 6 / zeroOrAuto
+    // bucket), so the id is populated before lookup.
+    const overflowClipPathIds = new Map();
     // DM-493: top-level mask fragment defs collected at capture time. Map keyed
     // by the original DOM id; the renderer mints a per-element mask def whose
     // content is translated into the masked element's user-space coordinates,
@@ -156,6 +178,50 @@ hiDPIFactor = 2) {
     }
     let fragmentMaskCounter = 0;
     const fragmentMaskOutputId = new Map();
+    // DM-826: top-level clip-path fragment defs (`clip-path: url("#id")`).
+    // Unlike masks, clipPath fragments don't need per-element positioning when
+    // `clipPathUnits="objectBoundingBox"` (SVG auto-scales into the masked
+    // element's bbox natively) — so the resolver returns ONE output id per
+    // source fragment and every consumer references the same def. For
+    // `userSpaceOnUse` clipPaths we currently emit the def verbatim too;
+    // faithful support across captured (x, y) origins is deferred (see
+    // docs/39).
+    const fragmentClipPathDefs = new Map();
+    for (const root of elements) {
+        if (root.clipPathDefs == null)
+            continue;
+        for (const def of root.clipPathDefs) {
+            if (!fragmentClipPathDefs.has(def.id))
+                fragmentClipPathDefs.set(def.id, def);
+        }
+    }
+    let fragmentClipPathCounter = 0;
+    const fragmentClipPathOutputId = new Map();
+    function resolveFragmentClipPathRef(clipPathCss) {
+        // Strip the optional <geometry-box> keyword so `url(#id) padding-box`
+        // matches; the box keyword doesn't affect bbox-relative clipPaths and
+        // the deferred userSpaceOnUse path will fold it in separately.
+        const stripped = clipPathCss.replace(/\b(?:content-box|padding-box|border-box|margin-box|fill-box|stroke-box|view-box)\b/i, "").trim();
+        const m = /^url\(\s*(?:"|')?#([^"')\s]+)(?:"|')?\s*\)$/i.exec(stripped);
+        if (m == null)
+            return null;
+        const fragId = m[1];
+        const def = fragmentClipPathDefs.get(fragId);
+        if (def == null)
+            return null;
+        const cached = fragmentClipPathOutputId.get(fragId);
+        if (cached != null)
+            return cached;
+        const outId = `${idPrefix}cpfrag${fragmentClipPathCounter++}`;
+        fragmentClipPathOutputId.set(fragId, outId);
+        // Reuse the mask rewriter — it's element-name-agnostic at the
+        // implementation level (discovers ids, mints prefixed aliases, rewrites
+        // href / url() refs). The outer `<clipPath>` element's id becomes
+        // `outId`; descendants get the `${idPrefix}fragid-${original}` alias.
+        const rewritten = rewriteFragmentMaskDef(def.outerHTML, outId, idPrefix);
+        defsParts.push(rewritten);
+        return outId;
+    }
     function resolveFragmentMaskRef(maskImage, elX, elY, elW, elH) {
         const m = /^url\(\s*(?:"|')?#([^"')\s]+)(?:"|')?\s*\)$/i.exec(maskImage);
         if (m == null)
@@ -183,6 +249,216 @@ hiDPIFactor = 2) {
         defsParts.push(positioned);
         return outId;
     }
+    // DM-673: wraps `renderElement` with a `<g clip-path>` group when `el`
+    // was hoisted past an overflow-clip ancestor. The ancestor's clip-path
+    // id is stashed in `overflowClipPathIds` by the ancestor's own
+    // renderElement call (which runs first because sections paint at body's
+    // step 3 / base bucket, BEFORE positioned descendants at step 6 /
+    // zeroOrAuto bucket). `position:fixed` descendants are never added to
+    // the map (CSS Overflow 3 §2.2 — fixed elements escape ancestor
+    // overflow clipping), so they aren't wrapped here.
+    function renderElementWithOverflowClip(el, depth, parentDisplayForEl) {
+        const overflowClipAncestor = overflowClipForHoisted.get(el);
+        const clipId = overflowClipAncestor != null ? overflowClipPathIds.get(overflowClipAncestor) : undefined;
+        if (clipId == null) {
+            renderElement(el, depth, parentDisplayForEl);
+            return;
+        }
+        const indent = "  ".repeat(depth);
+        svgParts.push(`${indent}<g clip-path="url(#${clipId})">`);
+        renderElement(el, depth, parentDisplayForEl);
+        svgParts.push(`${indent}</g>`);
+    }
+    /**
+     * Per-fragment paint for inline elements that wrap onto multiple line
+     * boxes. Each entry in `el.inlineFragments` corresponds to one line-box
+     * fragment of the inline element. The painted shape per fragment depends
+     * on `box-decoration-break`:
+     *   - `slice` (default): the inline's box is "cut" at line-box boundaries.
+     *     The first fragment owns the LEFT side + TL/BL corners; the last owns
+     *     the RIGHT side + TR/BR corners; intermediate fragments paint only
+     *     top + bottom borders with no corner rounding.
+     *   - `clone`: every fragment paints a full box (all four sides, all four
+     *     corners). Outset box-shadow + background-image are also emitted
+     *     per-fragment.
+     * Matches Blink's `InlineBoxFragmentPainter::PaintBoxDecorationBackground`
+     * pattern: a per-fragment slice of the inline's logical box, with the
+     * non-edge sides suppressed in slice mode.
+     */
+    function renderInlineFragments(el, indent, bgColor, corners) {
+        const frags = el.inlineFragments;
+        const clone = (el.styles.boxDecorationBreak ?? "slice") === "clone";
+        const bgImage = el.styles.backgroundImage;
+        const hasBgImage = bgImage != null && bgImage !== "none" && bgImage !== "";
+        const shadows = parseBoxShadow(el.styles.boxShadow ?? "none");
+        // DM-754: fragment axis comes from capture-side `display` inspection —
+        // both inline-wrap and multi-column block-level fragmentation produce
+        // vertically-stacked frag rects, so we can't reliably tell them apart
+        // by geometry. `inline`: first owns LEFT + TL/BL, last owns RIGHT +
+        // TR/BR, middle paints top + bottom only. `block`: first owns TOP +
+        // TL/TR, last owns BOTTOM + BL/BR, middle paints left + right only.
+        const fragsAxisIsBlock = el.fragmentAxis === "block";
+        // Per-side captured borders. Uniformity tested for the simple stroke
+        // path; mixed-per-side borders on wrapped inlines are rare and fall
+        // back to the same per-side emit.
+        const sbt = parseSide(el.styles.borderTopWidth, el.styles.borderTopStyle, el.styles.borderTopColor);
+        const sbr = parseSide(el.styles.borderRightWidth, el.styles.borderRightStyle, el.styles.borderRightColor);
+        const sbb = parseSide(el.styles.borderBottomWidth, el.styles.borderBottomStyle, el.styles.borderBottomColor);
+        const sbl = parseSide(el.styles.borderLeftWidth, el.styles.borderLeftStyle, el.styles.borderLeftColor);
+        // Per-side border-image-source styling on wrapped inlines is rare enough
+        // that we skip it; the bbox path remains the only border-image-aware
+        // emitter and is gated off when `useInlineFragments` is set.
+        // Background-image layer setup — mirrors the bbox path but parameterised
+        // on per-fragment box. background-clip: text isn't supported on inline
+        // fragments here (uncommon and would require per-fragment glyph masks).
+        const bgImageLayers = hasBgImage ? splitTopLevelCommas(bgImage) : [];
+        const bgSizeLayers = splitTopLevelCommas(el.styles.backgroundSize ?? "auto");
+        const bgPosLayers = splitTopLevelCommas(el.styles.backgroundPosition ?? "0% 0%");
+        const bgRepeatLayers = splitTopLevelCommas(el.styles.backgroundRepeat ?? "repeat");
+        const bgClipLayers = splitTopLevelCommas(el.styles.backgroundClip ?? "border-box");
+        const bgOriginLayers = splitTopLevelCommas(el.styles.backgroundOrigin ?? "padding-box");
+        const bgAttachmentLayers = splitTopLevelCommas(el.styles.backgroundAttachment ?? "scroll");
+        const bgIntrinsicLayers = el.styles.backgroundIntrinsic ?? [];
+        for (let fi = 0; fi < frags.length; fi++) {
+            const f = frags[fi];
+            const isFirst = fi === 0;
+            const isLast = fi === frags.length - 1;
+            // In slice mode the corner radii belong only to the entry/exit edges
+            // — which edges, exactly, depends on the fragmentation axis:
+            //   • inline-axis (wrapped inline): TL/BL on first, TR/BR on last
+            //   • block-axis (multi-column block): TL/TR on first, BL/BR on last
+            // Middle fragments collapse to sharp 90° on all four corners. Clone
+            // treats every fragment as a complete box → keep all four corners.
+            const fragCorners = clone ? corners : (fragsAxisIsBlock ? {
+                tl: isFirst ? corners.tl : { h: 0, v: 0 },
+                tr: isFirst ? corners.tr : { h: 0, v: 0 },
+                bl: isLast ? corners.bl : { h: 0, v: 0 },
+                br: isLast ? corners.br : { h: 0, v: 0 },
+                uniform: corners.uniform && isFirst && isLast,
+            } : {
+                tl: isFirst ? corners.tl : { h: 0, v: 0 },
+                bl: isFirst ? corners.bl : { h: 0, v: 0 },
+                tr: isLast ? corners.tr : { h: 0, v: 0 },
+                br: isLast ? corners.br : { h: 0, v: 0 },
+                uniform: corners.uniform && isFirst && isLast,
+            });
+            // Outset box-shadow. Clone applies shadow to each fragment; slice
+            // applies it to the joined shape which would need per-fragment
+            // clipping to express in SVG — skip for slice (rare on wrapped
+            // inlines that aren't using `clone`).
+            if (clone) {
+                for (let si = shadows.length - 1; si >= 0; si--) {
+                    const sh = shadows[si];
+                    if (sh.inset)
+                        continue;
+                    const sx = f.x + sh.x - sh.spread;
+                    const sy = f.y + sh.y - sh.spread;
+                    const sw = f.width + sh.spread * 2;
+                    const sh2 = f.height + sh.spread * 2;
+                    if (sw <= 0 || sh2 <= 0)
+                        continue;
+                    const shadowCorners = outsetCornerRadiiForShadow(fragCorners, sh.spread);
+                    let filterAttr = "";
+                    if (sh.blur > 0) {
+                        const stdDev = sh.blur / 2;
+                        const fid = `${idPrefix}sh${clipIdx++}`;
+                        defsParts.push(`<filter id="${fid}" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="${r(stdDev)}"/></filter>`);
+                        filterAttr = ` filter="url(#${fid})"`;
+                    }
+                    svgParts.push(`${indent}${roundedRectSvg(sx, sy, sw, sh2, shadowCorners, `fill="${colorStr(parseColor(sh.color) ?? { r: 0, g: 0, b: 0, a: 0 })}"${filterAttr}`)}`);
+                }
+            }
+            // Background color.
+            if (bgColor != null && bgColor.a > 0.01) {
+                svgParts.push(`${indent}${roundedRectSvg(f.x, f.y, f.width, f.height, fragCorners, `fill="${colorStr(bgColor)}"`)}`);
+            }
+            // Background image layers (clone only — slice would need cross-
+            // fragment continuation of the gradient/image which is out of scope
+            // here; the bbox path remains the slice-mode gradient owner via the
+            // fallback emit when fragmentation isn't detected).
+            if (clone && hasBgImage) {
+                for (let li = bgImageLayers.length - 1; li >= 0; li--) {
+                    const layer = bgImageLayers[li].trim();
+                    const layerSize = (bgSizeLayers[li] ?? bgSizeLayers[0] ?? "auto").trim();
+                    const layerPos = (bgPosLayers[li] ?? bgPosLayers[0] ?? "0% 0%").trim();
+                    const layerRepeat = (bgRepeatLayers[li] ?? bgRepeatLayers[0] ?? "repeat").trim();
+                    const layerClip = (bgClipLayers[li] ?? bgClipLayers[0] ?? "border-box").trim();
+                    const layerIntrinsic = bgIntrinsicLayers[li] ?? null;
+                    const layerAttachment = (bgAttachmentLayers[li] ?? bgAttachmentLayers[0] ?? "scroll").trim();
+                    if (layerClip === "text")
+                        continue;
+                    const defId = `${idPrefix}bgf${clipIdx++}`;
+                    const out = buildBackgroundLayerDef(defId, layer, f.x, f.y, f.width, f.height, layerSize, layerPos, layerRepeat, layerIntrinsic, layerAttachment, captureViewport);
+                    if (out.def === "")
+                        continue;
+                    defsParts.push(out.def);
+                    svgParts.push(`${indent}${roundedRectSvg(f.x, f.y, f.width, f.height, fragCorners, `fill="url(#${defId})"`)}`);
+                }
+            }
+            // Per-side borders. The suppressed sides depend on fragmentation axis:
+            //   • inline-axis slice: suppress LEFT on non-first, RIGHT on non-last;
+            //     keep TOP + BOTTOM on every fragment (wrapped-inline behavior).
+            //   • block-axis slice: suppress TOP on non-first, BOTTOM on non-last;
+            //     keep LEFT + RIGHT on every fragment (multi-column block-level).
+            // Clone always keeps all four sides. Solid-style only (the typical use
+            // cases are solid); fall back to a single inset stroke for the
+            // uniform-color case.
+            const wantTop = clone || (fragsAxisIsBlock ? isFirst : true);
+            const wantBottom = clone || (fragsAxisIsBlock ? isLast : true);
+            const wantLeft = clone || (fragsAxisIsBlock ? true : isFirst);
+            const wantRight = clone || (fragsAxisIsBlock ? true : isLast);
+            const drawSide = (side, x1, y1, x2, y2) => {
+                if (side == null || side.w <= 0 || side.color.a < 0.01)
+                    return;
+                if (side.style === "none" || side.style === "hidden")
+                    return;
+                const dash = dashArrayForStyle(side.style, side.w);
+                const dashAttr = dash !== "" ? ` stroke-dasharray="${dash}"` : "";
+                const linecap = side.style === "dotted" ? ` stroke-linecap="round"` : "";
+                svgParts.push(`${indent}<line x1="${r(x1)}" y1="${r(y1)}" x2="${r(x2)}" y2="${r(y2)}" stroke="${colorStr(side.color)}" stroke-width="${r(side.w)}"${dashAttr}${linecap} />`);
+            };
+            // Uniform border with rounded corners: emit a clipped <path> stroke
+            // around the per-fragment outline (skipping the suppressed sides).
+            // To keep it simple, only emit the rounded-rect stroke path when all
+            // four sides are wanted (clone, or first-and-last). Otherwise fall
+            // back to four `<line>` strokes which work correctly for square
+            // corners (the slice path on middle fragments has square corners
+            // anyway).
+            const allFourWanted = wantTop && wantBottom && wantLeft && wantRight;
+            const sidesUniformColor = sbt != null && sbr != null && sbb != null && sbl != null
+                && sbt.w === sbr.w && sbr.w === sbb.w && sbb.w === sbl.w
+                && sbt.style === sbr.style && sbr.style === sbb.style && sbb.style === sbl.style
+                && sameColor(sbt.color, sbr.color) && sameColor(sbr.color, sbb.color) && sameColor(sbb.color, sbl.color);
+            const anyCorner = fragCorners.tl.h > 0 || fragCorners.tr.h > 0 || fragCorners.br.h > 0 || fragCorners.bl.h > 0;
+            if (sbt != null && sidesUniformColor && allFourWanted && anyCorner && sbt.w > 0 && sbt.style !== "none" && sbt.style !== "hidden") {
+                const half = sbt.w / 2;
+                const strokeCorners = insetCornerRadii(fragCorners, half, half, half, half);
+                const dash = dashArrayForStyle(sbt.style, sbt.w);
+                const dashAttr = dash !== "" ? ` stroke-dasharray="${dash}"` : "";
+                const linecap = sbt.style === "dotted" ? ` stroke-linecap="round"` : "";
+                svgParts.push(`${indent}${roundedRectSvg(f.x + half, f.y + half, Math.max(0, f.width - sbt.w), Math.max(0, f.height - sbt.w), strokeCorners, `fill="none" stroke="${colorStr(sbt.color)}" stroke-width="${r(sbt.w)}"${dashAttr}${linecap}`)}`);
+            }
+            else {
+                // Per-side strokes anchored at the inner half-width inset so they
+                // sit inside the border-box (matching Chrome). For slice-mode
+                // middle fragments there are no corners so straight lines suffice.
+                const tw = sbt?.w ?? 0;
+                const rw = sbr?.w ?? 0;
+                const bw = sbb?.w ?? 0;
+                const lw = sbl?.w ?? 0;
+                const xL = f.x, xR = f.x + f.width, yT = f.y, yB = f.y + f.height;
+                // Top / bottom span the full fragment width.
+                if (wantTop)
+                    drawSide(sbt, xL, yT + tw / 2, xR, yT + tw / 2);
+                if (wantBottom)
+                    drawSide(sbb, xL, yB - bw / 2, xR, yB - bw / 2);
+                if (wantLeft)
+                    drawSide(sbl, xL + lw / 2, yT, xL + lw / 2, yB);
+                if (wantRight)
+                    drawSide(sbr, xR - rw / 2, yT, xR - rw / 2, yB);
+            }
+        }
+    }
     function renderElement(el, depth, parentDisplayForEl) {
         const indent = "  ".repeat(depth);
         const bgColor = parseColor(el.styles.backgroundColor);
@@ -209,6 +485,14 @@ hiDPIFactor = 2) {
             return;
         // empty-cells: hide — suppress bg + border on empty <td>/<th>.
         const suppressEmptyCell = el.styles.emptyCellsHidden === true;
+        // Inline elements that wrap across multiple line boxes (CSS Backgrounds 3
+        // §3.7 box-decoration-break): capture stashes per-fragment rects in
+        // `el.inlineFragments`. When set, paint the background + border per
+        // fragment instead of once across the bbox. `slice` (default) cuts the
+        // box at fragment boundaries — the first fragment owns the left side and
+        // the last owns the right; middle fragments paint only top + bottom.
+        // `clone` paints a complete box on every fragment.
+        const useInlineFragments = el.inlineFragments != null && el.inlineFragments.length > 1;
         // Element opacity applies to the background, border, text, and all descendants.
         // Emit a group wrapper when opacity < 1 so the whole subtree tints uniformly.
         // Also open a group to host CSS filter / mix-blend-mode — both are honored by
@@ -226,11 +510,55 @@ hiDPIFactor = 2) {
         const clipPathCss = el.styles.clipPath && el.styles.clipPath !== "none" ? el.styles.clipPath : "";
         let clipPathUrlId = null;
         if (clipPathCss !== "") {
-            const shape = translateClipPath(clipPathCss, el.x, el.y, el.width, el.height);
+            // DM-818: CSS clip-path accepts an optional `<geometry-box>` keyword
+            // (`content-box` / `padding-box` / `border-box` / `margin-box` /
+            // `fill-box` / `stroke-box` / `view-box`) that specifies which box
+            // the shape is positioned relative to. Strip it before passing the
+            // value to the shape translator and inset (x, y, w, h) accordingly.
+            // `border-box` is the default and matches the captured element rect
+            // — no inset. We don't model margin-box / fill-box / stroke-box /
+            // view-box explicitly; the first falls back to border-box (close
+            // enough for the html-test fixtures), the SVG-specific ones don't
+            // apply to HTML elements.
+            const geoBoxMatch = /\b(content-box|padding-box|border-box|margin-box|fill-box|stroke-box|view-box)\b/i.exec(clipPathCss);
+            const geoBox = geoBoxMatch != null ? geoBoxMatch[1].toLowerCase() : "border-box";
+            const shapeValue = geoBoxMatch != null ? (clipPathCss.slice(0, geoBoxMatch.index) + clipPathCss.slice(geoBoxMatch.index + geoBoxMatch[0].length)).trim() : clipPathCss;
+            const bwT = parseFloat(el.styles.borderTopWidth ?? "0") || 0;
+            const bwR = parseFloat(el.styles.borderRightWidth ?? "0") || 0;
+            const bwB = parseFloat(el.styles.borderBottomWidth ?? "0") || 0;
+            const bwL = parseFloat(el.styles.borderLeftWidth ?? "0") || 0;
+            const pdT = parseFloat(el.styles.paddingTop ?? "0") || 0;
+            const pdR = parseFloat(el.styles.paddingRight ?? "0") || 0;
+            const pdB = parseFloat(el.styles.paddingBottom ?? "0") || 0;
+            const pdL = parseFloat(el.styles.paddingLeft ?? "0") || 0;
+            let cpX = el.x, cpY = el.y, cpW = el.width, cpH = el.height;
+            if (geoBox === "padding-box" || geoBox === "content-box") {
+                cpX += bwL;
+                cpY += bwT;
+                cpW -= bwL + bwR;
+                cpH -= bwT + bwB;
+                if (geoBox === "content-box") {
+                    cpX += pdL;
+                    cpY += pdT;
+                    cpW -= pdL + pdR;
+                    cpH -= pdT + pdB;
+                }
+            }
+            const shape = translateClipPath(shapeValue, cpX, cpY, Math.max(0, cpW), Math.max(0, cpH));
             if (shape !== "") {
                 clipPathUrlId = `${idPrefix}cp${clipIdx++}`;
                 defsParts.push(`<clipPath id="${clipPathUrlId}">${shape}</clipPath>`);
             }
+            else {
+                // DM-826: shape translator returned "" — try the inline-`<clipPath>`
+                // fragment-ref path next. `clip-path: url(#id)` resolves against the
+                // top-level `clipPathDefs` collected at capture time; the def is
+                // emitted into `<defs>` once and the masked element's wrapper `<g>`
+                // gets `clip-path="url(#${outId})"`. See docs/39.
+                const fragId = resolveFragmentClipPathRef(clipPathCss);
+                if (fragId != null)
+                    clipPathUrlId = fragId;
+            }
         }
         // DM-587: overflow != visible on either axis clips painted descendants
         // at the element's box. Chrome's captured tree faithfully records every
@@ -249,7 +577,21 @@ hiDPIFactor = 2) {
             const oyV = el.styles.overflowY;
             const oxClips = oxV != null && oxV !== "visible";
             const oyClips = oyV != null && oyV !== "visible";
-            if (oxClips || oyClips) {
+            // DM-650: per CSS Overflow Module Level 3 §3.3, when <body>'s overflow
+            // is non-visible and <html>'s overflow is visible (the default), the
+            // body's overflow is propagated to the viewport — i.e. body itself
+            // renders WITHOUT clipping, and the page-level scroll handles the
+            // overflow. This is what NYT desktop relies on: body { height: 100vh;
+            // overflow: hidden auto } but the page scrolls at the document level
+            // because <html> has overflow: visible. If we applied body's overflow
+            // as a clip on body's own bbox, scroll-mode segments at scrollY > 0
+            // would clip every descendant out (body.y becomes -scrollY < 0; the
+            // clip rect ends at body.y + 100vh = 0, so anything below would be
+            // hidden). We don't capture <html>'s computed style, so this skip is
+            // a conservative match against the overwhelmingly common case of
+            // html { overflow: visible }.
+            const isBodyOverflowPropagated = el.tag === "body";
+            if ((oxClips || oyClips) && !isBodyOverflowPropagated) {
                 // The CSS `outline` is painted OUTSIDE the border box and is NOT
                 // affected by the element's own overflow per CSS Backgrounds 3 §3 +
                 // Basic UI 4 §8 — outline isn't part of the element's content area.
@@ -262,15 +604,137 @@ hiDPIFactor = 2) {
                 const ostyle_ = el.styles.outlineStyle ?? "none";
                 const ohas = ow_ > 0 && ostyle_ !== "none" && ostyle_ !== "hidden";
                 const oOffset_ = ohas ? (parseFloat(el.styles.outlineOffset ?? "0") || 0) : 0;
-                const inflate_ = ohas ? Math.max(0, oOffset_ + ow_) : 0;
+                const outlineInflate = ohas ? Math.max(0, oOffset_ + ow_) : 0;
+                // DM-745: outset box-shadow paints OUTSIDE the element's box and is
+                // also unaffected by the element's own overflow per CSS Backgrounds
+                // 3 §6.4 — only the element's content / background is clipped to
+                // its overflow region, not the decorative shadow. The popover in
+                // `niche-command-invokers` has an implicit `overflow: auto` (UA
+                // popover rule) and a `box-shadow: 0 30px 60px rgba(15, 23, 42,
+                // 0.2)`; without inflating for the shadow's max extent, the clip
+                // rect cropped the shadow ink down to a thin sliver inside the
+                // popover box. Inflate per-side by `|offset| + spread + blur` so
+                // the shadow's full painted area survives.
+                const shadowsForClip = parseBoxShadow(el.styles.boxShadow ?? "none");
+                let shadowInflateT = 0, shadowInflateR = 0, shadowInflateB = 0, shadowInflateL = 0;
+                for (const sh of shadowsForClip) {
+                    if (sh.inset)
+                        continue;
+                    const reach = sh.spread + sh.blur;
+                    // Per-side ink extent: spread + blur, plus the shadow's offset
+                    // pushed in the matching direction. Clamp to 0 so an offset that
+                    // pulls the shadow away from a side doesn't shrink the inflate.
+                    shadowInflateT = Math.max(shadowInflateT, reach + Math.max(0, -sh.y));
+                    shadowInflateR = Math.max(shadowInflateR, reach + Math.max(0, sh.x));
+                    shadowInflateB = Math.max(shadowInflateB, reach + Math.max(0, sh.y));
+                    shadowInflateL = Math.max(shadowInflateL, reach + Math.max(0, -sh.x));
+                }
+                // DM-761: when `overflow: clip` is set with `overflow-clip-margin`,
+                // the paint clip extends outward from a reference box (content /
+                // padding / border) by a length. The outer clip emitted here wraps
+                // the host's own paint (including overflow-clip-margin extension) so
+                // a child that overflows past the border-box stays visible up to
+                // (ref-box edge + margin). Inflate this outer rect by the part of
+                // the margin that falls OUTSIDE the border-box; the inner per-axis
+                // clip below applies the tight ref-box-relative bound.
+                let ocmInflate = 0;
+                const isClipOverflow_ = oxV === "clip" || oyV === "clip";
+                const ocmRaw_ = el.styles.overflowClipMargin;
+                if (isClipOverflow_ && ocmRaw_ != null && ocmRaw_ !== "" && ocmRaw_ !== "0px") {
+                    const m = /^(?:(content-box|padding-box|border-box)\s+)?(-?\d*\.?\d+)px$/i.exec(ocmRaw_.trim());
+                    if (m) {
+                        const refBox = (m[1] ?? "padding-box").toLowerCase();
+                        const margin = parseFloat(m[2]);
+                        const cbtv = parseFloat(el.styles.borderTopWidth ?? "0") || 0;
+                        const cbrv = parseFloat(el.styles.borderRightWidth ?? "0") || 0;
+                        const cbbv = parseFloat(el.styles.borderBottomWidth ?? "0") || 0;
+                        const cblv = parseFloat(el.styles.borderLeftWidth ?? "0") || 0;
+                        let offT = 0, offR = 0, offB = 0, offL = 0;
+                        if (refBox === "padding-box") {
+                            offT = cbtv;
+                            offR = cbrv;
+                            offB = cbbv;
+                            offL = cblv;
+                        }
+                        else if (refBox === "content-box") {
+                            offT = cbtv + (parseFloat(el.styles.paddingTop ?? "0") || 0);
+                            offR = cbrv + (parseFloat(el.styles.paddingRight ?? "0") || 0);
+                            offB = cbbv + (parseFloat(el.styles.paddingBottom ?? "0") || 0);
+                            offL = cblv + (parseFloat(el.styles.paddingLeft ?? "0") || 0);
+                        }
+                        ocmInflate = Math.max(0, margin - Math.min(offT, offR, offB, offL));
+                    }
+                }
+                const inflateT = Math.max(outlineInflate, shadowInflateT, ocmInflate);
+                const inflateR = Math.max(outlineInflate, shadowInflateR, ocmInflate);
+                const inflateB = Math.max(outlineInflate, shadowInflateB, ocmInflate);
+                const inflateL = Math.max(outlineInflate, shadowInflateL, ocmInflate);
+                // DM-787: per-axis `overflow-x: clip; overflow-y: visible` (or the
+                // inverse) needs the outer clip to NOT bind on the visible axis. A
+                // huge ±100000 extension lets descendants paint past the border-box
+                // on that axis while the clipped axis stays bounded.
+                const UNBOUNDED_CP = 100000;
+                const xVisibleCp = oxV === "visible" && oyV === "clip";
+                const yVisibleCp = oyV === "visible" && oxV === "clip";
+                const cpX = xVisibleCp ? el.x - UNBOUNDED_CP : el.x - inflateL;
+                const cpW = xVisibleCp ? el.width + UNBOUNDED_CP * 2 : el.width + inflateL + inflateR;
+                const cpY = yVisibleCp ? el.y - UNBOUNDED_CP : el.y - inflateT;
+                const cpH = yVisibleCp ? el.height + UNBOUNDED_CP * 2 : el.height + inflateT + inflateB;
                 clipPathUrlId = `${idPrefix}cp${clipIdx++}`;
-                defsParts.push(`<clipPath id="${clipPathUrlId}"><rect x="${r(el.x - inflate_)}" y="${r(el.y - inflate_)}" width="${r(el.width + 2 * inflate_)}" height="${r(el.height + 2 * inflate_)}"/></clipPath>`);
+                defsParts.push(`<clipPath id="${clipPathUrlId}"><rect x="${r(cpX)}" y="${r(cpY)}" width="${r(cpW)}" height="${r(cpH)}"/></clipPath>`);
             }
         }
         // mask: if mask-image is a gradient or url(), translate it to an SVG <mask>.
-        const maskImage = el.styles.maskImage;
+        // DM-758 / DM-793: `mask-border-source` (legacy `-webkit-mask-box-image`)
+        // layers on top of `mask-image`. The two cases:
+        //   1. Simple full-image (slice 0/1 [fill] + width 0 + outset 0): emit a
+        //      single `<image preserveAspectRatio="none">` inside a `<mask>` so
+        //      the source stretches to the element rect (matches Chrome for the
+        //      `mb-grad` gradient case and the `mb-wide` URL case).
+        //   2. True 9-slice (mb-1 / mb-2 / mb-3 / mb-outset — non-zero `width`,
+        //      `outset`, or non-trivial `slice` with `round` / `space` / `stretch`
+        //      repeat): construct a 9-piece mask from corner / edge / center
+        //      slices, mirroring the existing `renderBorderImage` 9-slice logic
+        //      in `borders.ts` but emitting the pieces inside a `<mask>` instead
+        //      of as direct paint. `mask-border-mode` defaults to `alpha` per
+        //      spec, so the source's alpha channel drives the mask.
+        const mbSrc = el.styles.maskBorderSource;
+        const mbHasSrc = mbSrc != null && mbSrc !== "" && mbSrc !== "none";
+        const mbWidth = (el.styles.maskBorderWidth ?? "0").trim();
+        const mbOutset = (el.styles.maskBorderOutset ?? "0").trim();
+        const mbSlice = (el.styles.maskBorderSlice ?? "").trim();
+        const mbWidthZero = mbWidth === "0" || mbWidth === "0px" || /^(0(?:px)?\s+){0,3}0(?:px)?$/.test(mbWidth);
+        const mbOutsetZero = mbOutset === "0" || mbOutset === "0px" || /^(0(?:px)?\s+){0,3}0(?:px)?$/.test(mbOutset);
+        const mbSliceFull = /^[01]\s+fill$/.test(mbSlice) || mbSlice === "1" || mbSlice === "0";
+        const mbIsGradient = mbHasSrc && /-gradient\(/i.test(mbSrc);
+        const mbUrlHref = mbHasSrc ? parseCssUrl(mbSrc) : null;
+        const mbIsUrl = mbUrlHref != null;
+        const mbIsSimple = mbHasSrc && mbWidthZero && mbOutsetZero && mbSliceFull;
+        const usingMaskBorderUrlSimple = mbIsSimple && mbIsUrl && mbUrlHref != null;
+        const usingMaskBorderGradient = mbIsSimple && mbIsGradient;
+        const usingMaskBorder9Slice = mbHasSrc && mbIsUrl && mbUrlHref != null && !mbIsSimple
+            && el.styles.maskBorderIntrinsicWidth != null && el.styles.maskBorderIntrinsicHeight != null
+            && el.styles.maskBorderIntrinsicWidth > 0 && el.styles.maskBorderIntrinsicHeight > 0;
+        const maskImage = usingMaskBorderGradient ? mbSrc : el.styles.maskImage;
         let maskUrlId = null;
-        if (maskImage != null && maskImage !== "none" && maskImage !== "") {
+        if (usingMaskBorderUrlSimple && mbUrlHref != null) {
+            const dataUri = embedResizedDataUri(mbUrlHref, el.width, el.height);
+            const mid = `${idPrefix}mk${clipIdx++}`;
+            defsParts.push(`<mask id="${mid}" maskUnits="userSpaceOnUse" mask-type="alpha">`
+                + `<image href="${esc(dataUri)}" x="${r(el.x)}" y="${r(el.y)}" width="${r(el.width)}" height="${r(el.height)}" preserveAspectRatio="none" />`
+                + `</mask>`);
+            maskUrlId = mid;
+        }
+        else if (usingMaskBorder9Slice && mbUrlHref != null) {
+            const mid = `${idPrefix}mk${clipIdx++}`;
+            const built = buildMaskBorder9Slice(el, mbUrlHref, mbSlice, mbWidth, mbOutset, el.styles.maskBorderRepeat ?? "stretch", mid, idPrefix, clipIdx);
+            if (built != null) {
+                defsParts.push(built.def);
+                clipIdx = built.nextClipIdx;
+                maskUrlId = built.id;
+            }
+        }
+        else if (maskImage != null && maskImage !== "none" && maskImage !== "") {
             // DM-493: same-document fragment refs (mask-image: url("#id")) emit the
             // captured inline <mask> verbatim with id rewriting, bypassing the
             // gradient/url() emission path.
@@ -279,7 +743,48 @@ hiDPIFactor = 2) {
                 maskUrlId = fragRef;
             }
             else {
-                const maskDef = buildMaskDef(`${idPrefix}mk${clipIdx++}`, maskImage, el.x, el.y, el.width, el.height, el.styles.maskMode ?? "match-source", el.styles.maskSize ?? "auto", el.styles.maskPosition ?? "0% 0%", el.styles.maskRepeat ?? "repeat", el.styles.maskComposite ?? "add", elementMaskRasters);
+                // DM-758: when the source comes from `mask-border-source`, force
+                // size 100% 100% / no-repeat so the mask stretches across the
+                // element — matches Chrome's paint for `slice: 1 / 0` and
+                // `slice: 0 fill / 0` patterns. The `mask-border-mode` defaults to
+                // alpha vs the regular `mask-mode` default of `match-source`, but
+                // `match-source` already does the right thing for gradient sources
+                // (alpha-mode on grayscale gradients).
+                const maskSize = usingMaskBorderGradient ? "100% 100%" : (el.styles.maskSize ?? "auto");
+                const maskPosition = usingMaskBorderGradient ? "0% 0%" : (el.styles.maskPosition ?? "0% 0%");
+                const maskRepeat = usingMaskBorderGradient ? "no-repeat" : (el.styles.maskRepeat ?? "repeat");
+                // DM-820: honor `mask-clip` by insetting the mask paint region.
+                // `border-box` (default) leaves the border-box rect; `padding-box`
+                // insets by border widths; `content-box` insets by border + padding.
+                // For uniform masks (e.g. `linear-gradient(black, black)`) this
+                // matches Chrome's "mask is transparent outside the clip box" rule
+                // exactly. For position-sensitive gradients the layer is still
+                // sized to the clip box rather than the origin box (mask-origin
+                // not yet captured), which is a visible diff only when both differ
+                // — no fixtures exercise that combination today.
+                const maskClip = el.styles.maskClip ?? "border-box";
+                let maskX = el.x, maskY = el.y, maskW = el.width, maskH = el.height;
+                if (maskClip === "padding-box" || maskClip === "content-box") {
+                    const bt = parseFloat(el.styles.borderTopWidth ?? "0") || 0;
+                    const br = parseFloat(el.styles.borderRightWidth ?? "0") || 0;
+                    const bb = parseFloat(el.styles.borderBottomWidth ?? "0") || 0;
+                    const bl = parseFloat(el.styles.borderLeftWidth ?? "0") || 0;
+                    maskX += bl;
+                    maskY += bt;
+                    maskW -= bl + br;
+                    maskH -= bt + bb;
+                    if (maskClip === "content-box") {
+                        const pt = parseFloat(el.styles.paddingTop ?? "0") || 0;
+                        const pr = parseFloat(el.styles.paddingRight ?? "0") || 0;
+                        const pb = parseFloat(el.styles.paddingBottom ?? "0") || 0;
+                        const pl = parseFloat(el.styles.paddingLeft ?? "0") || 0;
+                        maskX += pl;
+                        maskY += pt;
+                        maskW -= pl + pr;
+                        maskH -= pt + pb;
+                    }
+                }
+                const maskDef = buildMaskDef(`${idPrefix}mk${clipIdx++}`, maskImage, maskX, maskY, Math.max(0, maskW), Math.max(0, maskH), el.styles.maskMode ?? "match-source", maskSize, maskPosition, maskRepeat, el.styles.maskComposite ?? "add", elementMaskRasters);
                 if (maskDef.def !== "") {
                     maskUrlId = maskDef.id;
                     defsParts.push(maskDef.def);
@@ -347,8 +852,16 @@ hiDPIFactor = 2) {
         // skipped from paint.
         if (el.cullClass != null && el.cullClass !== "")
             groupAttrs.push(`class="${esc(el.cullClass)}"`);
+        // DM-704: SVG applies `filter` BEFORE `clip-path` when both sit on the
+        // same `<g>` (the spec: "the filter is applied to the source graphic
+        // before the clip path"). For drop-shadow / blur, that means the
+        // filter's ink area extends beyond the element box but then gets
+        // clipped back to the box and never paints — the shadow vanishes. Hoist
+        // `filter` onto an OUTER wrapper so it processes already-clipped
+        // content; the unclipped ink area then renders.
+        const needsFilterOuter = filterCss !== "" && (clipPathUrlId != null || maskUrlId != null);
         const styleParts = [];
-        if (filterCss !== "")
+        if (filterCss !== "" && !needsFilterOuter)
             styleParts.push(`filter:${filterCss}`);
         if (blendCss !== "")
             styleParts.push(`mix-blend-mode:${blendCss}`);
@@ -362,6 +875,8 @@ hiDPIFactor = 2) {
         if (styleParts.length > 0)
             groupAttrs.push(`style="${esc(styleParts.join(";"))}"`);
         const opened = needsGroup;
+        if (needsFilterOuter)
+            svgParts.push(`${indent}<g style="${esc(`filter:${filterCss}`)}">`);
         if (opened)
             svgParts.push(`${indent}<g ${groupAttrs.join(" ")}>`);
         // Inner anim-class wrapper sits INSIDE any visibility/transform group so
@@ -369,20 +884,33 @@ hiDPIFactor = 2) {
         // each carry their own `animation` shorthand without clobbering.
         if (animClass !== "")
             svgParts.push(`${indent}<g class="${animClass}">`);
+        // Inline-fragment paint: when the element wraps across multiple line
+        // boxes and the bbox-based paint would smear background + border across
+        // the whole logical inline (typically the full container width), paint
+        // each line fragment individually. The remaining bbox-based emissions
+        // (outset shadow, bg color, bg image, inset shadow, border-image,
+        // border) are gated below on `!useInlineFragments` so they don't double
+        // up. Outline still paints around the bbox — it's outside the box and
+        // CSS doesn't fragment it per inline line box.
+        if (useInlineFragments) {
+            renderInlineFragments(el, indent, bgColor, corners);
+        }
         // Outset box-shadow (SK-1101 + SK-1113): paints BENEATH the element box.
         // CSS spec says the first shadow in the list is closest to the element;
         // later shadows sit further behind. SVG paints later in document order,
         // so to get the same stacking we iterate the list in REVERSE (deepest
         // first). Blur > 0 routes through an SVG <filter feGaussianBlur> with
         // stdDeviation ≈ blur/2 (matches Chromes blur-to-stdDev mapping).
-        {
+        if (!useInlineFragments) {
             const shadows = parseBoxShadow(el.styles.boxShadow ?? "none");
             for (let si = shadows.length - 1; si >= 0; si--) {
                 const sh = shadows[si];
                 if (sh.inset)
                     continue;
-                if (sh.spread < 0)
-                    continue;
+                // Negative spread is allowed: per CSS Backgrounds 3 §6.4 the shadow
+                // shape's width/height = box + 2*spread (so spread < 0 shrinks the
+                // shadow). Chromium's `BoxShadowData::ApplyToBoxOuter` shrinks the
+                // outer rect by `-spread` on each side and zero-clamps the result.
                 // Rect inflated by spread and shifted by (x, y).
                 const sx = el.x + sh.x - sh.spread;
                 const sy = el.y + sh.y - sh.spread;
@@ -390,11 +918,12 @@ hiDPIFactor = 2) {
                 const sh2 = el.height + sh.spread * 2;
                 if (sw <= 0 || sh2 <= 0)
                     continue;
-                // Outer shadow corners: each axis grows by `spread` (clamped at 0)
-                // since the shadow rect extends beyond the border-box by spread on
-                // every side. Per-corner radii grow uniformly so each corner stays
-                // proportional to its source.
-                const shadowCorners = insetCornerRadii(corners, -sh.spread, -sh.spread, -sh.spread, -sh.spread);
+                // Outer shadow corners per CSS Backgrounds 3 §6.4 / Chromium
+                // `FloatRoundedRect::Outset`: a non-zero source corner grows by
+                // `spread`; a zero source corner STAYS sharp. The naive grow-all
+                // path produced visibly rounded corners on the concentric-outline
+                // pattern (box-shadow: 0 0 0 Npx on a 0-radius box).
+                const shadowCorners = outsetCornerRadiiForShadow(corners, sh.spread);
                 let filterAttr = "";
                 if (sh.blur > 0) {
                     const stdDev = sh.blur / 2;
@@ -413,7 +942,10 @@ hiDPIFactor = 2) {
         // a comma-separated list of linear/radial gradients and url() images. The
         // first layer paints on top — we emit in reverse so the rect order matches
         // CSS layering. The background-color paints *under* all layers.
-        if (!suppressEmptyCell && bgColor != null && bgColor.a > 0.01) {
+        if (useInlineFragments) {
+            // background painted per-fragment in renderInlineFragments above
+        }
+        else if (!suppressEmptyCell && bgColor != null && bgColor.a > 0.01) {
             svgParts.push(`${indent}${roundedRectSvg(el.x, el.y, el.width, el.height, corners, `fill="${colorStr(bgColor)}"`)}`);
         }
         else if (!suppressEmptyCell && el.styles.frostedBgFallback != null) {
@@ -429,9 +961,15 @@ hiDPIFactor = 2) {
         // fill on the text glyph group (instead of painting it as a normal
         // <rect fill=url(#bg)> over the headline area). Initialized to null and
         // assigned in the bg-layer loop below.
-        let textBgClipFill = null;
+        // DM-696: multiple `background-clip: text` layers must all composite into
+        // the glyph shapes (top layer on top of lower layers, same as CSS bg
+        // layering on a normal box). Collect them in CSS-source order (layer 0
+        // = topmost) and emit each as its own masked rect at render time, in
+        // REVERSE order so the topmost CSS layer is the last `<rect>` and paints
+        // on top.
+        const textBgClipFills = [];
         const bgImage = el.styles.backgroundImage;
-        if (bgImage != null && bgImage !== "none" && bgImage !== "") {
+        if (!useInlineFragments && bgImage != null && bgImage !== "none" && bgImage !== "") {
             const layers = splitTopLevelCommas(bgImage);
             const sizeLayers = splitTopLevelCommas(el.styles.backgroundSize ?? "auto");
             const posLayers = splitTopLevelCommas(el.styles.backgroundPosition ?? "0% 0%");
@@ -440,6 +978,16 @@ hiDPIFactor = 2) {
             const originLayers = splitTopLevelCommas(el.styles.backgroundOrigin ?? "padding-box");
             const attachmentLayers = splitTopLevelCommas(el.styles.backgroundAttachment ?? "scroll");
             const intrinsicLayers = el.styles.backgroundIntrinsic ?? [];
+            // DM-817: background-blend-mode per CSS Compositing 2 §6.1 — each layer
+            // blends with the composite below using its mode. Single value applies
+            // to every layer; comma-separated values map per-layer. Capture
+            // emit-time bg-layer indexing is reversed (later index = lower in
+            // stack), so we look up by the ORIGINAL CSS layer index (`li`).
+            const blendLayers = splitTopLevelCommas(el.styles.backgroundBlendMode ?? "normal").map((s) => s.trim());
+            const hasNonNormalBlend = blendLayers.some((m) => m !== "normal" && m !== "");
+            const bgGroupOpen = hasNonNormalBlend ? `${indent}<g style="isolation:isolate">\n` : "";
+            const bgGroupClose = hasNonNormalBlend ? `\n${indent}</g>` : "";
+            const bgGroupStart = svgParts.length;
             // Per-side borders + padding for clip/origin math.
             const bwT = parseFloat(el.styles.borderTopWidth ?? "0") || 0;
             const bwR = parseFloat(el.styles.borderRightWidth ?? "0") || 0;
@@ -473,11 +1021,29 @@ hiDPIFactor = 2) {
                 const layerAttachment = (attachmentLayers[li] ?? attachmentLayers[0] ?? "scroll").trim();
                 const originBox = boxFor(layerOrigin);
                 const clipBox = boxFor(layerClip);
+                // DM-821: `background-attachment: local` positions and sizes the
+                // layer against the element's full scrollable content area, not its
+                // visible viewport. `background-size: contain` on a 936×220 panel
+                // whose scroll content runs ~820px tall sizes the image to fit the
+                // 936×820 box (one width-filling tile), but using just the visible
+                // box sizes it to 660×220 instead and tiles horizontally with a
+                // visible second copy at the right edge. Substitute the scroll
+                // dimensions when the element actually scrolls.
+                let posOriginX = originBox.x, posOriginY = originBox.y;
+                let posOriginW = originBox.w, posOriginH = originBox.h;
+                if (layerAttachment === "local" && el.styles.scrollHeight != null && el.styles.scrollWidth != null) {
+                    const sw = el.styles.scrollWidth;
+                    const sh = el.styles.scrollHeight;
+                    if (sw > posOriginW)
+                        posOriginW = sw;
+                    if (sh > posOriginH)
+                        posOriginH = sh;
+                }
                 const defId = `${idPrefix}bg${clipIdx++}`;
                 // Pattern is positioned + sized relative to the origin box (where the image starts)
                 // then painted into a rect clipped to the clip box. For fixed attachment
                 // the origin is the viewport instead.
-                const out = buildBackgroundLayerDef(defId, layer, originBox.x, originBox.y, originBox.w, originBox.h, layerSize, layerPos, layerRepeat, layerIntrinsic, layerAttachment, captureViewport);
+                const out = buildBackgroundLayerDef(defId, layer, posOriginX, posOriginY, posOriginW, posOriginH, layerSize, layerPos, layerRepeat, layerIntrinsic, layerAttachment, captureViewport);
                 if (out.def === "")
                     continue;
                 defsParts.push(out.def);
@@ -487,8 +1053,9 @@ hiDPIFactor = 2) {
                 // can use it as the glyph fill (the first text-clipped layer wins).
                 // The non-text-clipped layers (if any) still emit normally.
                 if (layerClip === "text") {
-                    if (textBgClipFill == null)
-                        textBgClipFill = `url(#${defId})`;
+                    // li counts down (loop iterates from layers.length-1 → 0). Storing at
+                    // index li lets us emit topmost layer last regardless of loop dir.
+                    textBgClipFills[li] = `url(#${defId})`;
                     continue;
                 }
                 // Inner clip corners: subtract the corresponding border-side widths
@@ -499,72 +1066,64 @@ hiDPIFactor = 2) {
                 const innerCorners = layerClip === "border-box"
                     ? corners
                     : insetCornerRadii(corners, bwT, bwR, bwB, bwL);
-                svgParts.push(`${indent}${roundedRectSvg(clipBox.x, clipBox.y, clipBox.w, clipBox.h, innerCorners, `fill="url(#${defId})"`)}`);
+                // DM-817: per-layer mix-blend-mode. Bottom layer (CSS layer
+                // layers.length-1) always paints normal; upper layers blend.
+                const layerBlend = blendLayers[li] ?? blendLayers[0] ?? "normal";
+                const blendAttr = (layerBlend !== "normal" && layerBlend !== "")
+                    ? ` style="mix-blend-mode:${layerBlend}"` : "";
+                svgParts.push(`${indent}${roundedRectSvg(clipBox.x, clipBox.y, clipBox.w, clipBox.h, innerCorners, `fill="url(#${defId})"${blendAttr}`)}`);
+            }
+            // DM-817: wrap the bg-layer rects we just emitted in an
+            // isolation-isolate group so the multiply / screen / etc. doesn't
+            // bleed into siblings painted above.
+            if (hasNonNormalBlend && svgParts.length > bgGroupStart) {
+                const wrapped = bgGroupOpen + svgParts.slice(bgGroupStart).join("\n") + bgGroupClose;
+                svgParts.length = bgGroupStart;
+                svgParts.push(wrapped);
             }
         }
-        // Inset box-shadow (SK-1111): per CSS paint order this sits ON TOP of
-        // the background layers but BEHIND the border. Outset shadows would sit
-        // underneath the entire box and aren't supported in this pass — only
-        // inset, no blur, with non-negative spread is handled (sufficient for the
-        // common "padding visualizer" pattern: box-shadow: inset 0 0 0 NNpx
-        // <color>). Anything fancier falls through silently and becomes a
-        // follow-up. See SK-1111.
-        {
+        // Inset box-shadow per CSS Backgrounds 3 §6.4 + Chromium
+        // `BoxPainterBase::PaintInsetBoxShadow`: the shadow shape is the padding
+        // box shifted by (x, y) and inset by `spread` on each side. The shadow
+        // paints inside the padding box BUT OUTSIDE the shadow shape — like a
+        // donut whose hole is the shadow shape. With offset, the donut becomes
+        // asymmetric (e.g. `inset 0 -16px 32px` darkens the bottom strip and
+        // fades upward); with pure spread, it becomes a uniform ring; with pure
+        // blur centered, it becomes a soft inner glow.
+        //
+        // Implementation: emit two subpaths with `fill-rule="evenodd"` — outer =
+        // padding box expanded outward by enough margin to contain the blur
+        // halo, inner = padding box shifted by (sh.x, sh.y) and inset by
+        // sh.spread on each side. Apply Gaussian blur (stdDev = blur/2). Clip
+        // the whole thing to the padding box so the outer-margin overflow and
+        // the parts of the halo outside the box don't leak.
+        if (!useInlineFragments) {
             const shadows = parseBoxShadow(el.styles.boxShadow ?? "none");
-            // Border widths — re-parse here because the bg-layer block above (where
-            // bwL/bwR/bwT/bwB are computed) is conditional on backgroundImage.
             const sbwL = parseFloat(el.styles.borderLeftWidth ?? "0") || 0;
             const sbwR = parseFloat(el.styles.borderRightWidth ?? "0") || 0;
             const sbwT = parseFloat(el.styles.borderTopWidth ?? "0") || 0;
             const sbwB = parseFloat(el.styles.borderBottomWidth ?? "0") || 0;
-            // Border-inner box (where inset shadow paints).
             const ibLeft = el.x + sbwL;
             const ibTop = el.y + sbwT;
             const ibW = Math.max(0, el.width - sbwL - sbwR);
             const ibH = Math.max(0, el.height - sbwT - sbwB);
-            // Border-inner per-corner radii: each corner shrinks by the adjacent
-            // border-side widths. Used as the basis for the inset-shadow stroke
-            // path; the final ring radius will subtract sp/2 for stroke centering.
             const innerCorners = insetCornerRadii(corners, sbwT, sbwR, sbwB, sbwL);
-            for (const sh of shadows) {
+            // DM-699: CSS Backgrounds 3 §6.4 stacks shadows with the FIRST shadow
+            // ON TOP. The outer-shadow loop above already iterates in reverse so
+            // the topmost CSS shadow emits last; this inset loop was iterating
+            // FORWARD, so e.g. `box-shadow: inset 0 0 0 8px #b45309, inset 0 6px
+            // 24px rgba(0,0,0,.4)` (brown ring on top of a dark glow) painted the
+            // brown ring FIRST and the dark glow LAST — the glow then ended up on
+            // top, darkening the brown ring at the top of the box.
+            for (let si = shadows.length - 1; si >= 0; si--) {
+                const sh = shadows[si];
                 if (!sh.inset)
                     continue;
-                // Skip non-trivial shadows we cant emit accurately — anything with
-                // an x/y offset (asymmetric inset glow not supported), negative
-                // spread, or zero spread + zero blur (paints nothing).
-                if (sh.x !== 0 || sh.y !== 0)
-                    continue;
-                if (sh.spread < 0)
-                    continue;
                 if (sh.spread === 0 && sh.blur === 0)
                     continue;
                 if (ibW <= 0 || ibH <= 0)
                     continue;
-                // Render the inset shadow as a stroked rect at the inside-the-border
-                // edge, clipped to inside the border-box so the stroke (and the blur
-                // halo, if any) only show on the inner side of the edge. Stroke is
-                // centered on the path; the clipPath drops the outward half so the
-                // visible thickness is half the stroke width. For pure-spread (no
-                // blur) we want a sharp `spread`-wide ring, so stroke-width = 2 *
-                // spread. For pure-blur (no spread) we use a thin baseline ring of
-                // blur-width pixels — the blur then produces the visible falloff;
-                // a larger ring overpaints, smaller produces too-faint output.
-                // Combined spread + blur sums both: visible band = spread, with the
-                // blur softening the inner edge. Previously the code used
-                // max(spread, blur) as both stroke width AND inward offset, which
-                // conflated blur with spread and painted pure-blur insets as a
-                // thick solid ring. DM-304.
-                // For pure-blur (no spread) we use a `blur`-wide ring centered on the
-                // inner edge — half (blur/2) shows inside the clip, half is clipped
-                // away on the outer side. The Gaussian then softens that band into
-                // Chrome's characteristic inset glow falloff (DM-366). Previously the
-                // ring was 1px wide and the blur made it nearly invisible.
-                // For pure-blur (no spread) we use a `blur/2`-wide ring centered on
-                // the inner edge. Half (blur/4) shows inside the clip; the Gaussian
-                // (stdDev = blur/2) softens that band into Chrome's characteristic
-                // inset-glow falloff. A 1px ring is too faint; a `blur`-wide ring is
-                // too strong (DM-366).
-                const ringWidth = Math.max(2 * sh.spread, sh.blur / 2, 1);
+                const shadowColor = colorStr(parseColor(sh.color) ?? { r: 0, g: 0, b: 0, a: 0 });
                 let filterAttr = "";
                 if (sh.blur > 0) {
                     const stdDev = sh.blur / 2;
@@ -574,14 +1133,49 @@ hiDPIFactor = 2) {
                 }
                 const cid = `${idPrefix}ishc${clipIdx++}`;
                 defsParts.push(`<clipPath id="${cid}">${roundedRectSvg(ibLeft, ibTop, ibW, ibH, innerCorners, "")}</clipPath>`);
-                const strokeColor = colorStr(parseColor(sh.color) ?? { r: 0, g: 0, b: 0, a: 0 });
-                svgParts.push(`${indent}<g clip-path="url(#${cid})">${roundedRectSvg(ibLeft, ibTop, ibW, ibH, innerCorners, `fill="none" stroke="${strokeColor}" stroke-width="${r(ringWidth)}"${filterAttr}`)}</g>`);
+                // Pure-blur-centered inset (x=0, y=0, spread=0, blur>0): the donut
+                // has zero area, so use the legacy stroked-rect approach which
+                // produces the right soft glow on all sides. Stroke width = blur/2;
+                // the Gaussian softens it into Chrome's inset-glow falloff. DM-366.
+                if (sh.x === 0 && sh.y === 0 && sh.spread === 0) {
+                    const ringWidth = Math.max(sh.blur / 2, 1);
+                    svgParts.push(`${indent}<g clip-path="url(#${cid})">${roundedRectSvg(ibLeft, ibTop, ibW, ibH, innerCorners, `fill="none" stroke="${shadowColor}" stroke-width="${r(ringWidth)}"${filterAttr}`)}</g>`);
+                    continue;
+                }
+                // Donut path: outer subpath = padding box expanded by a margin
+                // sized to contain the blur halo + spread; inner subpath = padding
+                // box shifted by (sh.x, sh.y) and inset by sh.spread on each side.
+                // Even-odd fill paints the frame between the two subpaths with the
+                // shadow color; blur softens; the clip-path keeps the result inside
+                // the padding box.
+                const innerL = ibLeft + sh.x + sh.spread;
+                const innerT = ibTop + sh.y + sh.spread;
+                const innerW = ibW - 2 * sh.spread;
+                const innerH = ibH - 2 * sh.spread;
+                if (innerW <= 0 || innerH <= 0) {
+                    // Shadow shape collapsed: per spec the entire padding box fills
+                    // with shadow color (with blur halo) — emit a solid rect.
+                    svgParts.push(`${indent}<g clip-path="url(#${cid})">${roundedRectSvg(ibLeft, ibTop, ibW, ibH, innerCorners, `fill="${shadowColor}"${filterAttr}`)}</g>`);
+                    continue;
+                }
+                const innerC = insetCornerRadii(innerCorners, sh.spread, sh.spread, sh.spread, sh.spread);
+                const margin = Math.max(Math.abs(sh.x), Math.abs(sh.y), sh.spread, sh.blur, 1) * 4;
+                const outerX = Math.min(ibLeft, innerL) - margin;
+                const outerY = Math.min(ibTop, innerT) - margin;
+                const outerR = Math.max(ibLeft + ibW, innerL + innerW) + margin;
+                const outerB = Math.max(ibTop + ibH, innerT + innerH) + margin;
+                const sharp = { tl: { h: 0, v: 0 }, tr: { h: 0, v: 0 }, br: { h: 0, v: 0 }, bl: { h: 0, v: 0 }, uniform: true };
+                const outerD = roundedRectPath(outerX, outerY, outerR - outerX, outerB - outerY, sharp);
+                const innerD = roundedRectPath(innerL, innerT, innerW, innerH, innerC);
+                svgParts.push(`${indent}<g clip-path="url(#${cid})"><path d="${outerD} ${innerD}" fill="${shadowColor}" fill-rule="evenodd"${filterAttr}/></g>`);
             }
         }
         // Border-image: if a URL source with intrinsic dimensions is present,
         // emit a 9-slice composition and SKIP the plain-border fallback below.
         // Gradient sources are not supported in this pass (tracked as follow-up).
-        const borderImageMarkup = renderBorderImage(el, indent, idPrefix, defsParts, clipIdx);
+        const borderImageMarkup = useInlineFragments
+            ? { svg: "", usedIds: 0 }
+            : renderBorderImage(el, indent, idPrefix, defsParts, clipIdx);
         if (borderImageMarkup.usedIds > 0)
             clipIdx += borderImageMarkup.usedIds;
         const borderImagePainted = borderImageMarkup.svg !== "";
@@ -610,6 +1204,9 @@ hiDPIFactor = 2) {
         if (suppressEmptyCell) {
             // empty-cells: hide — suppress the border too.
         }
+        else if (useInlineFragments) {
+            // Border painted per-fragment in renderInlineFragments above.
+        }
         else if (borderImagePainted) {
             // Border visual came from border-image. Skip the plain-border emission.
         }
@@ -620,9 +1217,19 @@ hiDPIFactor = 2) {
                 // separated by 1/3 gap. Our captured rect is the border box (outer
                 // edge), so strokes need their centerlines at 1/6*w (outer) and
                 // 5/6*w (inner) inside the border box.
+                //
+                // DM-689: In `border-collapse: collapse` mode Chrome paints the
+                // border CENTERED on the cell's grid edge instead of inside the
+                // cell box — half the border width sits outside the cell, half
+                // inside. Match that by shifting the outer/inner offsets outward
+                // by bt.w/2 in collapse mode (Blink's
+                // `CollapsedBorderPainter::PaintCollapsedBorders` centers the
+                // collapsed-border rect on the grid line).
+                const collapse = el.styles.borderCollapse === "collapse";
+                const collapseShift = collapse ? bt.w / 2 : 0;
                 const strokeW = bt.w / 3;
-                const outerInset = bt.w / 6;
-                const innerInset = bt.w * 5 / 6;
+                const outerInset = bt.w / 6 - collapseShift;
+                const innerInset = bt.w * 5 / 6 - collapseShift;
                 const outerCorners = insetCornerRadii(corners, outerInset, outerInset, outerInset, outerInset);
                 const innerCorners = insetCornerRadii(corners, innerInset, innerInset, innerInset, innerInset);
                 svgParts.push(`${indent}${roundedRectSvg(el.x + outerInset, el.y + outerInset, el.width - 2 * outerInset, el.height - 2 * outerInset, outerCorners, `fill="none" stroke="${colorStr(bt.color)}" stroke-width="${r(strokeW)}"`)}`);
@@ -722,23 +1329,34 @@ hiDPIFactor = 2) {
                 const bT = collapse ? el.y : Math.round(el.y);
                 const bR = collapse ? el.x + el.width : Math.round(el.x + el.width);
                 const bB = collapse ? el.y + el.height : Math.round(el.y + el.height);
-                // For thick (≥ 5 px) dashed/dotted borders, shorten each side by
-                // `inset` (= half stroke width) at both ends so adjacent sides
-                // meet at corners without overlap. With butt linecaps the line
-                // ink stops at exactly the line endpoint, so top + left don'\\'t
-                // both paint the same corner pixel. Chrome'\\'s BoxBorderPainter
-                // does the equivalent via per-side clipping — without this trim
-                // our 4-line dashed/dotted emit double-paints the corners as a
-                // darker square (DM-402, visible on the 10 px dashed border in
-                // `17-bg-color-image`). Thin borders skip the trim because the
-                // half-stroke gap (~1.5 px on a 3 px border) leaves a visible
-                // hole at corners.
-                const cornerTrim = bt.w >= 8 ? inset : 0;
+                // Corner trim along the side's axis. Two reasons it applies:
+                //   • Dotted (always): Chromium's `DrawLineWithStyle` moves the
+                //     line endpoints IN by width/2 before stroking thick-dotted
+                //     lines so the round endcap fits inside the line. Matching
+                //     that is necessary for `adjustedDashAttrs` (which assumes a
+                //     post-move sideLength) to compute Chrome-equivalent dot
+                //     centres. The adjacent sides' first dots overlap at the
+                //     corner, producing one visible corner dot. (DM-805.)
+                //   • Dashed thick (≥ 8 px): legacy corner-overlap prevention so
+                //     butt-cap dashes don't double-paint the corner pixel as a
+                //     darker square (DM-402, visible on the 10 px dashed border
+                //     in `17-bg-color-image`). Thin dashed borders use 0 trim
+                //     so the dashes meet flush at the corner, matching Chrome
+                //     for the common 1-3 px cases.
+                const cornerTrim = style === "dotted" ? bt.w / 2 : (bt.w >= 8 ? inset : 0);
+                // Each entry: [x1, y1, x2, y2, naturalLen]. naturalLen is the
+                // PRE-cornerTrim side length — Chromium's `DrawLineWithStyle`
+                // computes the dash pattern from the original `info.path_length`
+                // BEFORE moving thick-dotted endpoints inward by width/2 (the move
+                // shifts the painted line but the dash math sees the original).
+                // For thin dashed borders cornerTrim = 0, so naturalLen == drawn
+                // length; for dotted (cornerTrim = width/2) and thick dashed
+                // (cornerTrim = width/2) the two differ.
                 const sides = [
-                    [bL + cornerTrim, bT + inset, bR - cornerTrim, bT + inset, bR - bL - 2 * cornerTrim],
-                    [bR - inset, bT + cornerTrim, bR - inset, bB - cornerTrim, bB - bT - 2 * cornerTrim],
-                    [bL + cornerTrim, bB - inset, bR - cornerTrim, bB - inset, bR - bL - 2 * cornerTrim],
-                    [bL + inset, bT + cornerTrim, bL + inset, bB - cornerTrim, bB - bT - 2 * cornerTrim],
+                    [bL + cornerTrim, bT + inset, bR - cornerTrim, bT + inset, bR - bL],
+                    [bR - inset, bT + cornerTrim, bR - inset, bB - cornerTrim, bB - bT],
+                    [bL + cornerTrim, bB - inset, bR - cornerTrim, bB - inset, bR - bL],
+                    [bL + inset, bT + cornerTrim, bL + inset, bB - cornerTrim, bB - bT],
                 ];
                 for (const [x1, y1, x2, y2, len] of sides) {
                     const { array: dash, offset } = adjustedDashAttrs(style, bt.w, len);
@@ -854,6 +1472,119 @@ hiDPIFactor = 2) {
                 [0, 1, 0, -1], // bottom: outer down, inner up
                 [1, 0, -1, 0], // left: outer left, inner right
             ];
+            // DM-697: non-solid sides (double / dashed / dotted) need the same
+            // diagonal-miter clip at corners that solid sides get from the
+            // trapezoid emit. Per Blink's `BoxBorderPainter::PaintOneBorderSide`,
+            // each side paints into a 4-point clip region whose corners run from
+            // the border-box outer rect to the inner rect — i.e., the same
+            // trapezoid shape we use for solid sides. Without it our `<line>`
+            // strokes spill into adjacent sides' wedges and produce square
+            // corners instead of the diagonal cut Chrome paints. Build a
+            // clipPath per non-solid side and wrap its emission in it.
+            const sideClipForStyle = (i, side) => {
+                if (collapse || side == null || side.w <= 0)
+                    return "";
+                const cid = `${idPrefix}bs${clipIdx++}`;
+                defsParts.push(`<clipPath id="${cid}"><polygon points="${trapezoids[i][1]}"/></clipPath>`);
+                return ` clip-path="url(#${cid})"`;
+            };
+            // DM-686: border-radius + per-side borders. The trapezoids and lines
+            // above hit the sharp outer-rect corners. When the element has a
+            // non-zero border-radius, wrap the per-side emit in a clip-path that
+            // is the rounded outer border-box, so each side's polygon / line is
+            // trimmed to follow the radius arc instead of squaring off. Matches
+            // Blink, which paints sides into the rounded border outline clip.
+            const hasOuterRadius = !collapse && (corners.tl.h > 0 || corners.tl.v > 0
+                || corners.tr.h > 0 || corners.tr.v > 0
+                || corners.br.h > 0 || corners.br.v > 0
+                || corners.bl.h > 0 || corners.bl.v > 0);
+            // DM-773: when the box has rounded corners AND per-side mixed widths,
+            // the legacy trapezoid + outer-outline-clip approach paints each side
+            // as a straight rectangular strip clipped to the rounded outline. For
+            // large radii (`border-radius: 50%` / circle case, or any corner whose
+            // radius dominates the side's width) the rectangular strip sits
+            // entirely OUTSIDE the rounded outline at most y values — the clip
+            // erases the side, leaving only a thin sliver near the side's
+            // midpoint. Chrome's `BoxBorderPainter` paints each side as a wedge
+            // of the BORDER RING (outer outline minus inner outline) cut to the
+            // side's diagonal-to-center quadrant; that approach is geometry-
+            // correct for any radius. For solid sides we switch to that approach
+            // here when there's a rounded corner; the non-solid branches keep
+            // their existing line / double-stroke emit with the outer-outline
+            // clip wrapping.
+            const cxBox = (bxL + bxR) / 2;
+            const cyBox = (bxT + bxB) / 2;
+            const outerRoundedPath = hasOuterRadius
+                ? roundedRectPath(bxL, bxT, bxR - bxL, bxB - bxT, corners)
+                : "";
+            const innerCornersForAnnular = hasOuterRadius
+                ? insetCornerRadii(corners, tw, rw, bw, lw)
+                : corners;
+            const innerRoundedPath = hasOuterRadius
+                ? roundedRectPath(bxL + lw, bxT + tw, Math.max(0, bxR - bxL - lw - rw), Math.max(0, bxB - bxT - tw - bw), innerCornersForAnnular)
+                : "";
+            const annularPath = hasOuterRadius
+                ? `${outerRoundedPath} ${innerRoundedPath}`
+                : "";
+            // DM-803: per-side wedge apex = intersection of the two adjacent
+            // corner MITER lines (not box centre). Each corner's miter line goes
+            // from the outer corner inward along direction (lw_at_that_corner,
+            // tw_at_that_corner) — for uniform widths this gives a 45° diagonal
+            // and all 4 apices land at the box centre (matching the old behaviour);
+            // for mixed widths the diagonal tilts toward the thicker adjacent
+            // side, shifting where the colour-transition between adjacent sides
+            // lands on the rounded-corner arc. Matches Chromium's
+            // `box_border_painter.cc` miter-line construction (`miter_line` from
+            // `corner.outer.Outer()` to `corner.unadjusted_inner_edge`). Without
+            // this shift, e.g. the 8/2/8/2 border on a 50%-radius ellipse paints
+            // the top blue and bottom green arcs narrower than Chrome (because
+            // 45° diagonals from the rectangle corners hit the ellipse closer to
+            // the cardinal axes than the wider-top miter lines would).
+            const boxW = bxR - bxL;
+            const boxH = bxB - bxT;
+            const horizSum = lw + rw;
+            const vertSum = tw + bw;
+            // Top apex: NW miter (lw, tw) and NE miter (-rw, tw) meet at
+            // (bxL + lw*boxW/(lw+rw), bxT + tw*boxW/(lw+rw)). Fall back to box
+            // centre when the denominator is zero (no adjacent borders).
+            const apexTopX = horizSum > 0 ? bxL + lw * boxW / horizSum : cxBox;
+            const apexTopY = horizSum > 0 ? bxT + tw * boxW / horizSum : cyBox;
+            const apexRightX = vertSum > 0 ? bxR - rw * boxH / vertSum : cxBox;
+            const apexRightY = vertSum > 0 ? bxT + tw * boxH / vertSum : cyBox;
+            const apexBottomX = horizSum > 0 ? bxL + lw * boxW / horizSum : cxBox;
+            const apexBottomY = horizSum > 0 ? bxB - bw * boxW / horizSum : cyBox;
+            const apexLeftX = vertSum > 0 ? bxL + lw * boxH / vertSum : cxBox;
+            const apexLeftY = vertSum > 0 ? bxT + tw * boxH / vertSum : cyBox;
+            const annularWedges = hasOuterRadius ? [
+                `${r(bxL)},${r(bxT)} ${r(bxR)},${r(bxT)} ${r(apexTopX)},${r(apexTopY)}`, // top
+                `${r(bxR)},${r(bxT)} ${r(bxR)},${r(bxB)} ${r(apexRightX)},${r(apexRightY)}`, // right
+                `${r(bxR)},${r(bxB)} ${r(bxL)},${r(bxB)} ${r(apexBottomX)},${r(apexBottomY)}`, // bottom
+                `${r(bxL)},${r(bxB)} ${r(bxL)},${r(bxT)} ${r(apexLeftX)},${r(apexLeftY)}`, // left
+            ] : [];
+            // The outer-outline group still wraps the non-solid branches so their
+            // straight `<line>` strokes get trimmed to the rounded outline at the
+            // corners. Solid sides emit their own annular wedge BEFORE the group
+            // opens (and use their own per-side wedge clip), so they fall outside
+            // this wrapping — the wedge clip is tighter than the outer outline
+            // anyway.
+            let roundedSideGroupOpen = false;
+            if (hasOuterRadius) {
+                // Emit solid sides as annular wedges first.
+                for (let i = 0; i < sides.length; i++) {
+                    const side = sides[i][0];
+                    if (side == null || side.w <= 0 || side.color.a < 0.01)
+                        continue;
+                    if (side.style !== "solid")
+                        continue;
+                    const wid = `${idPrefix}bw${clipIdx++}`;
+                    defsParts.push(`<clipPath id="${wid}"><polygon points="${annularWedges[i]}"/></clipPath>`);
+                    svgParts.push(`${indent}<path d="${annularPath}" fill="${colorStr(side.color)}" fill-rule="evenodd" clip-path="url(#${wid})"/>`);
+                }
+                const rcid = `${idPrefix}br${clipIdx++}`;
+                defsParts.push(`<clipPath id="${rcid}"><path d="${roundedRectPath(el.x, el.y, el.width, el.height, corners)}"/></clipPath>`);
+                svgParts.push(`${indent}<g clip-path="url(#${rcid})">`);
+                roundedSideGroupOpen = true;
+            }
             for (let i = 0; i < sides.length; i++) {
                 const [side, x1, y1, x2, y2, len] = sides[i];
                 if (side == null || side.w <= 0 || side.color.a < 0.01)
@@ -861,21 +1592,34 @@ hiDPIFactor = 2) {
                 if (side.style === "none" || side.style === "hidden")
                     continue;
                 if (useTrapezoid(side)) {
+                    // DM-773: solid sides with rounded corners already emitted as
+                    // annular wedges above (geometry-correct for any radius). Skip
+                    // the legacy trapezoid emit so we don't double-paint.
+                    if (hasOuterRadius)
+                        continue;
                     // Emit as a polygon trapezoid that tapers correctly at corners.
                     svgParts.push(`${indent}<polygon points="${trapezoids[i][1]}" fill="${colorStr(side.color)}" />`);
                     continue;
                 }
-                if (side.style === "double" && side.w >= 3 && !collapse) {
+                if (side.style === "double" && side.w >= 3) {
                     // Two parallel strokes, each w/3 wide, separated by a w/3 gap.
                     // Outer stroke center sits at (sideCenter + outerNormal * w/3),
                     // inner at (sideCenter + innerNormal * w/3). Each stroke = w/3 thick.
+                    // DM-689: works in both collapse and non-collapse modes — the
+                    // `(x1, y1) → (x2, y2)` side endpoints are already collapse-aware
+                    // upstream (inset=0 puts the side centerline ON the cell's grid
+                    // edge in collapse mode), so adding the ±w/3 perpendicular
+                    // offsets lands the outer stroke 1/3 of the way past the edge
+                    // and the inner stroke 1/3 of the way inside — matching Blink's
+                    // `CollapsedBorderPainter::PaintCollapsedDoubleBorder`.
                     const strokeW = side.w / 3;
                     const offset_ = side.w / 3;
                     const [oxN, oyN, ixN, iyN] = doubleSides[i];
                     const ox = oxN * offset_, oy = oyN * offset_;
                     const ix = ixN * offset_, iy = iyN * offset_;
-                    svgParts.push(`${indent}<line x1="${r(x1 + ox)}" y1="${r(y1 + oy)}" x2="${r(x2 + ox)}" y2="${r(y2 + oy)}" stroke="${colorStr(side.color)}" stroke-width="${r(strokeW)}" />`);
-                    svgParts.push(`${indent}<line x1="${r(x1 + ix)}" y1="${r(y1 + iy)}" x2="${r(x2 + ix)}" y2="${r(y2 + iy)}" stroke="${colorStr(side.color)}" stroke-width="${r(strokeW)}" />`);
+                    const clipAttr = sideClipForStyle(i, side);
+                    svgParts.push(`${indent}<line x1="${r(x1 + ox)}" y1="${r(y1 + oy)}" x2="${r(x2 + ox)}" y2="${r(y2 + oy)}" stroke="${colorStr(side.color)}" stroke-width="${r(strokeW)}"${clipAttr} />`);
+                    svgParts.push(`${indent}<line x1="${r(x1 + ix)}" y1="${r(y1 + iy)}" x2="${r(x2 + ix)}" y2="${r(y2 + iy)}" stroke="${colorStr(side.color)}" stroke-width="${r(strokeW)}"${clipAttr} />`);
                     continue;
                 }
                 const { array: dash, offset } = adjustedDashAttrs(side.style, side.w, len);
@@ -886,8 +1630,11 @@ hiDPIFactor = 2) {
                 // butt caps so the dash:gap ratio paints flat-ended rectangles.
                 const linecap = side.style === "dotted" ? ` stroke-linecap="round"` : "";
                 const dashAttrs = dash !== "" ? ` stroke-dasharray="${dash}"${offset !== 0 ? ` stroke-dashoffset="${r(offset)}"` : ""}` : "";
-                svgParts.push(`${indent}<line x1="${r(x1)}" y1="${r(y1)}" x2="${r(x2)}" y2="${r(y2)}" stroke="${colorStr(side.color)}" stroke-width="${r(side.w)}"${dashAttrs}${linecap} />`);
+                const clipAttr = sideClipForStyle(i, side);
+                svgParts.push(`${indent}<line x1="${r(x1)}" y1="${r(y1)}" x2="${r(x2)}" y2="${r(y2)}" stroke="${colorStr(side.color)}" stroke-width="${r(side.w)}"${dashAttrs}${linecap}${clipAttr} />`);
             }
+            if (roundedSideGroupOpen)
+                svgParts.push(`${indent}</g>`);
         }
         else if (borderWidth > 0 && borderColor != null && borderColor.a > 0.01) {
             // Legacy path for elements whose per-side captures weren't parsed cleanly.
@@ -977,6 +1724,8 @@ hiDPIFactor = 2) {
                     svgParts.push(`${indent}</g>`);
                 if (opened)
                     svgParts.push(`${indent}</g>`);
+                if (needsFilterOuter)
+                    svgParts.push(`${indent}</g>`);
                 return;
             }
             const sized = injectSvgSize(el.svgContent, contentW, contentH);
@@ -987,14 +1736,17 @@ hiDPIFactor = 2) {
             const iconColor = el.styles.color != null && el.styles.color !== "" ? el.styles.color : "currentColor";
             svgParts.push(`${indent}<g transform="translate(${r(el.x + blW + plW)}, ${r(el.y + btW + ptW)})" color="${iconColor}">${sized}</g>`);
             // Close the wrappers opened above (animClass + opacity/transform/clip/mask
-            // group). Without these closes, an inline-SVG element with `opacity < 1`
-            // (or any other group-triggering style) emits an unbalanced `<g>` and
-            // breaks the document — observable on resend/stripe whose nav chevrons
-            // sit inside `opacity: 0.7` wrappers.
+            // group, plus the DM-704 filter-outer wrapper when present). Without
+            // these closes, an inline-SVG element with `opacity < 1` (or any other
+            // group-triggering style) emits an unbalanced `<g>` and breaks the
+            // document — observable on resend/stripe whose nav chevrons sit
+            // inside `opacity: 0.7` wrappers.
             if (animClass !== "")
                 svgParts.push(`${indent}</g>`);
             if (opened)
                 svgParts.push(`${indent}</g>`);
+            if (needsFilterOuter)
+                svgParts.push(`${indent}</g>`);
             return;
         }
         // Form control chrome (checkbox, radio, range, color, progress, meter,
@@ -1053,6 +1805,19 @@ hiDPIFactor = 2) {
             const contentY = el.y + _bwT + _padT;
             const contentW = Math.max(0, el.width - _bwL - _bwR - _padL - _padR);
             const contentH = Math.max(0, el.height - _bwT - _bwB - _padT - _padB);
+            // DM-670 / DM-672: if the `<img>` carries a border-radius, the painted
+            // image must clip to the rounded content area — otherwise a 40×40
+            // `border-radius: 50%` avatar paints as a square photo. Build a
+            // rounded-content-box clip once, reuse it whether we take the
+            // object-fit:none branch or the standard branch below.
+            const innerCorners = (borderRadius > 0 || (corners.tl.h + corners.tr.h + corners.bl.h + corners.br.h) > 0)
+                ? insetCornerRadii(corners, _bwT, _bwR, _bwB, _bwL)
+                : null;
+            const roundedClipId = innerCorners != null
+                ? `${idPrefix}irc${clipIdx++}` : null;
+            if (innerCorners != null && roundedClipId != null) {
+                defsParts.push(`<clipPath id="${roundedClipId}">${roundedRectSvg(contentX, contentY, contentW, contentH, innerCorners, "")}</clipPath>`);
+            }
             if (fit === "none" && el.imageIntrinsic != null && el.imageIntrinsic.w > 0 && el.imageIntrinsic.h > 0) {
                 // object-fit: none -> render image at intrinsic size, aligned via
                 // object-position inside the element's content box, and clip overflow.
@@ -1061,13 +1826,34 @@ hiDPIFactor = 2) {
                 const { hPct, vPct } = parseObjectPosition(el.styles.objectPosition ?? "50% 50%");
                 const ix = contentX + (contentW - iw) * (hPct / 100);
                 const iy = contentY + (contentH - ih) * (vPct / 100);
-                const clipId = `${idPrefix}ifn${clipIdx++}`;
-                defsParts.push(`<clipPath id="${clipId}"><rect x="${r(contentX)}" y="${r(contentY)}" width="${r(contentW)}" height="${r(contentH)}" /></clipPath>`);
+                // When a border-radius is present, prefer the rounded clip over the
+                // plain content-box rect (a rounded clip subsumes the rect clip:
+                // anything inside the rounded shape is also inside the box).
+                let clipId;
+                if (roundedClipId != null) {
+                    clipId = roundedClipId;
+                }
+                else {
+                    clipId = `${idPrefix}ifn${clipIdx++}`;
+                    defsParts.push(`<clipPath id="${clipId}"><rect x="${r(contentX)}" y="${r(contentY)}" width="${r(contentW)}" height="${r(contentH)}" /></clipPath>`);
+                }
                 svgParts.push(`${indent}<image href="${esc(embedResizedDataUri(el.imageSrc, iw, ih))}" x="${r(ix)}" y="${r(iy)}" width="${r(iw)}" height="${r(ih)}" preserveAspectRatio="none" clip-path="url(#${clipId})" />`);
             }
             else {
                 const par = preserveAspectRatioFor(fit, el.styles.objectPosition);
-                svgParts.push(`${indent}<image href="${esc(embedResizedDataUri(el.imageSrc, contentW, contentH))}" x="${r(contentX)}" y="${r(contentY)}" width="${r(contentW)}" height="${r(contentH)}" preserveAspectRatio="${par}" />`);
+                const clipAttr = roundedClipId != null ? ` clip-path="url(#${roundedClipId})"` : "";
+                // DM-819: Chrome doesn't honor `preserveAspectRatio` on `<image>`
+                // when the href is an SVG data URI — the embedded SVG paints at its
+                // own intrinsic size (viewBox or width/height) regardless of the
+                // outer slice/meet directive. Workaround: rewrite the inner SVG's
+                // top-level attrs to bake in our consumer width / height and the
+                // matching preserveAspectRatio so the inner SVG self-aligns, then
+                // emit the outer `<image>` with `preserveAspectRatio="none"` (which
+                // Chrome does honor for SVG sources). Pass-through for raster images.
+                const finalSrc = embedResizedDataUri(el.imageSrc, contentW, contentH);
+                const reHomedSrc = rewriteSvgDataUriPreserveAspectRatio(finalSrc, contentW, contentH, par);
+                const outerPar = reHomedSrc !== finalSrc ? "none" : par;
+                svgParts.push(`${indent}<image href="${esc(reHomedSrc)}" x="${r(contentX)}" y="${r(contentY)}" width="${r(contentW)}" height="${r(contentH)}" preserveAspectRatio="${outerPar}"${clipAttr} />`);
             }
         }
         // DM-457: rasterized snapshot for <canvas> / <video> / <iframe> /
@@ -1213,15 +1999,30 @@ hiDPIFactor = 2) {
                     const textPresDefault = /[➤]/g;
                     label = label.replace(textPresDefault, (ch) => ch + "︎");
                     const markerFontFamily = el.markerFontFamily ?? el.styles.fontFamily;
-                    // Position: marker right-aligned just left of the li's content edge,
-                    // mirroring the text-marker branch below.
-                    const smallGap = 4;
+                    // DM-790: SVG `<text text-anchor="end">` places the anchor at the
+                    // last glyph's advance-end, not its visible-right edge. Chromium
+                    // paints the marker so its visible right sits ~7 px from the
+                    // content edge (`kCMarkerPaddingPx` in
+                    // `list_marker.cc::InlineMarginsForOutside`). Shape the label
+                    // through fontkit and read the last non-whitespace glyph's rsb so
+                    // the anchor compensates exactly: `mx = el.x − 7 + rsb`. The
+                    // helper trims trailing whitespace before measuring because
+                    // Chrome's SVG renderer collapses trailing whitespace under
+                    // `xml:space="preserve"` (DM-789 probed this). Built-in numeric
+                    // markers ending in `.` resolve back to `el.x − 4` via this same
+                    // formula (period rsb ≈ 3 px in system-ui).
+                    const markerLastRsb = measureLastGlyphRsb(label, markerFontSize, markerFontFamily, markerFontWeight);
                     const padL = parseFloat(el.styles.paddingLeft ?? "0") || 0;
                     const borderL = parseFloat(el.styles.borderLeftWidth ?? "0") || 0;
-                    const mx = outside ? el.x - smallGap : el.x + borderL + padL;
+                    const mx = outside ? el.x - 7 + markerLastRsb : el.x + borderL + padL;
                     const anchor = outside ? "end" : "start";
                     const escLabel = label.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-                    svgParts.push(`${indent}<text x="${r(mx)}" y="${r(my)}" text-anchor="${anchor}" font-size="${r(markerFontSize)}" font-weight="${markerFontWeight}" font-family="${esc(markerFontFamily)}" fill="${markerColor}">${escLabel}</text>`);
+                    // DM-770: `@counter-style` suffixes like `":  "` carry multiple
+                    // consecutive spaces that SVG would collapse to a single space by
+                    // default. `xml:space="preserve"` keeps the marker label width
+                    // matching Chrome's paint.
+                    const xmlSpace = / {2,}/.test(label) ? ` xml:space="preserve"` : "";
+                    svgParts.push(`${indent}<text x="${r(mx)}" y="${r(my)}" text-anchor="${anchor}" font-size="${r(markerFontSize)}" font-weight="${markerFontWeight}" font-family="${esc(markerFontFamily)}" fill="${markerColor}"${xmlSpace}>${escLabel}</text>`);
                 }
                 else if (lsType === "disc" || lsType === "circle" || lsType === "square") {
                     // Chrome's `::marker` paints disc/circle/square at a hardcoded
@@ -1263,28 +2064,26 @@ hiDPIFactor = 2) {
                 }
                 else {
                     // Text-based marker (decimal / lower-alpha / lower-roman / etc.).
-                    // Chrome's default ::marker is right-aligned within the marker box
-                    // with a small UA-defined gap to the content (~4px on macOS Chrome).
-                    // Anchor to `el.x - smallGap` with text-anchor="end" so the marker's
-                    // right edge sits just left of the principal block — guessing the
-                    // marker's rendered width is unreliable across font fallbacks
-                    // ("1." is 11.5px in Helvetica, 13.6px in Inter, 18px in Courier),
-                    // and getting it ~10px wrong drives the entire visible offset.
+                    // Chrome's painted ::marker right edge sits ~7px left of li.x for
+                    // 16px sans-serif (pixel-probed on 03-lists-style-types DM-678 — the
+                    // VISIBLE last-pixel-of-"." sits at li.x - 7).
+                    //
+                    // SVG `text-anchor="end"` aligns the END of the LAST GLYPH'S ADVANCE
+                    // at `x`, not the visible right edge of that glyph. DM-790: measure
+                    // the last glyph's right-side-bearing through fontkit and add it
+                    // back to the visible-right target (`el.x − 7`, Chromium's
+                    // `kCMarkerPaddingPx`). For "01." the `.` glyph has ~3 px rsb in
+                    // system-ui Helvetica so `mx = el.x − 7 + 3 = el.x − 4` — the
+                    // previous hardcoded constant; for other suffixes (e.g. Greek-
+                    // marker styles ending in `)` or `α`) the rsb floats to whatever
+                    // the actual last glyph dictates.
                     const label = formatListMarker(lsType, idx) + ".";
-                    // DM-447: numeric / alpha / roman markers are painted with a ~8px
-                    // gap from the principal-block edge in Chrome (vs the previous
-                    // 4px estimate, which placed the marker too far right). Empirical
-                    // pixel measurement vs Chrome's painted output on the
-                    // 03-lists-marker fixture (16px monospace bold "1.") shows the
-                    // marker right edge sits ~7-8px left of li.x. The fixed-width
-                    // approximation is safer than text_width × heuristic since
-                    // monospace vs proportional font advance varies widely.
-                    const smallGap = 8;
+                    const markerFontFamily = el.markerFontFamily ?? el.styles.fontFamily;
+                    const builtinLastRsb = measureLastGlyphRsb(label, markerFontSize, markerFontFamily, markerFontWeight);
                     const padL = parseFloat(el.styles.paddingLeft ?? "0") || 0;
                     const borderL = parseFloat(el.styles.borderLeftWidth ?? "0") || 0;
-                    const mx = outside ? el.x - smallGap : el.x + borderL + padL;
+                    const mx = outside ? el.x - 7 + builtinLastRsb : el.x + borderL + padL;
                     const anchor = outside ? "end" : "start";
-                    const markerFontFamily = el.markerFontFamily ?? el.styles.fontFamily;
                     svgParts.push(`${indent}<text x="${r(mx)}" y="${r(my)}" text-anchor="${anchor}" font-size="${r(markerFontSize)}" font-weight="${markerFontWeight}" font-family="${esc(markerFontFamily)}" fill="${markerColor}">${label}</text>`);
                 }
             }
@@ -1339,10 +2138,38 @@ hiDPIFactor = 2) {
         // stroke="..." attribute the way the regular-element border path does.
         if (el.pseudoBoxes != null) {
             for (const pb of el.pseudoBoxes) {
+                // DM-783: snapshot svgParts.length so we can wrap THIS pb's emit in
+                // a `<g transform="…">` when pb.transform is present. The wrap pre-
+                // bakes the rotation/scale around the captured transform-origin so
+                // a rotate(45deg) on a `::before { border-right; border-bottom }`
+                // paints as a check-mark instead of a backwards-L (the rotation
+                // pivots around the box center, not the origin). When pb.transform
+                // is absent we splice nothing — the loop body's pushes flow through
+                // unchanged.
+                const pbStart = svgParts.length;
                 if (pb.backgroundColor) {
                     const rxAttr = pb.borderRadius && pb.borderRadius > 0 ? ` rx="${r(pb.borderRadius)}"` : "";
                     svgParts.push(`${indent}<rect x="${r(pb.x)}" y="${r(pb.y)}" width="${r(pb.width)}" height="${r(pb.height)}"${rxAttr} fill="${pb.backgroundColor}" />`);
                 }
+                // DM-767: pseudoBox background-image (linear-/radial-gradient).
+                // Emit each comma-separated layer in reverse order so layer 0 (first
+                // in CSS source) ends up on top — same convention as the regular-
+                // element background-image path. Each layer goes through
+                // `buildBackgroundLayerDef` to produce an SVG paint server, then a
+                // covering `<rect>` references it.
+                if (pb.backgroundImage != null && pb.backgroundImage !== "none" && pb.backgroundImage !== "") {
+                    const pbLayers = splitTopLevelCommas(pb.backgroundImage);
+                    for (let li = pbLayers.length - 1; li >= 0; li--) {
+                        const layer = pbLayers[li].trim();
+                        const defId = `${idPrefix}pbg${clipIdx++}`;
+                        const out = buildBackgroundLayerDef(defId, layer, pb.x, pb.y, pb.width, pb.height, "auto", "0% 0%", "repeat", null, "scroll", captureViewport);
+                        if (out.def === "")
+                            continue;
+                        defsParts.push(out.def);
+                        const rxAttr = pb.borderRadius && pb.borderRadius > 0 ? ` rx="${r(pb.borderRadius)}"` : "";
+                        svgParts.push(`${indent}<rect x="${r(pb.x)}" y="${r(pb.y)}" width="${r(pb.width)}" height="${r(pb.height)}"${rxAttr} fill="url(#${defId})" />`);
+                    }
+                }
                 // CSS triangle: 0×0 box with one solid border and adjacent borders
                 // transparent / zero. Borders meet at 45° corners and visually form
                 // a right triangle in the solid color. Detect + emit as <polygon>
@@ -1408,8 +2235,43 @@ hiDPIFactor = 2) {
                         const polyPts = pts.map((p) => `${r(p[0])},${r(p[1])}`).join(" ");
                         svgParts.push(`${indent}<polygon points="${polyPts}" fill="${color}" />`);
                     }
+                    flushPbTransformWrap();
                     continue;
                 }
+                // DM-765: when all four borders are uniform AND the pseudo has a
+                // non-zero border-radius (e.g. the `.dot::before { width: 8px;
+                // height: 8px; border: 2px solid; border-radius: 50% }` chip in
+                // `24-deep-pseudo-shapes`), the four straight `<line>` strokes
+                // would form a SQUARE outline around the rounded background fill,
+                // making a green-square-with-darker-square instead of the
+                // green-circle-with-darker-ring Chrome paints. Emit a single
+                // stroked `<rect rx>` in that case so the outline follows the
+                // background's curve.
+                const uniformBorder = bwT > 0 && bwT === bwR && bwR === bwB && bwB === bwL
+                    && pb.borderTopColor != null
+                    && pb.borderTopColor === pb.borderRightColor
+                    && pb.borderRightColor === pb.borderBottomColor
+                    && pb.borderBottomColor === pb.borderLeftColor
+                    && (pb.borderTopStyle == null || pb.borderTopStyle === pb.borderRightStyle);
+                if (uniformBorder && pb.borderRadius != null && pb.borderRadius > 0 && isOpaque(pb.borderTopColor)) {
+                    const style = pb.borderTopStyle ?? "solid";
+                    if (style !== "none" && style !== "hidden") {
+                        const w = bwT;
+                        const half = w / 2;
+                        // Inset the stroke rect by half the stroke width so the stroke
+                        // sits entirely inside the box (matches CSS, where borders paint
+                        // inside the border box).
+                        const sx = pb.x + half;
+                        const sy = pb.y + half;
+                        const sw = Math.max(0, pb.width - w);
+                        const sh = Math.max(0, pb.height - w);
+                        const sr = Math.max(0, pb.borderRadius - half);
+                        const dash = style === "dashed" ? ` stroke-dasharray="${r(w * 2)},${r(w * 2)}"` : style === "dotted" ? ` stroke-dasharray="${r(w)},${r(w)}"` : "";
+                        svgParts.push(`${indent}<rect x="${r(sx)}" y="${r(sy)}" width="${r(sw)}" height="${r(sh)}" rx="${r(sr)}" fill="none" stroke="${pb.borderTopColor}" stroke-width="${r(w)}"${dash} />`);
+                        flushPbTransformWrap();
+                        continue;
+                    }
+                }
                 // Per-side borders. Each painted side gets one <line> across the
                 // appropriate edge. For h=0 / w=0 boxes this collapses to a single
                 // visible hairline — the separator case.
@@ -1425,6 +2287,38 @@ hiDPIFactor = 2) {
                 side(pb.x + pb.width - (pb.borderRightWidth ?? 0) / 2, pb.y, pb.x + pb.width - (pb.borderRightWidth ?? 0) / 2, pb.y + pb.height, pb.borderRightWidth, pb.borderRightColor, pb.borderRightStyle);
                 side(pb.x, pb.y + pb.height - (pb.borderBottomWidth ?? 0) / 2, pb.x + pb.width, pb.y + pb.height - (pb.borderBottomWidth ?? 0) / 2, pb.borderBottomWidth, pb.borderBottomColor, pb.borderBottomStyle);
                 side(pb.x + (pb.borderLeftWidth ?? 0) / 2, pb.y, pb.x + (pb.borderLeftWidth ?? 0) / 2, pb.y + pb.height, pb.borderLeftWidth, pb.borderLeftColor, pb.borderLeftStyle);
+                // DM-783: wrap whatever this iteration emitted (rect / lines /
+                // polygon / per-side strokes) in a `<g transform="…">` that pre-
+                // bakes the rotation/scale around the captured transform-origin.
+                // Defined inline here so it closes over `pb` and `svgParts` /
+                // `pbStart` from the outer scope.
+                function flushPbTransformWrap() {
+                    if (pb.transform == null || pb.transform === "" || pb.transform === "none")
+                        return;
+                    const added = svgParts.splice(pbStart);
+                    if (added.length === 0)
+                        return;
+                    // transform-origin: resolved to px values relative to the
+                    // pseudo's box top-left (Chrome's getComputedStyle normalises
+                    // keywords / % to px). Default = box center (`50% 50%`).
+                    let ox = pb.width / 2;
+                    let oy = pb.height / 2;
+                    if (pb.transformOrigin != null && pb.transformOrigin !== "") {
+                        const oParts = pb.transformOrigin.split(/\s+/).map((p) => parseFloat(p));
+                        if (oParts.length >= 2 && Number.isFinite(oParts[0]) && Number.isFinite(oParts[1])) {
+                            ox = oParts[0];
+                            oy = oParts[1];
+                        }
+                    }
+                    const tx = pb.x + ox;
+                    const ty = pb.y + oy;
+                    // The inner emits were already indented; we keep the same
+                    // indent for the wrapper and strip leading indent from each
+                    // inner part so the wrapping `<g>` doesn't double-indent.
+                    const inner = added.map((s) => s.startsWith(indent) ? s.slice(indent.length) : s).join("");
+                    svgParts.push(`${indent}<g transform="translate(${r(tx)} ${r(ty)}) ${pb.transform} translate(${r(-tx)} ${r(-ty)})">${inner}</g>`);
+                }
+                flushPbTransformWrap();
             }
         }
         // Text rendering — delegated to text-renderer.ts based on configured mode
@@ -1440,8 +2334,26 @@ hiDPIFactor = 2) {
             const tfcRaw = el.styles.webkitTextFillColor;
             const tfc = tfcRaw != null ? parseColor(tfcRaw) : null;
             const textIsTransparent = (tfc != null ? tfc.a < 0.01 : (textColor != null && textColor.a < 0.01));
-            const fillColor = (textBgClipFill != null && textIsTransparent)
-                ? textBgClipFill
+            // Topmost text-clipped layer is the visible color over the glyphs when
+            // we fall into the non-mask path; in the mask path below ALL layers
+            // composite (DM-696). Find the topmost (lowest li) non-empty entry.
+            // DM-749: when this element has no text-bg-clip layers of its own but
+            // an ancestor has `background-clip: text` + a gradient (the Stripe
+            // hds-heading pattern — span with gradient + bg-clip:text wraps a
+            // child div with the actual text), build a gradient def from the
+            // captured `inheritedTextFillGradient` and use it as the fill.
+            let topmostTextBgClipFill = textBgClipFills.find((s) => s != null) ?? null;
+            if (topmostTextBgClipFill == null && textIsTransparent && el.styles.inheritedTextFillGradient != null && el.styles.inheritedTextFillGradient !== "" && el.styles.inheritedTextFillGradient !== "none") {
+                const layer = el.styles.inheritedTextFillGradient;
+                const defId = `${idPrefix}bg${clipIdx++}`;
+                const out = buildBackgroundLayerDef(defId, layer, el.x, el.y, el.width, el.height, "auto", "0% 0%", "no-repeat", null, "scroll", captureViewport);
+                if (out.def !== "") {
+                    defsParts.push(out.def);
+                    topmostTextBgClipFill = `url(#${defId})`;
+                }
+            }
+            const fillColor = (topmostTextBgClipFill != null && textIsTransparent)
+                ? topmostTextBgClipFill
                 : (textColor != null ? colorStr(textColor) : "#e6edf3");
             const cid = `${idPrefix}ct${clipIdx++}`;
             defsParts.push(`<clipPath id="${cid}"><rect x="${r(el.x)}" y="${r(el.y)}" width="${r(el.width)}" height="${r(el.height)}" /></clipPath>`);
@@ -1459,16 +2371,45 @@ hiDPIFactor = 2) {
                 svgParts.push(`${indent}<image href="${er.dataUri}" x="${r(er.x)}" y="${r(er.y)}" width="${r(er.width)}" height="${r(er.height)}" preserveAspectRatio="none" clip-path="url(#${cid})"/>`);
             }
             else {
+                // DM-782: pseudoBox gradient/url() emitter. The text renderer can't
+                // own defsParts / clipIdx (those live in the element-tree render loop)
+                // so we hand it a closure that produces the gradient layer rects +
+                // appends each layer's `<linearGradient>` / `<radialGradient>` paint
+                // server to defsParts. Same emit shape as the empty-content pseudoBox
+                // path below — comma-separated layers walked in reverse so layer 0
+                // (first in CSS source) ends up on top.
+                const emitPseudoBoxBgLayers = (pb) => {
+                    const layers = splitTopLevelCommas(pb.backgroundImage);
+                    const out = [];
+                    for (let li = layers.length - 1; li >= 0; li--) {
+                        const layer = layers[li].trim();
+                        const defId = `${idPrefix}pbgt${clipIdx++}`;
+                        const built = buildBackgroundLayerDef(defId, layer, pb.x, pb.y, pb.width, pb.height, "auto", "0% 0%", "repeat", null, "scroll", captureViewport);
+                        if (built.def === "")
+                            continue;
+                        defsParts.push(built.def);
+                        const rxAttr = pb.borderRadius != null && pb.borderRadius > 0 ? ` rx="${r(pb.borderRadius)}" ry="${r(pb.borderRadius)}"` : "";
+                        out.push(`<rect x="${r(pb.x)}" y="${r(pb.y)}" width="${r(pb.width)}" height="${r(pb.height)}"${rxAttr} fill="url(#${defId})" />`);
+                    }
+                    return out.join("");
+                };
                 const renderOneText = (opts) => {
+                    const optsWithEmit = { ...opts, emitPseudoBoxBgLayers };
                     const hasMultipleSegments = opts.el.textSegments != null && opts.el.textSegments.length > 1;
                     const isMultiLine = opts.el.text.includes("\n");
+                    // DM-799: input/textarea dispatch must come BEFORE the multi-line
+                    // branch. A textarea with newline-bearing value (`\n` in `el.text`)
+                    // would otherwise hit `renderMultiLineText`, which path-renders each
+                    // source line without word-wrap — Lorem-ipsum lines overflowed the
+                    // textarea's right edge instead of being painted from the captured
+                    // `elementRaster` PNG (which carries Chrome's own wrapping).
+                    if (opts.el.tag === "input" || opts.el.tag === "textarea")
+                        return renderInputText(optsWithEmit);
                     if (hasMultipleSegments)
-                        return renderMultiSegmentText(opts, opts.el.textSegments);
+                        return renderMultiSegmentText(optsWithEmit, opts.el.textSegments);
                     if (isMultiLine)
-                        return renderMultiLineText(opts);
-                    if (opts.el.tag === "input" || opts.el.tag === "textarea")
-                        return renderInputText(opts);
-                    return renderSingleLineText(opts);
+                        return renderMultiLineText(optsWithEmit);
+                    return renderSingleLineText(optsWithEmit);
                 };
                 // text-shadow (SK-1113): render each shadow as a recolored copy of
                 // the same text, shifted by the shadows (x, y) and wrapped in a
@@ -1521,7 +2462,8 @@ hiDPIFactor = 2) {
                 const toy = el.styles.overflowY;
                 const textOverflowClip = (tox != null && tox !== "visible") || (toy != null && toy !== "visible");
                 const renderOpts = { el, idPrefix, clipId: cid, fillColor, overflowClip: textOverflowClip };
-                if (textBgClipFill != null && textIsTransparent) {
+                const hasTextBgClip = textBgClipFills.some((s) => s != null);
+                if (hasTextBgClip && textIsTransparent) {
                     // DM-462: background-clip:text — the bg-image should fill the glyph
                     // shapes, not the headline element rect. We render the text glyphs
                     // INTO an SVG <mask> (with white fill so the mask reveals the bg
@@ -1539,7 +2481,17 @@ hiDPIFactor = 2) {
                     const maskBody = renderOneText({ el: maskFillEl, idPrefix, clipId: cid, fillColor: "rgb(255,255,255)", overflowClip: textOverflowClip });
                     const mid = `${idPrefix}tbgm${clipIdx++}`;
                     defsParts.push(`<mask id="${mid}" maskUnits="userSpaceOnUse" x="${r(el.x)}" y="${r(el.y)}" width="${r(el.width)}" height="${r(el.height)}">${maskBody}</mask>`);
-                    svgParts.push(`${indent}<rect x="${r(el.x)}" y="${r(el.y)}" width="${r(el.width)}" height="${r(el.height)}" fill="${textBgClipFill}" mask="url(#${mid})" />`);
+                    // Emit one masked rect per text-clipped layer, walking from BOTTOM
+                    // (highest li) to TOP (li = 0) so the topmost CSS layer paints last.
+                    // All rects share the same glyph mask; later rects paint over earlier
+                    // ones inside the glyph silhouettes, matching Chrome's compositing of
+                    // stacked `background-clip: text` layers (DM-696).
+                    for (let li = textBgClipFills.length - 1; li >= 0; li--) {
+                        const f = textBgClipFills[li];
+                        if (f == null)
+                            continue;
+                        svgParts.push(`${indent}<rect x="${r(el.x)}" y="${r(el.y)}" width="${r(el.width)}" height="${r(el.height)}" fill="${f}" mask="url(#${mid})" />`);
+                    }
                 }
                 else {
                     svgParts.push(`${indent}${renderOneText(renderOpts)}`);
@@ -1672,25 +2624,44 @@ hiDPIFactor = 2) {
                 svgParts.push(`${indent}<text x="${r(markerRightX)}" y="${r(ty)}" text-anchor="end" font-size="${r(fontSizePx)}" font-family="${esc(el.styles.fontFamily)}" fill="${fillCol}">${escMarker}</text>`);
             }
         }
-        // Textarea resize handle (DM-339): when CSS `resize` is non-none on a
-        // <textarea>, Chrome's UA stylesheet paints a small ~7×7 diagonal-line
-        // pattern in the bottom-right corner indicating the user can drag to
-        // resize. Empirical: 3 diagonal lines from the corner extending up-left,
-        // ~1.5px stroke, mid-gray (#999), inside the padding-box. Matches what
-        // Chrome paints across resize: vertical / horizontal / both / inline /
-        // block (only `none` suppresses).
-        if (el.tag === "textarea" && el.styles.resize != null && el.styles.resize !== "none") {
+        // Resize handle (DM-339): when CSS `resize` is non-none and the element
+        // is a resizable type, Chrome paints a small ~7×7 diagonal-line pattern
+        // in the bottom-right corner indicating the user can drag to resize.
+        // Empirical: 3 diagonal lines from the corner extending up-left, ~1.5px
+        // stroke, mid-gray (#999), inside the padding-box. Matches what Chrome
+        // paints across resize: vertical / horizontal / both / inline / block
+        // (only `none` suppresses).
+        //
+        // Per CSS UI spec §6.3 + Chrome's `LayoutBox::CanResize`: the handle
+        // paints on any replaced element OR any block-level element with
+        // `overflow` other than `visible` (the spec says `resize` only takes
+        // effect when overflow != visible, and Chrome only renders the grippy
+        // when the property is "in effect"). So textareas always qualify
+        // (textarea UA style sets overflow:auto), but plain divs with
+        // `overflow: auto; resize: both` qualify too.
+        const resizeInEffect = el.styles.resize != null && el.styles.resize !== "none"
+            && (el.tag === "textarea"
+                || (el.styles.overflowX != null && el.styles.overflowX !== "visible")
+                || (el.styles.overflowY != null && el.styles.overflowY !== "visible"));
+        if (resizeInEffect) {
             const handleColor = "rgb(153,153,153)";
             const handleSize = 7;
-            // Position the handle so its bottom-right corner sits at the textarea's
-            // border-box bottom-right minus a 2px inset (matches Chrome's painted
-            // offset).
-            const cx = el.x + el.width - 2;
-            const cy = el.y + el.height - 2;
+            // Position the handle so its bottom-right corner sits just INSIDE the
+            // inner (padding-box) corner — the diagonals then sweep up-left into
+            // the padding area where they're visible against the content
+            // background. Inset by the border widths plus a small 1 px gap.
+            // (Matches Chrome's painted offset; previously we used a fixed 2 px
+            // inset from the border-box which worked for thin-border textareas
+            // but parked the handle on top of the dark border on thicker-bordered
+            // divs in `30-resize`. DM-707.)
+            const borderR = parseFloat(el.styles.borderRightWidth ?? "0") || 0;
+            const borderB = parseFloat(el.styles.borderBottomWidth ?? "0") || 0;
+            const cx = el.x + el.width - borderR;
+            const cy = el.y + el.height - borderB;
             // Three diagonal strokes 2px apart sloping from bottom-right to upper-left.
             for (let i = 0; i < 3; i++) {
                 const off = i * 2.5;
-                svgParts.push(`${indent}<line x1="${r(cx - handleSize + off)}" y1="${r(cy)}" x2="${r(cx)}" y2="${r(cy - handleSize + off)}" stroke="${handleColor}" stroke-width="0.7" />`);
+                svgParts.push(`${indent}<line x1="${r(cx - handleSize + off)}" y1="${r(cy)}" x2="${r(cx)}" y2="${r(cy - handleSize + off)}" stroke="${handleColor}" stroke-width="1" />`);
             }
         }
         // Overflow clipping: when a parent has overflow != visible (hidden/scroll/
@@ -1720,15 +2691,99 @@ hiDPIFactor = 2) {
         const containClips = containVal != null && containVal !== "" && containVal !== "none"
             && /\b(?:paint|strict|content)\b/i.test(containVal);
         const clipsOverflow = (ox != null && ox !== "visible") || (oy != null && oy !== "visible") || containClips;
+        // DM-650: same body-overflow-propagation rule as the earlier clip-path
+        // emission — when body has non-visible overflow it propagates to the
+        // viewport rather than clipping body itself; skip the children-overflow
+        // clip too so descendants positioned outside body's bbox (e.g. NYT
+        // desktop's content wrapper, which extends below body's height: 100vh
+        // box) stay visible after the document scroll moves body off-viewport.
+        const isBodyOverflowPropagatedHere = el.tag === "body";
         let overflowClipId = null;
-        if (clipsOverflow && el.children.length > 0) {
+        if (clipsOverflow && !isBodyOverflowPropagatedHere && el.children.length > 0) {
             overflowClipId = `${idPrefix}ov${clipIdx++}`;
             const cbt = parseFloat(el.styles.borderTopWidth ?? "0") || 0;
             const cbr = parseFloat(el.styles.borderRightWidth ?? "0") || 0;
             const cbb = parseFloat(el.styles.borderBottomWidth ?? "0") || 0;
             const cbl = parseFloat(el.styles.borderLeftWidth ?? "0") || 0;
-            defsParts.push(`<clipPath id="${overflowClipId}">${roundedRectSvg(el.x + cbl, el.y + cbt, Math.max(0, el.width - cbl - cbr), Math.max(0, el.height - cbt - cbb), corners, "")}</clipPath>`);
+            // DM-698: overflow clips to the inner border-radius (per CSS Backgrounds 3
+            // — the rounded clip on the padding box uses radii inset by each side's
+            // border width, clamped to zero). Previously we passed the OUTER `corners`
+            // which made the clip too generous near each corner, exposing a sliver of
+            // the parent's background between the border and the clipped child.
+            // (e.g. `18-deep-radius-overflow` `.card` border-radius:32 / border:4 +
+            // child `position:absolute inset:0`: 4 px gradient sliver visible inside
+            // each rounded corner.)
+            const overflowInnerCorners = insetCornerRadii(corners, cbt, cbr, cbb, cbl);
+            // Default clip = padding box (border-inset). DM-761: when `overflow: clip`
+            // (only — `hidden` ignores it) plus a non-zero `overflow-clip-margin`,
+            // the clip extends outward from a reference box. The shorthand resolves
+            // to either `"<length>"` (defaults to padding-box reference) or
+            // `"<ref-box> <length>"` where ref-box is content-box / padding-box /
+            // border-box. The clip rect grows by the length on every side from the
+            // chosen ref-box edge. Corner radii on the expanded clip are left at
+            // the inner-border-radius value — that's how Chrome paints it: the
+            // outset region is a rectangular extension, not a radial expansion.
+            let ocX = el.x + cbl;
+            let ocY = el.y + cbt;
+            let ocW = Math.max(0, el.width - cbl - cbr);
+            let ocH = Math.max(0, el.height - cbt - cbb);
+            const isClip = ox === "clip" || oy === "clip";
+            // DM-787: CSS Overflow 3 allows mixing `overflow-x: clip; overflow-y:
+            // visible` (only `clip` permits this — `hidden + visible` coerces to
+            // `auto + hidden`). Chrome clips only the clipped axis; content can
+            // still escape on the visible axis. The SVG clipPath is a single rect,
+            // so to NOT clip on an axis we extend that axis past any plausible
+            // paint area with `±UNBOUNDED`. Apply before the `overflow-clip-margin`
+            // expansion so the per-axis grow happens AFTER ref-box adjustments.
+            const UNBOUNDED = 100000;
+            const xVisible = ox === "visible" && oy === "clip";
+            const yVisible = oy === "visible" && ox === "clip";
+            const ocmRaw = el.styles.overflowClipMargin;
+            if (isClip && ocmRaw != null && ocmRaw !== "" && ocmRaw !== "0px") {
+                const m = /^(?:(content-box|padding-box|border-box)\s+)?(-?\d*\.?\d+)px$/i.exec(ocmRaw.trim());
+                if (m) {
+                    const refBox = (m[1] ?? "padding-box").toLowerCase();
+                    const margin = parseFloat(m[2]);
+                    // Reference-box edges relative to (el.x, el.y) border-box top-left:
+                    //   border-box  → 0
+                    //   padding-box → border width (cbl/cbt/cbr/cbb)
+                    //   content-box → border + padding
+                    let refL = 0, refT = 0, refR = 0, refB = 0;
+                    if (refBox === "padding-box") {
+                        refL = cbl;
+                        refT = cbt;
+                        refR = cbr;
+                        refB = cbb;
+                    }
+                    else if (refBox === "content-box") {
+                        const pT = parseFloat(el.styles.paddingTop ?? "0") || 0;
+                        const pR = parseFloat(el.styles.paddingRight ?? "0") || 0;
+                        const pB = parseFloat(el.styles.paddingBottom ?? "0") || 0;
+                        const pL = parseFloat(el.styles.paddingLeft ?? "0") || 0;
+                        refL = cbl + pL;
+                        refT = cbt + pT;
+                        refR = cbr + pR;
+                        refB = cbb + pB;
+                    }
+                    ocX = el.x + refL - margin;
+                    ocY = el.y + refT - margin;
+                    ocW = Math.max(0, el.width - refL - refR + margin * 2);
+                    ocH = Math.max(0, el.height - refT - refB + margin * 2);
+                }
+            }
+            if (xVisible) {
+                ocX = el.x - UNBOUNDED;
+                ocW = el.width + UNBOUNDED * 2;
+            }
+            if (yVisible) {
+                ocY = el.y - UNBOUNDED;
+                ocH = el.height + UNBOUNDED * 2;
+            }
+            defsParts.push(`<clipPath id="${overflowClipId}">${roundedRectSvg(ocX, ocY, ocW, ocH, overflowInnerCorners, "")}</clipPath>`);
             svgParts.push(`${indent}<g clip-path="url(#${overflowClipId})">`);
+            // DM-673: stash the clip-path id so hoisted descendants of this
+            // overflow scroller can re-wrap their emission in the same clip.
+            overflowClipPathIds.set(el, overflowClipId);
         }
         // Children — sorted by CSS paint order. Elements with position != static
         // and an explicit integer z-index paint in z-index order (negative below,
@@ -1748,15 +2803,80 @@ hiDPIFactor = 2) {
         // children that are flex/grid items honor z-index ≠ auto as a stacking
         // context creator and z-sort accordingly.
         const childParentDisplay = el.styles.display;
+        const hoistedAsInlineForEl = new Set();
+        const hoistedAsZSortedForEl = new Set();
         if (establishesStackingContext(el, parentDisplayForEl)) {
-            childrenForSort = gatherStackingContextChildren(baseChildren, hoistedFromAncestor, childParentDisplay, true);
+            childrenForSort = gatherStackingContextChildren(baseChildren, hoistedFromAncestor, childParentDisplay, hoistedAsInlineForEl, overflowClipForHoisted, hoistedAsZSortedForEl);
         }
         else {
             childrenForSort = baseChildren.filter((c) => !hoistedFromAncestor.has(c));
         }
-        const sortedChildren = sortChildrenByPaintOrder(childrenForSort, childParentDisplay, el.styles.flexDirection);
+        let sortedChildren = sortChildrenByPaintOrder(childrenForSort, childParentDisplay, el.styles.flexDirection, hoistedAsInlineForEl, hoistedAsZSortedForEl);
+        // DM-751: when this element establishes a 3D rendering context
+        // (`transform-style: preserve-3d`), CSS Transforms 2 §6 sorts children
+        // by their Z position in 3D space — translateZ — not by z-index. Re-
+        // sort the already-positioned children by extracted translateZ
+        // ascending, with DOM order tie-breaks, so a child with a small
+        // z-index but a positive translateZ paints above siblings with bigger
+        // z-index but translateZ=0. Approximation: ignore perspective effects
+        // (which would also shrink / shift the painted box) and just use the
+        // captured `matrix3d` `m43` translation. Without this the
+        // `transform-style: preserve-3d` panel in `13-deep-cross-sc-z-index`
+        // paints orange (`translateZ(20px)`, z=1) BEHIND purple (z=5) and sky
+        // (z=10), instead of in front of both as Chrome paints.
+        if (el.styles.transformStyle === "preserve-3d") {
+            const zOf = (c) => c.styles.translateZ ?? 0;
+            sortedChildren = sortedChildren
+                .map((c, idx) => ({ c, idx, z: zOf(c) }))
+                .sort((a, b) => a.z - b.z || a.idx - b.idx)
+                .map((x) => x.c);
+        }
         for (const child of sortedChildren) {
-            renderElement(child, depth + 1, childParentDisplay);
+            renderElementWithOverflowClip(child, depth + 1, childParentDisplay);
+        }
+        // DM-808: MathML `<mfrac>` needs a horizontal fraction bar between its
+        // numerator (first child) and denominator (second child). Chrome's
+        // MathML layout paints this from internal layout — there's no CSS
+        // border on the children to capture. Synthesize the bar from the two
+        // children's rects: span the wider of the two horizontally, place at
+        // the midpoint between numerator bottom and denominator top, default
+        // 1px thickness (matches MathML's `mfrac@linethickness="medium"`).
+        if (el.tag === "mfrac" && el.children.length >= 2) {
+            const num = el.children[0];
+            const den = el.children[1];
+            const barX = Math.min(num.x, den.x);
+            const barRight = Math.max(num.x + num.width, den.x + den.width);
+            const barY = (num.y + num.height + den.y) / 2 - 0.5;
+            const fillCol = el.styles.color ? esc(el.styles.color) : "rgb(0,0,0)";
+            svgParts.push(`${indent}<rect x="${r(barX)}" y="${r(barY)}" width="${r(barRight - barX)}" height="1" fill="${fillCol}" />`);
+        }
+        // DM-809: MathML `<msqrt>` / `<mroot>` need their radical sign + over-
+        // bar synthesised — Chrome's MathML layout paints them from internal
+        // layout (no border / glyph capture). The msqrt's first radicand
+        // child's `x` is inset from `el.x` by the radical-sign width, and
+        // its `y` is inset by the overbar height — derive the radical
+        // geometry from those rects. Stroke a 3-segment path: leftmost mid-
+        // height vertex → bottom-right of radical area → top of overbar; then
+        // a horizontal overbar from the radicand's left to msqrt's right edge.
+        // For `<mroot>` the structure is `<mroot><radicand><index></mroot>`
+        // (index is a small superscript inside the radical's "hook"); we only
+        // draw the radical + overbar — the index renders normally as a child
+        // glyph.
+        if ((el.tag === "msqrt" || el.tag === "mroot") && el.children.length >= 1) {
+            const radicand = el.children[0];
+            const strokeCol = el.styles.color ? esc(el.styles.color) : "rgb(0,0,0)";
+            const radX0 = el.x;
+            const radX1 = radicand.x;
+            const radTop = el.y;
+            const radBottom = el.y + el.height;
+            const radMid = el.y + el.height * 0.6;
+            const radRight = el.x + el.width;
+            // Radical checkmark: enter at (radX0, radMid), descend to bottom at
+            // 40% across the radical-sign zone, climb to top-right at radicand
+            // start. Then overbar across the top.
+            const vertexX = radX0 + (radX1 - radX0) * 0.4;
+            const path = `M${r(radX0)},${r(radMid)} L${r(vertexX)},${r(radBottom - 1)} L${r(radX1)},${r(radTop)} L${r(radRight)},${r(radTop)}`;
+            svgParts.push(`${indent}<path d="${path}" fill="none" stroke="${strokeCol}" stroke-width="1" />`);
         }
         if (overflowClipId != null)
             svgParts.push(`${indent}</g>`);
@@ -1773,6 +2893,8 @@ hiDPIFactor = 2) {
             svgParts.push(`${indent}</g>`);
         if (opened)
             svgParts.push(`${indent}</g>`);
+        if (needsFilterOuter)
+            svgParts.push(`${indent}</g>`);
     }
     // Sort top-level siblings by CSS paint order too. captureElementTree
     // returns the root element's children as a flat array (body's children for
@@ -1783,7 +2905,9 @@ hiDPIFactor = 2) {
     // DM-473: top-level element list is the implicit root stacking context —
     // flatten it the same way an SC root would, so cross-parent z-index
     // hoisting works at the document root.
-    const topLevelFlat = gatherStackingContextChildren(elements, hoistedFromAncestor);
+    const topLevelHoistedAsInline = new Set();
+    const topLevelHoistedAsZSorted = new Set();
+    const topLevelFlat = gatherStackingContextChildren(elements, hoistedFromAncestor, undefined, topLevelHoistedAsInline, overflowClipForHoisted, topLevelHoistedAsZSorted);
     // DM-543: position:fixed elements paint relative to the viewport stacking
     // context and escape ALL ancestor overflow clips. The standard SC-by-SC
     // hoist halts at any SC ancestor (e.g. an overflow:auto section creates an
@@ -1818,13 +2942,19 @@ hiDPIFactor = 2) {
             collectViewportFixed(e);
         }
     }
-    const sortedTopLevel = sortChildrenByPaintOrder(topLevelFlat);
+    const sortedTopLevel = sortChildrenByPaintOrder(topLevelFlat, undefined, undefined, topLevelHoistedAsInline, topLevelHoistedAsZSorted);
     for (const el of sortedTopLevel) {
-        renderElement(el, 1);
+        renderElementWithOverflowClip(el, 1);
     }
     // Prepend defs block: clipPaths + optional glyph path definitions. For
     // animated multi-frame SVGs the caller passes includeGlyphDefs=false and
     // collects glyph defs once at the top level via getGlyphDefs().
+    // DM-652: embedded-font `@font-face` rules are NOT emitted here — the
+    // base64-encoded font bytes can be megabytes each, so duplicating them
+    // per-segment in a multi-frame SVG would balloon file size unmanageably.
+    // Callers that drive embedded-font mode must call
+    // `getEmbeddedFontFaceCss()` themselves once at the top level (see how
+    // `composeScrollSvg` injects it into the outer <style>).
     const glyphDefsMarkup = includeGlyphDefs ? getGlyphDefs() : "";
     const allDefs = defsParts.join("") + glyphDefsMarkup;
     const defs = allDefs !== "" ? `  <defs>${allDefs}</defs>\n` : "";
@@ -2009,12 +3139,73 @@ function establishesStackingContext(el, parentDisplay) {
  * are NOT recursed into — they bring their own SC scope and their internal
  * paint order resolves independently when their renderElement runs.
  */
-function gatherStackingContextChildren(children, hoistedOut, parentDisplay, hoistTargetIsRealSC = false) {
+function gatherStackingContextChildren(children, hoistedOut, parentDisplay, 
+/**
+ * DM-683: out-parameter populated with elements that should paint at CSS
+ * 2.1 Appendix E step 5 (in-flow inline-level non-positioned) rather than
+ * step 3 (block). Currently only flex/grid items are tagged here — they
+ * paint as inline blocks per CSS Flexbox 1 §5.4 / CSS Grid 1 §17.
+ * `sortChildrenByPaintOrder` reads this set to route members into the
+ * inline bucket (between floats and zeroOrAuto).
+ */
+hoistedAsInline, 
+/**
+ * DM-673: when set, this map is populated with `{ hoistedDescendant →
+ * overflow-clip ancestor }` for any positioned descendant that escapes an
+ * `overflow != visible` ancestor whose ONLY SC-creating property is the
+ * overflow. The renderer reads this map to re-wrap the descendant's
+ * emission in the same `<g clip-path>` the ancestor would have wrapped
+ * it in had it stayed nested.
+ */
+overflowClipForHoisted, 
+/**
+ * DM-712: out-parameter populated with flex/grid items that were hoisted
+ * because they carry an explicit z-index. Once hoisted, the sort needs
+ * to know to z-bucket these (CSS Flexbox 1 §5.4 / CSS Grid 1 §17) — the
+ * sort's own `isFlexGrid` check fires off the immediate-parent display,
+ * which is the SC root after hoisting (typically `block`), losing the
+ * original "flex item with z" signal. `sortChildrenByPaintOrder` reads
+ * this set and routes members through the positive / zeroOrAuto buckets
+ * based on the captured z-index.
+ */
+hoistedAsZSorted) {
     const out = [];
-    const collectFromNonSC = (parent) => {
+    /**
+     * `floatHoistBlocked` is true once the recursion descends through a
+     * `position:relative` / `position:absolute` ancestor with `z-index: auto`
+     * (or `0`). Per CSS 2.1 Appendix E §6, such an element paints at step 6
+     * as if it were a stacking context, but its positioned + SC descendants
+     * still belong to the parent SC. Floats inside an atomic positioned
+     * ancestor stay with it (they paint at step 4 of the atomic group's
+     * internal paint order), not at the parent SC's step 4. Without this gate
+     * a float hoisted past its atomic positioned ancestor paints BENEATH
+     * the ancestor's atomic content — Slashdot's mobile `<a class="login">`
+     * float inside `.header { z-index:1000; position:static }` (descendant
+     * of `.stages { position:relative }`) was rendering before the white
+     * `.river-prop` page background and disappeared completely.
+     */
+    const collectFromNonSC = (parent, floatHoistBlocked = false, currentOverflowAncestor = null) => {
         const childParentDisplay = parent.styles.display;
         const parentIsFlexGrid = isFlexOrGridContainerDisplay(childParentDisplay);
-        for (const c of parent.children) {
+        // DM-537: when the parent is a flex/grid container, flex items hoisted
+        // out of it into the parent SC's flat paint list must carry their
+        // order-modified document order with them. The post-hoist
+        // `sortChildrenByPaintOrder` runs with the parent SC's display (often
+        // `block`) so its own `isFlexGrid` check fires `false` and the inline
+        // bucket falls back to DOM order — losing the flex `order` reordering
+        // and the `flex-direction: *-reverse` paint reversal. Pre-sort the
+        // iteration here so the hoisted items land in the right order in `out`.
+        let iterChildren = parent.children;
+        if (parentIsFlexGrid && iterChildren.length > 1) {
+            const sorted = iterChildren
+                .map((c, idx) => ({ c, idx, ord: parseInt(c.styles.order ?? "0", 10) || 0 }))
+                .sort((a, b) => a.ord - b.ord || a.idx - b.idx)
+                .map((x) => x.c);
+            const fd = parent.styles.flexDirection;
+            const reverseFlex = fd === "row-reverse" || fd === "column-reverse";
+            iterChildren = reverseFlex ? sorted.slice().reverse() : sorted;
+        }
+        for (const c of iterChildren) {
             // DM-543: skip elements already hoisted by a higher SC pass (e.g. a
             // root-level position:fixed pre-pass added this pin to topLevelFlat;
             // re-pushing it here would double-emit it inside the local clip group).
@@ -2034,16 +3225,18 @@ function gatherStackingContextChildren(children, hoistedOut, parentDisplay, hois
             // button's z:4 hoist never fired — position:static + the legacy
             // `if (positioned)` check skipped it.)
             //
-            // Only hoist when the hoist target is a real SC: at the implicit
-            // top-level (no enclosing SC element captured), the eventual sort
-            // can't know `parentDisplay`, so a hoisted flex-item-z would lose
-            // its z-bucket and paint in DOM order. In that case we leave the
-            // element in place and let its parent's local flex sort handle the
-            // z-ordering naturally — DM-525's local-sort path covers the
-            // direct-flex-child case correctly.
+            // Both hoist targets are real stacking contexts: a per-element SC root
+            // (the `renderElement` call) and the implicit document root (the
+            // top-level call) — `gatherStackingContextChildren` only ever recurses
+            // through non-SC / overflow-only-SC ancestors, so a flex-item-z is only
+            // reached here when its nearest *real* SC ancestor is the hoist target.
+            // The z-bucket survives the hoist via the `hoistedAsZSorted` tag below,
+            // which `sortChildrenByPaintOrder` reads even when `parentDisplay` isn't
+            // flex/grid (e.g. the `block` document root) — so the item z-sorts
+            // correctly rather than falling into the inline bucket in DOM order.
             const zRaw = c.styles.zIndex;
             const hasExplicitZ = zRaw != null && zRaw !== "" && zRaw !== "auto";
-            const flexGridItemSC = hoistTargetIsRealSC && parentIsFlexGrid && hasExplicitZ;
+            const flexGridItemSC = parentIsFlexGrid && hasExplicitZ;
             // DM-639: per CSS 2.1 §9.9 paint order, ALL floats in a stacking
             // context paint at step 4 — AFTER all block-level non-positioned
             // descendants (step 3) of the SC. Floats are not confined to their
@@ -2054,12 +3247,64 @@ function gatherStackingContextChildren(children, hoistedOut, parentDisplay, hois
             // Real-world hit: 14-deep-float-bfc section 1's float-left FL extends
             // ~60 px below the .frame and is covered by section 2's gray bar.
             const isFloat = !positioned && (c.styles.float ?? "none") !== "none";
-            if (positioned || flexGridItemSC || isFloat) {
+            // DM-683: per CSS Flexbox 1 §5.4 ("Flex items paint exactly the same
+            // as inline blocks"), flex items paint at CSS 2.1 Appendix E step 5
+            // (in-flow inline-level non-positioned descendants) — AFTER block
+            // siblings at step 3 + floats at step 4 within the same stacking
+            // context. When a flex item OVERFLOWS its flex container and the
+            // container has block-level following siblings (e.g. `15-deep-flex-
+            // aspect-ratio` section 2: `.row.col` with a `1:2` aspect-ratio item
+            // 388 px tall inside a 360 px tall container, followed by `.frame3`
+            // — Chrome paints the overflowing item ON TOP of `.frame3` because
+            // step 5 > step 3), our DOM-order paint covered the overflow with
+            // the following sibling. Hoist flex items to the SC root paint list
+            // so the post-sort places them after step-3 blocks, mirroring the
+            // float-hoist (DM-639) pattern. Same atomic-positioned-ancestor
+            // gate as floats: a `position:relative` z=auto ancestor scopes the
+            // item to its own atomic paint.
+            const isFlexItem = !positioned && parentIsFlexGrid;
+            if (positioned || flexGridItemSC || (isFloat && !floatHoistBlocked) || (isFlexItem && !floatHoistBlocked)) {
                 out.push(c);
                 hoistedOut.add(c);
+                if (isFlexItem && !positioned && !flexGridItemSC) {
+                    hoistedAsInline?.add(c);
+                }
+                // DM-712 / DM-687: a flex/grid item hoisted because of its explicit
+                // z-index (not because it's positioned) loses its z-bucket info once
+                // it's a child of the SC root for sort purposes. Tag it so the sort
+                // still buckets it by z. Without this, e.g. resend.com's "Contact
+                // management" card paints its z:10 content BEFORE its z:auto
+                // absolute-positioned gradient overlay sibling (gradient ends up on
+                // top and reads as solid black), and `13-deep-z-index-flex-grid`
+                // painted A z:4 BEHIND D z:2 because its flex container hung off the
+                // implicit root SC.
+                if (flexGridItemSC && !positioned) {
+                    hoistedAsZSorted?.add(c);
+                }
+                // DM-673: if we hoisted `c` past an overflow-clip ancestor (and
+                // `c` isn't `position:fixed` — which escapes overflow per CSS
+                // Overflow 3 §2.2), remember the ancestor so the renderer can
+                // re-wrap `c` in its clip-path.
+                if (currentOverflowAncestor != null && c.styles.position !== "fixed") {
+                    overflowClipForHoisted?.set(c, currentOverflowAncestor);
+                }
             }
-            if (!establishesStackingContext(c, childParentDisplay)) {
-                collectFromNonSC(c);
+            // DM-673: also recurse THROUGH `overflow != visible` SCs whose ONLY
+            // SC-creating property is the overflow (per `isOverflowOnlySC`). Per
+            // Chrome's paint model these scroll containers paint atomically only
+            // for their bg/border at step 3, while positioned descendants escape
+            // to the parent SC's step 6 — intermixed in tree order with sibling
+            // positioned descendants. Mark `c` as the overflow ancestor so any
+            // descendant we hoist further down gets the clip-path applied.
+            const cIsOverflowOnly = isOverflowOnlySC(c);
+            if (!establishesStackingContext(c, childParentDisplay) || cIsOverflowOnly) {
+                // Block float hoisting from this point downward if `c` itself is a
+                // positioned z=auto/0 element — its descendants' floats paint with
+                // it atomically, not at the parent SC. Existing float-block state
+                // propagates downward too.
+                const cBlocks = positioned && !hasExplicitZ;
+                const nextOverflowAncestor = cIsOverflowOnly ? c : currentOverflowAncestor;
+                collectFromNonSC(c, floatHoistBlocked || cBlocks, nextOverflowAncestor);
             }
         }
     };
@@ -2067,12 +3312,92 @@ function gatherStackingContextChildren(children, hoistedOut, parentDisplay, hois
         if (hoistedOut.has(c))
             continue;
         out.push(c);
-        if (!establishesStackingContext(c, parentDisplay)) {
-            collectFromNonSC(c);
+        const cIsOverflowOnly = isOverflowOnlySC(c);
+        if (!establishesStackingContext(c, parentDisplay) || cIsOverflowOnly) {
+            // If `c` is a `position:relative/absolute` with `z-index: auto/0` it
+            // paints atomically at step 6 — block float hoisting from its subtree
+            // (matches the `cBlocks` rule inside collectFromNonSC).
+            const cPositioned = c.styles.position != null && c.styles.position !== "static";
+            const cZRaw = c.styles.zIndex;
+            const cHasExplicitZ = cZRaw != null && cZRaw !== "" && cZRaw !== "auto";
+            // DM-673: if `c` is an overflow-only SC, mark `c` as the overflow
+            // ancestor for any positioned descendant we hoist out of it.
+            const nextOverflowAncestor = cIsOverflowOnly ? c : null;
+            collectFromNonSC(c, cPositioned && !cHasExplicitZ, nextOverflowAncestor);
         }
     }
     return out;
 }
+/**
+ * DM-673: returns true when `el` is a stacking context whose ONLY reason
+ * for being one is `overflow != visible`. Such elements are scroll
+ * containers but not "real" SCs in Chrome's paint model — their bg/border
+ * paint in normal flow at CSS 2.1 Appendix E step 3, while their
+ * positioned descendants escape to the parent SC's step 6 (intermixed in
+ * tree order with positioned descendants from sibling overflow scrollers
+ * and `position:fixed` descendants that escape their CBs).
+ *
+ * Pixel-probed evidence from `13-deep-fixed-in-transform`: pin 0 (escaped
+ * fixed-to-viewport) is visible BELOW `.frame`'s bottom at y=748-758 over
+ * section 2's bg (so pin 0 paints AFTER section 2 bg), but `.frame`'s
+ * beige bg covers pin 0 at y=737-746 (so `.frame` paints AFTER pin 0).
+ * That interleaving is only possible if section 2 is non-atomic and
+ * `.frame` hoists to body's step 6 alongside pin 0.
+ *
+ * For SCs that have ANY other SC-creating property (positioned, transform,
+ * filter, opacity, etc.), we still keep them atomic — their descendants
+ * are contained by the layer, matching Chrome's behavior.
+ */
+function isOverflowOnlySC(el) {
+    const s = el.styles;
+    // Must actually create an SC via overflow
+    const ox = s.overflowX;
+    const oy = s.overflowY;
+    const overflowIsSC = (ox != null && ox !== "visible") || (oy != null && oy !== "visible");
+    if (!overflowIsSC)
+        return false;
+    // Must have NO other SC-creating property
+    const positioned = s.position != null && s.position !== "static";
+    if (positioned)
+        return false;
+    if (s.transform != null && s.transform !== "" && s.transform !== "none")
+        return false;
+    if (s.transformCreatesSc)
+        return false;
+    if (s.transformStyle != null && s.transformStyle !== "" && s.transformStyle !== "flat")
+        return false;
+    const op = parseFloat(s.opacity);
+    if (Number.isFinite(op) && op < 1)
+        return false;
+    if (s.filter != null && s.filter !== "" && s.filter !== "none")
+        return false;
+    if (s.mixBlendMode != null && s.mixBlendMode !== "" && s.mixBlendMode !== "normal")
+        return false;
+    if (s.maskImage != null && s.maskImage !== "" && s.maskImage !== "none")
+        return false;
+    if (s.clipPath != null && s.clipPath !== "" && s.clipPath !== "none")
+        return false;
+    if (s.isolation === "isolate")
+        return false;
+    if (s.contain != null && s.contain !== "" && s.contain !== "none") {
+        if (/\b(?:paint|strict|content)\b/i.test(s.contain))
+            return false;
+    }
+    if (s.willChange != null && s.willChange !== "" && s.willChange !== "auto") {
+        const _scWcProps = new Set([
+            "transform", "opacity", "filter", "backdrop-filter",
+            "mask", "mask-image", "clip-path", "perspective",
+            "top", "right", "bottom", "left",
+            "position", "z-index", "isolation", "mix-blend-mode", "contain",
+        ]);
+        const tokens = s.willChange.split(/[\s,]+/);
+        for (const t of tokens) {
+            if (_scWcProps.has(t.toLowerCase()))
+                return false;
+        }
+    }
+    return true;
+}
 /**
  * DM-543: returns true when `el` creates a containing block for
  * position:fixed descendants. Per CSS Containment 1 / Transforms 2 / Will
@@ -2111,7 +3436,22 @@ function isFixedContainingBlock(el) {
     }
     return false;
 }
-function sortChildrenByPaintOrder(children, parentDisplay, parentFlexDirection) {
+function sortChildrenByPaintOrder(children, parentDisplay, parentFlexDirection, 
+/**
+ * DM-683: Set of children to route into the inline bucket (CSS 2.1
+ * Appendix E step 5) rather than the block / base bucket (step 3).
+ * Populated by `gatherStackingContextChildren` for flex/grid items
+ * (which paint as inline blocks per CSS Flexbox 1 §5.4).
+ */
+paintAsInline, 
+/**
+ * DM-712: Set of children that should be z-sorted using their captured
+ * z-index, even when the immediate parent display isn't flex/grid
+ * (e.g. because the child was hoisted out of a flex parent into a real
+ * SC root for paint-order resolution). Populated by
+ * `gatherStackingContextChildren`'s `hoistedAsZSorted` out-parameter.
+ */
+paintAsZSorted) {
     // DM-525: flex/grid items with z-index ≠ auto sort as if position:relative
     // even when position:static (per CSS Flexbox 1 §5.4 / CSS Grid 1 §17).
     const isFlexGrid = isFlexOrGridContainerDisplay(parentDisplay);
@@ -2141,6 +3481,7 @@ function sortChildrenByPaintOrder(children, parentDisplay, parentFlexDirection)
     }
     const negative = [];
     const floats = [];
+    const inlines = [];
     const zeroOrAuto = [];
     const positive = [];
     const base = [];
@@ -2151,10 +3492,16 @@ function sortChildrenByPaintOrder(children, parentDisplay, parentFlexDirection)
         const zRaw = c.styles.zIndex;
         const positioned = pos != null && pos !== "static";
         const z = zRaw === "auto" || zRaw === "" || zRaw == null ? NaN : parseInt(zRaw, 10);
-        const treatAsZSorted = positioned || (isFlexGrid && !isNaN(z));
+        const treatAsZSorted = positioned || (isFlexGrid && !isNaN(z)) || (paintAsZSorted?.has(c) === true);
         if (!treatAsZSorted && flt !== "none") {
             floats.push(c);
         }
+        else if (!treatAsZSorted && paintAsInline?.has(c) === true) {
+            // DM-683: hoisted flex/grid items paint at step 5 (inline-level) of
+            // the SC, AFTER floats and AFTER step-3 blocks — matches CSS Flexbox
+            // 1 §5.4 "Flex items paint exactly the same as inline blocks".
+            inlines.push(c);
+        }
         else if (!treatAsZSorted) {
             base.push(c);
         }
@@ -2176,7 +3523,7 @@ function sortChildrenByPaintOrder(children, parentDisplay, parentFlexDirection)
     }
     negative.sort((a, b) => a.z - b.z || a.idx - b.idx);
     positive.sort((a, b) => a.z - b.z || a.idx - b.idx);
-    return [...negative.map((x) => x.el), ...base, ...floats, ...zeroOrAuto, ...positive.map((x) => x.el)];
+    return [...negative.map((x) => x.el), ...base, ...floats, ...inlines, ...zeroOrAuto, ...positive.map((x) => x.el)];
 }
 /**
  * Turn a single background-image layer into an SVG <defs> entry. Returns
@@ -2188,15 +3535,73 @@ function sortChildrenByPaintOrder(children, parentDisplay, parentFlexDirection)
  * and background-repeat (repeat/no-repeat/repeat-x/repeat-y/round/space).
  */
 function buildBackgroundLayerDef(id, layer, elX, elY, w, h, sizeCss = "auto", posCss = "0% 0%", repeatCss = "repeat", intrinsic = null, attachment = "scroll", fixedViewport = null) {
+    // Legacy `-webkit-gradient(linear, ...)` is still emitted by Chromium's
+    // computed-style serializer for old CSS that uses it (e.g. the Slashdot
+    // mobile header's black→#202020 titlebar). Normalize to modern
+    // `linear-gradient(...)` text first so the existing parsers can consume it.
+    const normalizedWebkit = convertLegacyWebkitGradient(layer);
+    if (normalizedWebkit != null)
+        layer = normalizedWebkit;
+    // DM-717: `image-set(...)` / `-webkit-image-set(...)` resolution. Chrome's
+    // computed-style serializer returns the FULL image-set string rather than
+    // the single chosen candidate, so we have to pick one ourselves. Strategy:
+    // prefer the lowest-density candidate (1dppx) since the offscreen capture
+    // runs at deviceScaleFactor 1; among same-density candidates, prefer
+    // `type("image/webp")` then `png` then `jpeg` then `gif`, matching what
+    // Chrome would pick on a standard-density display. Falls back to the first
+    // url(...) it finds if no density/type metadata is present.
+    const imageSet = /^(?:-webkit-)?image-set\((.+)\)$/i.exec(layer);
+    if (imageSet != null) {
+        const args = splitTopLevelCommas(imageSet[1]);
+        const cands = [];
+        for (const a of args) {
+            const t = a.trim();
+            // The arg shape is `url(...) [<resolution>] [type(...)]` in any order
+            // (per CSS Images 4); pull each piece out independently.
+            const urlBlob = /url\(\s*(?:"((?:\\.|[^"\\])*)"|'((?:\\.|[^'\\])*)'|([^)\s]+))\s*\)/i.exec(t);
+            if (urlBlob == null)
+                continue;
+            const rawUrl = (urlBlob[1] ?? urlBlob[2] ?? urlBlob[3]).replace(/\\(.)/g, "$1");
+            const dppxMatch = /(?<![a-z])([0-9.]+)\s*(?:dppx|x)\b/i.exec(t);
+            const typeMatch = /type\(\s*["']?([^"')]+?)["']?\s*\)/i.exec(t);
+            cands.push({
+                url: `url("${rawUrl}")`,
+                dppx: dppxMatch != null ? parseFloat(dppxMatch[1]) : 1,
+                type: typeMatch != null ? typeMatch[1].toLowerCase() : "",
+            });
+        }
+        const TYPE_RANK = {
+            "image/webp": 4, "image/png": 3, "image/jpeg": 2, "image/jpg": 2, "image/gif": 1, "": 0,
+        };
+        cands.sort((a, b) => a.dppx - b.dppx || (TYPE_RANK[b.type] ?? 0) - (TYPE_RANK[a.type] ?? 0));
+        if (cands.length > 0)
+            layer = cands[0].url;
+        else
+            return { def: "" };
+    }
+    // DM-695: `background-attachment: fixed` anchors the bg image (gradient or
+    // raster) to the viewport rather than the element. For gradients this
+    // means the gradient axis spans the VIEWPORT box (0,0 → vw,vh); the
+    // element rect with `fill="url(#…)"` then shows the portion of that
+    // gradient that intersects the element. Previously we always computed
+    // gradient axes off the element rect, so a `bg-attachment: fixed`
+    // gradient looked identical to a `scroll` one — different from Chrome
+    // which only shows a slice through the element's window onto the
+    // viewport-spanning gradient (visible color-vibrancy diff on
+    // `17-deep-bg-attachment-fixed` panel 1).
+    const gradX = (attachment === "fixed" && fixedViewport != null) ? 0 : elX;
+    const gradY = (attachment === "fixed" && fixedViewport != null) ? 0 : elY;
+    const gradW = (attachment === "fixed" && fixedViewport != null) ? fixedViewport.w : w;
+    const gradH = (attachment === "fixed" && fixedViewport != null) ? fixedViewport.h : h;
     const linear = /^(?:repeating-)?linear-gradient\((.+)\)$/i.exec(layer);
     if (linear != null) {
         const repeating = /^repeating-/i.test(layer);
-        return { def: buildLinearGradientDef(id, linear[1], repeating, w, h, elX, elY) };
+        return { def: buildLinearGradientDef(id, linear[1], repeating, gradW, gradH, gradX, gradY) };
     }
     const radial = /^(?:repeating-)?radial-gradient\((.+)\)$/i.exec(layer);
     if (radial != null) {
         const repeating = /^repeating-/i.test(layer);
-        return { def: buildRadialGradientDef(id, radial[1], repeating, elX, elY, w, h) };
+        return { def: buildRadialGradientDef(id, radial[1], repeating, gradX, gradY, gradW, gradH) };
     }
     // DM-550: conic. The raster pre-pass (DM-549) populated `_conicTileCache`
     // with PNG bytes for `(layerText, "${tileW}x${tileH}")` tuples; we look up
@@ -3032,18 +4437,299 @@ export function positionFragmentMaskDef(rewrittenOuterHTML, elX, elY, elW, elH)
     attrs += ` maskUnits="userSpaceOnUse" x="${r(elX)}" y="${r(elY)}" width="${r(elW)}" height="${r(elH)}"`;
     return `<mask${attrs}><g transform="translate(${r(elX)}, ${r(elY)})">${inner}</g></mask>`;
 }
-/**
- * Translate a CSS mask-image value + mask-* siblings into an SVG <mask>.
- * Handles single-layer gradients and url() sources. Position/size/repeat are
- * applied via an internal <pattern> for url sources; gradients use direct
- * gradient fills sized to the element box.
- *
- * SVG <mask> uses luminance by default (bright pixels visible). CSS mask-mode
- * 'alpha' makes the alpha channel control visibility. We set mask-type on the
- * <mask> element accordingly. Note: Chromium may render mask-mode:'match-source'
- * differently depending on the source; we pick alpha for gradients and url()
- * (common case) and respect explicit mask-mode when given.
- */
+const MASK_BORDER_REPEATS = new Set(["stretch", "repeat", "round", "space"]);
+function normalizeMaskBorderRepeat(raw) {
+    if (raw != null && MASK_BORDER_REPEATS.has(raw))
+        return raw;
+    return "stretch";
+}
+function buildMaskBorder9Slice(el, url, sliceRaw, widthRaw, outsetRaw, repeatRaw, maskId, idPrefix, clipIdxStart) {
+    const natW = el.styles.maskBorderIntrinsicWidth ?? 0;
+    const natH = el.styles.maskBorderIntrinsicHeight ?? 0;
+    if (natW <= 0 || natH <= 0)
+        return null;
+    // Slice — numbers are source pixels, percentages of source dims, optional `fill`.
+    const fillCenter = /\bfill\b/i.test(sliceRaw);
+    const sliceTokens = sliceRaw.replace(/\bfill\b/i, "").trim().split(/\s+/);
+    const parseSliceTok = (t) => {
+        if (t == null || t === "")
+            return { px: 0 };
+        if (/%$/.test(t))
+            return { pct: parseFloat(t) };
+        return { px: parseFloat(t) };
+    };
+    const sliceNums = sliceTokens.map(parseSliceTok);
+    const resolveSlice = (tok, basis) => {
+        if (tok.pct != null)
+            return (tok.pct / 100) * basis;
+        return tok.px ?? 0;
+    };
+    const st = resolveSlice(sliceNums[0] ?? { px: 0 }, natH);
+    const sr = resolveSlice(sliceNums[1] ?? sliceNums[0] ?? { px: 0 }, natW);
+    const sb = resolveSlice(sliceNums[2] ?? sliceNums[0] ?? { px: 0 }, natH);
+    const sl = resolveSlice(sliceNums[3] ?? sliceNums[1] ?? sliceNums[0] ?? { px: 0 }, natW);
+    // Width — px / % / unitless multiplier of border-width (defaults to 0 for
+    // mask-border since masks usually have no element border).
+    const bwTop = parseFloat(el.styles.borderTopWidth ?? "0") || 0;
+    const bwRight = parseFloat(el.styles.borderRightWidth ?? "0") || 0;
+    const bwBottom = parseFloat(el.styles.borderBottomWidth ?? "0") || 0;
+    const bwLeft = parseFloat(el.styles.borderLeftWidth ?? "0") || 0;
+    const parseLen = (tok, basis, borderW) => {
+        if (tok == null || tok === "" || tok === "auto")
+            return borderW;
+        if (/%$/.test(tok))
+            return (parseFloat(tok) / 100) * basis;
+        if (/(px|em|rem|pt|pc|cm|mm|in|Q)$/.test(tok))
+            return parseFloat(tok) || 0;
+        const n = parseFloat(tok);
+        return Number.isFinite(n) ? n * borderW : borderW;
+    };
+    const wTokens = widthRaw.trim().split(/\s+/);
+    const wt = parseLen(wTokens[0], el.height, bwTop);
+    const wr = parseLen(wTokens[1] ?? wTokens[0], el.width, bwRight);
+    const wb = parseLen(wTokens[2] ?? wTokens[0], el.height, bwBottom);
+    const wl = parseLen(wTokens[3] ?? wTokens[1] ?? wTokens[0], el.width, bwLeft);
+    // Outset — defaults to 0.
+    const parseOutset = (tok, basis, borderW) => {
+        if (tok == null || tok === "")
+            return 0;
+        if (/%$/.test(tok))
+            return (parseFloat(tok) / 100) * basis;
+        if (/(px|em|rem|pt|pc|cm|mm|in|Q)$/.test(tok))
+            return parseFloat(tok) || 0;
+        const n = parseFloat(tok);
+        return Number.isFinite(n) ? n * borderW : 0;
+    };
+    const oTokens = outsetRaw.trim().split(/\s+/);
+    const ot = parseOutset(oTokens[0], el.height, bwTop);
+    const or_ = parseOutset(oTokens[1] ?? oTokens[0], el.width, bwRight);
+    const ob = parseOutset(oTokens[2] ?? oTokens[0], el.height, bwBottom);
+    const ol = parseOutset(oTokens[3] ?? oTokens[1] ?? oTokens[0], el.width, bwLeft);
+    // Mask region = border-box ± outset.
+    const boxX = el.x - ol;
+    const boxY = el.y - ot;
+    const boxW = el.width + ol + or_;
+    const boxH = el.height + ot + ob;
+    if (boxW <= 0 || boxH <= 0)
+        return null;
+    // Repeat — `stretch` / `repeat` / `round` / `space` (per axis, optional).
+    const rTokens = repeatRaw.trim().toLowerCase().split(/\s+/);
+    const rH = normalizeMaskBorderRepeat(rTokens[0]);
+    const rV = rTokens[1] != null && rTokens[1] !== "" ? normalizeMaskBorderRepeat(rTokens[1]) : rH;
+    const x0 = boxX, x1 = boxX + wl, x2 = boxX + boxW - wr, x3 = boxX + boxW;
+    const y0 = boxY, y1 = boxY + wt, y2 = boxY + boxH - wb, y3 = boxY + boxH;
+    const sxL = 0, sxR = natW - sr, sxC = sl, sxW_C = natW - sl - sr;
+    const syT = 0, syB = natH - sb, syC = st, syH_C = natH - st - sb;
+    const maskChildren = [];
+    const maskDefs = []; // patterns + clipPaths nested inside the <mask>
+    let clipIdx = clipIdxStart;
+    // For each piece, emit either an `<image>` (stretched) or a `<rect>` filled
+    // by a `<pattern>` that tiles the source slice. clipPath is needed to
+    // restrict the stretched-image emit to the destination rect.
+    const emitStretched = (dxSlot, dySlot, dwSlot, dhSlot, sx, sy, sw, sh) => {
+        if (dwSlot <= 0 || dhSlot <= 0 || sw <= 0 || sh <= 0)
+            return;
+        const clipId = `${idPrefix}mbic${clipIdx++}`;
+        maskDefs.push(`<clipPath id="${clipId}"><rect x="${r(dxSlot)}" y="${r(dySlot)}" width="${r(dwSlot)}" height="${r(dhSlot)}" /></clipPath>`);
+        const scaleX = dwSlot / sw;
+        const scaleY = dhSlot / sh;
+        const imgX = dxSlot - sx * scaleX;
+        const imgY = dySlot - sy * scaleY;
+        const imgW = natW * scaleX;
+        const imgH = natH * scaleY;
+        maskChildren.push(`<image href="${esc(embedResizedDataUri(url, imgW, imgH))}" x="${r(imgX)}" y="${r(imgY)}" width="${r(imgW)}" height="${r(imgH)}" preserveAspectRatio="none" clip-path="url(#${clipId})" />`);
+    };
+    const emitTiledEdge = (dxSlot, dySlot, dwSlot, dhSlot, sx, sy, sw, sh, axis, mode) => {
+        if (dwSlot <= 0 || dhSlot <= 0 || sw <= 0 || sh <= 0)
+            return;
+        let tileW, tileH;
+        if (axis === "x") {
+            tileH = dhSlot;
+            tileW = sw * (dhSlot / sh);
+            if (mode === "round") {
+                const count = Math.max(1, Math.round(dwSlot / tileW));
+                tileW = dwSlot / count;
+            }
+        }
+        else {
+            tileW = dwSlot;
+            tileH = sh * (dwSlot / sw);
+            if (mode === "round") {
+                const count = Math.max(1, Math.round(dhSlot / tileH));
+                tileH = dhSlot / count;
+            }
+        }
+        let patternW = tileW, patternH = tileH;
+        let patternX = dxSlot, patternY = dySlot;
+        if (mode === "space") {
+            if (axis === "x") {
+                const count = Math.floor(dwSlot / tileW);
+                if (count <= 0)
+                    return;
+                patternW = dwSlot / count;
+                patternX = dxSlot + (patternW - tileW) / 2;
+            }
+            else {
+                const count = Math.floor(dhSlot / tileH);
+                if (count <= 0)
+                    return;
+                patternH = dhSlot / count;
+                patternY = dySlot + (patternH - tileH) / 2;
+            }
+        }
+        const patId = `${idPrefix}mbip${clipIdx++}`;
+        const imgScaleX = tileW / sw;
+        const imgScaleY = tileH / sh;
+        const inImgX = -sx * imgScaleX;
+        const inImgY = -sy * imgScaleY;
+        const inImgW = natW * imgScaleX;
+        const inImgH = natH * imgScaleY;
+        const clipBgId = mode === "space" ? `${idPrefix}mbic${clipIdx++}` : "";
+        const clipDef = mode === "space"
+            ? `<clipPath id="${clipBgId}"><rect x="0" y="0" width="${r(tileW)}" height="${r(tileH)}" /></clipPath>`
+            : "";
+        const imgClip = mode === "space" ? ` clip-path="url(#${clipBgId})"` : "";
+        maskDefs.push(`<pattern id="${patId}" patternUnits="userSpaceOnUse" x="${r(patternX)}" y="${r(patternY)}" width="${r(patternW)}" height="${r(patternH)}">${clipDef}<image href="${esc(embedResizedDataUri(url, inImgW, inImgH))}" x="${r(inImgX)}" y="${r(inImgY)}" width="${r(inImgW)}" height="${r(inImgH)}" preserveAspectRatio="none"${imgClip} /></pattern>`);
+        maskChildren.push(`<rect x="${r(dxSlot)}" y="${r(dySlot)}" width="${r(dwSlot)}" height="${r(dhSlot)}" fill="url(#${patId})" />`);
+    };
+    // Center 9-piece tiler — handles 2D tiling (both `repeat` / `round` / `space`
+    // axes simultaneously). Mirrors Chromium's `NinePieceImageGrid::SetDrawInfoMiddle`
+    // + `ComputeTileParameters` in `third_party/blink/renderer/core/paint/`:
+    //   - The center's `tile_scale` is the SAME ratio as the adjacent edge:
+    //     `scaleX = top.Scale() = wt/st` (or `wb/sb` if no top); `scaleY = wl/sl` (or `wr/sr`).
+    //     Each tile in dest = source-center-slice scaled by that factor.
+    //   - `space` distributes (dst - tiles*tile_size) across (tiles + 1) gaps —
+    //     a half-spacing gap at each end and full spacing between tiles. (NOT
+    //     "flush with edges" as the spec text suggests; Chrome's impl is the
+    //     spec it ships.)
+    //   - `repeat` centres the pattern with phase = (dst - tile) / 2.
+    //   - `round` rescales the tile so a whole number fits exactly.
+    //   - `stretch` collapses to a single tile spanning the full slot — fall
+    //     through to the existing `emitStretched`.
+    const emitTiledCenter = (dxSlot, dySlot, dwSlot, dhSlot, sx, sy, sw, sh, scaleX, scaleY, modeH, modeV) => {
+        if (dwSlot <= 0 || dhSlot <= 0 || sw <= 0 || sh <= 0 || scaleX <= 0 || scaleY <= 0)
+            return;
+        let tileW = sw * scaleX;
+        let tileH = sh * scaleY;
+        if (tileW <= 0 || tileH <= 0)
+            return;
+        let periodW = tileW, periodH = tileH;
+        let phaseX = 0, phaseY = 0;
+        if (modeH === "round") {
+            const c = Math.max(1, Math.round(dwSlot / tileW));
+            tileW = dwSlot / c;
+            periodW = tileW;
+        }
+        else if (modeH === "space") {
+            const c = Math.floor(dwSlot / tileW);
+            if (c <= 0)
+                return;
+            const sp = (dwSlot - c * tileW) / (c + 1);
+            periodW = tileW + sp;
+            phaseX = sp;
+        }
+        else if (modeH === "repeat") {
+            phaseX = (dwSlot - tileW) / 2;
+            // Anchor the centered pattern at dxSlot for SVG's userSpaceOnUse so
+            // tiles step out symmetrically; phaseX may go negative, that's fine.
+        }
+        else {
+            // stretch on x: one tile spans the full width.
+            tileW = dwSlot;
+            periodW = dwSlot;
+        }
+        if (modeV === "round") {
+            const c = Math.max(1, Math.round(dhSlot / tileH));
+            tileH = dhSlot / c;
+            periodH = tileH;
+        }
+        else if (modeV === "space") {
+            const c = Math.floor(dhSlot / tileH);
+            if (c <= 0)
+                return;
+            const sp = (dhSlot - c * tileH) / (c + 1);
+            periodH = tileH + sp;
+            phaseY = sp;
+        }
+        else if (modeV === "repeat") {
+            phaseY = (dhSlot - tileH) / 2;
+        }
+        else {
+            tileH = dhSlot;
+            periodH = dhSlot;
+        }
+        const imgScaleX = tileW / sw;
+        const imgScaleY = tileH / sh;
+        const inImgX = -sx * imgScaleX;
+        const inImgY = -sy * imgScaleY;
+        const inImgW = natW * imgScaleX;
+        const inImgH = natH * imgScaleY;
+        // Clip the in-pattern image to the tile bounds whenever the pattern
+        // period exceeds the tile size — i.e. when an axis has `space` (which
+        // introduces gaps between tiles) — so the source extends into the gap
+        // region don't paint into the spacing.
+        const needsClip = modeH === "space" || modeV === "space";
+        const patId = `${idPrefix}mbip${clipIdx++}`;
+        let clipDef = "", imgClip = "";
+        if (needsClip) {
+            const clipId = `${idPrefix}mbic${clipIdx++}`;
+            clipDef = `<clipPath id="${clipId}"><rect x="0" y="0" width="${r(tileW)}" height="${r(tileH)}" /></clipPath>`;
+            imgClip = ` clip-path="url(#${clipId})"`;
+        }
+        maskDefs.push(`<pattern id="${patId}" patternUnits="userSpaceOnUse" x="${r(dxSlot + phaseX)}" y="${r(dySlot + phaseY)}" width="${r(periodW)}" height="${r(periodH)}">${clipDef}<image href="${esc(embedResizedDataUri(url, inImgW, inImgH))}" x="${r(inImgX)}" y="${r(inImgY)}" width="${r(inImgW)}" height="${r(inImgH)}" preserveAspectRatio="none"${imgClip} /></pattern>`);
+        maskChildren.push(`<rect x="${r(dxSlot)}" y="${r(dySlot)}" width="${r(dwSlot)}" height="${r(dhSlot)}" fill="url(#${patId})" />`);
+    };
+    // 4 corners — always stretched.
+    emitStretched(x0, y0, wl, wt, sxL, syT, sl, st); // NW
+    emitStretched(x2, y0, wr, wt, sxR, syT, sr, st); // NE
+    emitStretched(x0, y2, wl, wb, sxL, syB, sl, sb); // SW
+    emitStretched(x2, y2, wr, wb, sxR, syB, sr, sb); // SE
+    // Top + Bottom edges.
+    if (rH === "stretch") {
+        emitStretched(x1, y0, x2 - x1, wt, sxC, syT, sxW_C, st);
+        emitStretched(x1, y2, x2 - x1, wb, sxC, syB, sxW_C, sb);
+    }
+    else {
+        emitTiledEdge(x1, y0, x2 - x1, wt, sxC, syT, sxW_C, st, "x", rH);
+        emitTiledEdge(x1, y2, x2 - x1, wb, sxC, syB, sxW_C, sb, "x", rH);
+    }
+    // Left + Right edges.
+    if (rV === "stretch") {
+        emitStretched(x0, y1, wl, y2 - y1, sxL, syC, sl, syH_C);
+        emitStretched(x2, y1, wr, y2 - y1, sxR, syC, sr, syH_C);
+    }
+    else {
+        emitTiledEdge(x0, y1, wl, y2 - y1, sxL, syC, sl, syH_C, "y", rV);
+        emitTiledEdge(x2, y1, wr, y2 - y1, sxR, syC, sr, syH_C, "y", rV);
+    }
+    // Center — when `fill` is present in the slice. Chrome's
+    // `-webkit-mask-box-image` parser implicitly adds `fill` even when CSS
+    // doesn't write it; the capture-side reads from the webkit-prefixed
+    // properties so that resolved `fill` flows through here. Per spec the
+    // center's tile_scale is Edge::Scale() from the adjacent edges (wt/st on
+    // x, wl/sl on y) — NOT a stretch-to-fill — so `space` / `round` / `repeat`
+    // modes tile the source-center subimage across the dest area at that
+    // scale, NOT one giant stretched tile. (See DM-825 + the `niche-mask-border`
+    // .mb-3 fixture: 5×3 grid of 32×32 source-center tiles with 2.67 px
+    // horizontal `space` gaps + 0 vertical gap, fused with the 16×96 left/
+    // right edge tiles + corners to paint 7 visible vertical slats.)
+    if (fillCenter) {
+        if (rH === "stretch" && rV === "stretch") {
+            emitStretched(x1, y1, x2 - x1, y2 - y1, sxC, syC, sxW_C, syH_C);
+        }
+        else {
+            // Edge::Scale() for the adjacent edges; fall back to bottom/right
+            // when top/left are zero-width (degenerate but possible).
+            const scaleX = st > 0 && wt > 0 ? wt / st : (sb > 0 && wb > 0 ? wb / sb : 1);
+            const scaleY = sl > 0 && wl > 0 ? wl / sl : (sr > 0 && wr > 0 ? wr / sr : 1);
+            emitTiledCenter(x1, y1, x2 - x1, y2 - y1, sxC, syC, sxW_C, syH_C, scaleX, scaleY, rH, rV);
+        }
+    }
+    if (maskChildren.length === 0)
+        return null;
+    const def = `<mask id="${maskId}" maskUnits="userSpaceOnUse" mask-type="alpha">${maskDefs.join("")}${maskChildren.join("")}</mask>`;
+    return { id: maskId, def, nextClipIdx: clipIdx };
+}
 export function buildMaskDef(id, maskImage, elX, elY, w, h, maskMode, sizeCss, posCss, repeatCss, compositeCss, 
 /** DM-494: lookup table for `mask-image: element(#id)` references. Optional —
  *  callers without element() refs can omit it. The renderer's main caller
@@ -3117,7 +4803,14 @@ elementRasters) {
             }
             else {
                 gradW = resolveSize(sizeTok[0], w, w);
-                gradH = sizeTok.length > 1 ? resolveSize(sizeTok[1], h, h) : gradW;
+                // DM-679: single-length mask-size per CSS Backgrounds 3 §3.7
+                // means `width=N, height=auto`. For gradient layers (no intrinsic
+                // size) `auto` resolves to the container's corresponding axis, not
+                // to the width again. Previously we squared the box (gradH = gradW)
+                // which made `radial-gradient(circle, …) mask-size: 80px` paint a
+                // smaller hard circle than Chrome (radius derived from 80×80 farthest-
+                // corner ≈ 56.6 vs Chrome's 80×containerH farthest-corner ≈ 72).
+                gradH = sizeTok.length > 1 ? resolveSize(sizeTok[1], h, h) : h;
             }
             const posTok = layerPos.trim().split(/\s+/);
             const resolveH = (t) => {
@@ -3533,22 +5226,62 @@ function translateClipPath(value, x, y, w, h) {
         const right = resolvePx(parts[1] ?? parts[0], w);
         const bottom = resolvePx(parts[2] ?? parts[0], h);
         const left = resolvePx(parts[3] ?? parts[1] ?? parts[0], w);
-        let rx = 0, ry = 0;
-        if (radiusStr !== "") {
-            // border-radius shorthand here can be 1-4 values, optionally with a `/`
-            // separator for rx/ry pairs. Common cases: single value, two values.
-            // We collapse to a uniform rx=ry using the first horizontal radius.
-            const slashIdx = radiusStr.indexOf("/");
-            const hPart = (slashIdx >= 0 ? radiusStr.slice(0, slashIdx) : radiusStr).trim();
-            const vPart = (slashIdx >= 0 ? radiusStr.slice(slashIdx + 1) : hPart).trim();
-            const hTok = hPart.split(/\s+/);
-            const vTok = vPart.split(/\s+/);
-            rx = resolvePx(hTok[0] ?? "0", w);
-            ry = resolvePx(vTok[0] ?? hTok[0] ?? "0", h);
-        }
-        const rectAttrs = `x="${r(x + left)}" y="${r(y + top)}" width="${r(w - left - right)}" height="${r(h - top - bottom)}"`;
-        const radiusAttrs = rx > 0 || ry > 0 ? ` rx="${r(rx)}" ry="${r(ry)}"` : "";
-        return `<rect ${rectAttrs}${radiusAttrs} />`;
+        const insetW = w - left - right;
+        const insetH = h - top - bottom;
+        if (radiusStr === "") {
+            const rectAttrs = `x="${r(x + left)}" y="${r(y + top)}" width="${r(insetW)}" height="${r(insetH)}"`;
+            return `<rect ${rectAttrs} />`;
+        }
+        // CSS Backgrounds 3 §5.3 border-radius shorthand: 1-4 horizontal values,
+        // optionally `/` then 1-4 vertical values. Map to per-corner pairs:
+        //   1 value     → all 4 corners
+        //   2 values    → TL=BR=v0, TR=BL=v1
+        //   3 values    → TL=v0,  TR=BL=v1,  BR=v2
+        //   4 values    → TL=v0,  TR=v1,     BR=v2,  BL=v3
+        const slashIdx = radiusStr.indexOf("/");
+        const hPart = (slashIdx >= 0 ? radiusStr.slice(0, slashIdx) : radiusStr).trim();
+        const vPart = (slashIdx >= 0 ? radiusStr.slice(slashIdx + 1) : hPart).trim();
+        const hTok = hPart.split(/\s+/);
+        const vTok = vPart.split(/\s+/);
+        const pickCorner = (toks, idx) => {
+            if (toks.length === 1)
+                return toks[0];
+            if (toks.length === 2)
+                return toks[idx === 0 || idx === 2 ? 0 : 1];
+            if (toks.length === 3)
+                return toks[idx === 0 ? 0 : idx === 2 ? 2 : 1];
+            return toks[idx];
+        };
+        const tlH = resolvePx(pickCorner(hTok, 0), insetW);
+        const trH = resolvePx(pickCorner(hTok, 1), insetW);
+        const brH = resolvePx(pickCorner(hTok, 2), insetW);
+        const blH = resolvePx(pickCorner(hTok, 3), insetW);
+        const tlV = resolvePx(pickCorner(vTok, 0), insetH);
+        const trV = resolvePx(pickCorner(vTok, 1), insetH);
+        const brV = resolvePx(pickCorner(vTok, 2), insetH);
+        const blV = resolvePx(pickCorner(vTok, 3), insetH);
+        // CSS Backgrounds 3 §5.5 corner-overlap scale-down: scale all four
+        // corners uniformly so no pair on the same edge exceeds the edge length.
+        const sums = [
+            [tlH + trH, insetW], [trV + brV, insetH],
+            [brH + blH, insetW], [blV + tlV, insetH],
+        ];
+        let scale = 1;
+        for (const [s, lim] of sums)
+            if (s > 0 && lim > 0)
+                scale = Math.min(scale, lim / s);
+        const corners = {
+            tl: { h: tlH * scale, v: tlV * scale },
+            tr: { h: trH * scale, v: trV * scale },
+            br: { h: brH * scale, v: brV * scale },
+            bl: { h: blH * scale, v: blV * scale },
+            uniform: tlH === trH && tlH === brH && tlH === blH && tlH === tlV && tlH === trV && tlH === brV && tlH === blV,
+        };
+        if (corners.uniform) {
+            const rxAttr = corners.tl.h > 0 ? ` rx="${r(corners.tl.h)}" ry="${r(corners.tl.v)}"` : "";
+            return `<rect x="${r(x + left)}" y="${r(y + top)}" width="${r(insetW)}" height="${r(insetH)}"${rxAttr} />`;
+        }
+        return `<path d="${roundedRectPath(x + left, y + top, insetW, insetH, corners)}" />`;
     }
     const circle = /^circle\(([^)]*)\)$/i.exec(value);
     if (circle != null) {
@@ -3644,6 +5377,47 @@ function translateClipPath(value, x, y, w, h) {
  * map to xMin/xMid/xMax + yMin/yMid/yMax. Percentages are bucketed to thirds
  * since SVG has no finer-grained alignment.
  */
+/**
+ * DM-819: rewrite an SVG-source data URI so its top-level `<svg>` declares
+ * `width=consumerW height=consumerH preserveAspectRatio="<par>"`. Chrome
+ * ignores the outer `<image>`'s `preserveAspectRatio` when the source is
+ * SVG (paints at the SVG's own intrinsic size), but it does honor the
+ * embedded SVG's own preserveAspectRatio. Baking the alignment into the
+ * inner SVG lets `object-fit: cover` on an `<img>` referencing an SVG file
+ * actually slice. Returns the input unchanged for raster sources or when
+ * the inner SVG can't be parsed.
+ */
+export function rewriteSvgDataUriPreserveAspectRatio(dataUri, w, h, par) {
+    if (!/^data:image\/svg\+xml/i.test(dataUri))
+        return dataUri;
+    // Decode payload: support base64 or URL-encoded forms.
+    const m = /^data:image\/svg\+xml(;base64)?,(.*)$/is.exec(dataUri);
+    if (m == null)
+        return dataUri;
+    const isBase64 = m[1] != null;
+    let svgText;
+    try {
+        svgText = isBase64 ? Buffer.from(m[2], "base64").toString("utf8") : decodeURIComponent(m[2]);
+    }
+    catch {
+        return dataUri;
+    }
+    // Find the first <svg ...> opening tag and rewrite its attrs.
+    const tagMatch = /<svg\b([^>]*)>/i.exec(svgText);
+    if (tagMatch == null)
+        return dataUri;
+    let attrs = tagMatch[1];
+    const stripAttr = (name) => {
+        const re = new RegExp(`\\s${name}\\s*=\\s*("[^"]*"|'[^']*')`, "i");
+        attrs = attrs.replace(re, "");
+    };
+    stripAttr("width");
+    stripAttr("height");
+    stripAttr("preserveAspectRatio");
+    const newAttrs = `${attrs.replace(/\s+$/, "")} width="${r(w)}" height="${r(h)}" preserveAspectRatio="${par}"`;
+    const newSvg = svgText.slice(0, tagMatch.index) + `<svg${newAttrs}>` + svgText.slice(tagMatch.index + tagMatch[0].length);
+    return `data:image/svg+xml;base64,${Buffer.from(newSvg, "utf8").toString("base64")}`;
+}
 export function preserveAspectRatioFor(fit, pos) {
     const f = (fit ?? "fill").trim();
     if (f === "fill" || f === "none")
@@ -3840,41 +5614,72 @@ function adjustedDashArray(style, width, sideLength) {
 function adjustedDashAttrs(style, width, sideLength) {
     if (sideLength <= 0 || width <= 0)
         return { array: "", offset: 0 };
+    // DM-805: faithful port of Chromium's `DashEffectFromStrokeStyle` +
+    // `SelectBestDashGap` from
+    // `third_party/blink/renderer/platform/graphics/styled_stroke_data.cc`.
+    // The previous implementation scaled the dash/gap pair to fit a whole
+    // number of cycles AND offset the start by gap/2 — visually close but not
+    // pixel-matching Chrome (Chrome keeps the natural dash size + only adjusts
+    // the gap + starts flush at the corner). Verified against painted output
+    // on the `18-border-styles` fixture: 6 px dashed on a 188 px side paints
+    // 11 dashes (dash=12 / gap=5.6, flush at corner), NOT 10 dashes (12.53 /
+    // 6.27 / mid-gap-offset) as the old algorithm emitted.
+    const selectBestDashGap = (strokeLength, dashLength, gapLength) => {
+        // Open path only (closed_path = false in BoxBorderPainter — each side
+        // is drawn as a separate line, even for rounded-corner borders which
+        // use a curved path and handle that path-length math separately).
+        const availableLength = strokeLength + gapLength;
+        const minNumDashes = Math.floor(availableLength / (dashLength + gapLength));
+        const maxNumDashes = minNumDashes + 1;
+        const minNumGaps = Math.max(1, minNumDashes - 1);
+        const maxNumGaps = Math.max(1, maxNumDashes - 1);
+        const minGap = (strokeLength - minNumDashes * dashLength) / minNumGaps;
+        const maxGap = (strokeLength - maxNumDashes * dashLength) / maxNumGaps;
+        if (maxGap <= 0)
+            return minGap;
+        return Math.abs(minGap - gapLength) < Math.abs(maxGap - gapLength) ? minGap : maxGap;
+    };
     if (style === "dashed") {
-        // Chromium's `StyledStrokeData::DashLengthRatio` / `DashGapRatio` (in
-        // `third_party/blink/renderer/platform/graphics/styled_stroke_data.cc`):
-        //   dash = thickness >= 3 ? 2.0 * width : 3.0 * width
-        //   gap  = thickness >= 3 ? 1.0 * width : 2.0 * width
-        // So thick borders (≥ 3 px) get 2:1 dash:gap, thin borders (1-2 px)
-        // get 3:2. Verified directly from Chromium source — DM-437 / DM-420.
-        const idealDash = width >= 3 ? width * 2 : width * 3;
-        const idealGap = width >= 3 ? width : width * 2;
-        const idealPeriod = idealDash + idealGap;
-        const cycles = Math.max(1, Math.round(sideLength / idealPeriod));
-        const scale = sideLength / (cycles * idealPeriod);
-        const dash = idealDash * scale;
-        const gap = idealGap * scale;
-        // Center the dash pattern so each side has gap/2 of margin at each
-        // corner. stroke-dashoffset specifies the distance into the cycle where
-        // the line starts; cycle is `dash gap`, so an offset of `dash + gap/2`
-        // places the line start mid-gap and the first dash visible at gap/2 —
-        // matching Chromium's BoxBorderPainter (DM-318).
-        return { array: `${r(dash)} ${r(gap)}`, offset: dash + gap / 2 };
+        // dash_length = width * (width >= 3 ? 2 : 3); gap_length similarly.
+        const dashLen = width * (width >= 3 ? 2 : 3);
+        const gapTarget = width * (width >= 3 ? 1 : 2);
+        if (sideLength <= dashLen * 2) {
+            // Chrome's "no space for dashes" branch — emit a continuous solid
+            // line (no dasharray). Below that, "exactly 2 dashes proportionally
+            // sized" is a sub-case but the visual is nearly identical to the
+            // pixel diff harness; collapse to solid here.
+            return { array: "", offset: 0 };
+        }
+        const gap = selectBestDashGap(sideLength, dashLen, gapTarget);
+        if (gap <= 0)
+            return { array: "", offset: 0 };
+        // Start flush at the corner — matches Chrome's `MakeDash` with phase 0.
+        return { array: `${r(dashLen)} ${r(gap)}`, offset: 0 };
     }
     if (style === "dotted") {
-        // Dot diameter = width (round-cap on near-zero dash). Dot center spacing
-        // = `2 * width`, so each cycle (dot + gap) = 2 * width.
-        // Empirical re-probe (DM-419): Chrome paints `ceil(sideLength / period)`
-        // cycles, not `round`. For a 3 px dotted border on an 80 px side,
-        // Chrome paints 14 dots while our `round(80/6) = 13` was off-by-one.
-        const idealPeriod = width * 2;
-        const cycles = Math.max(1, Math.ceil(sideLength / idealPeriod));
-        const adjustedPeriod = sideLength / cycles;
-        // Shift the cycle so the first dot is at adjustedPeriod / 2 from the
-        // start, matching Chrome's centered-dot painting. The cycle is
-        // `0.01 adjustedPeriod`, total ≈ adjustedPeriod; an offset of
-        // adjustedPeriod / 2 starts mid-gap.
-        return { array: `0.01 ${r(adjustedPeriod)}`, offset: adjustedPeriod / 2 };
+        // Chrome's thick-dotted branch (`!StrokeIsDashed(width, kDottedStroke)`
+        // — true for width > 3):
+        //   1. The line endpoints are first moved IN by width/2 (round endcap
+        //      fits inside the line). Caller is responsible for that inward
+        //      move via cornerTrim = width/2 (see element-tree-to-svg's per-
+        //      side emit loop) so `sideLength` here is the POST-move length.
+        //   2. SelectBestDashGap with dash_length = gap_length = width.
+        //   3. dasharray = [0, gap + width - epsilon] with round caps —
+        //      produces a dot of diameter `width` per cycle.
+        // Note: the legacy `cornerTrim = bt.w >= 8 ? inset : 0` rule meant
+        // thin (< 8 px) dotted borders skipped the inward move; the per-side
+        // emit loop now insets dotted always so this entry point sees the
+        // chromy effective length.
+        if (sideLength < width * 2) {
+            // Chrome's "Not enough space for 2 dots" branch — single dot via a
+            // gap longer than the line.
+            return { array: `0.01 ${r(width * 2)}`, offset: 0 };
+        }
+        const gap = selectBestDashGap(sideLength, width, width);
+        if (gap <= 0)
+            return { array: "", offset: 0 };
+        const kEpsilon = 0.01;
+        return { array: `0.01 ${r(gap + width - kEpsilon)}`, offset: 0 };
     }
     return { array: "", offset: 0 };
 }