domotion-svg 0.13.3 → 0.14.0

package/dist/animation/animator.js

@@ -273,6 +273,11 @@ export function generateAnimatedSvg(config) {
         const enterStartPct = entersViaOverlap
             ? pct(timeOffset - prevTransDur, totalDuration)
             : startPct;
+        // DM-1207: the last frame holds solid to 100% (no loop cross-dissolve)
+        // unless `loopFade` is set — same rule the crossfade/cut path applies via
+        // DM-1148 (see emitCrossfadeOrCutFrame). For the slide paths (push-left /
+        // scroll) this means: slide in, then hold (no slide-out / fade-out).
+        const holdLastFrame = i === frames.length - 1 && config.loopFade !== true;
         if (transType === "push-left") {
             // Push: slide in from right, slide out to left
             frameGroups.push(`  <g class="f f-${i}"><clipPath id="fc-${i}"><rect width="${width}" height="${height}" /></clipPath><g clip-path="url(#fc-${i})" class="fp fp-${i}">\n${frame.svgContent}\n  </g></g>`);
@@ -282,7 +287,7 @@ export function generateAnimatedSvg(config) {
             // Window is [enterStartPct .. transEndPct] (when the slide has fully
             // exited the viewBox); 0.01% pad on each side keeps the snap inside the
             // existing opacity:0 bookend.
-            keyframes.push(slideKeyframes(i, "X", width, entersViaPush, enterStartPct, startPct, holdEndPct, transEndPct, enterStartPct, transEndPct, totalSec));
+            keyframes.push(slideKeyframes(i, "X", width, entersViaPush, enterStartPct, startPct, holdEndPct, transEndPct, enterStartPct, transEndPct, totalSec, holdLastFrame));
         }
         else if (transType === "scroll") {
             // DM-609: `scroll` now means real geometric scroll between two frames
@@ -294,7 +299,7 @@ export function generateAnimatedSvg(config) {
             // `fd-${i}` display animation). (`entersViaScroll` is already computed in
             // the outer scope above — same value, no need to redeclare/shadow it.)
             frameGroups.push(`  <g class="f f-${i}"><clipPath id="fc-${i}"><rect width="${width}" height="${height}" /></clipPath><g clip-path="url(#fc-${i})" class="fp fp-${i}">\n${frame.svgContent}\n  </g></g>`);
-            keyframes.push(slideKeyframes(i, "Y", height, entersViaScroll, enterStartPct, startPct, holdEndPct, transEndPct, enterStartPct, transEndPct, totalSec));
+            keyframes.push(slideKeyframes(i, "Y", height, entersViaScroll, enterStartPct, startPct, holdEndPct, transEndPct, enterStartPct, transEndPct, totalSec, holdLastFrame));
         }
         else if (transType === "magic-move" && frame.magicMove != null) {
             // DM-898: magic-move. Frame i holds [start..holdEnd] then HARD-CUTS out;
@@ -686,17 +691,39 @@ function buildDisplayKeyframes(name, visibleStartPct, visibleEndPct) {
  * exits to `-size`. 0.1% pads on each bookend keep the snap inside the
  * opacity:0 frame. Emits the fp/fv/fd keyframes + the `.f-`/`.fp-` rules.
  */
-function slideKeyframes(i, axis, size, entersSliding, enterStartPct, startPct, holdEndPct, transEndPct, visStart, visEnd, totalSec) {
+function slideKeyframes(i, axis, size, entersSliding, enterStartPct, startPct, holdEndPct, transEndPct, visStart, visEnd, totalSec, 
+/** DM-1207: the last frame, when the loop must NOT cross-dissolve, slides in
+ *  and then HOLDS solid (transform 0, opacity 1, visible) to 100% — no
+ *  slide-out / fade-out — and the loop hard-cuts back to frame 0. Mirrors the
+ *  crossfade/cut path's DM-1148 holdToEnd. Without it the slide-out keyframes
+ *  ramp the last frame to opacity 0 across its whole hold, washing it out. */
+holdToEnd = false) {
+    const enterBound = padBefore(parseFloat(enterStartPct), KEYFRAME_EPSILON.slide, 2);
+    if (holdToEnd) {
+        return `
+    @keyframes fp-${i} {
+      0%, ${enterBound}% { transform: translate${axis}(${entersSliding ? size : 0}px); }
+      ${startPct} { transform: translate${axis}(0); }
+      100% { transform: translate${axis}(0); }
+    }
+    @keyframes fv-${i} {
+      0%, ${enterBound}% { opacity: 0; }
+      ${enterStartPct} { opacity: 1; }
+      100% { opacity: 1; }
+    }${buildDisplayKeyframes(`fd-${i}`, visStart, "100")}
+    .f-${i} { animation: fv-${i} ${totalSec.toFixed(2)}s infinite, fd-${i} ${totalSec.toFixed(2)}s infinite step-end; }
+    .fp-${i} { animation: fp-${i} ${totalSec.toFixed(2)}s infinite; }`;
+    }
     return `
     @keyframes fp-${i} {
-      0%, ${padBefore(parseFloat(enterStartPct), KEYFRAME_EPSILON.slide, 2)}% { transform: translate${axis}(${entersSliding ? size : 0}px); }
+      0%, ${enterBound}% { transform: translate${axis}(${entersSliding ? size : 0}px); }
       ${startPct} { transform: translate${axis}(0); }
       ${holdEndPct} { transform: translate${axis}(0); }
       ${transEndPct} { transform: translate${axis}(-${size}px); }
       ${padAfter(parseFloat(transEndPct), KEYFRAME_EPSILON.slide, 2)}%, 100% { transform: translate${axis}(-${size}px); }
     }
     @keyframes fv-${i} {
-      0%, ${padBefore(parseFloat(enterStartPct), KEYFRAME_EPSILON.slide, 2)}% { opacity: 0; }
+      0%, ${enterBound}% { opacity: 0; }
       ${enterStartPct} { opacity: 1; }
       ${transEndPct} { opacity: 1; }
       ${padAfter(parseFloat(transEndPct), KEYFRAME_EPSILON.slide, 2)}%, 100% { opacity: 0; }

package/dist/capture/emoji.d.ts

@@ -17,6 +17,43 @@
  */
 import type { Page } from "@playwright/test";
 import type { CapturedElement } from "./types.js";
+/**
+ * Snap an Apple Color Emoji sbix bitmap to the SQUARE box Chrome actually
+ * paints it in.
+ *
+ * Chrome paints a color-emoji glyph as a square whose side equals the glyph
+ * ADVANCE — the captured `Range.getBoundingClientRect()` width, minus any
+ * letter-spacing Chrome appends to the right of the advance. Two facts make
+ * the advance (not the font size) the correct side:
+ *  - At small font sizes Chrome enforces a minimum emoji advance that exceeds
+ *    the font size — e.g. a 20px advance at font-size 16 (~1.25×). Sizing the
+ *    overlay to the font size painted the emoji ~20% too small (DM-1198: "our
+ *    emojis seem a lot smaller").
+ *  - The sbix PNG is a full square bitmap (the emoji fills a square em), so
+ *    drawing it into an advance × advance box reproduces both full-bleed emoji
+ *    and ones with transparent margins (e.g. 📈) without distortion.
+ *
+ * Geometry:
+ *  - Horizontal: the bitmap sits flush at the advance's left (`rect.x`); any
+ *    letter-spacing pads to the RIGHT, so no horizontal shift is applied
+ *    (DM-919 — the original DM-381 centering pass wrongly shifted it right
+ *    whenever letter-spacing > 0).
+ *  - Vertical: the square is centered in the captured rect's line box, which
+ *    matches Chrome within ~1px across sizes (DM-438 — a 20×17 rect extends
+ *    upward to a 20×20 square; DM-801 — a 56×63 rect with 8px letter-spacing
+ *    snaps to 48×48).
+ */
+export declare function emojiSquareRect(rect: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, letterSpacing: number): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
 /**
  * For every text segment CAPTURE_SCRIPT flagged with a rasterRect (contains a
  * color-bitmap glyph like U+2713 ✓ or an emoji), ask Playwright for a

package/dist/capture/emoji.js

@@ -97,6 +97,42 @@ function extractEmojiBitmap(codepoint, paintedWidthPx) {
     _sbixCache.set(cacheKey, result);
     return result;
 }
+/**
+ * Snap an Apple Color Emoji sbix bitmap to the SQUARE box Chrome actually
+ * paints it in.
+ *
+ * Chrome paints a color-emoji glyph as a square whose side equals the glyph
+ * ADVANCE — the captured `Range.getBoundingClientRect()` width, minus any
+ * letter-spacing Chrome appends to the right of the advance. Two facts make
+ * the advance (not the font size) the correct side:
+ *  - At small font sizes Chrome enforces a minimum emoji advance that exceeds
+ *    the font size — e.g. a 20px advance at font-size 16 (~1.25×). Sizing the
+ *    overlay to the font size painted the emoji ~20% too small (DM-1198: "our
+ *    emojis seem a lot smaller").
+ *  - The sbix PNG is a full square bitmap (the emoji fills a square em), so
+ *    drawing it into an advance × advance box reproduces both full-bleed emoji
+ *    and ones with transparent margins (e.g. 📈) without distortion.
+ *
+ * Geometry:
+ *  - Horizontal: the bitmap sits flush at the advance's left (`rect.x`); any
+ *    letter-spacing pads to the RIGHT, so no horizontal shift is applied
+ *    (DM-919 — the original DM-381 centering pass wrongly shifted it right
+ *    whenever letter-spacing > 0).
+ *  - Vertical: the square is centered in the captured rect's line box, which
+ *    matches Chrome within ~1px across sizes (DM-438 — a 20×17 rect extends
+ *    upward to a 20×20 square; DM-801 — a 56×63 rect with 8px letter-spacing
+ *    snaps to 48×48).
+ */
+export function emojiSquareRect(rect, letterSpacing) {
+    const ls = Math.max(0, letterSpacing) || 0;
+    const side = Math.max(1, rect.width - ls);
+    return {
+        x: rect.x,
+        y: rect.y + (rect.height - side) / 2,
+        width: side,
+        height: side,
+    };
+}
 /**
  * For every text segment CAPTURE_SCRIPT flagged with a rasterRect (contains a
  * color-bitmap glyph like U+2713 ✓ or an emoji), ask Playwright for a
@@ -178,28 +214,12 @@ export async function rasterizeBitmapGlyphs(page, tree, viewport) {
                                     // isn't carried on the segment (only the SVG path needs it,
                                     // not the existing screenshot path which already round-trips
                                     // 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));
-                                    // 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;
+                                    const sq = emojiSquareRect(g.rect, ls);
+                                    g.rect.x = sq.x;
+                                    g.rect.y = sq.y;
+                                    g.rect.width = sq.width;
+                                    g.rect.height = sq.height;
                                     continue;
                                 }
                             }

package/dist/capture/script/dotted-circle-detect.js

@@ -57,13 +57,20 @@ export const createDottedCircleDetect = () => {
         }
         return { cnt, w: cnt > 0 ? (maxx - minx + 1) : 0 };
     };
-    // Does Chrome auto-insert a U+25CC before this lone mark in `font`?
+    // Does Chrome auto-insert a U+25CC before this lone mark/cluster-letter in
+    // `font`? Probes category M (combining marks), category Lo (some Brahmic
+    // cluster-initial LETTERS — e.g. Soyombo U+11A84) AND category Lm (modifier
+    // LETTERS the Universal Shaping Engine also circles when orphaned — e.g. Kirat
+    // Rai U+16D6B/6C, length / vowel modifiers that paint "◌ □" when stranded).
+    // The ink heuristic below is the real gate (a normal letter renders WITHOUT a
+    // circle, so bare ≠ comb → false), so including Lo / Lm only widens what's
+    // probed, never forces a false positive.
     const markGetsDottedCircle = (cp, ch, font) => {
         if (cp < 0x0900)
             return false;
         if (font == null || font === '')
             return false;
-        if (!/\p{M}/u.test(ch))
+        if (!/\p{M}|\p{Lo}|\p{Lm}/u.test(ch))
             return false;
         const key = cp + '|' + font;
         const hit = _cache.get(key);

package/dist/capture/script/emoji-detect.js

@@ -30,11 +30,20 @@ export const createEmojiDetect = () => {
         // painting as a dropped/empty path-mode glyph: ✅ ✊ ✋. Unconditional like
         // the ✨ ❌ ➡ family above — emoji presentation wins over the cascade.
         0x2705, 0x270A, 0x270B,
-        // DM-728: U+2B?? "Miscellaneous Symbols and Arrows" block with default
-        // emoji presentation per Unicode emoji-data — Chrome paints these as
-        // Apple Color Emoji glyphs without needing the U+FE0F variation
-        // selector. The fixture's ⭐ U+2B50 in `20-deep-font-palette.html` was
-        // painting as a hollow tofu before this list was extended.
+    ]);
+    // DM-1165: the Miscellaneous Symbols and Arrows (U+2B??) code points with
+    // default emoji presentation — ⬅⬆⬇ (2B05-07), ⬛⬜ (2B1B/1C), ⭐ (2B50),
+    // ⭕ (2B55). DM-728 added these to `rasterCps` unconditionally for the ⭐ in
+    // `20-deep-font-palette.html`, but Chrome's choice is actually CASCADE-
+    // DEPENDENT: when the element's font stack reaches a monochrome symbol/math
+    // font that covers them first, Chrome paints text, not color. Verified via
+    // `CSS.getPlatformFontsForNode` on the 2B00 fixture (cells lead with "Apple
+    // Symbols"): 2B05→Apple Symbols, 2B1B & 2B50→STIX Two Math — all MONOCHROME,
+    // so the unconditional raster was stamping blue emoji / a yellow star over
+    // Chrome's black arrows / hollow star. Probe per-element via `isColorGlyph`
+    // in `needsRaster` instead (color → raster, monochrome → path). A Set so the
+    // membership test in `needsRaster` is O(1).
+    const emojiPresentation2B = new Set([
         0x2B05, 0x2B06, 0x2B07, 0x2B1B, 0x2B1C, 0x2B50, 0x2B55,
     ]);
     // Codepoints in the U+2600-26FF Misc Symbols block with EmojiPresentation=Yes
@@ -200,6 +209,43 @@ export const createEmojiDetect = () => {
         // cascade DOES reach the color font still rasters correctly.
         if (cp >= 0x1F700 && cp <= 0x1F77F)
             return isColorGlyph(cp, font);
+        // DM-1168: the two Emoji_Presentation=Yes code points in the Enclosed CJK
+        // Letters and Months block (U+3200-32FF) — ㊗ U+3297 CIRCLED IDEOGRAPH
+        // CONGRATULATION and ㊙ U+3299 CIRCLED IDEOGRAPH SECRET. Chrome paints them
+        // as Apple Color Emoji by default (the fixture cells show the red circled
+        // ideographs). But several macOS text fonts (Hiragino, Arial Unicode) also
+        // cover them with a MONOCHROME glyph, so a `lang=ja` cascade that reaches
+        // Hiragino first paints text, not color. Probe Chrome's actual per-element
+        // choice via the canvas (color → raster, monochrome → path), exactly like
+        // the DM-1025 emojiPresentation26 / DM-1125 alchemical branches.
+        if (cp === 0x3297 || cp === 0x3299)
+            return isColorGlyph(cp, font);
+        // DM-1173: 〽 U+303D PART ALTERNATION MARK (CJK Symbols and Punctuation,
+        // U+3000-303F). Emoji=Yes but text-default presentation, so Chrome paints
+        // the color glyph only when the cascade reaches Apple Color Emoji and no
+        // text font covers it first (many do — Hiragino, M+ 1p, Shippori Mincho).
+        // The fixture cell paints the orange color mark, so probe per-element font
+        // (color → raster, monochrome → path) like the branches above.
+        if (cp === 0x303D)
+            return isColorGlyph(cp, font);
+        // DM-1165: the U+2B?? emoji-presentation symbols (arrows ⬅⬆⬇, squares ⬛⬜,
+        // ⭐, ⭕). Cascade-dependent — Chrome paints text when the stack reaches a
+        // monochrome symbol/math font first (Apple Symbols / STIX Two Math), color
+        // otherwise. See `emojiPresentation2B` above.
+        if (emojiPresentation2B.has(cp))
+            return isColorGlyph(cp, font);
+        // DM-1167: the ONLY two codepoints in the Misc Symbols & Pictographs block
+        // (U+1F300-1F5FF) that a macOS text font also covers monochrome are
+        // 🌐 U+1F310 (GLOBE WITH MERIDIANS) and 🎤 U+1F3A4 (MICROPHONE) — Apple
+        // Symbols carries both. When the element's cascade leads with Apple Symbols
+        // (the html-test `.f1` cells do; CSS.getPlatformFontsForNode confirms),
+        // Chrome paints the MONOCHROME path glyph, not the color emoji. Probe
+        // Chrome's actual per-element choice (color → raster, monochrome → path)
+        // exactly like the DM-1125 Alchemical / DM-1168 ㊗㊙ branches, instead of
+        // unconditionally stamping the Apple Color Emoji bitmap over Chrome's text
+        // glyph. The common Apple-Color-Emoji-first cell still rasters (probe → true).
+        if (cp === 0x1F310 || cp === 0x1F3A4)
+            return isColorGlyph(cp, font);
         // Main emoji blocks: Misc Symbols & Pictographs, Emoticons, Transport &
         // Map, Alchemical, Supplemental Symbols & Pictographs, Pictographs
         // Extended-A, Symbols & Pictographs Extended-B.

package/dist/capture/script/index.js

@@ -383,8 +383,31 @@ export const captureScript = (args) => {
                 if (tag === 'select' && (child.tagName.toLowerCase() === 'option' || child.tagName.toLowerCase() === 'optgroup'))
                     continue;
                 const c = capture(child);
-                if (c)
+                if (c) {
+                    // DM-1177: splice a captured `scroll-marker-group` in as a real sibling
+                    // of its scroller — before the scroller for `scroll-marker-group: before`,
+                    // after it for `after`. As a sibling it sits OUTSIDE the scroller's
+                    // overflow clip (Chrome paints the group outside the scrollport) and the
+                    // normal paint-order pass places it correctly.
+                    const _grp = c.scrollMarkerGroup;
+                    const _before = c._scrollMarkerGroupBefore;
+                    delete c.scrollMarkerGroup;
+                    delete c._scrollMarkerGroupBefore;
+                    // DM-1234: `::scroll-button(<dir>)` paging arrows captured as replica
+                    // siblings; Chrome paints them OUTSIDE the scroller's overflow clip and
+                    // ABOVE its content (the fixture's `z-index:1`), so emit them AFTER the
+                    // scroller (and after the marker group) as last-painted siblings.
+                    const _btns = c.scrollButtons;
+                    delete c.scrollButtons;
+                    if (_grp && _before)
+                        children.push(_grp);
                     children.push(c);
+                    if (_grp && !_before)
+                        children.push(_grp);
+                    if (_btns)
+                        for (let _bi = 0; _bi < _btns.length; _bi++)
+                            children.push(_btns[_bi]);
+                }
             }
         const _animId = el.dataset != null ? el.dataset.domotionAnim : undefined;
         // DM-900: author-supplied magic-move pairing key (`data-magic-key`). When
@@ -809,8 +832,298 @@ export const captureScript = (args) => {
         // .imageReplacement, and on the sprite-icon path .styles.backgroundImage /
         // .text / .textSegments). See walker/replaced-elements.ts.
         handleReplacedElement(el, cs, tag, rect, _captured, bordersOnlyCell);
+        // DM-1177: CSS `scroll-marker-group` (Chrome 135+). Capture the synthesized
+        // dot/pill marker-group box as a replica subtree (see _captureScrollMarkerGroup).
+        // Stash it (plus its before/after placement) on the node so the PARENT's
+        // children loop can splice it in as a real sibling — emitting it inside the
+        // scroller's own render fights the renderer's paint-order / overflow-clip
+        // machinery, so it must be a first-class tree node next to the scroller.
+        if (!bordersOnlyCell) {
+            var _smg = _captureScrollMarkerGroup(el, cs, rect);
+            if (_smg) {
+                _captured.scrollMarkerGroup = _smg.node;
+                _captured._scrollMarkerGroupBefore = _smg.before;
+            }
+            var _sbtns = _captureScrollButtons(el, cs, rect);
+            if (_sbtns)
+                _captured.scrollButtons = _sbtns;
+        }
         return _captured;
     };
+    // DM-1177: A scroll container with `scroll-marker-group: after | before`
+    // synthesizes an anonymous marker-group box, and each scrollable child whose
+    // `::scroll-marker` has non-`none` content becomes a dot/pill flex item inside
+    // it. The generated boxes have NO DOM node (un-measurable). To reproduce
+    // Chrome's paint faithfully without reimplementing the marker-group flex
+    // layout, build a hidden REPLICA from the resolved `::scroll-marker-group` /
+    // `::scroll-marker` computed styles — `:target-current` is already baked into
+    // the active marker's computed style by the engine — position it where Chrome
+    // paints the real group (after → below the scroller, before → above it, full
+    // scroller width), and walk it with the normal `capture()` so each marker is a
+    // styled box (with centered text for pill labels). Chrome lays out the replica
+    // identically to the real group, so the measured rects ARE Chrome's geometry.
+    function _captureScrollMarkerGroup(el, cs, rect) {
+        var smg = cs.scrollMarkerGroup != null && cs.scrollMarkerGroup !== ''
+            ? cs.scrollMarkerGroup
+            : (cs.getPropertyValue ? cs.getPropertyValue('scroll-marker-group') : '');
+        if (!smg || smg.indexOf('none') === 0)
+            return undefined;
+        var position = smg.indexOf('before') === 0 ? 'before'
+            : (smg.indexOf('after') === 0 ? 'after' : null);
+        if (!position)
+            return undefined;
+        // One marker per child whose ::scroll-marker has real content.
+        var items = [];
+        for (var i = 0; i < el.children.length; i++) {
+            var child = el.children[i];
+            var mcs = window.getComputedStyle(child, '::scroll-marker');
+            var content = mcs.content;
+            if (!content || content === 'none' || content === 'normal')
+                continue;
+            items.push({ mcs: mcs, content: content });
+        }
+        if (items.length === 0)
+            return undefined;
+        var gcs = window.getComputedStyle(el, '::scroll-marker-group');
+        var doc = el.ownerDocument;
+        var container = doc.createElement('div');
+        var groupWidth = rect.width; // scroller border-box width
+        container.style.boxSizing = 'border-box';
+        container.style.position = 'absolute';
+        container.style.margin = '0';
+        container.style.display = gcs.display && gcs.display !== 'inline' ? gcs.display : 'flex';
+        container.style.justifyContent = gcs.justifyContent || 'center';
+        container.style.alignItems = gcs.alignItems && gcs.alignItems !== 'normal' ? gcs.alignItems : 'center';
+        if (gcs.gap && gcs.gap !== 'normal')
+            container.style.gap = gcs.gap;
+        container.style.padding = gcs.padding || '0';
+        container.style.background = gcs.backgroundColor || 'transparent';
+        container.style.borderRadius = gcs.borderRadius || '0';
+        container.style.width = groupWidth + 'px';
+        container.style.left = '-99999px';
+        container.style.top = '0px';
+        for (var j = 0; j < items.length; j++) {
+            var mc = items[j].mcs;
+            var m = doc.createElement('div');
+            var txt = items[j].content;
+            if (txt === '""' || txt === "''")
+                txt = '';
+            else if (txt.length >= 2 && ((txt[0] === '"' && txt[txt.length - 1] === '"') || (txt[0] === "'" && txt[txt.length - 1] === "'")))
+                txt = txt.slice(1, -1);
+            else
+                txt = '';
+            m.textContent = txt;
+            m.style.boxSizing = mc.boxSizing || 'content-box';
+            m.style.flex = '0 0 auto';
+            // Empty content ⇒ a sized dot (author set explicit width/height). Non-empty
+            // ⇒ a content-sized pill (width/height auto from text + padding).
+            if (txt === '') {
+                m.style.width = mc.width;
+                m.style.height = mc.height;
+            }
+            m.style.borderRadius = mc.borderRadius;
+            m.style.background = mc.backgroundColor;
+            m.style.color = mc.color;
+            // Horizontal margin spaces the markers along the row; vertical margin does
+            // NOT expand Chrome's generated group box (measured), so zero it out so the
+            // replica's measured height matches the real group.
+            m.style.marginTop = '0';
+            m.style.marginBottom = '0';
+            m.style.marginLeft = mc.marginLeft || '0';
+            m.style.marginRight = mc.marginRight || '0';
+            m.style.padding = mc.padding;
+            m.style.fontSize = mc.fontSize;
+            m.style.fontWeight = mc.fontWeight;
+            m.style.fontFamily = mc.fontFamily;
+            m.style.lineHeight = mc.lineHeight;
+            m.style.display = mc.display && mc.display !== 'inline' ? mc.display : 'inline-block';
+            if (mc.transform && mc.transform !== 'none')
+                m.style.transform = mc.transform;
+            if (mc.transformOrigin)
+                m.style.transformOrigin = mc.transformOrigin;
+            var bw = parseFloat(mc.borderTopWidth || '0') || 0;
+            if (bw > 0) {
+                m.style.borderStyle = mc.borderTopStyle;
+                m.style.borderWidth = mc.borderTopWidth;
+                m.style.borderColor = mc.borderTopColor;
+            }
+            container.appendChild(m);
+        }
+        doc.body.appendChild(container);
+        var gh = container.getBoundingClientRect().height;
+        // Chrome paints the marker group with its MARKERS flush against the scroller
+        // edge — the group's outer padding overlaps the scroller's own padding band
+        // rather than adding a separate gap (measured: the visible group below an
+        // `after` scroller is ~group-height-minus-top-padding tall, with the dots
+        // sitting right at the scroller's bottom edge). Reproduce that by sliding the
+        // replica so the marker row's content edge meets the scroller edge: for
+        // `after`, content-top (= containerTop + paddingTop) lands at rect.bottom;
+        // for `before`, content-bottom (= containerTop + gh - paddingBottom) lands at
+        // rect.top.
+        var padTop = parseFloat(gcs.paddingTop || '0') || 0;
+        var padBottom = parseFloat(gcs.paddingBottom || '0') || 0;
+        var targetTop = position === 'after' ? (rect.bottom - padTop) : (rect.top - gh + padBottom);
+        container.style.left = (rect.left + window.scrollX) + 'px';
+        container.style.top = (targetTop + window.scrollY) + 'px';
+        var node = capture(container);
+        doc.body.removeChild(container);
+        if (!node)
+            return undefined;
+        return { node: node, before: position === 'before' };
+    }
+    // DM-1234: CSS `::scroll-button(<dir>)` paging arrows (Chrome 135+). Like the
+    // marker-group these are generated boxes with NO DOM node, and — crucially —
+    // Chrome lays them out against the INITIAL CONTAINING BLOCK (the viewport),
+    // NOT the scroller's `position:relative` ancestor: `top:50%` resolves to 50%
+    // of the viewport height and `left`/`right` to insets from the viewport edges
+    // (verified by probe-and-match against Chrome's painted output across two
+    // viewport heights — the button center tracked 50%·viewportHeight while the
+    // scroller stayed put). `getComputedStyle(el, '::scroll-button(left)')` can't
+    // disambiguate the parameterized pseudo — it returns ONE merged style (the
+    // box props are shared, but `content` is the cascade-last value and both
+    // insets are reported) — so the per-side `content` + the `:disabled`
+    // declarations are read from the author stylesheet (CSSOM). Geometry is then
+    // resolved the same trick the marker-group uses: an absolutely-positioned
+    // replica appended to <body> ALSO takes the ICB as its containing block, so
+    // `top:50%`/`left`/`right`/`transform` land exactly where Chrome paints the
+    // real button — capture() measures that, so the rect IS Chrome's geometry.
+    // Enabled/disabled comes from the captured scroll offset vs the scroll range.
+    function _scrollButtonAuthorRules(el) {
+        // Per-direction author declarations + the merged `:disabled` declarations,
+        // gathered from every stylesheet rule whose `::scroll-button(<dir>)`
+        // selector matches `el`. `*` (universal direction) is folded in as a base.
+        var sides = {};
+        var disabled = {};
+        var star = {};
+        var sheets = el.ownerDocument.styleSheets;
+        for (var s = 0; s < sheets.length; s++) {
+            var rules;
+            try {
+                rules = sheets[s].cssRules;
+            }
+            catch (e) {
+                continue;
+            }
+            if (!rules)
+                continue;
+            for (var r = 0; r < rules.length; r++) {
+                var rule = rules[r];
+                var sel = rule.selectorText;
+                if (!sel)
+                    continue;
+                var at = sel.indexOf('::scroll-button(');
+                if (at < 0)
+                    continue;
+                var close = sel.indexOf(')', at);
+                if (close < 0)
+                    continue;
+                var dir = sel.slice(at + 16, close).trim();
+                var base = sel.slice(0, at).trim();
+                var matches = false;
+                try {
+                    matches = base === '' || el.matches(base);
+                }
+                catch (e) {
+                    matches = false;
+                }
+                if (!matches)
+                    continue;
+                var isDisabled = sel.slice(close + 1).indexOf(':disabled') >= 0;
+                var bucket = isDisabled ? disabled : (dir === '*' ? star : (sides[dir] || (sides[dir] = {})));
+                var decl = rule.style;
+                for (var d = 0; d < decl.length; d++)
+                    bucket[decl[d]] = decl.getPropertyValue(decl[d]);
+            }
+        }
+        // Fold the universal `*` declarations in as a lower-priority base per side.
+        for (var k in sides) {
+            if (!Object.prototype.hasOwnProperty.call(sides, k))
+                continue;
+            var merged = {};
+            for (var sp in star)
+                if (Object.prototype.hasOwnProperty.call(star, sp))
+                    merged[sp] = star[sp];
+            for (var op in sides[k])
+                if (Object.prototype.hasOwnProperty.call(sides[k], op))
+                    merged[op] = sides[k][op];
+            sides[k] = merged;
+        }
+        return { sides: sides, disabled: disabled };
+    }
+    function _captureScrollButtons(el, cs, rect) {
+        // Cheap gate: only elements that actually generate a scroll-button get the
+        // CSSOM scan. A non-`none` `content` on the merged pseudo means buttons exist.
+        var probe = window.getComputedStyle(el, '::scroll-button(left)').content;
+        if (!probe || probe === 'none' || probe === 'normal') {
+            probe = window.getComputedStyle(el, '::scroll-button(right)').content;
+            if (!probe || probe === 'none' || probe === 'normal')
+                return undefined;
+        }
+        var rules = _scrollButtonAuthorRules(el);
+        var doc = el.ownerDocument;
+        var maxX = el.scrollWidth - el.clientWidth;
+        var maxY = el.scrollHeight - el.clientHeight;
+        var nodes = [];
+        for (var dir in rules.sides) {
+            if (!Object.prototype.hasOwnProperty.call(rules.sides, dir))
+                continue;
+            var decls = rules.sides[dir];
+            var isDisabled = false;
+            if (dir === 'left' || dir === 'inline-start')
+                isDisabled = el.scrollLeft <= 0;
+            else if (dir === 'right' || dir === 'inline-end')
+                isDisabled = el.scrollLeft >= maxX - 1;
+            else if (dir === 'up' || dir === 'block-start')
+                isDisabled = el.scrollTop <= 0;
+            else if (dir === 'down' || dir === 'block-end')
+                isDisabled = el.scrollTop >= maxY - 1;
+            var btn = doc.createElement('div');
+            var content = '';
+            for (var p in decls) {
+                if (!Object.prototype.hasOwnProperty.call(decls, p))
+                    continue;
+                if (p === 'content') {
+                    content = decls[p];
+                    continue;
+                }
+                try {
+                    btn.style.setProperty(p, decls[p]);
+                }
+                catch (e) { /* unsupported prop */ }
+            }
+            if (isDisabled) {
+                for (var dp in rules.disabled) {
+                    if (!Object.prototype.hasOwnProperty.call(rules.disabled, dp))
+                        continue;
+                    try {
+                        btn.style.setProperty(dp, rules.disabled[dp]);
+                    }
+                    catch (e) { /* unsupported */ }
+                }
+            }
+            // Match the real button's containing block (ICB) by living on <body> as an
+            // absolutely-positioned box; the author's left/right/top/transform then
+            // resolve against the viewport exactly as Chrome resolves them.
+            if (!btn.style.position || btn.style.position === 'static')
+                btn.style.position = 'absolute';
+            btn.style.margin = '0';
+            // Only a quoted string `content` becomes a text glyph. DM-1248: a `url()` /
+            // counter() / image content value is NOT text — set no glyph rather than
+            // rendering the literal CSS string (e.g. `url("x.png")`) as garbage text.
+            // (Faithful image-content rendering is a tracked TODO in DM-1248.)
+            var txt = '';
+            if (content.length >= 2 && ((content[0] === '"' && content[content.length - 1] === '"') || (content[0] === "'" && content[content.length - 1] === "'"))) {
+                txt = content.slice(1, -1);
+            }
+            btn.textContent = txt;
+            doc.body.appendChild(btn);
+            var node = capture(btn);
+            doc.body.removeChild(btn);
+            if (node)
+                nodes.push(node);
+        }
+        return nodes.length ? nodes : undefined;
+    }
     const root = document.querySelector(sel);
     if (!root)
         return { tree: [], warnings: [] };
@@ -1145,7 +1458,13 @@ export const captureScript = (args) => {
         try {
             var _isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
             result[0].styles.rootColorScheme = _isDark ? 'dark' : 'light';
-            result[0].styles.rootBgComputed = window.getComputedStyle(document.documentElement).backgroundColor;
+            var _docCs = window.getComputedStyle(document.documentElement);
+            result[0].styles.rootBgComputed = _docCs.backgroundColor;
+            // DM-1244: <html>'s overflow decides whether <body>'s overflow propagates
+            // to the viewport (it only does when <html> is `overflow: visible`). The
+            // renderer needs it to know whether to apply <body>'s own overflow clip.
+            result[0].styles.rootOverflowX = _docCs.overflowX;
+            result[0].styles.rootOverflowY = _docCs.overflowY;
         }
         catch (_e) { /* no-op — never block capture on this */ }
     }