domotion-svg 0.23.0 → 0.24.0

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.
@@ -403,9 +516,10 @@ export async function rasterizeBitmapGlyphs(page, tree, viewport) {
         if (el.nativeControlRaster != null) {
             const nr = el.nativeControlRaster;
             candidates.push({
-                rect: { x: nr.x, y: nr.y, width: nr.width, height: nr.height },
+                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

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/index.js

@@ -49,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
@@ -79,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 });
@@ -768,7 +769,40 @@ const captureDocumentTree = (args) => {
                     || tag === 'button' || tag === 'progress' || tag === 'meter';
                 if (!nativeTag || cs.appearance === 'none' || rect.width <= 0 || rect.height <= 0)
                     return undefined;
-                return { x: rect.left - vp.x, y: rect.top - vp.y, width: rect.width, height: rect.height };
+                // 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

package/dist/capture/script/walker/form-controls.d.ts

@@ -32,25 +32,7 @@ export declare const createFormControlsHandler: ({ normColor, resolvePseudo }: {
         } | undefined;
         selectChevron: boolean;
         selectDisplayText: any;
-        selectListboxOptions: ({
-            text: any;
-            selected: boolean;
-            disabled: boolean;
-            isOptgroupLabel: boolean;
-            isOptgroupChild?: undefined;
-        } | {
-            text: any;
-            selected: boolean;
-            disabled: boolean;
-            isOptgroupChild: boolean;
-            isOptgroupLabel?: undefined;
-        } | {
-            text: any;
-            selected: boolean;
-            disabled: boolean;
-            isOptgroupLabel?: undefined;
-            isOptgroupChild?: undefined;
-        })[] | undefined;
+        selectListboxOptions: any[] | undefined;
         accentColor: any;
         caretColor: any;
         inputValue: any;

package/dist/capture/script/walker/form-controls.js

@@ -147,21 +147,52 @@ export const createFormControlsHandler = ({ normColor, resolvePseudo }) => {
             selectListboxOptions: tag === 'select' && (el.size > 1 || el.multiple)
                 ? (function () {
                     const list = [];
+                    const hostRect = el.getBoundingClientRect();
+                    const row = (o, extra) => {
+                        const ocs = window.getComputedStyle(o);
+                        const or = o.getBoundingClientRect();
+                        const canvas = document.createElement('canvas');
+                        const ctx = canvas.getContext('2d');
+                        let fontAscent;
+                        if (ctx != null) {
+                            ctx.font = `${ocs.fontStyle} ${ocs.fontWeight} ${ocs.fontSize} ${ocs.fontFamily}`;
+                            fontAscent = ctx.measureText('Mxgp').fontBoundingBoxAscent;
+                        }
+                        return {
+                            text: (o.textContent || '').trim(), selected: !!o.selected,
+                            disabled: !!o.disabled, ...extra,
+                            // Unlike closed-select shadow parts, listbox OPTION elements
+                            // expose real layout rects and computed author paint. Capture
+                            // those browser-resolved facts instead of rebuilding row
+                            // height and :checked styling from host-font heuristics.
+                            x: or.left - hostRect.left, y: or.top - hostRect.top,
+                            width: or.width, height: or.height,
+                            backgroundColor: normColor(ocs.backgroundColor),
+                            color: normColor(ocs.color),
+                            paddingLeft: parseFloat(ocs.paddingLeft) || 0,
+                            paddingTop: parseFloat(ocs.paddingTop) || 0,
+                            fontSize: parseFloat(ocs.fontSize) || undefined,
+                            fontFamily: ocs.fontFamily || undefined,
+                            fontWeight: ocs.fontWeight || undefined,
+                            fontStyle: ocs.fontStyle || undefined,
+                            fontAscent,
+                        };
+                    };
                     const kids = el.children;
                     for (let ki = 0; ki < kids.length; ki++) {
                         const c = kids[ki];
                         if (c.tagName === 'OPTGROUP') {
-                            list.push({ text: c.label || '', selected: false, disabled: !!c.disabled, isOptgroupLabel: true });
+                            list.push(row(c, { text: c.label || '', selected: false, isOptgroupLabel: true }));
                             const og = c.children;
                             for (let gi = 0; gi < og.length; gi++) {
                                 const o = og[gi];
                                 if (o.tagName !== 'OPTION')
                                     continue;
-                                list.push({ text: (o.textContent || '').trim(), selected: !!o.selected, disabled: !!o.disabled, isOptgroupChild: true });
+                                list.push(row(o, { isOptgroupChild: true }));
                             }
                         }
                         else if (c.tagName === 'OPTION') {
-                            list.push({ text: (c.textContent || '').trim(), selected: !!c.selected, disabled: !!c.disabled });
+                            list.push(row(c, {}));
                         }
                     }
                     return list;

package/dist/capture/script/walker/fragmentation.js

@@ -7,6 +7,66 @@
 // across more than one line-box / column fragment. See the inline comments for
 // the trigger conditions (DM-754 / DM-937).
 export const detectInlineFragments = (el, cs, vp, captured) => {
+    // CSS Multi-column Layout paints rules in each column row. A
+    // column-span:all child ends the current row and starts another, so a
+    // rule reconstructed from the container's union box would incorrectly
+    // cross the spanner. Capture the physical row intervals here while the
+    // DOM's computed margins and border/padding geometry are available.
+    var _ownCount = parseInt(cs.columnCount, 10);
+    var _ownColumnWidth = parseFloat(cs.columnWidth || '');
+    var _ownGap = parseFloat(cs.columnGap || '');
+    if (!Number.isFinite(_ownGap))
+        _ownGap = parseFloat(cs.fontSize || '16') || 16;
+    var _ruleWidth = parseFloat(cs.columnRuleWidth || '0') || 0;
+    var _ruleStyle = cs.columnRuleStyle || 'none';
+    if (_ruleWidth > 0 && _ruleStyle !== 'none' && _ruleStyle !== 'hidden') {
+        var _box = el.getBoundingClientRect();
+        var _contentLeft = _box.left + (parseFloat(cs.borderLeftWidth) || 0) + (parseFloat(cs.paddingLeft) || 0);
+        var _contentRight = _box.right - (parseFloat(cs.borderRightWidth) || 0) - (parseFloat(cs.paddingRight) || 0);
+        var _contentTop = _box.top + (parseFloat(cs.borderTopWidth) || 0) + (parseFloat(cs.paddingTop) || 0);
+        var _contentBottom = _box.bottom - (parseFloat(cs.borderBottomWidth) || 0) - (parseFloat(cs.paddingBottom) || 0);
+        var _contentWidth = _contentRight - _contentLeft;
+        if (!(Number.isFinite(_ownCount) && _ownCount > 1) && Number.isFinite(_ownColumnWidth) && _ownColumnWidth > 0) {
+            _ownCount = Math.max(1, Math.floor((_contentWidth + _ownGap) / (_ownColumnWidth + _ownGap)));
+        }
+        if (Number.isFinite(_ownCount) && _ownCount > 1 && _contentWidth > 0 && _contentBottom > _contentTop) {
+            var _rows = [];
+            var _rowStart = _contentTop;
+            for (var _si = 0; _si < el.children.length; _si++) {
+                var _span = el.children[_si];
+                var _spanCs = window.getComputedStyle(_span);
+                if (_spanCs.columnSpan !== 'all')
+                    continue;
+                var _spanRect = _span.getBoundingClientRect();
+                var _spanTop = _spanRect.top - (parseFloat(_spanCs.marginTop) || 0);
+                var _spanBottom = _spanRect.bottom + (parseFloat(_spanCs.marginBottom) || 0);
+                if (_spanTop > _rowStart)
+                    _rows.push([_rowStart, Math.min(_spanTop, _contentBottom)]);
+                _rowStart = Math.max(_rowStart, _spanBottom);
+            }
+            if (_contentBottom > _rowStart)
+                _rows.push([_rowStart, _contentBottom]);
+            var _columnWidth = (_contentWidth - _ownGap * (_ownCount - 1)) / _ownCount;
+            var _rules = [];
+            for (var _ri = 1; _ri < _ownCount; _ri++) {
+                var _ruleX = _contentLeft + _ri * _columnWidth + (_ri - 0.5) * _ownGap - vp.x;
+                for (var _rsi = 0; _rsi < _rows.length; _rsi++) {
+                    if (_rows[_rsi][1] <= _rows[_rsi][0])
+                        continue;
+                    _rules.push({
+                        x: _ruleX,
+                        y1: _rows[_rsi][0] - vp.y,
+                        y2: _rows[_rsi][1] - vp.y,
+                        width: _ruleWidth,
+                        color: cs.columnRuleColor,
+                        style: _ruleStyle,
+                    });
+                }
+            }
+            if (_rules.length > 0)
+                captured.columnRules = _rules;
+        }
+    }
     var _bgC = captured.styles.backgroundColor;
     var _hasBg = _bgC != null && _bgC !== '' && _bgC !== 'transparent' && _bgC !== 'rgba(0, 0, 0, 0)';
     var _hasBgImage = captured.styles.backgroundImage != null

package/dist/capture/script/walker/lists-counters.d.ts

@@ -1,7 +1,8 @@
-export declare const createListsCountersHandler: ({ normColor, resolveCounterStyle, isCustomCounterStyle }: {
+export declare const createListsCountersHandler: ({ normColor, resolveCounterStyle, isCustomCounterStyle, measureFontMetrics }: {
     normColor: any;
     resolveCounterStyle: any;
     isCustomCounterStyle: any;
+    measureFontMetrics: any;
 }) => {
     captureListsCounters: (el: any, cs: any, tag: any) => {
         listMarkerIntrinsic: {
@@ -12,6 +13,7 @@ export declare const createListsCountersHandler: ({ normColor, resolveCounterSty
         markerColor: any;
         markerFontWeight: string | undefined;
         markerFontSize: string | undefined;
+        markerFontAscent: any;
         markerContent: string | undefined;
         markerFontFamily: string | undefined;
         markerFirstLineDy: number | undefined;

package/dist/capture/script/walker/lists-counters.js

@@ -13,7 +13,7 @@
 // no runtime imports of its own. Use `// @ts-nocheck` at the top because the
 // outer-page environment exposes `document` / `window` / `Image` without the
 // project's tsconfig DOM lib applying.
-export const createListsCountersHandler = ({ normColor, resolveCounterStyle, isCustomCounterStyle }) => {
+export const createListsCountersHandler = ({ normColor, resolveCounterStyle, isCustomCounterStyle, measureFontMetrics }) => {
     const captureListsCounters = (el, cs, tag) => {
         // CSS treats any element with display:list-item as a list item — the tag
         // alone isn't enough. An <li> with display:inline-block (e.g. a horizontal
@@ -124,6 +124,7 @@ export const createListsCountersHandler = ({ normColor, resolveCounterStyle, isC
             markerColor: markerCs ? normColor(markerCs.color) : undefined,
             markerFontWeight: markerCs ? markerCs.fontWeight : undefined,
             markerFontSize: markerCs ? markerCs.fontSize : undefined,
+            markerFontAscent: markerCs ? measureFontMetrics(markerCs).ascent : undefined,
             markerContent,
             markerFontFamily: markerCs ? markerCs.fontFamily : undefined,
             markerFirstLineDy,

package/dist/capture/script/walker/pseudo-content.d.ts

@@ -51,6 +51,8 @@ export declare const createPseudoContentHandler: (dependencies: any) => {
                 borB: number;
                 lineH: number;
                 fontSize: number;
+                measuredWidth: number;
+                measuredHeight: number;
                 backgroundColor: any;
                 backgroundImage: string | undefined;
                 borderRadius: number | undefined;

package/dist/capture/script/walker/pseudo-content.js

@@ -73,32 +73,43 @@ const buildPseudoContentHandler = ({ vp, normColor, measureFontMetrics, textNeed
         _emojiAdvCtx.font = pseudoCanvasFont(pcs);
         return _emojiAdvCtx.measureText(s).width;
     };
-    // DM-785: Chrome's HarfBuzz-shaped layout width differs from
-    // `canvas.measureText` by ~1-3px on bold uppercase short strings (the
-    // gradient-pill / MOST POPULAR / NEW badge pattern). Measuring via an
-    // off-screen <span> with the pseudo's resolved font properties and reading
-    // `getBoundingClientRect().width` matches the painted width exactly because
-    // it goes through the same shaping pipeline Chrome uses for layout. Only
-    // matters for `width: auto` absolute pseudos — the DM-507 numeric `pcs.width`
-    // path is still authoritative when present.
-    const probePseudoTextWidth = (text, pcs) => {
+    // DM-2191: DOM APIs expose a pseudo's computed style, but not its layout
+    // object or rect. Materialize that resolved style on a real child and let
+    // Blink lay out the generated content. Copying every computed property (not
+    // a hand-picked font/box subset) preserves the resolved cascade, variables,
+    // calc(), writing mode, font features, intrinsic sizing, and logical props.
+    const probeGeneratedPseudoLayout = (el, pseudo, text, pcs) => {
         const span = document.createElement('span');
-        span.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;left:-99999px;top:-99999px;white-space:pre;line-height:normal;margin:0;padding:0;border:0;text-indent:0';
-        span.style.fontFamily = pcs.fontFamily || '';
-        span.style.fontSize = pcs.fontSize || '';
-        span.style.fontWeight = pcs.fontWeight || '';
-        span.style.fontStyle = pcs.fontStyle || '';
-        span.style.fontStretch = pcs.fontStretch || '';
-        span.style.fontVariant = pcs.fontVariant || '';
-        span.style.fontFeatureSettings = pcs.fontFeatureSettings || '';
-        span.style.fontVariationSettings = pcs.fontVariationSettings || '';
-        span.style.letterSpacing = pcs.letterSpacing || '';
-        span.style.wordSpacing = pcs.wordSpacing || '';
+        for (let i = 0; i < pcs.length; i++) {
+            const name = pcs.item(i);
+            span.style.setProperty(name, pcs.getPropertyValue(name));
+        }
+        // Generated `content` has no effect on a real element; materialize it as a
+        // text node. Visibility keeps the probe non-painting while retaining layout.
+        span.style.setProperty('content', 'normal');
+        span.style.setProperty('visibility', 'hidden');
+        span.style.setProperty('pointer-events', 'none');
+        // Transforms affect only paint and turn getBoundingClientRect into an AABB;
+        // renderer applies them later around the untransformed layout box.
+        span.style.setProperty('transform', 'none');
+        span.style.setProperty('translate', 'none');
+        span.style.setProperty('rotate', 'none');
+        span.style.setProperty('scale', 'none');
         span.textContent = text;
-        document.body.appendChild(span);
-        const w = span.getBoundingClientRect().width;
-        document.body.removeChild(span);
-        return w;
+        if (pseudo === '::before')
+            el.insertBefore(span, el.firstChild);
+        else
+            el.appendChild(span);
+        const borderRect = span.getBoundingClientRect();
+        const range = document.createRange();
+        range.selectNodeContents(span);
+        const textRect = range.getBoundingClientRect();
+        const result = {
+            borderRect: { left: borderRect.left, top: borderRect.top, width: borderRect.width, height: borderRect.height },
+            textRect: { left: textRect.left, top: textRect.top, width: textRect.width, height: textRect.height },
+        };
+        span.remove();
+        return result;
     };
     // DM-768: when a static-flow pseudo declares `display: inline-block` (or
     // inline-flex / inline-grid / inline-table) the box participates in Chrome's
@@ -618,17 +629,22 @@ const buildPseudoContentHandler = ({ vp, normColor, measureFontMetrics, textNeed
             }
             if (text === '')
                 continue;
-            // DM-785: probe-span measurement matches Chrome's HarfBuzz-shaped
-            // layout width — canvas.measureText drifted ~1-3px on bold uppercase
-            // short strings (visible on rotated gradient pills as the text
-            // overflowing the badge). DM-507 numeric-pcs.width override still
-            // wins when the pseudo's box has an authored fixed width.
-            let pseudoWidth = probePseudoTextWidth(text, pcs);
-            if (pcs.position === 'absolute' || pcs.position === 'fixed') {
-                const pcsW = parseFloat(pcs.width);
-                if (!isNaN(pcsW) && pcsW > 0)
-                    pseudoWidth = pcsW;
-            }
+            const pseudoLayout = probeGeneratedPseudoLayout(el, pseudo, text, pcs);
+            // TextSegment dimensions are physical viewport dimensions. Range geometry
+            // therefore handles vertical text without pretending its inline advance is
+            // always an x-axis width. A zero range (e.g. whitespace-only content)
+            // falls back to the measured content box.
+            const pPadLMeasured = parseFloat(pcs.paddingLeft) || 0;
+            const pPadRMeasured = parseFloat(pcs.paddingRight) || 0;
+            const pBorLMeasured = parseFloat(pcs.borderLeftWidth) || 0;
+            const pBorRMeasured = parseFloat(pcs.borderRightWidth) || 0;
+            const measuredContentWidth = Math.max(0, pseudoLayout.borderRect.width
+                - pPadLMeasured - pPadRMeasured - pBorLMeasured - pBorRMeasured);
+            const hasUsedBoxWidth = pcs.width !== '' && pcs.width !== 'auto'
+                && (pcs.position === 'absolute' || pcs.position === 'fixed');
+            const pseudoWidth = hasUsedBoxWidth
+                ? measuredContentWidth
+                : (pseudoLayout.textRect.width > 0 ? pseudoLayout.textRect.width : measuredContentWidth);
             // Position: ::before sits at the START of the host's text/content.
             // ::after sits at the END. We fall back to (elLeft, elTop) here
             // because the host's textLeft/textWidth aren't yet known — the
@@ -818,6 +834,8 @@ const buildPseudoContentHandler = ({ vp, normColor, measureFontMetrics, textNeed
                     // on the line box).
                     lineH,
                     fontSize: elFontSize,
+                    measuredWidth: pseudoLayout.borderRect.width,
+                    measuredHeight: pseudoLayout.borderRect.height,
                     backgroundColor: pseudoBgColor !== '' ? pseudoBgColor : undefined,
                     backgroundImage: hasPseudoBgImg ? pseudoBgImgRaw : undefined,
                     borderRadius: pseudoBR > 0 ? pseudoBR : undefined,

package/dist/capture/script/walker/pseudo-inject.js

@@ -316,8 +316,10 @@ export const createPseudoInjectHandler = () => {
                 const lineCenter = p.seg.y + bs.fontSize / 2;
                 const boxTop = lineCenter - bs.lineH / 2 - bs.padT - bs.borT;
                 const bx = p.seg.x - bs.padL - bs.borL;
-                const bw = p.seg.width + bs.padL + bs.padR + bs.borL + bs.borR;
-                const bh = bs.lineH + bs.padT + bs.padB + bs.borT + bs.borB;
+                // DM-2191: prefer Blink's measured generated-content border box. The
+                // arithmetic fallback exists only for older captured trees.
+                const bw = bs.measuredWidth || (p.seg.width + bs.padL + bs.padR + bs.borL + bs.borR);
+                const bh = bs.measuredHeight || (bs.lineH + bs.padT + bs.padB + bs.borT + bs.borB);
                 if (bw > 0 && bh > 0) {
                     p.seg.pseudoBox = {
                         x: bx, y: boxTop, width: bw, height: bh,