domotion-svg 0.22.2 → 0.24.0

package/README.md

@@ -79,6 +79,12 @@ cat demo.html | domotion capture - -o demo.svg
 domotion capture https://example.com --scroll "down:bottom/8s" -o scroll.svg
 ```
 
+Navigation waits for the page's `load` event, then Domotion applies its normal
+font/image/paint readiness checks. Pages with a finite request chain can opt
+into Playwright's stricter network-idle heuristic with `--network-idle`; it is
+off by default because analytics, long polling, and streaming requests may
+never become idle.
+
 Same-origin `<iframe>` content is recursed into the capture as native, selectable SVG rather than flattened to a screenshot; opt into cross-origin frames you trust with `--cross-origin-frames "<hosts>"`.
 
 For a multi-frame animated SVG, write a small JSON config and run `domotion animate`:

package/dist/capture/backdrop-isolation.d.ts

@@ -0,0 +1,14 @@
+export interface SnapshotNode {
+    backendNodeId: number;
+    parentIndex: number;
+    attributes: string[];
+    bounds?: [number, number, number, number];
+    paintOrder?: number;
+    layoutOrder?: number;
+}
+export interface IsolationPlan {
+    targetBackendNodeId: number;
+    hideBackendNodeIds: number[];
+}
+/** Pure CDP snapshot planner; DOM mutation and restoration stay in emoji.ts. */
+export declare function planBackdropIsolation(nodes: SnapshotNode[], token: string): IsolationPlan | null;

package/dist/capture/backdrop-isolation.js

@@ -0,0 +1,49 @@
+function overlaps(a, b) {
+    return a[0] < b[0] + b[2] && a[0] + a[2] > b[0]
+        && a[1] < b[1] + b[3] && a[1] + a[3] > b[1];
+}
+function hasToken(node, token) {
+    for (let i = 0; i + 1 < node.attributes.length; i += 2) {
+        if (node.attributes[i] === "data-domotion-backdrop-raster" && node.attributes[i + 1] === token)
+            return true;
+    }
+    return false;
+}
+function isAncestor(nodes, ancestor, child) {
+    for (let i = child; i >= 0; i = nodes[i]?.parentIndex ?? -1)
+        if (i === ancestor)
+            return true;
+    return false;
+}
+/** Pure CDP snapshot planner; DOM mutation and restoration stay in emoji.ts. */
+export function planBackdropIsolation(nodes, token) {
+    const target = nodes.findIndex((node) => hasToken(node, token));
+    if (target < 0)
+        return null;
+    const targetNode = nodes[target];
+    if (targetNode.bounds == null || targetNode.paintOrder == null)
+        return null;
+    const hide = [];
+    for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        if (i === target || node.bounds == null || node.paintOrder == null)
+            continue;
+        const paintsLater = node.paintOrder > targetNode.paintOrder
+            || (node.paintOrder === targetNode.paintOrder
+                && node.layoutOrder != null && targetNode.layoutOrder != null
+                && node.layoutOrder > targetNode.layoutOrder);
+        if (!paintsLater || !overlaps(node.bounds, targetNode.bounds))
+            continue;
+        if (isAncestor(nodes, i, target) || isAncestor(nodes, target, i))
+            continue;
+        // If an already-selected later ancestor hides this node, do not resolve and
+        // mutate the descendant too. Snapshot order is parent-before-child.
+        if (hide.some((id) => {
+            const ancestor = nodes.findIndex((n) => n.backendNodeId === id);
+            return ancestor >= 0 && isAncestor(nodes, ancestor, i);
+        }))
+            continue;
+        hide.push(node.backendNodeId);
+    }
+    return { targetBackendNodeId: targetNode.backendNodeId, hideBackendNodeIds: hide };
+}

package/dist/capture/emoji.js

@@ -20,6 +20,7 @@ import * as fontkit from "fontkit";
 import sharp from "sharp";
 import { clipRectForScreenshot } from "./clip-rect.js";
 import { forEachElement } from "../tree-ops/for-each-element.js";
+import { planBackdropIsolation } from "./backdrop-isolation.js";
 const APPLE_COLOR_EMOJI_PATH = "/System/Library/Fonts/Apple Color Emoji.ttc";
 let _aceFont = null;
 let _aceFontLoaded = false;
@@ -382,7 +383,119 @@ async function calibrateSbixOverlays(page, viewport, jobs) {
         catch { /* leave this overlay as stamped */ }
     }
 }
+async function rasterizeBackdropFilters(page, tree, viewport) {
+    const targets = [];
+    forEachElement(tree, (el) => { if (el.backdropFilterRaster?.token != null)
+        targets.push(el.backdropFilterRaster); });
+    if (targets.length === 0)
+        return;
+    let cdp;
+    try {
+        cdp = await page.context().newCDPSession(page);
+        const snap = await cdp.send("DOMSnapshot.captureSnapshot", {
+            computedStyles: [], includePaintOrder: true, includeDOMRects: true,
+        });
+        const doc = snap.documents?.[0];
+        const strings = snap.strings ?? [];
+        const paintByNode = new Map();
+        for (let i = 0; i < (doc?.layout?.nodeIndex?.length ?? 0); i++) {
+            const nodeIndex = doc.layout.nodeIndex[i];
+            const bounds = doc.layout.bounds[i];
+            const paintOrder = doc.layout.paintOrders?.[i];
+            if (paintOrder != null && !paintByNode.has(nodeIndex))
+                paintByNode.set(nodeIndex, { bounds, paintOrder, layoutOrder: i });
+        }
+        const attributesByNode = new Map();
+        const rareAttributes = doc?.nodes?.attributes;
+        if (Array.isArray(rareAttributes)) {
+            for (let i = 0; i < rareAttributes.length; i++)
+                attributesByNode.set(i, rareAttributes[i]);
+        }
+        else {
+            for (let i = 0; i < (rareAttributes?.index?.length ?? 0); i++) {
+                attributesByNode.set(rareAttributes.index[i], rareAttributes.value[i]);
+            }
+        }
+        const nodes = (doc?.nodes?.backendNodeId ?? []).map((backendNodeId, i) => {
+            const attrIndexes = attributesByNode.get(i) ?? [];
+            const attributes = attrIndexes.map((idx) => strings[idx]);
+            const layout = paintByNode.get(i);
+            return {
+                backendNodeId,
+                parentIndex: doc.nodes.parentIndex?.[i] ?? -1,
+                attributes,
+                bounds: layout?.bounds,
+                paintOrder: layout?.paintOrder,
+                layoutOrder: layout?.layoutOrder,
+            };
+        });
+        for (const target of targets) {
+            const plan = planBackdropIsolation(nodes, target.token);
+            const restores = [];
+            try {
+                if (plan != null) {
+                    for (const backendNodeId of plan.hideBackendNodeIds) {
+                        try {
+                            const resolved = await cdp.send("DOM.resolveNode", { backendNodeId });
+                            const objectId = resolved.object?.objectId;
+                            if (objectId == null)
+                                continue;
+                            const changed = await cdp.send("Runtime.callFunctionOn", {
+                                objectId,
+                                functionDeclaration: "function(){const v=this.style.getPropertyValue('visibility');const p=this.style.getPropertyPriority('visibility');this.style.setProperty('visibility','hidden','important');return {v,p};}",
+                                returnByValue: true,
+                            });
+                            restores.push({ objectId, value: changed.result?.value?.v ?? "", priority: changed.result?.value?.p ?? "" });
+                        }
+                        catch { /* conservative fallback: leave this node painted */ }
+                    }
+                }
+                const clip = clipRectForScreenshot(target, viewport);
+                const buf = await page.screenshot({ clip, omitBackground: true, type: "png" });
+                target.dataUri = `data:image/png;base64,${Buffer.from(buf).toString("base64")}`;
+                target.x = clip.x - viewport.x;
+                target.y = clip.y - viewport.y;
+                target.width = clip.width;
+                target.height = clip.height;
+            }
+            catch { /* retain vector fallback if screenshot itself fails */ }
+            finally {
+                for (let i = restores.length - 1; i >= 0; i--) {
+                    const restore = restores[i];
+                    try {
+                        await cdp.send("Runtime.callFunctionOn", {
+                            objectId: restore.objectId,
+                            functionDeclaration: "function(v,p){if(v==='')this.style.removeProperty('visibility');else this.style.setProperty('visibility',v,p);}",
+                            arguments: [{ value: restore.value }, { value: restore.priority }],
+                        });
+                    }
+                    catch { /* page teardown */ }
+                }
+            }
+        }
+    }
+    catch {
+        // DOMSnapshot is Chromium-only and mapping can fail for pseudo/fragments.
+        // Fall back to the original full-page crop for every unresolved target.
+        for (const target of targets) {
+            try {
+                const clip = clipRectForScreenshot(target, viewport);
+                const buf = await page.screenshot({ clip, omitBackground: true, type: "png" });
+                target.dataUri = `data:image/png;base64,${Buffer.from(buf).toString("base64")}`;
+            }
+            catch { /* leave dataUri absent */ }
+        }
+    }
+    finally {
+        await cdp?.detach().catch(() => undefined);
+        await page.evaluate(() => {
+            for (const el of document.querySelectorAll("[data-domotion-backdrop-raster]"))
+                el.removeAttribute("data-domotion-backdrop-raster");
+        }).catch(() => undefined);
+    }
+}
 export async function rasterizeBitmapGlyphs(page, tree, viewport) {
+    await rasterizeBackdropFilters(page, tree, viewport);
     // Two kinds of candidates share the pipeline:
     //  - Segment-level rasterRect (SK-1058): the whole pseudo text is a color-
     //    bitmap run; renderer emits one <image> and skips the text path.
@@ -392,6 +505,23 @@ export async function rasterizeBitmapGlyphs(page, tree, viewport) {
     const candidates = [];
     const sbixAligns = [];
     forEachElement(tree, (el) => {
+        if (el.transformSubtreeRaster != null) {
+            const tr = el.transformSubtreeRaster;
+            candidates.push({
+                rect: { x: tr.x, y: tr.y, width: tr.width, height: tr.height },
+                key: `transform-subtree|${tr.x}|${tr.y}|${tr.width}x${tr.height}`,
+                setDataUri: (uri) => { tr.dataUri = uri; },
+            });
+        }
+        if (el.nativeControlRaster != null) {
+            const nr = el.nativeControlRaster;
+            candidates.push({
+                rect: nr,
+                key: `native-control|${el.tag}|${el.styles.inputType ?? ''}|${nr.x}|${nr.y}|${nr.width}x${nr.height}`,
+                setDataUri: (uri) => { nr.dataUri = uri; },
+                snapRectToClip: true,
+            });
+        }
         // Element-level raster (SK-1108): textarea content region, too
         // involved to word-wrap in the path pipeline. Key on text+size+color so
         // identical textareas dedupe to one screenshot.

package/dist/capture/index.d.ts

@@ -139,7 +139,9 @@ export declare class DemoRecorder {
     constructor(baseUrl: string, opts: CaptureOptions);
     init(opts: CaptureOptions): Promise<void>;
     /** Navigate to a URL and capture the visible DOM as SVG. */
-    captureUrl(path: string, waitMs?: number, idPrefix?: string): Promise<string>;
+    captureUrl(path: string, waitMs?: number, idPrefix?: string, opts?: {
+        networkIdle?: boolean;
+    }): Promise<string>;
     /**
      * Shared post-capture pipeline (DM-1434): self-contained remote-image
      * embedding + optional resize + conic-gradient rasterization, then reset the

package/dist/capture/index.js

@@ -191,10 +191,10 @@ export class DemoRecorder {
         this.page.setDefaultNavigationTimeout(90_000);
     }
     /** Navigate to a URL and capture the visible DOM as SVG. */
-    async captureUrl(path, waitMs = 800, idPrefix = "") {
+    async captureUrl(path, waitMs = 800, idPrefix = "", opts) {
         if (this.page == null)
             throw new Error("Call init() first");
-        await this.page.goto(`${this.baseUrl}${path}`, { waitUntil: "networkidle" });
+        await this.page.goto(`${this.baseUrl}${path}`, { waitUntil: opts?.networkIdle === true ? "networkidle" : "load" });
         await this.page.waitForTimeout(waitMs);
         return this.captureCurrent(idPrefix);
     }

package/dist/capture/script/emoji-detect.js

@@ -338,6 +338,23 @@ export const createEmojiDetect = () => {
         // emoji over Chrome's text glyph.
         if (emojiPresentation26.has(cp))
             return isColorGlyph(cp, font);
+        // DM-2167: Emoji_Presentation is not confined to the 2600 block or the
+        // supplementary emoji planes. Misc Technical contains default-emoji
+        // characters such as WATCH, HOURGLASS and the media-control buttons
+        // (U+231A/U+231B/U+23E9..U+23F3). Linux Chromium routes these through
+        // Noto Color Emoji, but the old hand-partitioned ranges left them on the
+        // outline path, where a CBDT-only face has no vector glyph and vanished.
+        // Keep this cascade-sensitive: a leading monochrome face must still win.
+        if (cp >= 0x2300 && cp <= 0x23FF
+            && RE_EMOJI_PRESENTATION.test(String.fromCodePoint(cp)))
+            return isColorGlyph(cp, font);
+        // The Mahjong Tiles and Playing Cards blocks are another gap below the
+        // historical U+1F300 supplementary-plane floor. Chromium paints MAHJONG
+        // TILE RED DRAGON and PLAYING CARD BLACK JOKER from the color font when
+        // that is the resolved cascade face; keep text-font coverage authoritative.
+        if (cp >= 0x1F000 && cp <= 0x1F0FF
+            && RE_EMOJI_PRESENTATION.test(String.fromCodePoint(cp)))
+            return isColorGlyph(cp, font);
         // U+FE0F (Variation Selector-16) after a base emoji codepoint requests
         // emoji presentation — Chrome paints the colorful glyph instead of the
         // text-mode path glyph. DM-278.
@@ -425,8 +442,12 @@ export const createEmojiDetect = () => {
         // ⭐, ⭕). Cascade-dependent — Chrome paints text when the stack reaches a
         // monochrome symbol/math font first (Apple Symbols / STIX Two Math), color
         // otherwise. See `emojiPresentation2B` above.
+        // Some color-font glyphs in this set are intentionally achromatic (the
+        // black/white square pair). A saturation-only probe mistakes those bitmap
+        // glyphs for text. Color fonts ignore CSS fill while monochrome symbol
+        // fonts inherit it, so fill invariance supplies the missing discriminator.
         if (emojiPresentation2B.has(cp))
-            return isColorGlyph(cp, font);
+            return isColorGlyph(cp, font) || ignoresFillColor(cp, font);
         // DM-1167: the ONLY two codepoints in the Misc Symbols & Pictographs block
         // (U+1F300-1F5FF) that a macOS text font also covers monochrome are
         // 🌐 U+1F310 (GLOBE WITH MERIDIANS) and 🎤 U+1F3A4 (MICROPHONE) — Apple

package/dist/capture/script/font-feature-values.d.ts

@@ -0,0 +1,2 @@
+/** Collect Blink's CSSOM view of author @font-feature-values rules. */
+export declare function collectFontFeatureValues(doc: any): {};

package/dist/capture/script/font-feature-values.js

@@ -0,0 +1,62 @@
+// @ts-nocheck
+/** Collect Blink's CSSOM view of author @font-feature-values rules. */
+export function collectFontFeatureValues(doc) {
+    const families = {};
+    const categories = ["annotation", "ornaments", "stylistic", "swash", "characterVariant", "styleset"];
+    function familyNames(css) {
+        const out = [];
+        let token = "", quote = "";
+        for (const ch of css) {
+            if (quote) {
+                if (ch === quote)
+                    quote = "";
+                else
+                    token += ch;
+                continue;
+            }
+            if (ch === "\"" || ch === "'") {
+                quote = ch;
+                continue;
+            }
+            if (ch === ",") {
+                if (token.trim())
+                    out.push(token.trim().toLowerCase());
+                token = "";
+            }
+            else
+                token += ch;
+        }
+        if (token.trim())
+            out.push(token.trim().toLowerCase());
+        return out;
+    }
+    function visit(rules) {
+        if (!rules)
+            return;
+        for (const rule of rules) {
+            if (typeof rule.fontFamily === "string" && rule.stylistic != null) {
+                for (const family of familyNames(rule.fontFamily)) {
+                    const table = families[family] || (families[family] = {});
+                    for (const category of categories) {
+                        const entries = Array.from(rule[category].entries());
+                        if (!entries.length)
+                            continue;
+                        const aliases = table[category] || (table[category] = {});
+                        for (const [name, values] of entries)
+                            aliases[name] = Array.from(values);
+                    }
+                }
+            }
+            else if (rule.cssRules) {
+                visit(rule.cssRules);
+            }
+        }
+    }
+    for (const sheet of doc.styleSheets) {
+        try {
+            visit(sheet.cssRules);
+        }
+        catch { /* cross-origin sheet */ }
+    }
+    return families;
+}

package/dist/capture/script/index.js

@@ -22,6 +22,7 @@ import { createDottedCircleDetect } from "./dotted-circle-detect.js";
 import { createFontMetrics } from "./font-metrics.js";
 import { createPlaceholderShown } from "./placeholder-shown.js";
 import { createFontFamilyDefault } from "./font-family-default.js";
+import { collectFontFeatureValues } from "./font-feature-values.js";
 import { createPseudoRules } from "./pseudo-rules.js";
 import { createWarnings } from "./warnings.js";
 import { createCounterStyleResolver } from "./walker/counter-style-resolver.js";
@@ -48,6 +49,7 @@ const captureDocumentTree = (args) => {
     // `--cross-origin-frames` value, passed in as `args.cof`). null in the
     // default (Phase 1) configuration — only same-origin frames recurse then.
     const _crossOriginAllow = parseCrossOriginAllowlist(args.cof);
+    let _backdropRasterSeq = 0;
     // Wire up per-concern helpers. Each factory closes over its own state and
     // returns the handles captureInner / the orchestration tail call. Renamed
     // (e.g. `warnings: _warnings`) to keep captureInner's existing references
@@ -58,6 +60,15 @@ const captureDocumentTree = (args) => {
     const { measureFontMetrics: _measureFontMetrics, substituteAliasedFamilies: _substituteAliasedFamilies } = createFontMetrics();
     const { resolvePlaceholderShownBg: _resolvePlaceholderShownBg } = createPlaceholderShown();
     const { familyIsUADefault: _familyIsUADefault } = createFontFamilyDefault();
+    const _fontFeatureValuesByDocument = new WeakMap();
+    const _fontFeatureValuesFor = (doc) => {
+        let tables = _fontFeatureValuesByDocument.get(doc);
+        if (tables == null) {
+            tables = collectFontFeatureValues(doc);
+            _fontFeatureValuesByDocument.set(doc, tables);
+        }
+        return tables;
+    };
     const { resolvePseudo: _resolvePseudo, resolveCornerRadius: _resolveCornerRadius } = createPseudoRules();
     const { warn, shortSelector, warnings: _warnings } = createWarnings();
     // DM-770: counter-style map is populated by the pre-walk below (which
@@ -69,7 +80,7 @@ const captureDocumentTree = (args) => {
     // against a recursed iframe's own document (`_runCounterStylePrewalk(doc)`).
     const _runCounterStylePrewalk = createCounterStylePrewalk({ counterStyles: _counterStyles });
     const { resolveCounterStyle, resolveCounterValue, isCustomCounterStyle } = createCounterStyleResolver({ counterStyles: _counterStyles });
-    const { captureListsCounters } = createListsCountersHandler({ normColor, resolveCounterStyle, isCustomCounterStyle });
+    const { captureListsCounters } = createListsCountersHandler({ normColor, resolveCounterStyle, isCustomCounterStyle, measureFontMetrics: _measureFontMetrics });
     const { handleReplacedElement } = createReplacedElementsHandler({ vp });
     const { discoverMasks, discoverClipPaths, discoverFilters, maskDefs: _maskDefs, maskRasters: _maskRasters, clipPathDefs: _clipPathDefs, filterDefs: _filterDefs } = createMasksClipsHandler({ vp, warn });
     const { captureFormControls } = createFormControlsHandler({ normColor, resolvePseudo: _resolvePseudo });
@@ -206,7 +217,7 @@ const captureDocumentTree = (args) => {
         // them so the fidelity gaps are self-documenting.
         const sel = shortSelector(el);
         if (cs.transform && cs.transform.startsWith('matrix3d')) {
-            warn(sel, 'transform-3d', 'matrix3d/translate3d/rotate3d/perspective downgraded to 2D submatrix; z component + perspective dropped (SK-1135)');
+            warn(sel, 'transform-3d', 'non-affine 3D rendering context captured from Chromium as a bitmap snapshot');
         }
         if (cs.backdropFilter && cs.backdropFilter !== 'none') {
             warn(sel, 'backdrop-filter', 'approximated via a frosted-glass background fallback for the transparent-backdrop case (doc 19); no true backdrop blur');
@@ -612,6 +623,11 @@ const captureDocumentTree = (args) => {
                 fontStretch: cs.fontStretch,
                 fontVariationSettings: cs.fontVariationSettings,
                 fontFeatureSettings: cs.fontFeatureSettings,
+                fontVariantAlternates: cs.fontVariantAlternates,
+                // The alias table is document-global but only alternate-bearing nodes
+                // can consume it; omit it from the common element shape to avoid
+                // repeating author rule data throughout the serialized tree.
+                fontFeatureValues: cs.fontVariantAlternates && cs.fontVariantAlternates !== 'normal' ? _fontFeatureValuesFor(el.ownerDocument) : undefined,
                 // CSS font-variant-caps. 'small-caps' / 'all-small-caps' route to
                 // the OpenType smcp feature; renderer applies synthesized small-caps
                 // when the active font lacks smcp (Helvetica, Times, etc.). DM-361.
@@ -711,6 +727,83 @@ const captureDocumentTree = (args) => {
             // SK-1108 / SK-1128: textarea soft-wrap + writing-mode != horizontal-tb
             // content-box raster rect — see walker/text-segments.ts.
             elementRaster: computeElementRaster(el, cs, tag, rect, vp),
+            // DM-2150: SVG transforms are affine and cannot reproduce CSS
+            // perspective or preserve-3d flattening. Capture the top-level 3D
+            // rendering context as Chromium composited it. Descendant matrix3d
+            // nodes remain part of this one bitmap rather than being stamped
+            // independently. Include overflowing faces by unioning live descendant
+            // client rects before the walker freezes any child transforms.
+            transformSubtreeRaster: (function () {
+                const is3dRoot = cs.transformStyle === 'preserve-3d'
+                    || (cs.perspective != null && cs.perspective !== '' && cs.perspective !== 'none');
+                if (!is3dRoot)
+                    return undefined;
+                let p = el.parentElement;
+                while (p != null) {
+                    const pcs = getComputedStyle(p);
+                    if (pcs.transformStyle === 'preserve-3d'
+                        || (pcs.perspective != null && pcs.perspective !== '' && pcs.perspective !== 'none'))
+                        return undefined;
+                    p = p.parentElement;
+                }
+                let left = rect.left, top = rect.top, right = rect.right, bottom = rect.bottom;
+                const descendants = el.getElementsByTagName('*');
+                for (let i = 0; i < descendants.length; i++) {
+                    const dr = descendants[i].getBoundingClientRect();
+                    if (dr.width <= 0 || dr.height <= 0)
+                        continue;
+                    left = Math.min(left, dr.left);
+                    top = Math.min(top, dr.top);
+                    right = Math.max(right, dr.right);
+                    bottom = Math.max(bottom, dr.bottom);
+                }
+                return { x: left - vp.x, y: top - vp.y, width: right - left, height: bottom - top };
+            })(),
+            // DM-2149: `appearance:auto` controls are painted by Blink's platform
+            // LayoutTheme (including native shadow-DOM parts), so a single hardcoded
+            // SVG geometry/palette cannot match macOS, Windows, and Linux. Preserve
+            // author-owned `appearance:none` controls as vectors; snapshot only the
+            // native-themed host rectangle from the same Chromium doing capture.
+            nativeControlRaster: (function () {
+                const nativeTag = tag === 'input' || tag === 'select' || tag === 'textarea'
+                    || tag === 'button' || tag === 'progress' || tag === 'meter';
+                if (!nativeTag || cs.appearance === 'none' || rect.width <= 0 || rect.height <= 0)
+                    return undefined;
+                // Author outlines and validation-state focus rings paint outside the
+                // host border box even though the themed control itself is native.
+                // Blink's outline visual overflow is width + positive offset; include
+                // that surface in the same snapshot instead of clipping it at `rect`.
+                const outlineWidth = parseFloat(cs.outlineWidth) || 0;
+                const outlineOffset = parseFloat(cs.outlineOffset) || 0;
+                const expand = cs.outlineStyle !== 'none' && cs.outlineStyle !== 'hidden'
+                    ? Math.max(0, outlineWidth + outlineOffset)
+                    : 0;
+                // Skia AA coverage may extend one device-independent pixel past the
+                // layout border box (notably the lower edge of rounded author borders
+                // on otherwise native inputs). Preserve that visual-overflow fringe;
+                // the screenshot and emitted <image> use this same rect, so no scaling
+                // or fixture geometry is introduced.
+                const paintOverflow = 1;
+                const rasterExpand = expand + paintOverflow;
+                return {
+                    x: rect.left - vp.x - rasterExpand,
+                    y: rect.top - vp.y - rasterExpand,
+                    width: rect.width + rasterExpand * 2,
+                    height: rect.height + rasterExpand * 2,
+                };
+            })(),
+            // DM-2171: backdrop-filter samples already-painted content behind this
+            // element through a distinct Blink effect node. An img-rendered SVG has
+            // no equivalent input surface, so preserve Chromium's composited pixels
+            // for the complete isolation subtree at its paint-order position.
+            backdropFilterRaster: (function () {
+                const value = cs.backdropFilter || cs.webkitBackdropFilter || '';
+                if (value === '' || value === 'none' || rect.width <= 0 || rect.height <= 0)
+                    return undefined;
+                const token = 'bf' + (_backdropRasterSeq++);
+                el.setAttribute('data-domotion-backdrop-raster', token);
+                return { x: rect.left - vp.x, y: rect.top - vp.y, width: rect.width, height: rect.height, token };
+            })(),
             // DM-680: per-axis cumulative ancestor scale, exposed ONLY when
             // anisotropic (sx ≠ sy within a small epsilon). The geometric mean is
             // already folded into fontSize / fontAscent / fontDescent above, so
@@ -1516,23 +1609,72 @@ const captureDocumentTree = (args) => {
         }
         return out;
     }
-    // Active counter scope stack: each entry { name, value, owner }.
-    const _activeScopes = [];
+    // Blink keeps one stack per counter name. A counter introduced on an
+    // element remains visible to later siblings because its originating
+    // element's parent is still an ancestor of those siblings.
+    const _counterStacks = new Map();
+    const _isAncestorOrSelf = (ancestor, node) => ancestor === node || ancestor.contains(node);
+    function _stack(name) {
+        let stack = _counterStacks.get(name);
+        if (stack == null) {
+            stack = [];
+            _counterStacks.set(name, stack);
+        }
+        return stack;
+    }
+    function _removeStale(name, el) {
+        const stack = _stack(name);
+        while (stack.length > 0) {
+            const parent = stack[stack.length - 1].scopeParent;
+            if (parent == null || _isAncestorOrSelf(parent, el))
+                break;
+            stack.pop();
+        }
+    }
     function _findInnermost(name) {
-        for (let i = _activeScopes.length - 1; i >= 0; i--) {
-            if (_activeScopes[i].name === name)
-                return _activeScopes[i];
+        const stack = _stack(name);
+        return stack.length ? stack[stack.length - 1] : null;
+    }
+    function _snapshotCounters() {
+        const result = [];
+        for (const [name, stack] of _counterStacks)
+            for (const entry of stack)
+                result.push({ name, value: entry.value });
+        return result;
+    }
+    function _applyCounterStyle(owner, scopeParent, style) {
+        const touched = new Set();
+        const resets = _parseCounterDecl(style.counterReset, 0);
+        const increments = _parseCounterDecl(style.counterIncrement, 1);
+        const sets = _parseCounterDecl(style.counterSet, 0);
+        for (const item of [...resets, ...increments, ...sets])
+            touched.add(item.name);
+        for (const name of touched)
+            _removeStale(name, owner);
+        for (const { name, value } of resets) {
+            const stack = _stack(name);
+            if (stack.length && stack[stack.length - 1].scopeParent === scopeParent)
+                stack.pop();
+            stack.push({ name, value, owner, scopeParent });
         }
-        return null;
+        for (const { name, value } of increments) {
+            const current = _findInnermost(name);
+            if (current)
+                current.value += value;
+            else
+                _stack(name).push({ name, value, owner, scopeParent });
+        }
+        for (const { name, value } of sets) {
+            const current = _findInnermost(name);
+            if (current)
+                current.value = value;
+            else
+                _stack(name).push({ name, value, owner, scopeParent });
+        }
+        return touched;
     }
     function _counterPreWalk(el) {
         const cs = window.getComputedStyle(el);
-        const owned = [];
-        _parseCounterDecl(cs.counterReset, 0).forEach(({ name, value }) => {
-            const scope = { name, value, owner: el };
-            _activeScopes.push(scope);
-            owned.push(scope);
-        });
         // DM-705 / DM-706: CSS Lists 3 §2.3 ("Properties on a single element are
         // processed in the order reset, increment, set") — increment runs BEFORE
         // set. Our previous order (reset, set, increment) made
@@ -1540,36 +1682,28 @@ const captureDocumentTree = (args) => {
         // section` paint as "100." instead of Chrome's "99." for the
         // `.restart` h2 in `24-counters.html`. Same off-by-one (always +1) in
         // `24-deep-counter-scope.html`.
-        _parseCounterDecl(cs.counterIncrement, 1).forEach(({ name, value }) => {
-            const s = _findInnermost(name);
-            if (s)
-                s.value += value;
-            else {
-                const ns = { name, value, owner: el };
-                _activeScopes.push(ns);
-                owned.push(ns);
-            }
-        });
-        _parseCounterDecl(cs.counterSet, 0).forEach(({ name, value }) => {
-            const s = _findInnermost(name);
-            if (s)
-                s.value = value;
-            else {
-                const ns = { name, value, owner: el };
-                _activeScopes.push(ns);
-                owned.push(ns);
-            }
-        });
-        // Snapshot the active scopes (shallow copy of name+value pairs).
-        _counterSnapshot.set(el, _activeScopes.map((s) => ({ name: s.name, value: s.value })));
+        const touched = _applyCounterStyle(el, el.parentElement, cs);
+        const beforeStyle = window.getComputedStyle(el, '::before');
+        for (const name of _applyCounterStyle(el, el, beforeStyle))
+            touched.add(name);
+        const snapshots = { element: _snapshotCounters(), '::before': _snapshotCounters(), '::after': null };
         for (const child of el.children)
             _counterPreWalk(child);
-        // Pop scopes owned by this element on exit (counter scope ends with the
-        // owner element's subtree).
-        while (_activeScopes.length > 0 && owned.length > 0
-            && _activeScopes[_activeScopes.length - 1] === owned[owned.length - 1]) {
-            _activeScopes.pop();
-            owned.pop();
+        const afterStyle = window.getComputedStyle(el, '::after');
+        for (const name of _applyCounterStyle(el, el, afterStyle))
+            touched.add(name);
+        snapshots['::after'] = _snapshotCounters();
+        _counterSnapshot.set(el, snapshots);
+        // Match CountersAttachmentContext::RemoveCounterIfAncestorExists: a
+        // descendant-origin counter cannot remain atop an ancestor counter after
+        // leaving its originating element.
+        for (const name of touched) {
+            const stack = _stack(name);
+            if (stack.length < 2 || stack[stack.length - 1].owner !== el)
+                continue;
+            const previous = stack[stack.length - 2].owner;
+            if (previous instanceof Element && previous.contains(el))
+                stack.pop();
         }
     }
     _counterPreWalk(root);