domotion-svg 0.2.2 → 0.3.2

package/dist/render/text.js

@@ -8,6 +8,74 @@ import { computeSkipInkGaps, getDecorationMetrics, renderTextAsPath } from "./te
 // ── Rendering helpers ──
 function r(n) { return Number(n.toFixed(1)).toString(); }
 function esc(s) { return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"); }
+/**
+ * Emit `<line>` markup for each non-zero side border on a pseudo-element box.
+ * Used for non-uniform pseudo borders (e.g. Slashdot's `.carouselHeading::after`
+ * with a bare `border-bottom`) where the surrounding `<rect>` already painted
+ * the box's fill/radius but its `stroke` shorthand can't represent a single-
+ * side border. Returns "" when the box has no per-side borders.
+ */
+function renderPseudoBoxPerSideBorders(pb) {
+    const lines = [];
+    // Stroke at the centre of the border-side, so half-width insets are
+    // applied to the rect's edges to keep the stroke pixel-aligned with what
+    // CSS paints (CSS paints borders inset to the box's outer edges, with the
+    // stroke centre offset by half the border width from the rect edge).
+    const x2 = pb.x + pb.width;
+    const y2 = pb.y + pb.height;
+    if (pb.borT != null && pb.borT > 0 && pb.borderTopColor != null) {
+        const cy = pb.y + pb.borT / 2;
+        lines.push(`<line x1="${r(pb.x)}" y1="${r(cy)}" x2="${r(x2)}" y2="${r(cy)}" stroke="${esc(pb.borderTopColor)}" stroke-width="${r(pb.borT)}"/>`);
+    }
+    if (pb.borR != null && pb.borR > 0 && pb.borderRightColor != null) {
+        const cx = x2 - pb.borR / 2;
+        lines.push(`<line x1="${r(cx)}" y1="${r(pb.y)}" x2="${r(cx)}" y2="${r(y2)}" stroke="${esc(pb.borderRightColor)}" stroke-width="${r(pb.borR)}"/>`);
+    }
+    if (pb.borB != null && pb.borB > 0 && pb.borderBottomColor != null) {
+        const cy = y2 - pb.borB / 2;
+        lines.push(`<line x1="${r(pb.x)}" y1="${r(cy)}" x2="${r(x2)}" y2="${r(cy)}" stroke="${esc(pb.borderBottomColor)}" stroke-width="${r(pb.borB)}"/>`);
+    }
+    if (pb.borL != null && pb.borL > 0 && pb.borderLeftColor != null) {
+        const cx = pb.x + pb.borL / 2;
+        lines.push(`<line x1="${r(cx)}" y1="${r(pb.y)}" x2="${r(cx)}" y2="${r(y2)}" stroke="${esc(pb.borderLeftColor)}" stroke-width="${r(pb.borL)}"/>`);
+    }
+    return lines.join("");
+}
+/**
+ * DM-783: parse a resolved `transform-origin` string (`"50px 50px"`,
+ * `"50px 50px 0px"`) into an `(ox, oy)` pair in px relative to the pseudoBox's
+ * top-left. Chrome's getComputedStyle always returns px values (never
+ * keywords like "left top" or "%"), so we just split + parseFloat. The
+ * 3rd Z component is ignored — we only paint 2D. Falls back to the box
+ * center when the value is missing or unparseable, matching Chrome's
+ * `50% 50%` default.
+ */
+function parsePseudoTransformOrigin(originCss, width, height) {
+    const center = { ox: width / 2, oy: height / 2 };
+    if (originCss == null || originCss === "")
+        return center;
+    const parts = originCss.split(/\s+/).map((p) => parseFloat(p));
+    if (parts.length < 2 || !Number.isFinite(parts[0]) || !Number.isFinite(parts[1]))
+        return center;
+    return { ox: parts[0], oy: parts[1] };
+}
+/**
+ * DM-783: when the pseudoBox carries a `transform`, wrap `inner` in a
+ * `<g transform="…">` that pre-bakes the rotation/scale around the captured
+ * `transform-origin` — `translate(tx,ty) <css-transform> translate(-tx,-ty)`
+ * where `(tx, ty)` is the origin in viewport coords. SVG accepts the CSS
+ * matrix() / rotate() / scale() / translate() / skew() forms unchanged
+ * (column-major convention matches), so `pb.transform` pastes in verbatim.
+ * Returns `inner` unwrapped when no transform was captured.
+ */
+function pseudoBoxTransformWrap(pb, inner) {
+    if (pb.transform == null || pb.transform === "" || pb.transform === "none")
+        return inner;
+    const { ox, oy } = parsePseudoTransformOrigin(pb.transformOrigin, pb.width, pb.height);
+    const tx = pb.x + ox;
+    const ty = pb.y + oy;
+    return `<g transform="translate(${r(tx)} ${r(ty)}) ${pb.transform} translate(${r(-tx)} ${r(-ty)})">${inner}</g>`;
+}
 /**
  * Replace any UTF-16 code units flagged with `suppressGlyph` in the segment's
  * raster overlays with U+200B (zero-width space). The path renderer emits no
@@ -16,20 +84,61 @@ function esc(s) { return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(
  * Used for ::first-letter drop caps (DM-439) where the body-size path glyph
  * would otherwise show through behind the styled rasterized big letter.
  */
+// DM-719: pull `-webkit-text-stroke-width / -color` + `paint-order` off the
+// element styles into the trio of args `renderTextAsPath` expects. Returns
+// `{ width: 0 }` when no stroke is set so the renderer keeps the unstroked
+// fast path.
+function textStrokeParams(styles) {
+    const widthCss = styles.webkitTextStrokeWidth;
+    if (widthCss == null || widthCss === "" || widthCss === "0px" || widthCss === "0") {
+        return { width: 0, color: "", paintOrder: "" };
+    }
+    const width = parseFloat(widthCss);
+    if (!Number.isFinite(width) || width <= 0) {
+        return { width: 0, color: "", paintOrder: "" };
+    }
+    return {
+        width,
+        color: styles.webkitTextStrokeColor ?? "currentColor",
+        paintOrder: styles.paintOrder ?? "",
+    };
+}
 function suppressGlyphChars(text, seg) {
+    // DM-692: Chrome paints a visible hyphen at line-break points marked by
+    // a soft-hyphen (U+00AD); SHYs not at the break paint nothing. Our
+    // capture's per-char Range loop keeps EVERY SHY in the captured line
+    // text (the height check at the line-break-pos doesn't zero them out),
+    // so we have to disambiguate at render time: ONLY the trailing SHY of a
+    // line is the visible hyphen — substitute with U+002D. Every other SHY
+    // gets U+200B (zero-width space) so it preserves UTF-16 indexing for
+    // xOffsets/rasterGlyphs but produces no glyph and no advance.
+    const SHY = String.fromCharCode(0x00AD);
+    const ZWSP = String.fromCharCode(0x200B);
+    let normalized = text;
+    if (text.indexOf(SHY) >= 0) {
+        const lastNonWs = normalized.replace(/\s+$/, "").length - 1;
+        let out = "";
+        for (let i = 0; i < normalized.length; i++) {
+            const ch = normalized[i];
+            if (ch === SHY)
+                out += (i === lastNonWs ? "-" : ZWSP);
+            else
+                out += ch;
+        }
+        normalized = out;
+    }
     if (seg?.rasterGlyphs == null)
-        return text;
+        return normalized;
     const suppress = seg.rasterGlyphs.filter((g) => g.suppressGlyph === true);
     if (suppress.length === 0)
-        return text;
+        return normalized;
     // text is a UTF-16 string; charIndex is a UTF-16 position. U+200B is one
     // UTF-16 unit so the substitution preserves text length and xOffsets
     // alignment.
-    const ZWSP = String.fromCharCode(0x200B);
     let out = "";
-    for (let i = 0; i < text.length; i++) {
+    for (let i = 0; i < normalized.length; i++) {
         const drop = suppress.some((g) => g.charIndex === i);
-        out += drop ? ZWSP : text[i];
+        out += drop ? ZWSP : normalized[i];
     }
     return out;
 }
@@ -65,7 +174,19 @@ export function rasterGlyphOverlays(seg, fallbackFontSize, clipId) {
         // squished tall line-box rects horizontally — flag emoji and other
         // raster glyphs rendered visibly larger than Chrome's actual paint
         // (DM-401 / DM-411 / DM-414).
-        out.push(`<image href="${g.dataUri}" x="${r(g.rect.x)}" y="${r(g.rect.y)}" width="${r(g.rect.width)}" height="${r(g.rect.height)}" preserveAspectRatio="none" clip-path="url(#${clipId})"/>`);
+        // DM-823: floated `::first-letter` drop caps (`float: left; font-size: Nem;
+        // initial-letter: N M`) paint OUTSIDE their parent paragraph's box —
+        // Chrome's float layout naturally extends the W / B / T above and to the
+        // left of the `<p>` border-box. Capture marks these per-char rasters with
+        // `suppressGlyph: true` so the underlying path glyph isn't double-emitted
+        // (DM-439). Use that same flag here as a signal to OMIT the parent's
+        // overflow-clip on the raster `<image>`: the parent's clip rect is the
+        // `<p>`'s own bounds, which clips off the top portion of the drop cap
+        // exactly where the float overflows. For non-drop-cap raster glyphs
+        // (emoji in the middle of text) the parent clip is still desirable.
+        const skipClip = g.suppressGlyph === true;
+        const clipAttr = skipClip ? "" : ` clip-path="url(#${clipId})"`;
+        out.push(`<image href="${g.dataUri}" x="${r(g.rect.x)}" y="${r(g.rect.y)}" width="${r(g.rect.width)}" height="${r(g.rect.height)}" preserveAspectRatio="none"${clipAttr}/>`);
     }
     return out.join("");
 }
@@ -102,11 +223,13 @@ features) {
     const has = (k) => textDecorationLine.includes(k);
     const dash = (thick) => style === "dashed" ? ` stroke-dasharray="${thick * 2} ${thick * 2}"`
         : style === "dotted" ? ` stroke-dasharray="${thick} ${thick}"` : "";
-    // Skip-ink applies only to solid + double underlines per Chromium
-    // (`decoration_line_painter.cc::Paint` short-circuits on dashed / dotted /
-    // wavy). We compute gaps once if any underline emit needs them.
+    // Skip-ink applies to solid + double + wavy underlines per Chromium's
+    // current behaviour (`decoration_line_painter.cc::Paint`; verified against
+    // Chrome's painted output for the 20-deep-wavy-underline-descenders
+    // fixture — DM-814). Dashed / dotted still short-circuit. We compute gaps
+    // once if any underline emit needs them.
     const skipInkActive = (skipInk == null || skipInk === "auto") && runText != null && runText !== ""
-        && (style == null || style === "solid" || style === "double" || style === "");
+        && (style == null || style === "solid" || style === "double" || style === "wavy" || style === "");
     // Compute X-range gaps where the underline rect crosses glyph ink. Returned
     // gaps are run-relative (0 = segX); subSegments() splits the underline span
     // around them.
@@ -168,15 +291,64 @@ features) {
             const tc = explicitThickness ? Math.max(1, t) : Math.max(1, fontSize / 10);
             const wavelength = 1 + 2 * Math.round(2 * tc + 0.5);
             const cpDist = 0.5 + Math.round(3 * tc + 0.5);
-            let d = `M ${r(segX)} ${r(y)}`;
-            let x = segX;
-            while (x < segX + segWidth) {
-                const nx = Math.min(x + wavelength, segX + segWidth);
-                const cpX = x + wavelength / 2;
-                d += ` C ${r(cpX)} ${r(y + cpDist)} ${r(cpX)} ${r(y - cpDist)} ${r(nx)} ${r(y)}`;
-                x = nx;
+            // DM-830: re-probed against native Chromium (`tools/probe-wavy-geom5.mjs`)
+            // at fs={12, 16, 24, 36} × thickness={1, 2, 3, 4, 6}, measuring wave
+            // centre-y and peak amplitude against the descender-less 'm' baseline.
+            // Two findings differed from the earlier DM-446 calibration:
+            //
+            //  (1) Chrome paints amplitude `~0.278 × cpDist` (was 0.289). Across the
+            //      sample matrix: t=1→1.25, t=2→2.00, t=3→3.00, t=4→3.75, t=6→5.50
+            //      — Chrome's `cpDist`-to-amplitude ratio is consistently 0.27-0.28,
+            //      NOT the cubic-Bezier-geometric 0.289 = √3/(2π/n) factor we'd
+            //      derived analytically. Either Chrome uses a different
+            //      bezier-flatness setting or its wavy is actually a different
+            //      curve family at the painted scale.
+            //
+            //  (2) Wave centre-y is INDEPENDENT of fontSize (the previous formula
+            //      `y + 2 * amplitude` produced wave-y identical across font sizes
+            //      because `y = baseline + 1.5×t` itself was thickness-only; the
+            //      empirical pattern just confirms this). Centre-y DOES depend on
+            //      thickness: yCenter - baseline ≈ 2 + t/2 + amplitude. This is
+            //      consistent with "the wave's TOP edge sits exactly at the solid-
+            //      underline BOTTOM edge, leaving descender region clear" — where
+            //      Chrome's auto solid underline at thickness `t` paints at
+            //      baseline + 2 - t/2 to baseline + 2 + t/2.
+            //
+            // `y` passed into `emitLine` already equals `baseline + 1.5×t + extra`
+            // (the extra is the author's text-underline-offset). The new formula
+            // `yWave = y + amp + 2 - t` algebraically reduces to
+            // `baseline + 2 + 0.5×t + amp + extra`, matching the probed wave centre.
+            // For uniform text-underline-offset = 0, errors stay ≤ 0.4 px across
+            // the probed thickness range.
+            const waveAmplitude = 0.278 * cpDist;
+            const yWave = y + waveAmplitude + 2 - tc;
+            // DM-814: skip-ink for wavy. Compute gaps using the wave's full
+            // vertical extent (2*amplitude + stroke thickness) so a descender that
+            // pokes into the wave's PEAK or TROUGH zones breaks the wave, not just
+            // descenders that cross the centerline. Then emit one wave path per
+            // non-gap sub-segment. Each sub-segment's wave starts at phase 0 at
+            // its own x0 — adjacent segments aren't strictly phase-coherent with a
+            // hypothetical continuous wave, but the descender gap is usually wider
+            // than the discontinuity which makes the visual indistinguishable from
+            // Chrome's per-glyph break style.
+            const bandThickness = 2 * waveAmplitude + tc;
+            const wavyGaps = isUnderline ? computeGapsAt(yWave - baselineY, bandThickness) : [];
+            const subs = subSegments(wavyGaps);
+            const parts = [];
+            for (const { x0: sx0, x1: sx1 } of subs) {
+                if (sx1 - sx0 < 0.5)
+                    continue;
+                let d = `M ${r(sx0)} ${r(yWave)}`;
+                let x = sx0;
+                while (x < sx1) {
+                    const nx = Math.min(x + wavelength, sx1);
+                    const cpX = x + wavelength / 2;
+                    d += ` C ${r(cpX)} ${r(yWave + cpDist)} ${r(cpX)} ${r(yWave - cpDist)} ${r(nx)} ${r(yWave)}`;
+                    x = nx;
+                }
+                parts.push(`<path d="${d}" fill="none" stroke="${decorationColor}" stroke-width="${r(tc)}"/>`);
             }
-            return `<path d="${d}" fill="none" stroke="${decorationColor}" stroke-width="${r(tc)}"/>`;
+            return parts.join("");
         }
         if (style === "double") {
             // Double: two parallel lines. Per Chromium's `decoration_line_painter
@@ -389,10 +561,67 @@ function mergeFeatureLists(a, b) {
     }
     return out;
 }
+/**
+ * DM-680: anisotropic-ancestor scale correction. When the element sits inside
+ * a `transform: scale(sx, sy)` with sx ≠ sy, the capture script already
+ * folded the geometric mean of (sx, sy) into fontSize / fontAscent / fontDescent
+ * — that produces correct glyph metrics for the uniform / isotropic case but
+ * leaves an axis ratio still to apply (Chrome paints glyphs into post-transform
+ * device space, where width scales by sx and height by sy independently). Wrap
+ * the text emission in a per-axis correction `<g transform=...>` pivoted around
+ * the text origin so the net visual scale is exactly (sx, sy).
+ *
+ * DM-822: callers that emit per-char positions FROM CAPTURED xOffsets must
+ * also call `anisotropicCorrectionXOffsets` to pre-divide those xOffsets by
+ * (cx, cy). The captured xOffsets are post-transform (= native_x × sx)
+ * already; without the pre-division, the wrap's outer scale multiplies them
+ * a second time and inter-glyph spacing comes out 1.5×–2× too wide on
+ * fixtures like `21-deep-anisotropic-scale`'s `scale(1.6, 0.7)` box. The
+ * per-axis (cx, cy) factors are `sx/geo` and `sy/geo` so that geo×cx == sx
+ * exactly; dividing xOffsetsRel by cx (which is what the wrap is about to
+ * multiply by) is the exact inverse and leaves the post-wrap glyph
+ * positions equal to the captured xOffsets.
+ */
+function getAnisotropicCorrectionFactors(el) {
+    const sx = el.cumScaleX;
+    const sy = el.cumScaleY;
+    if (sx == null || sy == null || sx === sy)
+        return null;
+    const geo = Math.sqrt(sx * sy);
+    if (geo === 0)
+        return null;
+    const cx = sx / geo;
+    const cy = sy / geo;
+    if (Math.abs(cx - 1) < 1e-4 && Math.abs(cy - 1) < 1e-4)
+        return null;
+    return { cx, cy };
+}
+function anisotropicCorrectionXOffsets(el, xOffsetsRel) {
+    if (xOffsetsRel == null)
+        return xOffsetsRel;
+    const f = getAnisotropicCorrectionFactors(el);
+    if (f == null)
+        return xOffsetsRel;
+    // xOffsetsRel is in user-space, relative to the text origin (the wrap's
+    // pivot). Dividing by cx pre-shrinks the inter-glyph spacing so that the
+    // wrap's scale(cx, cy) multiplies it back to the captured xOffsets.
+    return xOffsetsRel.map((v) => v / f.cx);
+}
+function anisotropicCorrectionWrap(el, body) {
+    const f = getAnisotropicCorrectionFactors(el);
+    if (f == null)
+        return body;
+    // Pivot around the text origin so the correction stretches glyphs in place
+    // rather than translating the whole block.
+    const px = el.textLeft ?? el.x;
+    const py = el.textTop ?? el.y;
+    return `<g transform="translate(${r(px)} ${r(py)}) scale(${r(f.cx)} ${r(f.cy)}) translate(${r(-px)} ${r(-py)})">${body}</g>`;
+}
 /**
  * Render a single-line text element.
  */
 export function renderSingleLineText(opts) {
+    const _ts = textStrokeParams(opts.el.styles);
     const { el, clipId, fillColor } = opts;
     // Raster fallback (DM-626 follow-up to DM-583): when the only segment
     // is a pseudo whose codepoints fontkit can't shape (e.g. icon-font
@@ -424,7 +653,9 @@ export function renderSingleLineText(opts) {
     const dir = el.styles.direction === "rtl" ? "rtl" : "ltr";
     const reordered = applyBidi(pathTextRaw, xOffsetsRelRaw, dir);
     const pathText = reordered.text;
-    const xOffsetsRel = reordered.xOffsets;
+    // DM-822: pre-divide xOffsetsRel by cx when an anisotropic correction
+    // wrap will multiply positions on emit. No-op for uniform-scale text.
+    const xOffsetsRel = anisotropicCorrectionXOffsets(el, reordered.xOffsets);
     const features = mergeFeatureLists(resolveCapsFeatures(singleSeg?.fontVariant, el.styles.fontVariantCaps), parseFontFeatureSettings(el.styles.fontFeatureSettings));
     const variationSettings = parseFontVariationSettings(el.styles.fontVariationSettings);
     // DM-495: when the only segment is a pseudo with its own typography
@@ -440,6 +671,12 @@ export function renderSingleLineText(opts) {
     // DM-513: pseudo-element font-family override (e.g. icon font on
     // `[class^="icon-"]:before { font-family: "sdicon" }`).
     const segFontFamily = singleSeg?.fontFamily ?? fontFamily;
+    // Pseudo-element font-style override (Slashdot's `.carouselHeading::after`
+    // is italic on a non-italic host). The multi-segment path already did the
+    // `seg.fontStyle ?? el.styles.fontStyle` fallback below; the single-segment
+    // path was reading host fontStyle exclusively, so a pseudo's italic was
+    // silently swallowed.
+    const segFontStyle = singleSeg?.fontStyle ?? el.styles.fontStyle;
     // DM-507: when the single segment is a pseudo with its own paint box
     // (background-color / border-radius / border), emit a <rect> behind the
     // glyphs. Same as the multi-segment path; without this the badge / pill
@@ -447,12 +684,26 @@ export function renderSingleLineText(opts) {
     const singleSegBoxMarkup = (singleSeg?.pseudoBox != null) ? (() => {
         const pb = singleSeg.pseudoBox;
         const fillAttr = pb.backgroundColor != null ? ` fill="${esc(pb.backgroundColor)}"` : ` fill="none"`;
-        const rxAttr = pb.borderRadius != null && pb.borderRadius > 0 ? ` rx="${r(pb.borderRadius)}" ry="${r(pb.borderRadius)}"` : "";
+        // Clamp the pseudo's border-radius to half the SHORTER side so a pill
+        // (e.g. `border-radius: 100px` on a 90×40 button) renders as a capsule
+        // — flat top/bottom + fully-rounded ends — instead of an ellipse with
+        // rx and ry capped independently. Mirrors the inset() clip-path fix
+        // (CSS Backgrounds 3 §5.5 uniform-scale rule) for the pseudo-box path.
+        const clampedBR = pb.borderRadius != null && pb.borderRadius > 0
+            ? Math.min(pb.borderRadius, pb.width / 2, pb.height / 2) : 0;
+        const rxAttr = clampedBR > 0 ? ` rx="${r(clampedBR)}" ry="${r(clampedBR)}"` : "";
         const strokeAttr = pb.borderWidth != null && pb.borderWidth > 0 && pb.borderColor != null
             ? ` stroke="${esc(pb.borderColor)}" stroke-width="${r(pb.borderWidth)}"` : "";
-        return `<rect x="${r(pb.x)}" y="${r(pb.y)}" width="${r(pb.width)}" height="${r(pb.height)}"${rxAttr}${fillAttr}${strokeAttr}/>`;
+        // DM-782: gradient/url() background-image layers paint BETWEEN the flat
+        // bg-color (bottom) and the text glyphs (top). Caller threads defsParts
+        // + clipIdx through `emitPseudoBoxBgLayers`; when that closure is absent
+        // (standalone callers / unit tests) we just skip the gradient layers.
+        const bgImageMarkup = (pb.backgroundImage != null && pb.backgroundImage !== "none" && pb.backgroundImage !== "" && opts.emitPseudoBoxBgLayers != null)
+            ? opts.emitPseudoBoxBgLayers({ x: pb.x, y: pb.y, width: pb.width, height: pb.height, backgroundImage: pb.backgroundImage, borderRadius: clampedBR > 0 ? clampedBR : undefined })
+            : "";
+        return `<rect x="${r(pb.x)}" y="${r(pb.y)}" width="${r(pb.width)}" height="${r(pb.height)}"${rxAttr}${fillAttr}${strokeAttr}/>${bgImageMarkup}${renderPseudoBoxPerSideBorders(pb)}`;
     })() : "";
-    const result = renderTextAsPath(pathText, tl, tt, segFontSize, segFontFamily, segFontWeight, segColor, undefined, el.textWidth, xOffsetsRel, el.styles.fontStyle, segAscent, features, el.styles.lang, variationSettings);
+    const result = renderTextAsPath(pathText, tl, tt, segFontSize, segFontFamily, segFontWeight, segColor, undefined, el.textWidth, xOffsetsRel, segFontStyle, segAscent, features, el.styles.lang, variationSettings, _ts.width, _ts.color, _ts.paintOrder);
     if (result != null) {
         const decoColor = (el.styles.textDecorationColor && el.styles.textDecorationColor !== "currentcolor")
             ? el.styles.textDecorationColor : segColor;
@@ -471,10 +722,18 @@ export function renderSingleLineText(opts) {
         // lets text extend past the box edge, so the unconditional clip from
         // an earlier draft over-cut text on `word-wrap: break-word` paragraphs
         // whose last char measured a fraction of a px past `el.x + el.width`.
+        //
+        // DM-783: when the pseudo carries a CSS `transform`, wrap box + glyphs +
+        // decoration + raster overlay together so the rotation/scale pivots
+        // around the captured `transform-origin` and the text rotates WITH the
+        // box (e.g. a `::after { transform: rotate(-15deg) }` rotated pill keeps
+        // its label aligned to the pill, not the host's baseline).
+        const inner = `${singleSegBoxMarkup}${result}${decoMarkup}${rasterOverlay}`;
+        const transformed = (singleSeg?.pseudoBox != null) ? pseudoBoxTransformWrap(singleSeg.pseudoBox, inner) : inner;
         if (opts.overflowClip) {
-            return `<g clip-path="url(#${clipId})">${singleSegBoxMarkup}${result}${decoMarkup}${rasterOverlay}</g>`;
+            return anisotropicCorrectionWrap(el, `<g clip-path="url(#${clipId})">${transformed}</g>`);
         }
-        return `${singleSegBoxMarkup}${result}${decoMarkup}${rasterOverlay}`;
+        return anisotropicCorrectionWrap(el, transformed);
     }
     // DM-490 / DM-500: when the text is entirely Private Use Area codepoints
     // and the path-mode renderer returned null (no glyph emitted because every
@@ -508,6 +767,7 @@ export function renderSingleLineText(opts) {
  * Render multi-segment text (mixed content like: <p>Text <code>x</code> more</p>).
  */
 export function renderMultiSegmentText(opts, segments) {
+    const _ts = textStrokeParams(opts.el.styles);
     const { el, clipId, fillColor } = opts;
     const elFontSize = parseFloat(el.styles.fontSize) || 14;
     const fontFamily = el.styles.fontFamily;
@@ -535,13 +795,33 @@ export function renderMultiSegmentText(opts, segments) {
         // background-color or border-radius (badges / pills / chips) need a
         // <rect> behind the text glyphs. Captured at CAPTURE_SCRIPT time once
         // seg.x/y is in its final viewport-relative position; we just emit it.
+        //
+        // DM-783: per-segment buffer so a pseudo's `transform` wraps box + glyphs
+        // + decoration + raster overlay together (the rotation/scale must pivot
+        // around the pseudo's box, not the host's baseline). Non-pseudo segments
+        // — and pseudos without a transform — flush straight into `parts` with no
+        // wrapping, preserving the prior emit order byte-for-byte.
+        const segParts = [];
         if (seg.pseudoBox != null) {
             const pb = seg.pseudoBox;
             const fillAttr = pb.backgroundColor != null ? ` fill="${esc(pb.backgroundColor)}"` : ` fill="none"`;
-            const rxAttr = pb.borderRadius != null && pb.borderRadius > 0 ? ` rx="${r(pb.borderRadius)}" ry="${r(pb.borderRadius)}"` : "";
+            // Clamp the pseudo's border-radius to half the SHORTER side so a pill
+            // (e.g. `border-radius: 100px` on a 90×40 button) renders as a capsule
+            // — flat top/bottom + fully-rounded ends — instead of an ellipse with
+            // rx and ry capped independently. Mirrors the inset() clip-path fix
+            // (CSS Backgrounds 3 §5.5 uniform-scale rule) for the pseudo-box path.
+            const clampedBR = pb.borderRadius != null && pb.borderRadius > 0
+                ? Math.min(pb.borderRadius, pb.width / 2, pb.height / 2) : 0;
+            const rxAttr = clampedBR > 0 ? ` rx="${r(clampedBR)}" ry="${r(clampedBR)}"` : "";
             const strokeAttr = pb.borderWidth != null && pb.borderWidth > 0 && pb.borderColor != null
                 ? ` stroke="${esc(pb.borderColor)}" stroke-width="${r(pb.borderWidth)}"` : "";
-            parts.push(`<rect x="${r(pb.x)}" y="${r(pb.y)}" width="${r(pb.width)}" height="${r(pb.height)}"${rxAttr}${fillAttr}${strokeAttr}/>`);
+            // DM-782: gradient/url() background-image layers paint between flat
+            // bg-color (bottom) and text glyphs (top). See `RenderTextOpts.
+            // emitPseudoBoxBgLayers` for the closure-injection rationale.
+            const bgImageMarkup = (pb.backgroundImage != null && pb.backgroundImage !== "none" && pb.backgroundImage !== "" && opts.emitPseudoBoxBgLayers != null)
+                ? opts.emitPseudoBoxBgLayers({ x: pb.x, y: pb.y, width: pb.width, height: pb.height, backgroundImage: pb.backgroundImage, borderRadius: clampedBR > 0 ? clampedBR : undefined })
+                : "";
+            segParts.push(`<rect x="${r(pb.x)}" y="${r(pb.y)}" width="${r(pb.width)}" height="${r(pb.height)}"${rxAttr}${fillAttr}${strokeAttr}/>${bgImageMarkup}${renderPseudoBoxPerSideBorders(pb)}`);
         }
         // Per-segment overrides from ::before / ::after pseudos (color, fontSize,
         // fontWeight). Fall back to the element's styles when the segment has no
@@ -566,44 +846,65 @@ export function renderMultiSegmentText(opts, segments) {
         // text anchors glyphs at the exact Chromium-measured positions.
         const xOffsetsRelRaw = seg.xOffsets != null ? seg.xOffsets.map((v) => v - seg.x) : undefined;
         const reordered = applyBidi(suppressGlyphChars(seg.text, seg), xOffsetsRelRaw, dir);
+        // DM-822: anisotropic correction — see `anisotropicCorrectionXOffsets`.
+        const segXOffsets = anisotropicCorrectionXOffsets(el, reordered.xOffsets);
         const segAscent = seg.fontAscent ?? el.fontAscent;
-        const result = renderTextAsPath(reordered.text, seg.x, seg.y, segFontSize, segFontFamily, segFontWeight, segColor, undefined, undefined, reordered.xOffsets, segFontStyle, segAscent, segFeatures, el.styles.lang, elVariationSettings);
+        const result = renderTextAsPath(reordered.text, seg.x, seg.y, segFontSize, segFontFamily, segFontWeight, segColor, undefined, undefined, segXOffsets, segFontStyle, segAscent, segFeatures, el.styles.lang, elVariationSettings, _ts.width, _ts.color, _ts.paintOrder);
         if (result != null) {
-            parts.push(result);
+            segParts.push(result);
         }
-        else if (!isAllPrivateUseArea(seg.text)) {
+        else if (!isAllPrivateUseArea(seg.text) && reordered.text.replace(/[\s​]/g, "") !== "") {
             // Fallback to CSS <text> if path rendering fails. DM-490 / DM-500: when
             // the segment text is entirely Private Use Area (icon-font codepoints
             // we couldn't resolve to a real glyph), suppress the <text> fallback
             // too — Chromium's UA fallback paints the same notdef tofu we already
             // suppressed at the path level, defeating the point.
+            // DM-779: same logic for `::first-letter` drop caps — when every glyph
+            // in the segment was a `suppressGlyph` rasterGlyph target (e.g. the
+            // floated drop-cap letter sitting on its own line), `reordered.text`
+            // collapses to all-ZWSP and the raster overlay paints the visible
+            // glyph; emitting `seg.text` in the `<text>` fallback would paint a
+            // duplicate body-size copy of the letter behind the raster.
             const ff = segFontFamily.replace(/"/g, "'");
             const baseStyle = `font-family:${ff};font-size:${r(segFontSize)}px;font-weight:${segFontWeight};font-kerning:normal;font-optical-sizing:auto;`;
             const sy = seg.y + seg.height / 2;
-            parts.push(`<text x="${r(seg.x)}" y="${r(sy)}" dominant-baseline="central" fill="${segColor}" style="${baseStyle}" clip-path="url(#${clipId})">${esc(seg.text)}</text>`);
+            segParts.push(`<text x="${r(seg.x)}" y="${r(sy)}" dominant-baseline="central" fill="${segColor}" style="${baseStyle}" clip-path="url(#${clipId})">${esc(seg.text)}</text>`);
         }
         const segDecoBaselineY = Math.round(seg.y + (segAscent ?? segFontSize));
         const decoMarkup = renderTextDecoration(decoLine, decoColor, decoStyle, seg.x, segDecoBaselineY, seg.width, segFontSize, segFontFamily, segFontWeight, el.styles.fontStyle, el.styles.textDecorationThickness, el.styles.textUnderlineOffset, reordered.text, el.styles.textDecorationSkipInk, segFeatures);
         if (decoMarkup !== "")
-            parts.push(decoMarkup);
+            segParts.push(decoMarkup);
         // Per-char raster overlays (SK-1090). Emoji inline with path-rendered
         // text get their actual Chrome-painted pixels stamped over the position.
         const rasterOverlay = rasterGlyphOverlays(seg, segFontSize, clipId);
         if (rasterOverlay !== "")
-            parts.push(rasterOverlay);
+            segParts.push(rasterOverlay);
+        // DM-783: when the segment's pseudo carries a CSS transform, wrap the
+        // accumulated box + glyphs + decoration + raster overlay so all four
+        // rotate together around the captured transform-origin. No-op for non-
+        // pseudo segments (`seg.pseudoBox == null`) and for pseudos without a
+        // transform — both flush through unchanged.
+        if (seg.pseudoBox != null && seg.pseudoBox.transform != null && seg.pseudoBox.transform !== "" && seg.pseudoBox.transform !== "none") {
+            parts.push(pseudoBoxTransformWrap(seg.pseudoBox, segParts.join("")));
+        }
+        else {
+            for (const sp of segParts)
+                parts.push(sp);
+        }
     }
     // Wrap the multi-segment output in the element's clip-path only when the
     // element actually overflow-clips (DM-305) — see comment in
     // renderSingleLineText for why an unconditional clip is wrong.
     if (opts.overflowClip) {
-        return `<g clip-path="url(#${clipId})">${parts.join("\n")}</g>`;
+        return anisotropicCorrectionWrap(el, `<g clip-path="url(#${clipId})">${parts.join("\n")}</g>`);
     }
-    return parts.join("\n");
+    return anisotropicCorrectionWrap(el, parts.join("\n"));
 }
 /**
  * Render multi-line text (pre blocks).
  */
 export function renderMultiLineText(opts) {
+    const _ts = textStrokeParams(opts.el.styles);
     const { el, clipId, fillColor } = opts;
     const fontSize = parseFloat(el.styles.fontSize) || 14;
     const fontFamily = el.styles.fontFamily;
@@ -630,11 +931,13 @@ export function renderMultiLineText(opts) {
         for (const seg of el.textSegments) {
             const xOffsetsRelRaw = seg.xOffsets != null ? seg.xOffsets.map((v) => v - seg.x) : undefined;
             const reordered = applyBidi(suppressGlyphChars(seg.text, seg), xOffsetsRelRaw, dir);
+            // DM-822: anisotropic correction — see `anisotropicCorrectionXOffsets`.
+            const segXOffsets = anisotropicCorrectionXOffsets(el, reordered.xOffsets);
             const segFontSize = seg.fontSize ?? fontSize;
             const segFontWeight = seg.fontWeight ?? fontWeight;
             const segColor = seg.color ?? fillColor;
             const segAscent = seg.fontAscent ?? el.fontAscent;
-            const result = renderTextAsPath(reordered.text, seg.x, seg.y, segFontSize, fontFamily, segFontWeight, segColor, undefined, undefined, reordered.xOffsets, el.styles.fontStyle, segAscent, ffsFeatures, el.styles.lang, fvsAxes);
+            const result = renderTextAsPath(reordered.text, seg.x, seg.y, segFontSize, fontFamily, segFontWeight, segColor, undefined, undefined, segXOffsets, el.styles.fontStyle, segAscent, ffsFeatures, el.styles.lang, fvsAxes, _ts.width, _ts.color, _ts.paintOrder);
             if (result != null)
                 parts.push(`  ${result}`);
         }
@@ -646,18 +949,19 @@ export function renderMultiLineText(opts) {
             if (line === "")
                 continue;
             const lineY = startY + li * lineHeight;
-            const result = renderTextAsPath(line, startX, lineY, fontSize, fontFamily, fontWeight, fillColor, undefined, undefined, undefined, el.styles.fontStyle, el.fontAscent, ffsFeatures, el.styles.lang, fvsAxes);
+            const result = renderTextAsPath(line, startX, lineY, fontSize, fontFamily, fontWeight, fillColor, undefined, undefined, undefined, el.styles.fontStyle, el.fontAscent, ffsFeatures, el.styles.lang, fvsAxes, _ts.width, _ts.color, _ts.paintOrder);
             if (result != null)
                 parts.push(`  ${result}`);
         }
     }
     parts.push("</g>");
-    return parts.join("\n");
+    return anisotropicCorrectionWrap(el, parts.join("\n"));
 }
 /**
  * Render input/textarea text.
  */
 export function renderInputText(opts) {
+    const _ts = textStrokeParams(opts.el.styles);
     const { el, clipId, fillColor } = opts;
     // Textarea content was rasterized via page.screenshot (SK-1108) — stamp the
     // PNG at the content rect and skip the path pipeline. This bypasses our
@@ -688,17 +992,17 @@ export function renderInputText(opts) {
         ? el.inputXOffsets.map((v) => v - textX) : undefined;
     const inputFeatures = parseFontFeatureSettings(el.styles.fontFeatureSettings);
     const inputAxes = parseFontVariationSettings(el.styles.fontVariationSettings);
-    const result = renderTextAsPath(el.text, textX, tt, fontSize, fontFamily, textFontWeight, textColor, undefined, undefined, xOffsetsRel, textFontStyle, el.fontAscent, inputFeatures, el.styles.lang, inputAxes);
+    const result = renderTextAsPath(el.text, textX, tt, fontSize, fontFamily, textFontWeight, textColor, undefined, undefined, xOffsetsRel, textFontStyle, el.fontAscent, inputFeatures, el.styles.lang, inputAxes, _ts.width, _ts.color, _ts.paintOrder);
     // Clip the path-rendered text to the input's content rect so values that
     // overflow the visible width (common on readonly inputs with long text or
     // any input narrower than its value) are truncated like Chrome paints
     // them, not extending past the right border. DM-245.
     if (result != null)
-        return `<g clip-path="url(#${clipId})">${result}</g>`;
+        return anisotropicCorrectionWrap(el, `<g clip-path="url(#${clipId})">${result}</g>`);
     // Fallback to CSS <text> if path rendering fails
     const textY = (el.textTop != null && el.textHeight != null && el.textHeight > 0)
         ? el.textTop + el.textHeight / 2 : el.y + el.height / 2;
     const ff = fontFamily.replace(/"/g, "'");
     const baseStyle = `font-family:${ff};font-size:${r(fontSize)}px;font-weight:${fontWeight};font-kerning:normal;font-optical-sizing:auto;`;
-    return `<text x="${r(textX)}" y="${r(textY)}" dominant-baseline="central" fill="${textColor}" style="${baseStyle}" clip-path="url(#${clipId})">${esc(el.text)}</text>`;
+    return anisotropicCorrectionWrap(el, `<text x="${r(textX)}" y="${r(textY)}" dominant-baseline="central" fill="${textColor}" style="${baseStyle}" clip-path="url(#${clipId})">${esc(el.text)}</text>`);
 }

package/dist/scroll/composer.d.ts

@@ -21,6 +21,7 @@
  * shrinking output size on mostly-static-content pages.
  */
 import type { ScrollSegmentCapture } from "./executor.js";
+import { type RenderTextMode } from "../render/text-to-path.js";
 export interface ScrollComposerOptions {
     /** Visible viewport width (output SVG width). */
     viewportW: number;
@@ -37,6 +38,31 @@ export interface ScrollComposerOptions {
      * to source-resolution data URIs. Default 2 (matches `elementTreeToSvg`).
      */
     hiDPIFactor?: number;
+    /**
+     * DM-648: number of consecutive segments to group inside one
+     * `<g style="will-change: transform">` chunk wrapper. Each chunk gets its
+     * own GPU backing store so tall composites don't blow Chromium's
+     * per-layer raster budget (the 1280 × 6015 px apple-desktop-scroll capture
+     * at hi-DPI 2 was ~30 MB of raster on a single layer). Default `2` —
+     * meaning every two segments share one layer; a 16-segment scroll yields
+     * 8 layers. `1` puts each segment on its own layer (more layers, smaller
+     * each); higher values trade layer count for layer size. Must be ≥ 1.
+     * See `docs/36-scroll-composite-layer-chunking.md`.
+     */
+    chunkSize?: number;
+    /**
+     * DM-652: text rendering mode. Default `"embedded-font"` emits `<text>`
+     * elements with a single `@font-face` per used webfont — much faster
+     * in WebKit (≈1.84× perf gain + 4.5× smaller file on text-heavy
+     * fixtures per DM-651) and visually equivalent in Chromium. `"paths"`
+     * is the legacy Chromium-faithful mode that emits `<use href="#gN">`
+     * references to glyph path defs, useful when the consumer needs
+     * per-pixel parity with the Chromium capture (e.g. visual-regression
+     * diffing against the live page). System-font runs and bidi /
+     * fallback-chain runs always stay in `"paths"` mode regardless of
+     * this flag (MVP scope).
+     */
+    renderText?: RenderTextMode;
 }
 /**
  * Compose a sequence of segment-captures into one animated SVG. The output