domotion-svg 0.6.0 → 0.7.0

package/dist/capture/emoji.js

@@ -115,9 +115,19 @@ export async function rasterizeBitmapGlyphs(page, tree, viewport) {
             // identical textareas dedupe to one screenshot.
             if (el.elementRaster != null) {
                 const er = el.elementRaster;
+                // DM-936: include text-decoration + text-underline-position in the
+                // dedupe key so 3 identical-text `.vert.pos-{left,right,auto}`
+                // columns don't collapse to the same screenshot (the underline
+                // paints in different places per pos-* but tag+text+color+size
+                // alone hashes them all together → wrong-side underline in 2/3
+                // of the columns). Same for text-shadow / writing-mode variants.
+                // Several of the keys aren't on the strict CapturedStyles surface;
+                // cast through Record so the optional reads compile.
+                const sty = el.styles;
+                const tdKey = `${sty.textDecorationLine ?? sty.textDecoration ?? ""}|${sty.textUnderlinePosition ?? ""}|${sty.textUnderlineOffset ?? ""}|${sty.textDecorationStyle ?? ""}|${sty.textDecorationColor ?? ""}|${sty.textDecorationThickness ?? ""}|${sty.textShadow ?? ""}|${sty.writingMode ?? ""}`;
                 candidates.push({
                     rect: { x: er.x, y: er.y, width: er.width, height: er.height },
-                    key: `el|${el.tag}|${el.text}|${el.styles.color}|${el.styles.fontSize}|${er.width}x${er.height}`,
+                    key: `el|${el.tag}|${el.text}|${el.styles.color}|${el.styles.fontSize}|${er.width}x${er.height}|${tdKey}`,
                     setDataUri: (uri) => { er.dataUri = uri; },
                 });
             }
@@ -163,7 +173,23 @@ export async function rasterizeBitmapGlyphs(page, tree, viewport) {
                                     // a rectangular PNG).
                                     const elFs = parseFloat(el.styles.fontSize ?? "") || 0;
                                     const fs = seg.fontSize ?? (elFs > 0 ? elFs : Math.max(g.rect.width, g.rect.height));
-                                    g.rect.x += (g.rect.width - fs) / 2;
+                                    // DM-919: Chrome's per-emoji paint origin = advance start
+                                    // (rect.x) when there's NO letter-spacing — the bitmap
+                                    // sits flush at the left of the advance. When letter-
+                                    // spacing > 0, Chrome ADDS the letter-spacing to the
+                                    // advance, which captures as a wider rect — the bitmap
+                                    // is still at rect.x (the spacing pads to the right).
+                                    // The original DM-381 centering pass mis-handled this:
+                                    // it shifted the bitmap by `(rect.width - fs) / 2`,
+                                    // moving the emoji right whenever letter-spacing >0.
+                                    // Pull out the captured letter-spacing and subtract it
+                                    // from rect.width FIRST, then center the bitmap inside
+                                    // the REAL advance — handles both the centered emoji-
+                                    // alone case (where rect.w ≈ fs) and the letter-spaced
+                                    // case (where rect.w = fs + letter-spacing).
+                                    const ls = parseFloat(el.styles.letterSpacing ?? "") || 0;
+                                    const advanceW = Math.max(fs, g.rect.width - Math.max(0, ls));
+                                    g.rect.x += (advanceW - fs) / 2;
                                     g.rect.y += (g.rect.height - fs) / 2;
                                     g.rect.width = fs;
                                     g.rect.height = fs;

package/dist/capture/script/index.js

@@ -54,7 +54,7 @@ export const captureScript = (args) => {
     const { resolveCounterStyle, resolveCounterValue, isCustomCounterStyle } = createCounterStyleResolver({ counterStyles: _counterStyles });
     const { captureListsCounters } = createListsCountersHandler({ normColor, resolveCounterStyle, isCustomCounterStyle });
     const { handleReplacedElement } = createReplacedElementsHandler({ vp });
-    const { discoverMasks, discoverClipPaths, maskDefs: _maskDefs, maskRasters: _maskRasters, clipPathDefs: _clipPathDefs } = createMasksClipsHandler({ vp, warn });
+    const { discoverMasks, discoverClipPaths, discoverFilters, maskDefs: _maskDefs, maskRasters: _maskRasters, clipPathDefs: _clipPathDefs, filterDefs: _filterDefs } = createMasksClipsHandler({ vp, warn });
     const { captureFormControls } = createFormControlsHandler({ normColor, resolvePseudo: _resolvePseudo });
     const { wrapWithFrozenTransform, threadFrozenTransform } = createTransformsHandler();
     const { captureBordersBackgrounds } = createBordersBackgroundsHandler({
@@ -194,6 +194,11 @@ export const captureScript = (args) => {
         // the mask discovery above; collects inline <clipPath> defs the
         // renderer copies into the output SVG. See docs/39.
         discoverClipPaths(el, cs, sel);
+        // DM-934: CSS `filter: url(#id)` referencing an inline SVG <filter>.
+        // Collect the def so the renderer can copy it into the output SVG;
+        // the existing pass-through of cs.filter as an inline style then
+        // resolves against that same-document def.
+        discoverFilters(el, cs, sel);
         if (cs.borderImageSource && cs.borderImageSource !== 'none') {
             warn(sel, 'border-image', '9-slice composition pending (SK-466); border-image-source ignored');
         }
@@ -968,7 +973,20 @@ export const captureScript = (args) => {
                 textDecorationStyle: cs.textDecorationStyle,
                 textDecorationThickness: cs.textDecorationThickness,
                 textUnderlineOffset: cs.textUnderlineOffset,
+                textUnderlinePosition: cs.textUnderlinePosition,
                 textDecorationSkipInk: cs.textDecorationSkipInk,
+                // DM-920: text-emphasis. Captured per CSS Text Decoration 3 §3.5.
+                // `text-emphasis-style` resolved string ("filled circle" / "open
+                // sesame" / `"★"` etc.) maps to a single mark character in the
+                // renderer per Chromium's `ComputedStyle::TextEmphasisMarkString`
+                // (third_party/blink/renderer/core/style/computed_style.cc:
+                // kBullet U+2022 / kWhiteBullet U+25E6 / kBlackCircle U+25CF /
+                // kWhiteCircle U+25CB / kFisheye U+25C9 / kBullseye U+25CE /
+                // kBlackUpPointingTriangle U+25B2 / kWhiteUpPointingTriangle
+                // U+25B3 / kSesameDot U+FE45 / kWhiteSesameDot U+FE46).
+                textEmphasisStyle: cs.textEmphasisStyle,
+                textEmphasisColor: cs.textEmphasisColor,
+                textEmphasisPosition: cs.textEmphasisPosition,
             },
             children, imageSrc, imageIntrinsic, imageBroken, imageAlt, svgContent, pseudoImages,
             pseudoBoxes: pseudoBoxes.length > 0 ? pseudoBoxes : undefined,
@@ -1067,6 +1085,36 @@ export const captureScript = (args) => {
                     _a = _a.parentElement;
                 }
             }
+            // DM-937: detect "inline-with-block-descendant" — an inline element
+            // (e.g. a `<label>`) that wraps a block-level child (`display:block`
+            // /list-item/flex/grid). Per CSS 2.1 §9.2.1.1 Chrome inserts
+            // "anonymous block boxes" around the block-level descendants and
+            // fragments the inline accordingly, but the painted border on each
+            // resulting fragment looks like a CLONE box (all four corners
+            // rounded, all four sides drawn) rather than the inline-axis SLICE
+            // semantics (first owns left, last owns right). Fixture: the .drop
+            // label in 06-forms-style-file with `border-radius: 10px` and
+            // `<strong>`/`<small>` block children — Chrome paints each
+            // fragment as a self-contained rounded box.
+            var _hasBlockDescendant = false;
+            if (_isInline && _hasPaint) {
+                var _stack = [el];
+                while (_stack.length > 0) {
+                    var _n = _stack.pop();
+                    var _kids = _n.children;
+                    for (var _ki = 0; _ki < _kids.length; _ki++) {
+                        var _k = _kids[_ki];
+                        var _kd = window.getComputedStyle(_k).display;
+                        if (_kd === 'block' || _kd === 'list-item' || _kd === 'flex' || _kd === 'grid' || _kd === 'flow-root' || _kd === 'table') {
+                            _hasBlockDescendant = true;
+                            break;
+                        }
+                        _stack.push(_k);
+                    }
+                    if (_hasBlockDescendant)
+                        break;
+                }
+            }
             if (_hasPaint && (_isInline || _inMultiColumn)) {
                 var _cr = el.getClientRects();
                 if (_cr != null && _cr.length > 1) {
@@ -1094,6 +1142,17 @@ export const captureScript = (args) => {
                         // Both axes produce vertically-stacked frag rects so we can't
                         // distinguish them geometrically at render time.
                         _captured.fragmentAxis = _isInline ? 'inline' : 'block';
+                        // DM-937: when the inline has block-level descendants, Chrome
+                        // paints each fragment as a complete rounded box (every side,
+                        // every corner) — equivalent to `box-decoration-break: clone`
+                        // — rather than the inline-axis slice it normally uses. Force
+                        // clone here so the renderer's per-fragment path keeps all
+                        // sides + corners. Author-set `box-decoration-break: slice` is
+                        // overridden (rare in practice — the painted look in Chrome
+                        // wins per the project's fidelity rule).
+                        if (_hasBlockDescendant) {
+                            _captured.styles.boxDecorationBreak = 'clone';
+                        }
                     }
                 }
             }
@@ -1561,6 +1620,13 @@ export const captureScript = (args) => {
     if (_clipPathDefs.size > 0 && result.length > 0) {
         result[0].clipPathDefs = Array.from(_clipPathDefs.values());
     }
+    // DM-934: same shape — inline <filter> defs referenced by CSS `filter:
+    // url(#id)`. The renderer copies these into the output SVG and the
+    // existing pass-through of cs.filter as an inline style on the wrapping
+    // group references them.
+    if (_filterDefs.size > 0 && result.length > 0) {
+        result[0].filterDefs = Array.from(_filterDefs.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.

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

@@ -4,7 +4,9 @@ export declare const createMasksClipsHandler: ({ vp, warn }: {
 }) => {
     discoverMasks: (el: any, cs: any, sel: any) => void;
     discoverClipPaths: (el: any, cs: any, sel: any) => void;
+    discoverFilters: (el: any, cs: any, sel: any) => void;
     maskDefs: Map<any, any>;
     maskRasters: Map<any, any>;
     clipPathDefs: Map<any, any>;
+    filterDefs: Map<any, any>;
 };

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

@@ -197,5 +197,34 @@ export const createMasksClipsHandler = ({ vp, warn }) => {
             warn(sel, 'clip-path', 'external-file SVG fragment ref (url("./file.svg#id")) could not be resolved — element renders unclipped');
         }
     };
-    return { discoverMasks, discoverClipPaths, maskDefs, maskRasters, clipPathDefs };
+    // DM-934: CSS `filter: url(#id)` referencing an inline SVG `<filter>` def.
+    // Same shape as discoverClipPaths but for filters — collect the def keyed
+    // by id, the renderer copies it into the output SVG <defs> verbatim and
+    // the existing pass-through emit of `cs.filter` as an inline style on the
+    // element's group wrapper does the rest (the browser's SVG renderer
+    // resolves `filter="url(#id)"` against the same-document def).
+    //
+    // Multi-value forms like `filter: blur(2px) url(#svg-glow)` collect every
+    // url(#id) found in the value; each gets its own captured def.
+    const filterDefs = new Map();
+    const discoverFilters = (el, cs, sel) => {
+        const f = cs.filter;
+        if (!f || f === 'none' || f === '')
+            return;
+        const re = /url\(\s*(?:"|')?#([^"')\s]+)(?:"|')?\s*\)/gi;
+        let m;
+        while ((m = re.exec(f)) != null) {
+            const fragId = m[1];
+            if (filterDefs.has(fragId))
+                continue;
+            const target = document.getElementById(fragId);
+            if (target != null && target.tagName.toLowerCase() === 'filter') {
+                filterDefs.set(fragId, { id: fragId, outerHTML: target.outerHTML });
+            }
+            else {
+                warn(sel, 'filter', 'filter fragment "#' + fragId + '" did not resolve to an inline <filter> element');
+            }
+        }
+    };
+    return { discoverMasks, discoverClipPaths, discoverFilters, maskDefs, maskRasters, clipPathDefs, filterDefs };
 };

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

@@ -116,9 +116,51 @@ export const createPseudoInjectHandler = () => {
                 const lastSeg = textSegments[textSegments.length - 1];
                 const bs = p.boxStyles || {};
                 const mLa = parseFloat(window.getComputedStyle(el, '::after').marginLeft) || 0;
-                p.seg.x = lastSeg.x + lastSeg.width + mLa + (bs.borL || 0) + (bs.padL || 0);
-                p.seg.y = lastSeg.y;
-                p.seg.height = lastSeg.height;
+                // DM-926: when the host is a flex container with a non-default
+                // `justify-content` (e.g. `summary { display: flex;
+                // justify-content: space-between }` for a `<details>` accordion
+                // marker), the ::after isn't laid out flush after the last
+                // text segment — it's pushed to the right edge by the flex
+                // distribution. The xPos pseudo-content.ts pre-computed
+                // (`elLeft + rect.width - pseudoWidth - 2 × padR`) IS the
+                // right-edge position; KEEP it instead of overwriting with the
+                // adjacent-to-text anchor that's wrong here.
+                const hcs = window.getComputedStyle(el);
+                const hostIsFlex = hcs.display === 'flex' || hcs.display === 'inline-flex';
+                const hostJc = hcs.justifyContent;
+                const flexSpread = hostIsFlex && hostJc != null && hostJc !== ''
+                    && hostJc !== 'flex-start' && hostJc !== 'start' && hostJc !== 'normal';
+                if (flexSpread) {
+                    // Keep p.seg.x as computed by pseudo-content.ts; only re-anchor y / height.
+                    p.seg.y = lastSeg.y;
+                    p.seg.height = lastSeg.height;
+                }
+                else {
+                    p.seg.x = lastSeg.x + lastSeg.width + mLa + (bs.borL || 0) + (bs.padL || 0);
+                    p.seg.y = lastSeg.y;
+                    p.seg.height = lastSeg.height;
+                }
+                // DM-944: when the host element's painted box extends BELOW the
+                // last main-text line by more than one line-height, Chrome wrapped
+                // the ::after content to a new line because it didn't fit on the
+                // current line. Detect that gap by comparing the host's
+                // `getBoundingClientRect().bottom` (which DOES include the
+                // pseudo's painted area) to the last text segment's bottom
+                // (which doesn't). If the gap is ≥ ~80% of one line-height, the
+                // pseudo wrapped — bump `p.seg.y` down by the gap and reset its
+                // x to the host's content-box left edge so the renderer paints
+                // it on the new line at the host's left margin like Chrome did.
+                const elRect = el.getBoundingClientRect();
+                const ecs = window.getComputedStyle(el);
+                const pdL = parseFloat(ecs.paddingLeft) || 0;
+                const bdL = parseFloat(ecs.borderLeftWidth) || 0;
+                const lastBottom = lastSeg.y + lastSeg.height;
+                const elBottom = elRect.bottom - (parseFloat(ecs.paddingBottom) || 0) - (parseFloat(ecs.borderBottomWidth) || 0);
+                const wrapThreshold = lastSeg.height * 0.8;
+                if (elBottom - lastBottom >= wrapThreshold) {
+                    p.seg.x = elRect.x + bdL + pdL;
+                    p.seg.y = lastBottom; // start of the next line
+                }
                 textSegments.push(p.seg);
             }
             else {

package/dist/capture/script/walker/text-segments.js

@@ -112,11 +112,48 @@ export const computeElementRaster = (el, cs, tag, rect, vp) => {
     const br = parseFloat(cs.borderRightWidth) || 0;
     const bt = parseFloat(cs.borderTopWidth) || 0;
     const bb = parseFloat(cs.borderBottomWidth) || 0;
+    // DM-936: vertical writing mode with text-decoration: underline paints
+    // a vertical underline OUTSIDE the inline content box (to the LEFT for
+    // `text-underline-position: left` in vertical-rl, to the RIGHT for
+    // `right`, etc.). Tight content-box clipping erases that vertical
+    // underline from the screenshot. Walk descendants to detect any
+    // text-decoration-line that mentions `underline`/`overline`/`line-
+    // through` AND expand the clip rect outward by enough margin (8 px
+    // on each side covers thicknesses up to ~6 px plus offsets). Also
+    // expand for descendant `text-shadow` for similar reasons. Horizontal
+    // writing modes already include the underline area inside the line-
+    // box height so the existing tight clip suffices.
+    let marginX = 0;
+    let marginY = 0;
+    if (hasNonHorizontalText) {
+        let hasDecoration = false;
+        const walk = (node) => {
+            if (hasDecoration || node == null)
+                return;
+            const ncs = node.nodeType === 1 ? window.getComputedStyle(node) : null;
+            if (ncs != null) {
+                const td = ncs.textDecorationLine || ncs.textDecoration || '';
+                if (td !== '' && td !== 'none' && /\b(?:underline|overline|line-through)\b/.test(td)) {
+                    hasDecoration = true;
+                    return;
+                }
+            }
+            const kids = node.children;
+            if (kids != null)
+                for (let i = 0; i < kids.length; i++)
+                    walk(kids[i]);
+        };
+        walk(el);
+        if (hasDecoration) {
+            marginX = 4;
+            marginY = 0;
+        }
+    }
     return {
-        x: rect.left - vp.x + bl + pl,
-        y: rect.top - vp.y + bt + pt,
-        width: Math.max(1, rect.width - bl - br - pl - pr),
-        height: Math.max(1, rect.height - bt - bb - pt - pb),
+        x: rect.left - vp.x + bl + pl - marginX,
+        y: rect.top - vp.y + bt + pt - marginY,
+        width: Math.max(1, rect.width - bl - br - pl - pr + 2 * marginX),
+        height: Math.max(1, rect.height - bt - bb - pt - pb + 2 * marginY),
     };
 };
 export const createTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster }) => {
@@ -235,17 +272,63 @@ export const createTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster
                 // shaping pipeline picks up.
                 if (mathItalicizeMi)
                     ch = mathItalicChar(ch);
-                const charRec = { ch, left: cr.left, top: cr.top, right: cr.right, bottom: cr.bottom };
-                if (cur == null || Math.abs(cr.top - cur.top) > 1) {
+                // DM-942: when a character is the FIRST glyph of a wrapped line
+                // immediately after a soft-hyphen or hyphenation break, Chrome's
+                // Range.getBoundingClientRect() returns a UNION rect spanning both
+                // lines (top = previous line's top, bottom = next line's bottom,
+                // height ≈ 2 × normalCharHeight, width ≈ entire wrap region). The
+                // glyph itself paints at the START of the next line. If we trust
+                // cr.top, the char gets bucketed into the previous line and the
+                // wrapped line silently loses its first character. Detect the
+                // anomaly (height significantly larger than the current line's
+                // chars) and synthesise the correct per-glyph top/left/right from
+                // the next char (peek ahead) — or, when no next char exists, use
+                // cr.bottom minus a normal char height.
+                let topForGroup = cr.top;
+                let leftForGroup = cr.left;
+                let rightForGroup = cr.right;
+                let bottomForGroup = cr.bottom;
+                if (cur != null && cur.chars.length > 0) {
+                    const refH = (cur.bottom - cur.top) || 16;
+                    if (cr.height > refH * 1.5 && cr.bottom > cur.bottom + refH * 0.5) {
+                        // Peek ahead one char to get the actual line-2 top/x.
+                        const peekI = i + step;
+                        if (peekI < raw.length) {
+                            const pr = document.createRange();
+                            pr.setStart(node, peekI);
+                            pr.setEnd(node, peekI + 1);
+                            const pcr = pr.getBoundingClientRect();
+                            if (pcr.height > 0 && pcr.height < refH * 1.5) {
+                                topForGroup = pcr.top;
+                                bottomForGroup = pcr.bottom;
+                                // The first char's left/right are unknown from cr (it's a
+                                // union spanning both lines). Place it just before the
+                                // peeked char, with width = (peek.left - cr-leftmost-of-line-2).
+                                // The peek's left is line 2's second char; estimate this
+                                // char's right edge at the peek's left, and its left at
+                                // cr.left (which IS the line-2 leftmost x when the union
+                                // spans into line 2).
+                                leftForGroup = cr.left;
+                                rightForGroup = pcr.left;
+                            }
+                        }
+                        else {
+                            // No next char — derive the next-line top from cr.bottom.
+                            topForGroup = cr.bottom - refH;
+                        }
+                    }
+                }
+                const charRec = { ch, left: leftForGroup, top: topForGroup, right: rightForGroup, bottom: bottomForGroup };
+                if (cur == null || Math.abs(topForGroup - cur.top) > 1) {
                     if (cur != null)
                         lines.push(cur);
-                    cur = { chars: [charRec], top: cr.top, bottom: cr.bottom, left: cr.left, right: cr.right };
+                    cur = { chars: [charRec], top: topForGroup, bottom: bottomForGroup, left: leftForGroup, right: rightForGroup };
                 }
                 else {
                     cur.chars.push(charRec);
-                    cur.left = Math.min(cur.left, cr.left);
-                    cur.right = Math.max(cur.right, cr.right);
-                    cur.bottom = Math.max(cur.bottom, cr.bottom);
+                    cur.left = Math.min(cur.left, leftForGroup);
+                    cur.right = Math.max(cur.right, rightForGroup);
+                    cur.bottom = Math.max(cur.bottom, bottomForGroup);
                 }
                 i += step - 1;
             }
@@ -328,6 +411,8 @@ export const createTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster
                         // first-char width.
                         let rasterTop = cRec.top - vp.y;
                         let rasterHeight = cRec.bottom - cRec.top;
+                        let rasterLeft = cRec.left - vp.x;
+                        let rasterWidth = cRec.right - cRec.left;
                         if (isFirstLetter) {
                             const ilRaw = flStyle.initialLetter || flStyle.webkitInitialLetter || '';
                             const ilN = parseFloat(ilRaw);
@@ -343,13 +428,33 @@ export const createTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster
                                     rasterHeight = expectedHeight;
                                 }
                             }
+                            // DM-931: decorative ::first-letter drop caps frequently
+                            // declare PADDING + BACKGROUND-IMAGE on the pseudo (e.g.
+                            // `linear-gradient` behind the cap). The base char rect
+                            // measures the GLYPH only — the padding-extended background
+                            // box extends beyond on every side. Without expansion the
+                            // rasterized PNG captures just the glyph and the gradient
+                            // box renders truncated. Expand by the ::first-letter
+                            // padding (top / right / bottom / left). Same omitBackground
+                            // semantics: extra captured area outside the painted box is
+                            // transparent and inert.
+                            const padT = parseFloat(flStyle.paddingTop) || 0;
+                            const padR = parseFloat(flStyle.paddingRight) || 0;
+                            const padB = parseFloat(flStyle.paddingBottom) || 0;
+                            const padL = parseFloat(flStyle.paddingLeft) || 0;
+                            if (padT > 0 || padR > 0 || padB > 0 || padL > 0) {
+                                rasterTop -= padT;
+                                rasterLeft -= padL;
+                                rasterWidth += padL + padR;
+                                rasterHeight += padT + padB;
+                            }
                         }
                         rasterGlyphs.push({
                             charIndex: utf16Idx,
                             rect: {
-                                x: cRec.left - vp.x,
+                                x: rasterLeft,
                                 y: rasterTop,
-                                width: cRec.right - cRec.left,
+                                width: rasterWidth,
                                 height: rasterHeight,
                             },
                             // Suppress the underlying glyph emit. Two cases:

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

@@ -85,8 +85,108 @@ const transformHasRotationOrSkew = (transformStr) => {
         const c = parseFloat(m3[3]);
         return Math.abs(b) > 1e-6 || Math.abs(c) > 1e-6;
     }
+    // DM-943: composed-effective-transform strings from CSS Transforms 2
+    // standalone properties may carry plain function forms like
+    // `rotate(20deg)` or `skewX(30deg)` instead of a resolved matrix(). The
+    // freeze path passes the un-resolved transform list through verbatim;
+    // detect the function names so threadFrozenTransform stashes them too.
+    if (/\brotate(?:[XYZ])?\(/.test(transformStr))
+        return true;
+    if (/\bskew(?:[XY])?\(/.test(transformStr))
+        return true;
     return false;
 };
+// DM-943: CSS Transforms Level 2 introduced standalone `translate`,
+// `rotate`, `scale` properties that compose with `transform` per spec
+// order: translate → rotate → scale → transform. Chrome keeps them on
+// SEPARATE computed-style entries (cs.rotate / cs.scale / cs.translate)
+// — they do NOT merge into cs.transform. Compose them into a single
+// CSS matrix() string in the page context via DOMMatrix so the existing
+// renderer (which only parses matrix() / matrix3d()) picks them up
+// unchanged. Returns 'none' when all four properties are absent /
+// 'none', otherwise a `matrix(a, b, c, d, e, f)` string.
+const composeEffectiveTransform = (cs) => {
+    const t = cs.translate;
+    const r = cs.rotate;
+    const s = cs.scale;
+    const tr = cs.transform;
+    const hasT = t && t !== 'none';
+    const hasR = r && r !== 'none';
+    const hasS = s && s !== 'none';
+    const hasTr = tr && tr !== 'none';
+    if (!hasT && !hasR && !hasS && !hasTr)
+        return 'none';
+    if (!hasT && !hasR && !hasS)
+        return tr;
+    // Build the composed matrix via DOMMatrix in spec order. DOMMatrix
+    // multiplications are LEFT to RIGHT post-multiply (each multiplySelf
+    // applies AFTER prior ops in the local coord system), so we apply
+    // translate first, then rotate, scale, transform — matching CSS T2 §3.
+    let m = new DOMMatrix();
+    if (hasT) {
+        // cs.translate is "<x> [<y>] [<z>]" in px / computed length.
+        const ts = t.split(/\s+/).map((v) => parseFloat(v));
+        const tx = isFinite(ts[0]) ? ts[0] : 0;
+        const ty = ts.length > 1 && isFinite(ts[1]) ? ts[1] : 0;
+        const tz = ts.length > 2 && isFinite(ts[2]) ? ts[2] : 0;
+        m = m.translate(tx, ty, tz);
+    }
+    if (hasR) {
+        // cs.rotate is "<angle>" or "<x> <y> <z> <angle>" (3D axis form).
+        // Parse all numeric tokens; the angle is the last one (with deg/rad/grad/turn unit).
+        const tokens = r.trim().split(/\s+/);
+        const last = tokens[tokens.length - 1];
+        const angleDeg = parseAngleToDeg(last);
+        if (tokens.length === 4) {
+            const ax = parseFloat(tokens[0]);
+            const ay = parseFloat(tokens[1]);
+            const az = parseFloat(tokens[2]);
+            m = m.rotateAxisAngle(ax, ay, az, angleDeg);
+        }
+        else {
+            m = m.rotate(angleDeg);
+        }
+    }
+    if (hasS) {
+        const ts = s.trim().split(/\s+/).map((v) => parseFloat(v));
+        const sx = isFinite(ts[0]) ? ts[0] : 1;
+        const sy = ts.length > 1 && isFinite(ts[1]) ? ts[1] : sx;
+        const sz = ts.length > 2 && isFinite(ts[2]) ? ts[2] : 1;
+        m = m.scale(sx, sy, sz);
+    }
+    if (hasTr) {
+        // tr is already a CSS matrix() / matrix3d() string (or rarely the
+        // un-resolved form when inline style is read; getComputedStyle always
+        // resolves to a matrix). DOMMatrix accepts both.
+        try {
+            m = m.multiply(new DOMMatrix(tr));
+        }
+        catch {
+            // Unparseable — leave m as the standalone-property-only product.
+        }
+    }
+    // Emit as 2D matrix() when the 3D parts are identity; else matrix3d().
+    if (m.is2D) {
+        return `matrix(${m.a}, ${m.b}, ${m.c}, ${m.d}, ${m.e}, ${m.f})`;
+    }
+    return `matrix3d(${m.m11}, ${m.m12}, ${m.m13}, ${m.m14}, ${m.m21}, ${m.m22}, ${m.m23}, ${m.m24}, ${m.m31}, ${m.m32}, ${m.m33}, ${m.m34}, ${m.m41}, ${m.m42}, ${m.m43}, ${m.m44})`;
+};
+const parseAngleToDeg = (a) => {
+    const m = /^([-+]?\d*\.?\d+(?:[eE][-+]?\d+)?)(deg|rad|grad|turn)?$/.exec(a);
+    if (!m)
+        return 0;
+    const n = parseFloat(m[1]);
+    const u = m[2] || 'deg';
+    if (u === 'deg')
+        return n;
+    if (u === 'rad')
+        return (n * 180) / Math.PI;
+    if (u === 'grad')
+        return (n * 360) / 400;
+    if (u === 'turn')
+        return n * 360;
+    return n;
+};
 export const createTransformsHandler = () => {
     const wrapWithFrozenTransform = (el, cs, captureInner) => {
         // DM-587: for pure translate/scale transforms, do NOT clear — read the
@@ -98,21 +198,45 @@ export const createTransformsHandler = () => {
         // HTML elements would paint as their axis-aligned bounding boxes (and
         // overlap their neighbors) since `getBoundingClientRect` post-rotation
         // returns the rotated AABB, not the original 160×160 layout box.
-        const originalTransform = cs.transform;
+        //
+        // DM-943: compose the effective transform from `transform` PLUS the
+        // CSS Transforms Level 2 standalone `translate` / `rotate` / `scale`
+        // properties — Chrome keeps them separate in computed style and our
+        // capture used to only read `cs.transform`, so a `rotate: 20deg` (no
+        // `transform:` prefix) produced cs.transform === 'none' and rendered
+        // the box axis-aligned. The composed string flows through the same
+        // freeze logic as a plain `transform:` of the same shape.
+        const originalTransform = composeEffectiveTransform(cs);
         const hasTransform = originalTransform && originalTransform !== 'none';
         if (!hasTransform) {
             return captureInner(el, cs, null, null);
         }
-        if (transformHasRotationOrSkew(originalTransform)) {
+        // Heuristic: do we need to clear inlines to capture an un-rotated layout
+        // box? Pure translate/scale leaves the layout box axis-aligned so we
+        // keep the live-rect model. Anything containing a rotate(...) or skew
+        // function — including the freshly composed string — needs the freeze.
+        const needsFreeze = transformHasRotationOrSkew(originalTransform) ||
+            /\brotate\b/.test(originalTransform) ||
+            /\bskew/.test(originalTransform);
+        if (needsFreeze) {
             // Old model: clear so getBoundingClientRect returns the un-rotated
             // layout box; renderer re-applies the original transform.
-            const inline = el.style.transform;
+            const inlineTransform = el.style.transform;
+            const inlineRotate = el.style.rotate;
+            const inlineScale = el.style.scale;
+            const inlineTranslate = el.style.translate;
             el.style.transform = 'translate(0)';
+            el.style.rotate = 'none';
+            el.style.scale = 'none';
+            el.style.translate = 'none';
             try {
                 return captureInner(el, cs, originalTransform, cs.transformOrigin);
             }
             finally {
-                el.style.transform = inline;
+                el.style.transform = inlineTransform;
+                el.style.rotate = inlineRotate;
+                el.style.scale = inlineScale;
+                el.style.translate = inlineTranslate;
             }
         }
         // Pure translate/scale: keep new live-rect model (no clear, no wrap).