domotion-svg 0.2.2 → 0.3.2

package/dist/capture/script/index.js

@@ -22,6 +22,7 @@ import { createFontMetrics } from "./font-metrics.js";
 import { createPlaceholderShown } from "./placeholder-shown.js";
 import { createPseudoRules } from "./pseudo-rules.js";
 import { createWarnings } from "./warnings.js";
+import { createCounterStyleResolver } from "./walker/counter-style-resolver.js";
 import { createListsCountersHandler } from "./walker/lists-counters.js";
 import { createReplacedElementsHandler } from "./walker/replaced-elements.js";
 import { createMasksClipsHandler } from "./walker/masks-clips.js";
@@ -39,19 +40,26 @@ export const captureScript = (args) => {
     // returns the handles captureInner / the orchestration tail call. Renamed
     // (e.g. `warnings: _warnings`) to keep captureInner's existing references
     // unchanged.
-    const { normColor } = createColorNorm();
+    const { normColor, normGradientColors } = createColorNorm();
     const { needsRaster, textNeedsRaster } = createEmojiDetect();
     const { measureFontMetrics: _measureFontMetrics, substituteAliasedFamilies: _substituteAliasedFamilies } = createFontMetrics();
     const { resolvePlaceholderShownBg: _resolvePlaceholderShownBg } = createPlaceholderShown();
     const { resolvePseudo: _resolvePseudo, resolveCornerRadius: _resolveCornerRadius } = createPseudoRules();
     const { warn, shortSelector, warnings: _warnings } = createWarnings();
-    const { captureListsCounters } = createListsCountersHandler({ normColor });
+    // DM-770: counter-style map is populated by the pre-walk below (which
+    // reads @counter-style rules from document.styleSheets); declared here so
+    // the lists-counters and pseudo-content handlers close over the same
+    // object reference via the shared counter-style resolver.
+    const _counterStyles = {};
+    const { resolveCounterStyle, resolveCounterValue, isCustomCounterStyle } = createCounterStyleResolver({ counterStyles: _counterStyles });
+    const { captureListsCounters } = createListsCountersHandler({ normColor, resolveCounterStyle, isCustomCounterStyle });
     const { handleReplacedElement } = createReplacedElementsHandler({ vp });
-    const { discoverMasks, maskDefs: _maskDefs, maskRasters: _maskRasters } = createMasksClipsHandler({ vp, warn });
+    const { discoverMasks, discoverClipPaths, maskDefs: _maskDefs, maskRasters: _maskRasters, clipPathDefs: _clipPathDefs } = createMasksClipsHandler({ vp, warn });
     const { captureFormControls } = createFormControlsHandler({ normColor, resolvePseudo: _resolvePseudo });
     const { wrapWithFrozenTransform, threadFrozenTransform } = createTransformsHandler();
     const { captureBordersBackgrounds } = createBordersBackgroundsHandler({
         normColor,
+        normGradientColors,
         resolvePlaceholderShownBg: _resolvePlaceholderShownBg,
         resolveCornerRadius: _resolveCornerRadius,
     });
@@ -60,6 +68,8 @@ export const captureScript = (args) => {
         normColor,
         measureFontMetrics: _measureFontMetrics,
         textNeedsRaster,
+        resolveCounterValue,
+        isCustomCounterStyle,
     });
     const { captureInputValue } = createInputValueHandler({ vp, normColor, measureFontMetrics: _measureFontMetrics });
     const { captureTextSegments } = createTextSegmentsHandler({ vp, measureFontMetrics: _measureFontMetrics, needsRaster });
@@ -107,6 +117,18 @@ export const captureScript = (args) => {
             return null;
         if ((cs.visibility === 'hidden' || cs.visibility === 'collapse') && !bordersOnlyCell)
             return null;
+        // DM-750: `content-visibility: hidden` skips paint AND layout of the
+        // subtree; Chrome treats the element as a sized placeholder (driven by
+        // `contain-intrinsic-size`) with no visible children. `getBoundingClientRect`
+        // on the host still returns the placeholder box, but child rects would
+        // re-trigger layout if asked, producing rects that don't match what Chrome
+        // actually paints. Capture the host (so background / border / placeholder
+        // box land in the output) but drop the entire subtree's text + children.
+        // `content-visibility: auto` is handled implicitly — Chrome paints in-
+        // viewport `auto` sections normally, and the live-rect capture inherits
+        // that. Out-of-viewport `auto` sections are already culled by the captured
+        // viewport's bbox filter.
+        const _contentVisHidden = cs.contentVisibility === 'hidden';
         // DM-580: standard accessibility "visually-hidden" / "sr-only" idioms.
         // Chrome paints nothing for these (clipped to zero), but the DOM text is
         // still present for screen readers. Without this filter the captured tree
@@ -168,6 +190,10 @@ export const captureScript = (args) => {
         // Handler owns the maskDefs / maskRasters Maps that the orchestration
         // tail consumes. See walker/masks-clips.ts.
         discoverMasks(el, cs, sel);
+        // DM-826: clip-path: url("#id") same-document fragment refs. Sibling of
+        // the mask discovery above; collects inline <clipPath> defs the
+        // renderer copies into the output SVG. See docs/39.
+        discoverClipPaths(el, cs, sel);
         if (cs.borderImageSource && cs.borderImageSource !== 'none') {
             warn(sel, 'border-image', '9-slice composition pending (SK-466); border-image-source ignored');
         }
@@ -207,7 +233,12 @@ export const captureScript = (args) => {
         // padding box. The downstream text-segments assembler re-anchors
         // seg.x/y against the captured text once shaping completes. See
         // walker/pseudo-content.ts.
-        const _pcResult = capturePseudoContent(el, cs, rect, _counterSnapshot);
+        // DM-750: content-visibility:hidden hides the host's subtree, which
+        // includes generated content from ::before / ::after. Skip the pseudo
+        // capture too so the placeholder host is just an empty rect.
+        const _pcResult = _contentVisHidden
+            ? { pseudoSegments: [], pseudoBoxes: [] }
+            : capturePseudoContent(el, cs, rect, _counterSnapshot);
         const pseudoSegments = _pcResult.pseudoSegments;
         const pseudoBoxes = _pcResult.pseudoBoxes;
         // Skip text capture for elements where the child text is fallback content
@@ -223,7 +254,7 @@ export const captureScript = (args) => {
         // (DM-246); listbox-mode selects synthesize all rows via
         // styles.selectListboxOptions (DM-282).
         const textIsHiddenFallback = tag === 'meter' || tag === 'progress' || tag === 'datalist' || tag === 'option' || tag === 'optgroup';
-        if (tag !== 'svg' && tag !== 'img' && !textIsHiddenFallback) {
+        if (tag !== 'svg' && tag !== 'img' && !textIsHiddenFallback && !_contentVisHidden) {
             // Input / textarea value capture (incl. placeholder fallback, password
             // masking, sub-pixel inputXOffsets probe, text-align shift). See
             // walker/input-value.ts. When the handler `applied`, copy its locals
@@ -348,12 +379,47 @@ export const captureScript = (args) => {
             // lost when the SVG is re-embedded outside the original cascade —
             // computed style is resolved against the source DOM, not the clone.
             const _bakeSvgAttrs = ['fill', 'stroke', 'stroke-width', 'stroke-dasharray', 'stroke-linecap', 'stroke-linejoin', 'stroke-opacity', 'fill-opacity', 'opacity'];
+            // DM-720: SVG 2 promotes geometry properties (cx/cy/r/rx/ry/x/y/width/
+            // height/d) to CSS — modern Chrome resolves them from the cascade. When
+            // a fixture sets them entirely from CSS (no XML attrs on the element),
+            // the cloned subtree has no geometry and renders blank. Bake the
+            // computed values onto the clone so the emitted SVG stands on its own.
+            // We keep these in a separate list because (a) the per-tag applicability
+            // varies (circles want cx/cy/r, rects want x/y/width/height + rx/ry,
+            // paths want d) and (b) computed values need light normalisation
+            // (strip "px"; unwrap path("…") for d) before they're valid as XML
+            // presentation attributes.
+            const _bakeSvgGeomAttrs = ['cx', 'cy', 'r', 'rx', 'ry', 'x', 'y', 'width', 'height', 'd'];
             const _walkBake = (origNode, cloneNode) => {
                 if (origNode.nodeType !== 1)
                     return;
                 const ns = origNode.namespaceURI;
                 if (ns === 'http://www.w3.org/2000/svg' && origNode !== el) {
                     const ocs = window.getComputedStyle(origNode);
+                    // DM-778: detect whether the source's `fill` / `stroke` was driven
+                    // by `currentColor`. When the symbol is defined in a hidden <defs>
+                    // <svg> and the polygon/polyline's CSS rule is `fill:
+                    // currentColor` (or `stroke: currentColor`), getComputedStyle on
+                    // that node resolves the value against the DEFS's cascade —
+                    // typically the document body's color = black. If we baked that
+                    // black literal onto the clone, every <use> consumer would paint
+                    // the icon black regardless of its own host color. Probe by
+                    // temporarily flipping `style.color` on the source: if `fill` /
+                    // `stroke` follows, the value was driven by `currentColor` and we
+                    // should preserve the keyword so `_substCurrentColor` can resolve
+                    // it against the consumer's color later. Restore the source's
+                    // inline color so the live page state isn't disturbed.
+                    const _usesCurrentColor = (camel) => {
+                        const baseVal = ocs[camel];
+                        if (baseVal !== ocs.color)
+                            return false;
+                        const savedColor = origNode.style.color;
+                        origNode.style.color = "rgb(1, 2, 3)";
+                        const probeCs = window.getComputedStyle(origNode);
+                        const matches = probeCs[camel] === probeCs.color;
+                        origNode.style.color = savedColor;
+                        return matches;
+                    };
                     for (const attr of _bakeSvgAttrs) {
                         const camel = attr.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
                         const val = ocs[camel];
@@ -363,7 +429,54 @@ export const captureScript = (args) => {
                         // cascade and lose their resolution outside it, so we replace
                         // them with the resolved computed value.
                         if (val != null && val !== '' && !_hasConcreteAttr(origNode, attr)) {
-                            cloneNode.setAttribute(attr, val);
+                            // DM-778: preserve `currentColor` for `fill` / `stroke` when
+                            // the source rule uses it, so the consumer's color cascades
+                            // through the inlined symbol.
+                            const preserveCurrent = (attr === "fill" || attr === "stroke") && _usesCurrentColor(camel);
+                            cloneNode.setAttribute(attr, preserveCurrent ? "currentColor" : val);
+                        }
+                    }
+                    // DM-720: bake CSS-driven geometry. Skip when the source has a
+                    // concrete XML attr — Chrome's per-property precedence is "CSS wins
+                    // over the presentation attribute" since SVG 2, but the computed
+                    // value reflects that already, so writing it to the clone preserves
+                    // the same painted geometry. Strip "px" suffixes and unwrap d's
+                    // path() wrapper so the values parse as XML presentation attrs.
+                    for (const gattr of _bakeSvgGeomAttrs) {
+                        if (_hasConcreteAttr(origNode, gattr))
+                            continue;
+                        let gval = ocs.getPropertyValue(gattr);
+                        if (gval == null)
+                            continue;
+                        gval = gval.trim();
+                        if (gval === '' || gval === 'auto' || gval === 'none' || gval === 'normal')
+                            continue;
+                        if (gattr === 'd') {
+                            // Computed `d` is wrapped as `path("M …")`. Unwrap to bare data.
+                            const m = /^path\(\s*(?:"([^"]*)"|'([^']*)')\s*\)$/.exec(gval);
+                            if (m)
+                                gval = m[1] != null ? m[1] : m[2];
+                            else
+                                continue; // not a recognized path() form
+                        }
+                        else if (/^-?\d+(?:\.\d+)?px$/.test(gval)) {
+                            gval = gval.slice(0, -2);
+                        }
+                        cloneNode.setAttribute(gattr, gval);
+                    }
+                    // DM-815: `<mask mask-type="…">` is a presentation attribute that
+                    // CSS can override (e.g. `svg .alpha-test { mask-type: alpha }`).
+                    // Bake the computed value as an attribute on cloned `<mask>` nodes
+                    // so the emitted standalone SVG renders the mask with the
+                    // intended semantics — without it, alpha-driven masks (gradient
+                    // with stop-opacity transitions on solid black) decode as
+                    // luminance and paint nothing.
+                    if (origNode.tagName && origNode.tagName.toLowerCase() === 'mask') {
+                        const mt = ocs.maskType || ocs.getPropertyValue('mask-type');
+                        if (mt === 'alpha' || mt === 'luminance') {
+                            if (!origNode.hasAttribute('mask-type') || origNode.getAttribute('mask-type') !== mt) {
+                                cloneNode.setAttribute('mask-type', mt);
+                            }
                         }
                     }
                     // DM-508: bake CSS-animated transforms at t=0. CSS animation /
@@ -378,20 +491,45 @@ export const captureScript = (args) => {
                     // origin px values are relative to the element's bounding box. We
                     // read those from getComputedStyle().transformOrigin and compose.
                     var transformVal = ocs.transform;
-                    if (transformVal != null && transformVal !== '' && transformVal !== 'none') {
+                    // DM-676: only bake when the SOURCE node has no static `transform=`
+                    // attribute. The bake exists to capture CSS-animated transforms at
+                    // t=0 (DM-508). When the node already has a literal `transform=`
+                    // attribute, the existing attribute IS the source of truth — Chrome
+                    // resolves it through transform-origin/transform-box at paint time,
+                    // and the consumer browser will apply the same resolution. Baking
+                    // a composed origin-anchored matrix on top double-applies the
+                    // origin and shifts the rect.
+                    var hasStaticTransformAttr = origNode.hasAttribute('transform') && !_isUnresolvedCssExpr(origNode.getAttribute('transform'));
+                    if (!hasStaticTransformAttr && transformVal != null && transformVal !== '' && transformVal !== 'none') {
                         var transformOriginVal = ocs.transformOrigin || '0 0';
                         var originParts = transformOriginVal.trim().split(/\s+/);
                         var ox = parseFloat(originParts[0] || '0') || 0;
                         var oy = parseFloat(originParts[1] || '0') || 0;
-                        // For transform-box: fill-box (Chrome default for SVG since CSS
-                        // Transforms 2), origin coords are relative to the element's bbox.
-                        // We need them in the parent's user space — add the bbox origin.
-                        // getBBox() works on rendered SVG nodes.
+                        // DM-752: route through `transform-box` to convert origin px values
+                        // from the reference box's local coord space into SVG user space.
+                        // Chrome's `getComputedStyle().transformOrigin` returns px values
+                        // relative to the resolved transform-box:
+                        //   - `fill-box` (SVG default): bbox-local → add `bbox.x / bbox.y`.
+                        //   - `stroke-box`: stroke-bbox-local. Stroke-bbox is the geometry
+                        //     bbox extended by `stroke-width / 2` on each side, so
+                        //     stroke-bbox.x = bbox.x - sw/2, stroke-bbox.y = bbox.y - sw/2.
+                        //   - `view-box`: already in viewBox / user space coords; no shift.
+                        //   - `content-box` / `border-box`: HTML-only; SVG-side bake doesn't
+                        //     hit these (the HTML transform path applies them separately).
+                        // Without this, `transform-box: view-box` rotated around the wrong
+                        // anchor (the rect's bbox top-left instead of the viewBox center)
+                        // and `transform-box: stroke-box` was off by `stroke-width / 2`.
+                        var transformBoxVal = ocs.transformBox || 'fill-box';
                         try {
-                            if (typeof origNode.getBBox === 'function') {
+                            if (typeof origNode.getBBox === 'function' && transformBoxVal !== 'view-box') {
                                 var bbox = origNode.getBBox();
                                 ox += bbox.x;
                                 oy += bbox.y;
+                                if (transformBoxVal === 'stroke-box') {
+                                    var swPx = parseFloat(ocs.strokeWidth || '0') || 0;
+                                    ox -= swPx / 2;
+                                    oy -= swPx / 2;
+                                }
                             }
                         }
                         catch (e) { /* element not yet in render tree, fall through */ }
@@ -469,22 +607,22 @@ export const captureScript = (args) => {
                         // symbol target — we let SVG do the math.
                         var vb = target.getAttribute('viewBox') || '';
                         var par = target.getAttribute('preserveAspectRatio') || '';
-                        replacement = document.createElementNS(_svgNS, 'svg');
+                        var innerSvg = document.createElementNS(_svgNS, 'svg');
                         if (ux !== 0)
-                            replacement.setAttribute('x', String(ux));
+                            innerSvg.setAttribute('x', String(ux));
                         if (uy !== 0)
-                            replacement.setAttribute('y', String(uy));
+                            innerSvg.setAttribute('y', String(uy));
                         if (uw != null)
-                            replacement.setAttribute('width', uw);
+                            innerSvg.setAttribute('width', uw);
                         if (uh != null)
-                            replacement.setAttribute('height', uh);
+                            innerSvg.setAttribute('height', uh);
                         if (vb !== '')
-                            replacement.setAttribute('viewBox', vb);
+                            innerSvg.setAttribute('viewBox', vb);
                         if (par !== '')
-                            replacement.setAttribute('preserveAspectRatio', par);
+                            innerSvg.setAttribute('preserveAspectRatio', par);
                         for (var ci = 0; ci < target.children.length; ci++) {
                             var clonedChild = target.children[ci].cloneNode(true);
-                            replacement.appendChild(clonedChild);
+                            innerSvg.appendChild(clonedChild);
                             // DM-508: bake t=0 computed styles on the inlined subtree.
                             // The hidden-defs symbol's children carry CSS animations whose
                             // computed values (transform, fill, opacity, etc.) reflect the
@@ -492,13 +630,40 @@ export const captureScript = (args) => {
                             // original DOM as source captures those values.
                             _walkBake(target.children[ci], clonedChild);
                         }
+                        // DM-778: thread the <use>'s own transform around the inlined
+                        // nested <svg>. Per SVG 2 §5.6 the use's `transform` attribute
+                        // applies to the inlined shadow tree; SVG's `<svg>` element does
+                        // not directly take a `transform` attribute in legacy SVG 1.1
+                        // renderers, so wrap in a `<g transform>` to be safe. Without
+                        // this the `<use href="#badge" transform="scale(0.6)">` form in
+                        // `07-deep-svg-use-href` rendered the badge at full size,
+                        // duplicating the un-scaled pill on top of the in-place pill.
+                        var useTransformAttrSym = useEl.getAttribute('transform') || '';
+                        if (useTransformAttrSym !== '') {
+                            replacement = document.createElementNS(_svgNS, 'g');
+                            replacement.setAttribute('transform', useTransformAttrSym);
+                            replacement.appendChild(innerSvg);
+                        }
+                        else {
+                            replacement = innerSvg;
+                        }
                     }
                     else {
-                        // <g>, <path>, <circle>, <svg>, etc. — wrap in <g translate(x,y)>.
-                        // Skip translate when ux/uy are zero to keep the markup tidy.
+                        // <g>, <path>, <circle>, <svg>, etc. — wrap in <g transform>.
+                        // Per SVG 2 §5.6 the `<use>` element's own `transform` attribute
+                        // applies to the inlined shadow tree, with the use's x/y
+                        // translate happening INSIDE that transform. So compose:
+                        //   composedTransform = useTransform + translate(x, y)
+                        // Skip pieces that are no-ops to keep the markup tidy. Without
+                        // this, `<use transform="scale(1.2)" x="80" y="150">` would
+                        // inline as plain `translate(80, 150)` and the scale would
+                        // silently disappear (DM-675).
                         replacement = document.createElementNS(_svgNS, 'g');
-                        if (ux !== 0 || uy !== 0) {
-                            replacement.setAttribute('transform', 'translate(' + ux + ',' + uy + ')');
+                        var useTransformAttr = useEl.getAttribute('transform') || '';
+                        var translatePart = (ux !== 0 || uy !== 0) ? ('translate(' + ux + ',' + uy + ')') : '';
+                        var composedTransform = (useTransformAttr + ' ' + translatePart).trim();
+                        if (composedTransform !== '') {
+                            replacement.setAttribute('transform', composedTransform);
                         }
                         var clonedTarget = target.cloneNode(true);
                         // Drop the id on the clone — keeping it would create a duplicate
@@ -510,6 +675,28 @@ export const captureScript = (args) => {
                         replacement.appendChild(clonedTarget);
                         // DM-508: bake t=0 computed styles on the inlined target subtree.
                         _walkBake(target, clonedTarget);
+                        // When the target itself is an `<svg>` (the framer.com toolbar
+                        // pattern: `<use href="#svgID">` → `<svg viewBox="0 0 20 20"
+                        // id="svgID"><path .../></svg>` living in a hidden defs container
+                        // with `width: 0; height: 0`), the bake above writes `width="0"
+                        // height="0"` onto the cloned svg from the source's computed
+                        // style. That collapses the inlined inner viewport and the icon
+                        // paints nothing inside its parent — even though Chrome paints
+                        // it correctly because the live `<use>` consumer's viewport
+                        // (the outer svg inside the page's regular flow) gives the icon
+                        // its 14×14 / 20×20 space. Strip baked zero width/height on the
+                        // cloned target so the nested svg defaults to 100%/100% of its
+                        // parent viewport, matching Chrome's behavior. Don't touch non-
+                        // zero baked values — those came from a legitimately-sized source
+                        // and reflect Chrome's intent.
+                        if (clonedTarget.tagName && clonedTarget.tagName.toLowerCase() === 'svg' && clonedTarget.removeAttribute) {
+                            if (!_hasConcreteAttr(target, 'width') && /^0(?:\.0+)?$/.test(clonedTarget.getAttribute('width') || '')) {
+                                clonedTarget.removeAttribute('width');
+                            }
+                            if (!_hasConcreteAttr(target, 'height') && /^0(?:\.0+)?$/.test(clonedTarget.getAttribute('height') || '')) {
+                                clonedTarget.removeAttribute('height');
+                            }
+                        }
                     }
                     // Carry over any presentation attrs from the <use> element. CSS
                     // spec: attributes on <use> override the same attribute on the
@@ -551,22 +738,30 @@ export const captureScript = (args) => {
             svgContent = clone.outerHTML;
         }
         const children = [];
-        for (const child of el.children) {
-            // Closed <details> hides non-<summary> children visually. getBoundingClientRect
-            // still returns their rects and cs.display isn't 'none', so we explicitly
-            // skip non-summary children when the parent details is closed.
-            if (tag === 'details' && !el.open && child.tagName.toLowerCase() !== 'summary')
-                continue;
-            // <select> renders its own listbox/dropdown via the form-control
-            // synth; recursively capturing <option>/<optgroup> children would
-            // emit their own background rects and stack them on top of the
-            // synth output, hiding the option text. Skip them. (DM-355)
-            if (tag === 'select' && (child.tagName.toLowerCase() === 'option' || child.tagName.toLowerCase() === 'optgroup'))
-                continue;
-            const c = capture(child);
-            if (c)
-                children.push(c);
+        // DM-750: see the `content-visibility: hidden` note above — capture the
+        // host's own box (background / border / placeholder) but drop the subtree
+        // entirely. Skip the whole `for (child of el.children)` loop so neither
+        // children nor their text gets pushed.
+        if (_contentVisHidden) {
+            // fall through to the rest of the capture with `children = []`.
         }
+        else
+            for (const child of el.children) {
+                // Closed <details> hides non-<summary> children visually. getBoundingClientRect
+                // still returns their rects and cs.display isn't 'none', so we explicitly
+                // skip non-summary children when the parent details is closed.
+                if (tag === 'details' && !el.open && child.tagName.toLowerCase() !== 'summary')
+                    continue;
+                // <select> renders its own listbox/dropdown via the form-control
+                // synth; recursively capturing <option>/<optgroup> children would
+                // emit their own background rects and stack them on top of the
+                // synth output, hiding the option text. Skip them. (DM-355)
+                if (tag === 'select' && (child.tagName.toLowerCase() === 'option' || child.tagName.toLowerCase() === 'optgroup'))
+                    continue;
+                const c = capture(child);
+                if (c)
+                    children.push(c);
+            }
         const _animId = el.dataset != null ? el.dataset.domotionAnim : undefined;
         // <fieldset> with a top-aligned <legend>: Chrome's UA fieldset paints its
         // top border at the legend's vertical center, with a notch cut in the
@@ -613,6 +808,12 @@ export const captureScript = (args) => {
                 ...captureBordersBackgrounds(el, cs, tag, rect, isPlaceholderCapture),
                 overflowX: cs.overflowX,
                 overflowY: cs.overflowY,
+                // DM-761: `overflow-clip-margin` extends the overflow clip outward
+                // from a reference box (content / padding / border) by a length.
+                // Only meaningful for `overflow: clip`; `hidden` ignores it. Captured
+                // as the resolved string ("20px" / "content-box 12px") so the renderer
+                // can parse the reference-box keyword + length together.
+                overflowClipMargin: cs.overflowClipMargin || undefined,
                 scrollbarGutter: cs.scrollbarGutter || 'auto',
                 scrollWidth: el.scrollWidth,
                 scrollHeight: el.scrollHeight,
@@ -633,6 +834,44 @@ export const captureScript = (args) => {
                 maskPosition: cs.maskPosition || cs.webkitMaskPosition || '0% 0%',
                 maskRepeat: cs.maskRepeat || cs.webkitMaskRepeat || 'repeat',
                 maskComposite: cs.maskComposite || cs.webkitMaskComposite || 'add',
+                maskClip: cs.maskClip || cs.webkitMaskClip || 'border-box',
+                // DM-758: `mask-border-source` / legacy `-webkit-mask-box-image`. Chrome
+                // exposes only the legacy webkit name; modern `maskBorderSource`
+                // returns undefined. Capture source + slice / width / outset so the
+                // renderer can decide whether to route through the simplified
+                // full-element mask path (only safe when width / outset both `0`).
+                maskBorderSource: cs.webkitMaskBoxImageSource && cs.webkitMaskBoxImageSource !== 'none'
+                    ? cs.webkitMaskBoxImageSource
+                    : undefined,
+                maskBorderSlice: cs.webkitMaskBoxImageSlice || undefined,
+                maskBorderWidth: cs.webkitMaskBoxImageWidth || undefined,
+                maskBorderOutset: cs.webkitMaskBoxImageOutset || undefined,
+                // DM-793: legacy `-webkit-mask-box-image-repeat` keyword (stretch /
+                // repeat / round / space) per axis. Mirrors `border-image-repeat`.
+                maskBorderRepeat: cs.webkitMaskBoxImageRepeat || undefined,
+                // DM-793: intrinsic dimensions of the mask-border-source raster /
+                // SVG asset. Same probe pattern as `borderImageIntrinsic*` — a
+                // detached `<img>` resolves the URL against the document base and
+                // reports `naturalWidth` / `naturalHeight` for raster sources and
+                // the `<svg width/height>` attributes (or viewBox-derived size) for
+                // SVG sources. Captured at capture time so the renderer can compute
+                // 9-slice source rects without re-fetching the asset.
+                maskBorderIntrinsicWidth: (function () {
+                    var _m = /^url\((?:"|')?([^"')]+)/.exec(cs.webkitMaskBoxImageSource || '');
+                    if (_m == null)
+                        return undefined;
+                    var _img = new Image();
+                    _img.src = _m[1];
+                    return _img.naturalWidth || undefined;
+                })(),
+                maskBorderIntrinsicHeight: (function () {
+                    var _m = /^url\((?:"|')?([^"')]+)/.exec(cs.webkitMaskBoxImageSource || '');
+                    if (_m == null)
+                        return undefined;
+                    var _img = new Image();
+                    _img.src = _m[1];
+                    return _img.naturalHeight || undefined;
+                })(),
                 listStyleType: cs.listStyleType,
                 listStyleImage: cs.listStyleImage,
                 display: cs.display,
@@ -686,7 +925,7 @@ export const captureScript = (args) => {
                     var _fs = parseFloat(cs.fontSize);
                     if (!isFinite(_fs))
                         return cs.fontSize;
-                    var _s = _cumulativeScale.get(el) || 1;
+                    var _s = _scaleMag(el);
                     if (_s === 1)
                         return cs.fontSize;
                     return (_fs * _s).toFixed(4) + 'px';
@@ -738,8 +977,8 @@ export const captureScript = (args) => {
             // captured fontSize. Otherwise the renderer's baseline math reads
             // unscaled ascent values, and glyphs sit too far below their captured
             // bbox top inside a `transform: scale(<1)` container.
-            fontAscent: fontAscent != null ? fontAscent * (_cumulativeScale.get(el) || 1) : fontAscent,
-            fontDescent: fontDescent != null ? fontDescent * (_cumulativeScale.get(el) || 1) : fontDescent,
+            fontAscent: fontAscent != null ? fontAscent * _scaleMag(el) : fontAscent,
+            fontDescent: fontDescent != null ? fontDescent * _scaleMag(el) : fontDescent,
             inputXOffsets,
             textImageUri, textImageScale,
             // Placeholder metadata (SK-1097 / SK-1100 / SK-1099): captured in
@@ -752,7 +991,108 @@ export const captureScript = (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-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
+            // the renderer's text-emission path only needs to apply a per-axis
+            // correction transform when the two axes diverge. Emitting these on
+            // every transformed element would add noise to the captured tree.
+            ...(function () {
+                const _s = _scaleXY(el);
+                const _sx = _s[0], _sy = _s[1];
+                if (Math.abs(_sx - _sy) > 1e-4)
+                    return { cumScaleX: _sx, cumScaleY: _sy };
+                return {};
+            })(),
         };
+        // Elements that fragment into multiple paint boxes need per-fragment
+        // paint of background + border, not a single rect covering the bbox
+        // (the bbox is the union of every fragment and produces an over-wide /
+        // over-tall shape that paints across the gap between fragments).
+        // Trigger when:
+        //   1. The element has a non-transparent background OR a non-zero border
+        //      width on any side, AND
+        //   2. `el.getClientRects()` returns more than one rect, AND
+        //   3. The element is either
+        //      (a) `display: inline` and wrapped onto multiple lines, OR
+        //      (b) DM-754: block-level (block / list-item / flex / grid /
+        //          flow-root) inside a multi-column container ancestor —
+        //          `column-count > 1` or `column-width: <length>` — where a
+        //          tall block fragments at the column boundary.
+        // Without the `display` / ancestor-column guard we'd trip on table cells
+        // and other layouts where Chrome legitimately reports multiple client
+        // rects for an axis-aligned bbox (e.g. SVG paint shapes); restrict to
+        // the two known fragmentation cases.
+        //
+        // The renderer reads `inlineFragments`, detects axis from frag geometry
+        // (block-axis when fragments stack vertically, inline-axis when they
+        // stack horizontally), and walks per-fragment with the right
+        // `box-decoration-break` slice/clone semantics for that axis.
+        {
+            var _bgC = _captured.styles.backgroundColor;
+            var _hasBg = _bgC != null && _bgC !== '' && _bgC !== 'transparent' && _bgC !== 'rgba(0, 0, 0, 0)';
+            var _hasBgImage = _captured.styles.backgroundImage != null
+                && _captured.styles.backgroundImage !== '' && _captured.styles.backgroundImage !== 'none';
+            var _btw = parseFloat(_captured.styles.borderTopWidth || '0') || 0;
+            var _brw = parseFloat(_captured.styles.borderRightWidth || '0') || 0;
+            var _bbw = parseFloat(_captured.styles.borderBottomWidth || '0') || 0;
+            var _blw = parseFloat(_captured.styles.borderLeftWidth || '0') || 0;
+            var _hasBorder = _btw > 0 || _brw > 0 || _bbw > 0 || _blw > 0;
+            var _hasPaint = _hasBg || _hasBgImage || _hasBorder;
+            var _isInline = cs.display === 'inline';
+            var _isBlockLevel = !_isInline && (cs.display === 'block' || cs.display === 'list-item' || cs.display === 'flex'
+                || cs.display === 'grid' || cs.display === 'flow-root'
+                || cs.display === 'inline-block' || cs.display === 'inline-flex' || cs.display === 'inline-grid');
+            var _inMultiColumn = false;
+            if (_isBlockLevel && _hasPaint) {
+                // Walk ancestors looking for a multi-column container. `column-count`
+                // is the most common; `column-width: <length>` also creates columns.
+                // Stop at <body> (no column container above that level in practice).
+                var _a = el.parentElement;
+                while (_a != null) {
+                    var _ac = window.getComputedStyle(_a);
+                    var _cc = parseInt(_ac.columnCount, 10);
+                    var _cw = _ac.columnWidth;
+                    if ((Number.isFinite(_cc) && _cc > 1) || (_cw != null && _cw !== 'auto' && _cw !== '' && _cw !== 'normal')) {
+                        _inMultiColumn = true;
+                        break;
+                    }
+                    if (_a === document.body)
+                        break;
+                    _a = _a.parentElement;
+                }
+            }
+            if (_hasPaint && (_isInline || _inMultiColumn)) {
+                var _cr = el.getClientRects();
+                if (_cr != null && _cr.length > 1) {
+                    var _frags = [];
+                    for (var _ci = 0; _ci < _cr.length; _ci++) {
+                        var _f = _cr[_ci];
+                        // Skip zero-area fragments — Chrome occasionally emits these for
+                        // empty trailing inline runs.
+                        if (_f.width <= 0 || _f.height <= 0)
+                            continue;
+                        _frags.push({
+                            x: _f.left - vp.x,
+                            y: _f.top - vp.y,
+                            width: _f.width,
+                            height: _f.height,
+                        });
+                    }
+                    if (_frags.length > 1) {
+                        _captured.inlineFragments = _frags;
+                        // DM-754: stash the fragmentation axis derived from `display`.
+                        // Inline-wrap (e.g. `<span>` wrapping across line boxes) slices
+                        // horizontally — first owns the left side, last owns the right.
+                        // Block-level fragmentation inside a multi-column container
+                        // slices vertically — first owns the top, last owns the bottom.
+                        // Both axes produce vertically-stacked frag rects so we can't
+                        // distinguish them geometrically at render time.
+                        _captured.fragmentAxis = _isInline ? 'inline' : 'block';
+                    }
+                }
+            }
+        }
         // DM-450: hidden/collapsed table cell — keep the cell's box + borders so
         // shared edges of the collapsed table grid still paint, but suppress
         // text, children, and background fill (per CSS visibility:hidden).
@@ -852,13 +1192,19 @@ export const captureScript = (args) => {
     // sqrt(|a*d|) which is exact for pure scale and 1 for pure rotation — the
     // error grows for combined rotate+scale but no real-world fixture exercises
     // that on text-bearing elements. Translations contribute scale=1.
+    // DM-680: cumulative ancestor scale is captured PER AXIS (sx, sy). The
+    // map value is `[sx, sy]`. Geometric-mean magnitude is still used to
+    // pre-scale fontSize / fontAscent / fontDescent (so the SVG re-rasterizer
+    // sees Chrome-equivalent font metrics in the common uniform case). When
+    // the scale is anisotropic (sx ≠ sy, e.g. `transform: scale(1.3, 0.8)`),
+    // we also expose `cumScaleX` / `cumScaleY` on the captured element so the
+    // renderer can wrap text in a correction `<g transform="scale(cx, cy)">`
+    // pivoted around the text origin — matching how Chrome paints glyphs
+    // into the post-transform device space with per-axis scaling.
     const _cumulativeScale = new Map();
     const _computeOwnScale = (_tt) => {
         if (_tt == null || _tt === 'none' || _tt === '')
-            return 1;
-        // matrix(a, b, c, d, e, f) — a/d are the scale-along-x / scale-along-y
-        // diagonal entries. matrix3d(...) downgrades to its 2D submatrix elements
-        // m11/m22 (indexes 0 / 5) — same as a / d.
+            return [1, 1];
         const _m2 = /^matrix\(\s*([-\d.eE+]+)\s*,\s*([-\d.eE+]+)\s*,\s*([-\d.eE+]+)\s*,\s*([-\d.eE+]+)/.exec(_tt);
         let _sa = 1, _sd = 1;
         if (_m2 != null) {
@@ -874,28 +1220,56 @@ export const captureScript = (args) => {
             }
         }
         if (!isFinite(_sa) || !isFinite(_sd))
-            return 1;
-        // Geometric mean of x-scale + y-scale magnitudes. Exact for uniform
-        // scale; reasonable approximation for non-uniform scale on text.
-        const _s = Math.sqrt(Math.abs(_sa * _sd));
-        return _s > 0 ? _s : 1;
+            return [1, 1];
+        const _sx = Math.abs(_sa) > 0 ? Math.abs(_sa) : 1;
+        const _sy = Math.abs(_sd) > 0 ? Math.abs(_sd) : 1;
+        return [_sx, _sy];
     };
-    // Map every transformed element to its own scale, then walk descendants
-    // multiplying. Doing this top-down via parentNode + memoization avoids the
-    // O(n*depth) cost of querying ancestors per element.
     for (let _si = 0; _si < _allEls.length; _si++) {
         const _el = _allEls[_si];
-        let _cum = 1;
+        let _cumX = 1, _cumY = 1;
         const _pe = _el.parentElement;
-        if (_pe != null && _cumulativeScale.has(_pe))
-            _cum = _cumulativeScale.get(_pe);
-        const _ownT = getComputedStyle(_el).transform;
+        if (_pe != null && _cumulativeScale.has(_pe)) {
+            const _p = _cumulativeScale.get(_pe);
+            _cumX = _p[0];
+            _cumY = _p[1];
+        }
+        const _ownCs = getComputedStyle(_el);
+        const _ownT = _ownCs.transform;
         if (_ownT != null && _ownT !== 'none' && _ownT !== '') {
-            _cum *= _computeOwnScale(_ownT);
+            const _own = _computeOwnScale(_ownT);
+            _cumX *= _own[0];
+            _cumY *= _own[1];
+        }
+        // DM-755: CSS `zoom` is a legacy WebKit / IE property that Chrome still
+        // honors as a real layout-affecting scaler. `getComputedStyle().zoom`
+        // returns the resolved factor as a string ("1", "0.5", "2", "1.5" for
+        // 150%, "reset"); `getBoundingClientRect()` already includes the zoom
+        // in coordinates, but `getComputedStyle()` returns `fontSize` /
+        // `padding` etc. in PRE-zoom CSS pixels. Folding zoom into the same
+        // cumulative scale that handles `transform: scale()` re-uses the
+        // downstream `fontSize × cum` and `cumScaleX / cumScaleY` correction
+        // wrappers — text inside a `zoom: 2` box gets painted at 2× the
+        // captured font size, matching Chrome's effective paint.
+        const _ownZ = parseFloat(_ownCs.zoom);
+        if (Number.isFinite(_ownZ) && _ownZ > 0 && _ownZ !== 1) {
+            _cumX *= _ownZ;
+            _cumY *= _ownZ;
         }
-        if (_cum !== 1)
-            _cumulativeScale.set(_el, _cum);
+        if (_cumX !== 1 || _cumY !== 1)
+            _cumulativeScale.set(_el, [_cumX, _cumY]);
     }
+    // Helper: read the per-axis scale for an element, defaulting to [1, 1].
+    const _scaleXY = (el) => _cumulativeScale.get(el) || [1, 1];
+    // Helper: geometric-mean magnitude (the value the old single-scalar code
+    // used). Drives fontSize / fontAscent / fontDescent pre-scaling so the
+    // SVG re-rasterizer sees Chrome-equivalent font metrics in the uniform
+    // case; the renderer applies a per-axis correction transform on top when
+    // sx ≠ sy.
+    const _scaleMag = (el) => {
+        const s = _scaleXY(el);
+        return Math.sqrt(s[0] * s[1]);
+    };
     // CSS counters pre-walk (DM-357). Walk the document in DOM order,
     // applying counter-reset / counter-set / counter-increment per the
     // computed style of each element, and snapshot the active counter
@@ -944,20 +1318,27 @@ export const captureScript = (args) => {
             _activeScopes.push(scope);
             owned.push(scope);
         });
-        _parseCounterDecl(cs.counterSet, 0).forEach(({ name, value }) => {
+        // 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
+        // `counter-set: section 99` followed by an implicit `counter-increment:
+        // 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;
+                s.value += value;
             else {
                 const ns = { name, value, owner: el };
                 _activeScopes.push(ns);
                 owned.push(ns);
             }
         });
-        _parseCounterDecl(cs.counterIncrement, 1).forEach(({ name, value }) => {
+        _parseCounterDecl(cs.counterSet, 0).forEach(({ name, value }) => {
             const s = _findInnermost(name);
             if (s)
-                s.value += value;
+                s.value = value;
             else {
                 const ns = { name, value, owner: el };
                 _activeScopes.push(ns);
@@ -977,6 +1358,148 @@ export const captureScript = (args) => {
         }
     }
     _counterPreWalk(root);
+    // DM-770: collect `@counter-style` rule definitions from all stylesheets
+    // so the lists-counters walker can resolve `list-style-type: <custom-name>`
+    // to the right symbol per system (cyclic / fixed / numeric / alphabetic /
+    // symbolic / additive) plus prefix / suffix / pad / negative / range /
+    // fallback / extends descriptors. Chrome doesn't expose the resolved
+    // marker string via `getComputedStyle(li, '::marker').content` (returns
+    // "normal" even when the resolved marker is a custom symbol) so we
+    // re-implement the resolution algorithm against the captured rule map.
+    function _parseStringList(s) {
+        // CSS string list — sequence of "double-quoted" strings (CSS escapes any
+        // quote char). Whitespace-separated. Returns array of unescaped strings.
+        const out = [];
+        let i = 0;
+        while (i < s.length) {
+            while (i < s.length && /\s/.test(s[i]))
+                i++;
+            if (i >= s.length)
+                break;
+            const q = s[i];
+            if (q !== '"' && q !== "'") {
+                // Unquoted identifier (used by symbol shortcuts in some browsers).
+                let j = i;
+                while (j < s.length && !/\s/.test(s[j]))
+                    j++;
+                out.push(s.slice(i, j));
+                i = j;
+                continue;
+            }
+            let j = i + 1;
+            let val = '';
+            while (j < s.length && s[j] !== q) {
+                if (s[j] === '\\' && j + 1 < s.length) {
+                    // CSS escape: \HHHHHH (hex) or \char.
+                    const hex = /^\\([0-9a-fA-F]{1,6})\s?/.exec(s.slice(j));
+                    if (hex != null) {
+                        val += String.fromCodePoint(parseInt(hex[1], 16));
+                        j += hex[0].length;
+                        continue;
+                    }
+                    val += s[j + 1];
+                    j += 2;
+                }
+                else {
+                    val += s[j];
+                    j++;
+                }
+            }
+            out.push(val);
+            i = j + 1;
+        }
+        return out;
+    }
+    function _parseAdditiveSymbols(s) {
+        // `additive-symbols: 10 "X", 9 "IX", 5 "V", ...`
+        // Comma-separated weight + symbol pairs. Returns array sorted by weight
+        // descending (largest first — required by the additive algorithm).
+        const out = [];
+        for (const tok of s.split(',')) {
+            const m = /(-?\d+)\s+(.+)/.exec(tok.trim());
+            if (m == null)
+                continue;
+            const weight = parseInt(m[1], 10);
+            const sym = _parseStringList(m[2])[0] ?? '';
+            out.push({ weight, sym });
+        }
+        out.sort((a, b) => b.weight - a.weight);
+        return out;
+    }
+    function _walkRulesForCounterStyles(rules) {
+        for (let i = 0; i < rules.length; i++) {
+            const rule = rules[i];
+            // CSSCounterStyleRule.type === 11. Also covered by `instanceof
+            // CSSCounterStyleRule` in modern browsers — both forms work.
+            if (rule.type === 11 || (window.CSSCounterStyleRule != null && rule instanceof window.CSSCounterStyleRule)) {
+                const name = rule.name;
+                if (!name)
+                    continue;
+                let extendsName;
+                let sys = rule.system || 'symbolic';
+                // `system: extends upper-roman` → sys == "extends upper-roman".
+                const extMatch = /^extends\s+(\S+)/.exec(sys);
+                if (extMatch) {
+                    extendsName = extMatch[1];
+                    sys = 'extends';
+                }
+                else {
+                    // `system: cyclic`, `system: fixed [N]`, etc. Strip the keyword.
+                    const sysMatch = /^(cyclic|numeric|alphabetic|symbolic|fixed|additive)\b/.exec(sys);
+                    sys = sysMatch ? sysMatch[1] : 'symbolic';
+                }
+                const symbols = rule.symbols ? _parseStringList(rule.symbols) : [];
+                const additiveSymbols = rule.additiveSymbols ? _parseAdditiveSymbols(rule.additiveSymbols) : [];
+                const prefix = rule.prefix ? (_parseStringList(rule.prefix)[0] ?? '') : '';
+                // Default suffix is ". " for most systems per the CSS spec; Chrome
+                // returns the empty string when no `suffix` descriptor is set. Treat
+                // empty as default.
+                const suffix = rule.suffix ? (_parseStringList(rule.suffix)[0] ?? '. ') : '. ';
+                const negativeRaw = rule.negative;
+                let negPrefix = '-';
+                let negSuffix = '';
+                if (negativeRaw) {
+                    const nlist = _parseStringList(negativeRaw);
+                    negPrefix = nlist[0] ?? '-';
+                    if (nlist.length > 1)
+                        negSuffix = nlist[1];
+                }
+                let padLen = 0;
+                let padSym = '';
+                if (rule.pad) {
+                    const pm = /^\s*(\d+)\s+(.+)$/.exec(rule.pad);
+                    if (pm != null) {
+                        padLen = parseInt(pm[1], 10);
+                        padSym = _parseStringList(pm[2])[0] ?? '';
+                    }
+                }
+                let rangeLo = -Infinity;
+                let rangeHi = Infinity;
+                if (rule.range && rule.range !== 'auto') {
+                    // "infinite infinite" or "1 39" or "-3 5" etc.
+                    const rm = /(-?\d+|infinite)\s+(-?\d+|infinite)/.exec(rule.range);
+                    if (rm != null) {
+                        rangeLo = rm[1] === 'infinite' ? -Infinity : parseInt(rm[1], 10);
+                        rangeHi = rm[2] === 'infinite' ? Infinity : parseInt(rm[2], 10);
+                    }
+                }
+                const fallback = rule.fallback || 'decimal';
+                _counterStyles[name] = { system: sys, symbols, additiveSymbols, prefix, suffix, negPrefix, negSuffix, padLen, padSym, rangeLo, rangeHi, fallback, extendsName };
+            }
+            else if (rule.cssRules) {
+                // @media / @supports / @layer — walk nested rule lists.
+                _walkRulesForCounterStyles(rule.cssRules);
+            }
+        }
+    }
+    for (const sheet of Array.from(document.styleSheets)) {
+        try {
+            _walkRulesForCounterStyles(sheet.cssRules);
+        }
+        catch (e) {
+            // CORS-protected stylesheets throw on .cssRules access. Skip silently.
+        }
+    }
     const result = [];
     // Capture the root element itself when it has visible border or background
     // (DM-362: <body style="border:3px solid pink"> was not rendering because
@@ -1020,6 +1543,11 @@ export const captureScript = (args) => {
     if (_maskDefs.size > 0 && result.length > 0) {
         result[0].maskDefs = Array.from(_maskDefs.values());
     }
+    // DM-826: same shape as maskDefs above — top-level collection of inline
+    // <clipPath> defs the renderer emits into the output SVG. See docs/39.
+    if (_clipPathDefs.size > 0 && result.length > 0) {
+        result[0].clipPathDefs = Array.from(_clipPathDefs.values());
+    }
     // DM-494: attach mask raster references (mask-image: element(#id)). Skip
     // null entries (display:none / zero-area / not-found targets). The post-
     // capture rasterize pass on the Node side fills in dataUri.