domotion-svg 0.2.2 → 0.3.2

package/src/capture/script/index.ts

@@ -23,6 +23,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";
@@ -43,19 +44,26 @@ export const captureScript =
   // 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,
   });
@@ -64,6 +72,8 @@ export const captureScript =
     normColor,
     measureFontMetrics: _measureFontMetrics,
     textNeedsRaster,
+    resolveCounterValue,
+    isCustomCounterStyle,
   });
   const { captureInputValue } = createInputValueHandler({ vp, normColor, measureFontMetrics: _measureFontMetrics });
   const { captureTextSegments } = createTextSegmentsHandler({ vp, measureFontMetrics: _measureFontMetrics, needsRaster });
@@ -111,6 +121,19 @@ export const captureScript =
     if (cs.display === 'none') 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
@@ -173,6 +196,10 @@ export const captureScript =
     // 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');
     }
@@ -213,7 +240,12 @@ export const captureScript =
     // 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;
 
@@ -230,7 +262,7 @@ export const captureScript =
     // (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
@@ -351,11 +383,45 @@ export const captureScript =
       // 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];
@@ -365,7 +431,48 @@ export const captureScript =
             // 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 /
@@ -380,20 +487,45 @@ export const captureScript =
           // 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 */ }
             var composed;
@@ -462,16 +594,16 @@ export const captureScript =
             // symbol target — we let SVG do the math.
             var vb = target.getAttribute('viewBox') || '';
             var par = target.getAttribute('preserveAspectRatio') || '';
-            replacement = document.createElementNS(_svgNS, 'svg');
-            if (ux !== 0) replacement.setAttribute('x', String(ux));
-            if (uy !== 0) replacement.setAttribute('y', String(uy));
-            if (uw != null) replacement.setAttribute('width', uw);
-            if (uh != null) replacement.setAttribute('height', uh);
-            if (vb !== '') replacement.setAttribute('viewBox', vb);
-            if (par !== '') replacement.setAttribute('preserveAspectRatio', par);
+            var innerSvg = document.createElementNS(_svgNS, 'svg');
+            if (ux !== 0) innerSvg.setAttribute('x', String(ux));
+            if (uy !== 0) innerSvg.setAttribute('y', String(uy));
+            if (uw != null) innerSvg.setAttribute('width', uw);
+            if (uh != null) innerSvg.setAttribute('height', uh);
+            if (vb !== '') innerSvg.setAttribute('viewBox', vb);
+            if (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
@@ -479,12 +611,38 @@ export const captureScript =
               // 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
@@ -495,6 +653,28 @@ export const captureScript =
             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
@@ -532,6 +712,13 @@ export const captureScript =
     }
 
     const children = [];
+    // 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
@@ -593,6 +780,12 @@ export const captureScript =
         ...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,
@@ -613,6 +806,42 @@ export const captureScript =
         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,
@@ -665,7 +894,7 @@ export const captureScript =
         fontSize: (function() {
           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';
         })(),
@@ -715,8 +944,8 @@ export const captureScript =
       // 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
@@ -729,7 +958,108 @@ export const captureScript =
       // 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).
@@ -828,12 +1158,18 @@ export const captureScript =
   // 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.
+    if (_tt == null || _tt === 'none' || _tt === '') 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) { _sa = parseFloat(_m2[1]); _sd = parseFloat(_m2[4]); }
@@ -844,26 +1180,52 @@ export const captureScript =
         _sa = parseFloat(_parts[0]); _sd = parseFloat(_parts[5]);
       }
     }
-    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;
+    if (!isFinite(_sa) || !isFinite(_sd)) 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];
     }
-    if (_cum !== 1) _cumulativeScale.set(_el, _cum);
+    // 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 (_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
@@ -910,14 +1272,21 @@ export const captureScript =
       _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;
+      if (s) 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;
+      if (s) s.value = value;
       else { const ns = { name, value, owner: el }; _activeScopes.push(ns); owned.push(ns); }
     });
     // Snapshot the active scopes (shallow copy of name+value pairs).
@@ -933,6 +1302,139 @@ export const captureScript =
   }
   _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
@@ -973,6 +1475,11 @@ export const captureScript =
   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.