domotion-svg 0.2.2 → 0.3.2

package/dist/capture/script/walker/borders-backgrounds.d.ts

@@ -1,25 +1,10 @@
-export declare const createBordersBackgroundsHandler: ({ normColor, resolvePlaceholderShownBg, resolveCornerRadius }: {
+export declare const createBordersBackgroundsHandler: ({ normColor, normGradientColors, resolvePlaceholderShownBg, resolveCornerRadius }: {
     normColor: any;
+    normGradientColors: any;
     resolvePlaceholderShownBg: any;
     resolveCornerRadius: any;
 }) => {
     captureBordersBackgrounds: (el: any, cs: any, tag: any, rect: any, isPlaceholderCapture: any) => {
-        backgroundColor: any;
-        borderColor: any;
-        borderWidth: any;
-        borderRadius: any;
-        borderTopLeftRadius: any;
-        borderTopRightRadius: any;
-        borderBottomRightRadius: any;
-        borderBottomLeftRadius: any;
-        borderTopWidth: any;
-        borderRightWidth: any;
-        borderBottomWidth: any;
-        borderLeftWidth: any;
-        borderTopStyle: any;
-        borderRightStyle: any;
-        borderBottomStyle: any;
-        borderLeftStyle: any;
         borderTopColor: any;
         borderRightColor: any;
         borderBottomColor: any;
@@ -31,7 +16,12 @@ export declare const createBordersBackgroundsHandler: ({ normColor, resolvePlace
         backgroundPosition: any;
         backgroundRepeat: any;
         backgroundClip: any;
+        backgroundBlendMode: any;
         webkitTextFillColor: any;
+        inheritedTextFillGradient: string | undefined;
+        webkitTextStrokeWidth: any;
+        webkitTextStrokeColor: any;
+        paintOrder: any;
         backgroundOrigin: any;
         backgroundAttachment: any;
         backgroundIntrinsic: ({
@@ -50,5 +40,22 @@ export declare const createBordersBackgroundsHandler: ({ normColor, resolvePlace
         outlineColor: any;
         outlineOffset: any;
         boxShadow: any;
+        boxDecorationBreak: any;
+        borderTopStyle: any;
+        borderRightStyle: any;
+        borderBottomStyle: any;
+        borderLeftStyle: any;
+        backgroundColor: any;
+        borderColor: any;
+        borderWidth: any;
+        borderRadius: any;
+        borderTopLeftRadius: any;
+        borderTopRightRadius: any;
+        borderBottomRightRadius: any;
+        borderBottomLeftRadius: any;
+        borderTopWidth: any;
+        borderRightWidth: any;
+        borderBottomWidth: any;
+        borderLeftWidth: any;
     };
 };

package/dist/capture/script/walker/borders-backgrounds.js

@@ -39,7 +39,7 @@
 //
 //   - **borderImageIntrinsicWidth / Height**: same pattern for border-
 //     image-source url().
-export const createBordersBackgroundsHandler = ({ normColor, resolvePlaceholderShownBg, resolveCornerRadius }) => {
+export const createBordersBackgroundsHandler = ({ normColor, normGradientColors, resolvePlaceholderShownBg, resolveCornerRadius }) => {
     const isUaColorBorder = (tag, el, cs, side) => tag === 'input' && el.type === 'color'
         && normColor(cs[side], cs.color).replace(/\s+/g, '') === 'rgb(0,0,0)';
     const tintedBorderColor = (tag, el, cs, side) => isUaColorBorder(tag, el, cs, side) ? 'rgb(118,118,118)' : normColor(cs[side], cs.color);
@@ -90,10 +90,26 @@ export const createBordersBackgroundsHandler = ({ normColor, resolvePlaceholderS
         }
         layers.push(bgImage.slice(start));
         return layers.map((layer) => {
+            // DM-759: `image-set(url(...) 1x, url(...) 2x, ...)` layers wrap their
+            // url() candidates inside the function call; the top-level regex
+            // below only matches a bare `url(...)` at layer start. Probe the
+            // FIRST url() inside the image-set instead so the renderer's `cover`
+            // / `contain` math has the right aspect ratio. Picking any candidate
+            // works because Chrome's image-set candidates are conventionally the
+            // SAME image at different resolutions / formats, so the intrinsic
+            // aspect is consistent across them; the absolute scale may differ
+            // by the 1x/2x factor but `cover` / `contain` are aspect-driven.
+            let searchLayer = layer;
+            const imgSet = /^\s*(?:-webkit-)?image-set\(\s*([\s\S]+)\s*\)\s*$/i.exec(layer);
+            if (imgSet != null)
+                searchLayer = imgSet[1];
             // Match all three url() forms: "...", '...', and bare. Data: URLs
             // with embedded HTML attribute quotes (escaped as \") were silently
             // truncated by a prior single-regex implementation. DM-308.
-            const u = /^\s*url\(\s*(?:"((?:\\.|[^"\\])*)"|'((?:\\.|[^'\\])*)'|([^)\s]+))\s*\)/.exec(layer);
+            // For image-set candidates the url() may appear anywhere in the
+            // inner string, so anchor at the start of the SEARCH LAYER but
+            // allow leading whitespace.
+            const u = /\burl\(\s*(?:"((?:\\.|[^"\\])*)"|'((?:\\.|[^'\\])*)'|([^)\s]+))\s*\)/.exec(searchLayer);
             if (u == null)
                 return null;
             const raw = u[1] || u[2] || u[3] || '';
@@ -115,6 +131,55 @@ export const createBordersBackgroundsHandler = ({ normColor, resolvePlaceholderS
         img.src = m[1];
         return img[dim] || undefined;
     };
+    // DM-690: CSS 2.1 §17.6.2.1 — `border-style: hidden` has the highest
+    // precedence in `border-collapse: collapse` mode and SUPPRESSES the
+    // neighbor cell's matching border too. Walk the table grid neighbors and
+    // return per-side flags so the caller can rewrite this cell's border-side
+    // styles to `'hidden'` (which the renderer already skips). Scope: simple
+    // tables (no rowspan / colspan); good enough for the bug-report fixture
+    // `04-deep-border-conflict` and the common-case marketing tables.
+    const cellHiddenNeighbors = (el, tag, cs) => {
+        const out = { top: false, right: false, bottom: false, left: false };
+        if ((tag !== 'td' && tag !== 'th') || cs.borderCollapse !== 'collapse')
+            return out;
+        const tr = el.parentElement;
+        if (tr == null || tr.tagName !== 'TR')
+            return out;
+        const rowCells = Array.from(tr.children).filter((c) => c.tagName === 'TD' || c.tagName === 'TH');
+        const colIdx = rowCells.indexOf(el);
+        const hiddenSide = (cell, side) => {
+            if (cell == null)
+                return false;
+            const cs2 = getComputedStyle(cell);
+            return cs2['border' + side + 'Style'] === 'hidden';
+        };
+        if (hiddenSide(rowCells[colIdx - 1], 'Right'))
+            out.left = true;
+        if (hiddenSide(rowCells[colIdx + 1], 'Left'))
+            out.right = true;
+        // Resolve the surrounding table to walk row-neighbors across
+        // thead/tbody/tfoot sections.
+        let table = tr.parentElement;
+        while (table != null && table.tagName !== 'TABLE')
+            table = table.parentElement;
+        if (table != null) {
+            const allRows = Array.from(table.querySelectorAll('tr')).filter((t) => t.closest('table') === table);
+            const rowIdx = allRows.indexOf(tr);
+            const above = allRows[rowIdx - 1];
+            const below = allRows[rowIdx + 1];
+            if (above != null) {
+                const aboveCells = Array.from(above.children).filter((c) => c.tagName === 'TD' || c.tagName === 'TH');
+                if (hiddenSide(aboveCells[colIdx], 'Bottom'))
+                    out.top = true;
+            }
+            if (below != null) {
+                const belowCells = Array.from(below.children).filter((c) => c.tagName === 'TD' || c.tagName === 'TH');
+                if (hiddenSide(belowCells[colIdx], 'Top'))
+                    out.bottom = true;
+            }
+        }
+        return out;
+    };
     const captureBordersBackgrounds = (el, cs, tag, rect, isPlaceholderCapture) => ({
         backgroundColor: (function () {
             if (isPlaceholderCapture) {
@@ -135,25 +200,73 @@ export const createBordersBackgroundsHandler = ({ normColor, resolvePlaceholderS
         borderRightWidth: cs.borderRightWidth,
         borderBottomWidth: cs.borderBottomWidth,
         borderLeftWidth: cs.borderLeftWidth,
-        borderTopStyle: cs.borderTopStyle,
-        borderRightStyle: cs.borderRightStyle,
-        borderBottomStyle: cs.borderBottomStyle,
-        borderLeftStyle: cs.borderLeftStyle,
+        // DM-690: when an adjacent collapsed-table cell declares its matching
+        // side as `border-style: hidden`, CSS 2.1 §17.6.2.1 says we MUST treat
+        // our side as hidden too (precedence: `hidden > widest > ...`). Override
+        // here at capture time so the renderer's existing `style === 'hidden'`
+        // skip suppresses the paint on this side. (Cells whose OWN side is
+        // already hidden are unaffected — they pass through.)
+        ...(function () {
+            const hn = cellHiddenNeighbors(el, tag, cs);
+            return {
+                borderTopStyle: hn.top ? 'hidden' : cs.borderTopStyle,
+                borderRightStyle: hn.right ? 'hidden' : cs.borderRightStyle,
+                borderBottomStyle: hn.bottom ? 'hidden' : cs.borderBottomStyle,
+                borderLeftStyle: hn.left ? 'hidden' : cs.borderLeftStyle,
+            };
+        })(),
         borderTopColor: tintedBorderColor(tag, el, cs, 'borderTopColor'),
         borderRightColor: tintedBorderColor(tag, el, cs, 'borderRightColor'),
         borderBottomColor: tintedBorderColor(tag, el, cs, 'borderBottomColor'),
         borderLeftColor: tintedBorderColor(tag, el, cs, 'borderLeftColor'),
         borderCollapse: cs.borderCollapse,
         frostedBgFallback: computeFrostedBgFallback(cs),
-        backgroundImage: cs.backgroundImage,
+        backgroundImage: normGradientColors(cs.backgroundImage, cs.color),
         backgroundSize: cs.backgroundSize,
         backgroundPosition: cs.backgroundPosition,
         backgroundRepeat: cs.backgroundRepeat,
         backgroundClip: cs.backgroundClip,
+        backgroundBlendMode: cs.backgroundBlendMode,
         // DM-462: -webkit-text-fill-color is the property that actually makes
         // the headline text transparent in the background-clip:text idiom
         // (cs.color may still report a normal value).
         webkitTextFillColor: cs.webkitTextFillColor || cs.WebkitTextFillColor || undefined,
+        // DM-749: Stripe's keynote-speaker headline pattern — a span with
+        // `background-image: <gradient>; background-clip: text; -webkit-text-
+        // fill-color: transparent` wraps a child div that holds the actual
+        // text. The gradient is on the parent but Chrome lets it paint through
+        // the child's glyphs because background-clip: text masks the gradient
+        // by the union of all descendant text shapes. When the element's own
+        // bg-image is none AND its text-fill-color is transparent AND an
+        // ancestor has background-clip: text with a gradient, capture that
+        // ancestor's gradient so the renderer can use it as the glyph fill.
+        inheritedTextFillGradient: (function () {
+            const ownTfc = cs.webkitTextFillColor || cs.WebkitTextFillColor || '';
+            // Only meaningful when our own text is transparent.
+            if (!/^(rgba\(0[^)]*?,\s*0\)|transparent)$/i.test(ownTfc.trim()))
+                return undefined;
+            // Walk up at most 8 ancestors looking for `background-clip: text`
+            // + a non-none `background-image`. 8 covers the Stripe hds-heading
+            // depth-of-2 nesting comfortably without scanning the whole tree.
+            let p = el.parentElement;
+            let depth = 0;
+            while (p != null && depth < 8) {
+                const pcs = window.getComputedStyle(p);
+                const bc = (pcs.backgroundClip || '') + ' ' + (pcs.webkitBackgroundClip || '');
+                if (/\btext\b/i.test(bc) && pcs.backgroundImage && pcs.backgroundImage !== 'none' && pcs.backgroundImage !== '') {
+                    return pcs.backgroundImage;
+                }
+                p = p.parentElement;
+                depth++;
+            }
+            return undefined;
+        })(),
+        // DM-719: `-webkit-text-stroke-width` / `-webkit-text-stroke-color` paint a
+        // stroke around each glyph outline. Captured so the renderer can add a
+        // `stroke` attribute to the text-path emission.
+        webkitTextStrokeWidth: cs.webkitTextStrokeWidth || cs.WebkitTextStrokeWidth || undefined,
+        webkitTextStrokeColor: cs.webkitTextStrokeColor || cs.WebkitTextStrokeColor || undefined,
+        paintOrder: cs.paintOrder || undefined,
         backgroundOrigin: cs.backgroundOrigin,
         backgroundAttachment: cs.backgroundAttachment,
         backgroundIntrinsic: computeBackgroundIntrinsic(cs),
@@ -169,6 +282,9 @@ export const createBordersBackgroundsHandler = ({ normColor, resolvePlaceholderS
         outlineColor: normColor(cs.outlineColor),
         outlineOffset: cs.outlineOffset,
         boxShadow: cs.boxShadow,
+        // box-decoration-break: 'slice' (default) vs 'clone'. Drives per-fragment
+        // paint of wrapped inline elements; see CapturedElement.inlineFragments.
+        boxDecorationBreak: cs.boxDecorationBreak || cs.webkitBoxDecorationBreak || 'slice',
     });
     return { captureBordersBackgrounds };
 };

package/dist/capture/script/walker/counter-style-resolver.d.ts

@@ -0,0 +1,7 @@
+export declare const createCounterStyleResolver: ({ counterStyles }: {
+    counterStyles: any;
+}) => {
+    resolveCounterStyle: (name: any, n: any) => any;
+    resolveCounterValue: (name: any, n: any) => any;
+    isCustomCounterStyle: (name: any) => boolean;
+};

package/dist/capture/script/walker/counter-style-resolver.js

@@ -0,0 +1,218 @@
+// @ts-nocheck
+//
+// DM-770 / DM-788: resolves a custom @counter-style name + 1-based index to
+// the marker symbol string per the CSS Counter Styles algorithms (cyclic,
+// fixed, numeric, alphabetic, symbolic, additive) plus prefix / suffix /
+// pad / negative / range / fallback / extends descriptors.
+//
+// Used by:
+//   - lists-counters.ts to resolve `list-style-type: <custom-name>` markers
+//     on <li> elements (DM-770)
+//   - pseudo-content.ts to resolve `counter(name, custom-style)` /
+//     `counters(name, sep, custom-style)` inside `::before` / `::after`
+//     `content` declarations (DM-788)
+//
+// The counter-style rule map is populated by `_walkRulesForCounterStyles` in
+// the orchestrator pre-walk (`src/capture/script/index.ts`); both walkers
+// close over the same object reference so a single sweep of styleSheets is
+// shared across the capture.
+//
+// Bundled into the page-context capture script via the index.ts orchestrator;
+// no runtime imports of its own.
+export const createCounterStyleResolver = ({ counterStyles }) => {
+    // Built-in counter-style names whose algorithm the render side already
+    // covers inside `formatListMarker`. When an `extends` / `fallback` chain
+    // bottoms out at one of these, return the formatted symbol so the caller
+    // can stamp it directly without recursing through this resolver.
+    const BUILTINS = new Set([
+        'decimal', 'decimal-leading-zero',
+        'lower-alpha', 'lower-latin', 'upper-alpha', 'upper-latin',
+        'lower-roman', 'upper-roman',
+        'lower-greek',
+        'disc', 'circle', 'square', 'none',
+    ]);
+    // Marker-context resolution (used by list-item ::marker). Returns the full
+    // string with prefix + pad + value + suffix wrapping per the CSS spec.
+    const resolveCounterStyle = (name, n) => _resolve(name, n, 0, true);
+    // Counter-function-context resolution (used by `counter()` / `counters()`
+    // inside `content`). Per Chrome's paint, the function returns only the
+    // pad-formatted value: prefix / suffix are NOT included. Matches DM-788
+    // empirical probe.
+    const resolveCounterValue = (name, n) => _resolve(name, n, 0, false);
+    const isCustomCounterStyle = (name) => counterStyles[name] != null;
+    const _resolve = (name, n, depth, wrap) => {
+        if (depth > 16)
+            return null; // fallback / extends loop guard
+        if (BUILTINS.has(name))
+            return _formatBuiltin(name, n);
+        const def = counterStyles[name];
+        if (def == null)
+            return _formatBuiltin('decimal', n);
+        if (def.system === 'extends' && def.extendsName != null) {
+            const childSym = _resolve(def.extendsName, n, depth + 1, wrap);
+            if (childSym == null)
+                return null;
+            const padded = _applyPad(childSym, def.padLen, def.padSym);
+            return wrap ? (def.prefix + padded + def.suffix) : padded;
+        }
+        if (n < def.rangeLo || n > def.rangeHi) {
+            return _resolve(def.fallback ?? 'decimal', n, depth + 1, wrap);
+        }
+        const negative = n < 0;
+        const abs = Math.abs(n);
+        let core = null;
+        switch (def.system) {
+            case 'cyclic':
+                if (def.symbols.length === 0)
+                    break;
+                core = def.symbols[((abs - 1) % def.symbols.length + def.symbols.length) % def.symbols.length];
+                break;
+            case 'fixed': {
+                const idx0 = abs - 1;
+                if (idx0 >= 0 && idx0 < def.symbols.length)
+                    core = def.symbols[idx0];
+                break;
+            }
+            case 'numeric': {
+                if (def.symbols.length < 2)
+                    break;
+                if (abs === 0) {
+                    core = def.symbols[0];
+                    break;
+                }
+                const base = def.symbols.length;
+                let v = abs;
+                let s = '';
+                while (v > 0) {
+                    s = def.symbols[v % base] + s;
+                    v = Math.floor(v / base);
+                }
+                core = s;
+                break;
+            }
+            case 'alphabetic': {
+                if (def.symbols.length === 0 || abs <= 0)
+                    break;
+                const base = def.symbols.length;
+                let v = abs;
+                let s = '';
+                while (v > 0) {
+                    v--;
+                    s = def.symbols[v % base] + s;
+                    v = Math.floor(v / base);
+                }
+                core = s;
+                break;
+            }
+            case 'symbolic': {
+                if (def.symbols.length === 0 || abs <= 0)
+                    break;
+                const base = def.symbols.length;
+                const copies = Math.ceil(abs / base);
+                const sym = def.symbols[(abs - 1) % base];
+                core = sym.repeat(copies);
+                break;
+            }
+            case 'additive': {
+                if (def.additiveSymbols.length === 0)
+                    break;
+                if (abs === 0) {
+                    const zero = def.additiveSymbols.find((s) => s.weight === 0);
+                    core = zero ? zero.sym : null;
+                }
+                else {
+                    let v = abs;
+                    let s = '';
+                    for (const { weight, sym } of def.additiveSymbols) {
+                        if (weight <= 0)
+                            continue;
+                        const count = Math.floor(v / weight);
+                        for (let i = 0; i < count; i++)
+                            s += sym;
+                        v -= count * weight;
+                    }
+                    core = v === 0 ? s : null;
+                }
+                break;
+            }
+        }
+        if (core == null)
+            return _resolve(def.fallback ?? 'decimal', n, depth + 1, wrap);
+        const padded = _applyPad(core, def.padLen, def.padSym);
+        const sign = negative ? def.negPrefix : '';
+        const signTail = negative ? def.negSuffix : '';
+        return wrap
+            ? (def.prefix + sign + padded + signTail + def.suffix)
+            : (sign + padded + signTail);
+    };
+    const _applyPad = (s, len, sym) => {
+        if (!len || !sym)
+            return s;
+        while ([...s].length < len)
+            s = sym + s;
+        return s;
+    };
+    const _formatBuiltin = (type, n) => {
+        switch (type) {
+            case 'decimal': return String(n);
+            case 'decimal-leading-zero': return n < 10 && n >= 0 ? '0' + n : String(n);
+            case 'lower-alpha':
+            case 'lower-latin':
+                return _alphaMarker(n, false);
+            case 'upper-alpha':
+            case 'upper-latin':
+                return _alphaMarker(n, true);
+            case 'lower-roman': return _romanMarker(n).toLowerCase();
+            case 'upper-roman': return _romanMarker(n);
+            case 'lower-greek': return _greekMarker(n);
+            case 'disc':
+            case 'circle':
+            case 'square':
+            case 'none':
+                return null;
+            default: return String(n);
+        }
+    };
+    const _alphaMarker = (n, upper) => {
+        if (n <= 0)
+            return String(n);
+        const base = upper ? 65 : 97;
+        let s = '';
+        let v = n;
+        while (v > 0) {
+            v--;
+            s = String.fromCharCode(base + (v % 26)) + s;
+            v = Math.floor(v / 26);
+        }
+        return s;
+    };
+    const _greekMarker = (n) => {
+        if (n <= 0)
+            return String(n);
+        const greek = 'αβγδεζηθικλμνξοπρστυφχψω';
+        let s = '';
+        let v = n;
+        while (v > 0) {
+            v--;
+            s = greek.charAt(v % 24) + s;
+            v = Math.floor(v / 24);
+        }
+        return s;
+    };
+    const _romanMarker = (n) => {
+        if (n <= 0 || n >= 4000)
+            return String(n);
+        const vals = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
+        const syms = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I'];
+        let s = '';
+        let v = n;
+        for (let i = 0; i < vals.length; i++) {
+            while (v >= vals[i]) {
+                s += syms[i];
+                v -= vals[i];
+            }
+        }
+        return s;
+    };
+    return { resolveCounterStyle, resolveCounterValue, isCustomCounterStyle };
+};

package/dist/capture/script/walker/input-value.js

@@ -92,9 +92,22 @@ export const createInputValueHandler = ({ vp, normColor, measureFontMetrics }) =
         // + ascent), so without this adjustment the text shows up at the top
         // of the button instead of centered. Surfaced by framer-mobile-fold's
         // "Okay" button (display: flex; align-items: center; height: 45px).
+        //
+        // DM-666: `<input type="submit" | "button" | "reset">` are button-type
+        // inputs whose value text Chrome ALWAYS centers vertically inside the
+        // content box — this is the UA-stylesheet `appearance: button`
+        // behaviour, independent of `display` / `align-items`. Google's
+        // homepage "Google Search" / "I'm Feeling Lucky" inputs are exactly
+        // this case: `display: inline-block`, no flex, 36-px tall with 14-px
+        // text — the value sits dead-centre in Chrome but anchored to
+        // content-top in the captured tree pre-fix. Extending the centring to
+        // these button types here keeps the renderer's textTop = line-box-top
+        // contract intact.
         const display = cs.display;
         const isFlexLike = display === 'flex' || display === 'inline-flex' || display === 'grid' || display === 'inline-grid';
-        if (isFlexLike && cs.alignItems === 'center') {
+        const isButtonInput = tag === 'input'
+            && (inputType === 'submit' || inputType === 'button' || inputType === 'reset');
+        if ((isFlexLike && cs.alignItems === 'center') || isButtonInput) {
             const contentH = rect.height - bt - bb - pt - pb;
             if (contentH > textHeight + 0.5) {
                 textTop = (rect.top - vp.y + bt + pt) + (contentH - textHeight) / 2;

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

@@ -1,5 +1,7 @@
-export declare const createListsCountersHandler: ({ normColor }: {
+export declare const createListsCountersHandler: ({ normColor, resolveCounterStyle, isCustomCounterStyle }: {
     normColor: any;
+    resolveCounterStyle: any;
+    isCustomCounterStyle: any;
 }) => {
     captureListsCounters: (el: any, cs: any, tag: any) => {
         listMarkerIntrinsic: {

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 }) => {
+export const createListsCountersHandler = ({ normColor, resolveCounterStyle, isCustomCounterStyle }) => {
     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
@@ -79,13 +79,33 @@ export const createListsCountersHandler = ({ normColor }) => {
         // else the values come back equal to the element's own font and are
         // quietly ignored at render time, so leave them undefined.
         const markerCs = isListItem ? window.getComputedStyle(el, '::marker') : null;
+        let markerContent = markerCs ? markerCs.content : undefined;
+        // DM-770: if list-style-type names a custom @counter-style and the
+        // ::marker pseudo doesn't already define a `content` override, resolve
+        // the marker symbol from the captured rule definitions. Chrome's CSSOM
+        // returns the resolved `::marker { content }` as the literal `"normal"`
+        // even when the painted marker is a custom symbol, so we re-implement
+        // the resolution algorithm against the captured rule map.
+        if (isListItem && resolveCounterStyle != null && listItemIndex != null) {
+            const lsType = cs.listStyleType;
+            const isCustom = lsType != null && isCustomCounterStyle != null && isCustomCounterStyle(lsType);
+            const noAuthorContent = markerContent == null || markerContent === '' || markerContent === 'normal';
+            if (isCustom && noAuthorContent) {
+                const resolved = resolveCounterStyle(lsType, listItemIndex);
+                if (resolved != null) {
+                    // Wrap as a CSS-string so the render-time `rawContent` parser
+                    // (which strips surrounding quotes) accepts it.
+                    markerContent = '"' + resolved.replace(/\\/g, '\\\\').replace(/"/g, '\\"') + '"';
+                }
+            }
+        }
         return {
             listMarkerIntrinsic,
             listItemIndex,
             markerColor: markerCs ? normColor(markerCs.color) : undefined,
             markerFontWeight: markerCs ? markerCs.fontWeight : undefined,
             markerFontSize: markerCs ? markerCs.fontSize : undefined,
-            markerContent: markerCs ? markerCs.content : undefined,
+            markerContent,
             markerFontFamily: markerCs ? markerCs.fontFamily : undefined,
         };
     };

package/dist/capture/script/walker/masks-clips.d.ts

@@ -3,6 +3,8 @@ export declare const createMasksClipsHandler: ({ vp, warn }: {
     warn: any;
 }) => {
     discoverMasks: (el: any, cs: any, sel: any) => void;
+    discoverClipPaths: (el: any, cs: any, sel: any) => void;
     maskDefs: Map<any, any>;
     maskRasters: Map<any, any>;
+    clipPathDefs: Map<any, any>;
 };

package/dist/capture/script/walker/masks-clips.js

@@ -38,6 +38,7 @@
 export const createMasksClipsHandler = ({ vp, warn }) => {
     const maskDefs = new Map();
     const maskRasters = new Map();
+    const clipPathDefs = new Map();
     let maskRasterIdx = 0;
     const discoverMasks = (el, cs, sel) => {
         if (!cs.mask || cs.mask === 'none' || cs.mask === '')
@@ -134,5 +135,44 @@ export const createMasksClipsHandler = ({ vp, warn }) => {
             warn(sel, 'mask', 'non-gradient/non-url()/non-element() mask source — not emitted');
         }
     };
-    return { discoverMasks, maskDefs, maskRasters };
+    // DM-826: clip-path: url("#id") same-document fragment ref. Resolves the
+    // fragment to an inline `<clipPath>` element and stashes its outerHTML so
+    // the renderer can emit it into the output SVG `<defs>`. See
+    // `docs/39-clip-path-fragment-references.md`.
+    //
+    // Scope (initial cut): same-document `<clipPath>` defs with
+    // `clipPathUnits="objectBoundingBox"` or the default `userSpaceOnUse`. The
+    // emitted def carries `clipPathUnits` through verbatim — SVG handles
+    // objectBoundingBox auto-scaling natively. userSpaceOnUse refs are recorded
+    // but the renderer currently passes coordinates through unchanged (best-
+    // effort; faithful support needs per-element translation, deferred).
+    const discoverClipPaths = (el, cs, sel) => {
+        const cp = cs.clipPath;
+        if (!cp || cp === 'none' || cp === '')
+            return;
+        // Strip an optional <geometry-box> keyword (`padding-box` / `border-box` /
+        // …) before the url(...) check — `clip-path: url(#id) padding-box` is
+        // valid per CSS Masking 1 §3.1. The renderer's geo-box handling is
+        // shape-side; here we only care about the url() form.
+        const cpShape = cp.replace(/\b(?:content-box|padding-box|border-box|margin-box|fill-box|stroke-box|view-box)\b/i, '').trim();
+        const fragMatch = /^url\(\s*(?:"|')?#([^"')\s]+)(?:"|')?\s*\)$/i.exec(cpShape);
+        if (fragMatch != null) {
+            const fragId = fragMatch[1];
+            if (!clipPathDefs.has(fragId)) {
+                const target = document.getElementById(fragId);
+                if (target != null && target.tagName.toLowerCase() === 'clippath') {
+                    clipPathDefs.set(fragId, { id: fragId, outerHTML: target.outerHTML });
+                }
+                else {
+                    warn(sel, 'clip-path', 'clip-path fragment "#' + fragId + '" did not resolve to an inline <clipPath> element');
+                }
+            }
+            return;
+        }
+        const extFragMatch = /^url\(\s*(?:"|')?[^"')#]+#[^"')\s]+(?:"|')?\s*\)$/i.exec(cpShape);
+        if (extFragMatch != null) {
+            warn(sel, 'clip-path', 'external-file SVG fragment refs (url("./file.svg#id")) are not yet emitted');
+        }
+    };
+    return { discoverMasks, discoverClipPaths, maskDefs, maskRasters, clipPathDefs };
 };