domotion-svg 0.22.2 → 0.23.0

package/README.md

@@ -79,6 +79,12 @@ cat demo.html | domotion capture - -o demo.svg
 domotion capture https://example.com --scroll "down:bottom/8s" -o scroll.svg
 ```
 
+Navigation waits for the page's `load` event, then Domotion applies its normal
+font/image/paint readiness checks. Pages with a finite request chain can opt
+into Playwright's stricter network-idle heuristic with `--network-idle`; it is
+off by default because analytics, long polling, and streaming requests may
+never become idle.
+
 Same-origin `<iframe>` content is recursed into the capture as native, selectable SVG rather than flattened to a screenshot; opt into cross-origin frames you trust with `--cross-origin-frames "<hosts>"`.
 
 For a multi-frame animated SVG, write a small JSON config and run `domotion animate`:

package/dist/capture/emoji.js

@@ -392,6 +392,22 @@ export async function rasterizeBitmapGlyphs(page, tree, viewport) {
     const candidates = [];
     const sbixAligns = [];
     forEachElement(tree, (el) => {
+        if (el.transformSubtreeRaster != null) {
+            const tr = el.transformSubtreeRaster;
+            candidates.push({
+                rect: { x: tr.x, y: tr.y, width: tr.width, height: tr.height },
+                key: `transform-subtree|${tr.x}|${tr.y}|${tr.width}x${tr.height}`,
+                setDataUri: (uri) => { tr.dataUri = uri; },
+            });
+        }
+        if (el.nativeControlRaster != null) {
+            const nr = el.nativeControlRaster;
+            candidates.push({
+                rect: { x: nr.x, y: nr.y, width: nr.width, height: nr.height },
+                key: `native-control|${el.tag}|${el.styles.inputType ?? ''}|${nr.x}|${nr.y}|${nr.width}x${nr.height}`,
+                setDataUri: (uri) => { nr.dataUri = uri; },
+            });
+        }
         // Element-level raster (SK-1108): textarea content region, too
         // involved to word-wrap in the path pipeline. Key on text+size+color so
         // identical textareas dedupe to one screenshot.

package/dist/capture/index.d.ts

@@ -139,7 +139,9 @@ export declare class DemoRecorder {
     constructor(baseUrl: string, opts: CaptureOptions);
     init(opts: CaptureOptions): Promise<void>;
     /** Navigate to a URL and capture the visible DOM as SVG. */
-    captureUrl(path: string, waitMs?: number, idPrefix?: string): Promise<string>;
+    captureUrl(path: string, waitMs?: number, idPrefix?: string, opts?: {
+        networkIdle?: boolean;
+    }): Promise<string>;
     /**
      * Shared post-capture pipeline (DM-1434): self-contained remote-image
      * embedding + optional resize + conic-gradient rasterization, then reset the

package/dist/capture/index.js

@@ -191,10 +191,10 @@ export class DemoRecorder {
         this.page.setDefaultNavigationTimeout(90_000);
     }
     /** Navigate to a URL and capture the visible DOM as SVG. */
-    async captureUrl(path, waitMs = 800, idPrefix = "") {
+    async captureUrl(path, waitMs = 800, idPrefix = "", opts) {
         if (this.page == null)
             throw new Error("Call init() first");
-        await this.page.goto(`${this.baseUrl}${path}`, { waitUntil: "networkidle" });
+        await this.page.goto(`${this.baseUrl}${path}`, { waitUntil: opts?.networkIdle === true ? "networkidle" : "load" });
         await this.page.waitForTimeout(waitMs);
         return this.captureCurrent(idPrefix);
     }

package/dist/capture/script/font-feature-values.d.ts

@@ -0,0 +1,2 @@
+/** Collect Blink's CSSOM view of author @font-feature-values rules. */
+export declare function collectFontFeatureValues(doc: any): {};

package/dist/capture/script/font-feature-values.js

@@ -0,0 +1,62 @@
+// @ts-nocheck
+/** Collect Blink's CSSOM view of author @font-feature-values rules. */
+export function collectFontFeatureValues(doc) {
+    const families = {};
+    const categories = ["annotation", "ornaments", "stylistic", "swash", "characterVariant", "styleset"];
+    function familyNames(css) {
+        const out = [];
+        let token = "", quote = "";
+        for (const ch of css) {
+            if (quote) {
+                if (ch === quote)
+                    quote = "";
+                else
+                    token += ch;
+                continue;
+            }
+            if (ch === "\"" || ch === "'") {
+                quote = ch;
+                continue;
+            }
+            if (ch === ",") {
+                if (token.trim())
+                    out.push(token.trim().toLowerCase());
+                token = "";
+            }
+            else
+                token += ch;
+        }
+        if (token.trim())
+            out.push(token.trim().toLowerCase());
+        return out;
+    }
+    function visit(rules) {
+        if (!rules)
+            return;
+        for (const rule of rules) {
+            if (typeof rule.fontFamily === "string" && rule.stylistic != null) {
+                for (const family of familyNames(rule.fontFamily)) {
+                    const table = families[family] || (families[family] = {});
+                    for (const category of categories) {
+                        const entries = Array.from(rule[category].entries());
+                        if (!entries.length)
+                            continue;
+                        const aliases = table[category] || (table[category] = {});
+                        for (const [name, values] of entries)
+                            aliases[name] = Array.from(values);
+                    }
+                }
+            }
+            else if (rule.cssRules) {
+                visit(rule.cssRules);
+            }
+        }
+    }
+    for (const sheet of doc.styleSheets) {
+        try {
+            visit(sheet.cssRules);
+        }
+        catch { /* cross-origin sheet */ }
+    }
+    return families;
+}

package/dist/capture/script/index.js

@@ -22,6 +22,7 @@ import { createDottedCircleDetect } from "./dotted-circle-detect.js";
 import { createFontMetrics } from "./font-metrics.js";
 import { createPlaceholderShown } from "./placeholder-shown.js";
 import { createFontFamilyDefault } from "./font-family-default.js";
+import { collectFontFeatureValues } from "./font-feature-values.js";
 import { createPseudoRules } from "./pseudo-rules.js";
 import { createWarnings } from "./warnings.js";
 import { createCounterStyleResolver } from "./walker/counter-style-resolver.js";
@@ -58,6 +59,15 @@ const captureDocumentTree = (args) => {
     const { measureFontMetrics: _measureFontMetrics, substituteAliasedFamilies: _substituteAliasedFamilies } = createFontMetrics();
     const { resolvePlaceholderShownBg: _resolvePlaceholderShownBg } = createPlaceholderShown();
     const { familyIsUADefault: _familyIsUADefault } = createFontFamilyDefault();
+    const _fontFeatureValuesByDocument = new WeakMap();
+    const _fontFeatureValuesFor = (doc) => {
+        let tables = _fontFeatureValuesByDocument.get(doc);
+        if (tables == null) {
+            tables = collectFontFeatureValues(doc);
+            _fontFeatureValuesByDocument.set(doc, tables);
+        }
+        return tables;
+    };
     const { resolvePseudo: _resolvePseudo, resolveCornerRadius: _resolveCornerRadius } = createPseudoRules();
     const { warn, shortSelector, warnings: _warnings } = createWarnings();
     // DM-770: counter-style map is populated by the pre-walk below (which
@@ -206,7 +216,7 @@ const captureDocumentTree = (args) => {
         // them so the fidelity gaps are self-documenting.
         const sel = shortSelector(el);
         if (cs.transform && cs.transform.startsWith('matrix3d')) {
-            warn(sel, 'transform-3d', 'matrix3d/translate3d/rotate3d/perspective downgraded to 2D submatrix; z component + perspective dropped (SK-1135)');
+            warn(sel, 'transform-3d', 'non-affine 3D rendering context captured from Chromium as a bitmap snapshot');
         }
         if (cs.backdropFilter && cs.backdropFilter !== 'none') {
             warn(sel, 'backdrop-filter', 'approximated via a frosted-glass background fallback for the transparent-backdrop case (doc 19); no true backdrop blur');
@@ -612,6 +622,11 @@ const captureDocumentTree = (args) => {
                 fontStretch: cs.fontStretch,
                 fontVariationSettings: cs.fontVariationSettings,
                 fontFeatureSettings: cs.fontFeatureSettings,
+                fontVariantAlternates: cs.fontVariantAlternates,
+                // The alias table is document-global but only alternate-bearing nodes
+                // can consume it; omit it from the common element shape to avoid
+                // repeating author rule data throughout the serialized tree.
+                fontFeatureValues: cs.fontVariantAlternates && cs.fontVariantAlternates !== 'normal' ? _fontFeatureValuesFor(el.ownerDocument) : undefined,
                 // CSS font-variant-caps. 'small-caps' / 'all-small-caps' route to
                 // the OpenType smcp feature; renderer applies synthesized small-caps
                 // when the active font lacks smcp (Helvetica, Times, etc.). DM-361.
@@ -711,6 +726,50 @@ const captureDocumentTree = (args) => {
             // SK-1108 / SK-1128: textarea soft-wrap + writing-mode != horizontal-tb
             // content-box raster rect — see walker/text-segments.ts.
             elementRaster: computeElementRaster(el, cs, tag, rect, vp),
+            // DM-2150: SVG transforms are affine and cannot reproduce CSS
+            // perspective or preserve-3d flattening. Capture the top-level 3D
+            // rendering context as Chromium composited it. Descendant matrix3d
+            // nodes remain part of this one bitmap rather than being stamped
+            // independently. Include overflowing faces by unioning live descendant
+            // client rects before the walker freezes any child transforms.
+            transformSubtreeRaster: (function () {
+                const is3dRoot = cs.transformStyle === 'preserve-3d'
+                    || (cs.perspective != null && cs.perspective !== '' && cs.perspective !== 'none');
+                if (!is3dRoot)
+                    return undefined;
+                let p = el.parentElement;
+                while (p != null) {
+                    const pcs = getComputedStyle(p);
+                    if (pcs.transformStyle === 'preserve-3d'
+                        || (pcs.perspective != null && pcs.perspective !== '' && pcs.perspective !== 'none'))
+                        return undefined;
+                    p = p.parentElement;
+                }
+                let left = rect.left, top = rect.top, right = rect.right, bottom = rect.bottom;
+                const descendants = el.getElementsByTagName('*');
+                for (let i = 0; i < descendants.length; i++) {
+                    const dr = descendants[i].getBoundingClientRect();
+                    if (dr.width <= 0 || dr.height <= 0)
+                        continue;
+                    left = Math.min(left, dr.left);
+                    top = Math.min(top, dr.top);
+                    right = Math.max(right, dr.right);
+                    bottom = Math.max(bottom, dr.bottom);
+                }
+                return { x: left - vp.x, y: top - vp.y, width: right - left, height: bottom - top };
+            })(),
+            // DM-2149: `appearance:auto` controls are painted by Blink's platform
+            // LayoutTheme (including native shadow-DOM parts), so a single hardcoded
+            // SVG geometry/palette cannot match macOS, Windows, and Linux. Preserve
+            // author-owned `appearance:none` controls as vectors; snapshot only the
+            // native-themed host rectangle from the same Chromium doing capture.
+            nativeControlRaster: (function () {
+                const nativeTag = tag === 'input' || tag === 'select' || tag === 'textarea'
+                    || tag === 'button' || tag === 'progress' || tag === 'meter';
+                if (!nativeTag || cs.appearance === 'none' || rect.width <= 0 || rect.height <= 0)
+                    return undefined;
+                return { x: rect.left - vp.x, y: rect.top - vp.y, width: rect.width, height: rect.height };
+            })(),
             // DM-680: per-axis cumulative ancestor scale, exposed ONLY when
             // anisotropic (sx ≠ sy within a small epsilon). The geometric mean is
             // already folded into fontSize / fontAscent / fontDescent above, so
@@ -1516,23 +1575,72 @@ const captureDocumentTree = (args) => {
         }
         return out;
     }
-    // Active counter scope stack: each entry { name, value, owner }.
-    const _activeScopes = [];
+    // Blink keeps one stack per counter name. A counter introduced on an
+    // element remains visible to later siblings because its originating
+    // element's parent is still an ancestor of those siblings.
+    const _counterStacks = new Map();
+    const _isAncestorOrSelf = (ancestor, node) => ancestor === node || ancestor.contains(node);
+    function _stack(name) {
+        let stack = _counterStacks.get(name);
+        if (stack == null) {
+            stack = [];
+            _counterStacks.set(name, stack);
+        }
+        return stack;
+    }
+    function _removeStale(name, el) {
+        const stack = _stack(name);
+        while (stack.length > 0) {
+            const parent = stack[stack.length - 1].scopeParent;
+            if (parent == null || _isAncestorOrSelf(parent, el))
+                break;
+            stack.pop();
+        }
+    }
     function _findInnermost(name) {
-        for (let i = _activeScopes.length - 1; i >= 0; i--) {
-            if (_activeScopes[i].name === name)
-                return _activeScopes[i];
+        const stack = _stack(name);
+        return stack.length ? stack[stack.length - 1] : null;
+    }
+    function _snapshotCounters() {
+        const result = [];
+        for (const [name, stack] of _counterStacks)
+            for (const entry of stack)
+                result.push({ name, value: entry.value });
+        return result;
+    }
+    function _applyCounterStyle(owner, scopeParent, style) {
+        const touched = new Set();
+        const resets = _parseCounterDecl(style.counterReset, 0);
+        const increments = _parseCounterDecl(style.counterIncrement, 1);
+        const sets = _parseCounterDecl(style.counterSet, 0);
+        for (const item of [...resets, ...increments, ...sets])
+            touched.add(item.name);
+        for (const name of touched)
+            _removeStale(name, owner);
+        for (const { name, value } of resets) {
+            const stack = _stack(name);
+            if (stack.length && stack[stack.length - 1].scopeParent === scopeParent)
+                stack.pop();
+            stack.push({ name, value, owner, scopeParent });
         }
-        return null;
+        for (const { name, value } of increments) {
+            const current = _findInnermost(name);
+            if (current)
+                current.value += value;
+            else
+                _stack(name).push({ name, value, owner, scopeParent });
+        }
+        for (const { name, value } of sets) {
+            const current = _findInnermost(name);
+            if (current)
+                current.value = value;
+            else
+                _stack(name).push({ name, value, owner, scopeParent });
+        }
+        return touched;
     }
     function _counterPreWalk(el) {
         const cs = window.getComputedStyle(el);
-        const owned = [];
-        _parseCounterDecl(cs.counterReset, 0).forEach(({ name, value }) => {
-            const scope = { name, value, owner: el };
-            _activeScopes.push(scope);
-            owned.push(scope);
-        });
         // DM-705 / DM-706: CSS Lists 3 §2.3 ("Properties on a single element are
         // processed in the order reset, increment, set") — increment runs BEFORE
         // set. Our previous order (reset, set, increment) made
@@ -1540,36 +1648,28 @@ const captureDocumentTree = (args) => {
         // section` paint as "100." instead of Chrome's "99." for the
         // `.restart` h2 in `24-counters.html`. Same off-by-one (always +1) in
         // `24-deep-counter-scope.html`.
-        _parseCounterDecl(cs.counterIncrement, 1).forEach(({ name, value }) => {
-            const s = _findInnermost(name);
-            if (s)
-                s.value += value;
-            else {
-                const ns = { name, value, owner: el };
-                _activeScopes.push(ns);
-                owned.push(ns);
-            }
-        });
-        _parseCounterDecl(cs.counterSet, 0).forEach(({ name, value }) => {
-            const s = _findInnermost(name);
-            if (s)
-                s.value = value;
-            else {
-                const ns = { name, value, owner: el };
-                _activeScopes.push(ns);
-                owned.push(ns);
-            }
-        });
-        // Snapshot the active scopes (shallow copy of name+value pairs).
-        _counterSnapshot.set(el, _activeScopes.map((s) => ({ name: s.name, value: s.value })));
+        const touched = _applyCounterStyle(el, el.parentElement, cs);
+        const beforeStyle = window.getComputedStyle(el, '::before');
+        for (const name of _applyCounterStyle(el, el, beforeStyle))
+            touched.add(name);
+        const snapshots = { element: _snapshotCounters(), '::before': _snapshotCounters(), '::after': null };
         for (const child of el.children)
             _counterPreWalk(child);
-        // Pop scopes owned by this element on exit (counter scope ends with the
-        // owner element's subtree).
-        while (_activeScopes.length > 0 && owned.length > 0
-            && _activeScopes[_activeScopes.length - 1] === owned[owned.length - 1]) {
-            _activeScopes.pop();
-            owned.pop();
+        const afterStyle = window.getComputedStyle(el, '::after');
+        for (const name of _applyCounterStyle(el, el, afterStyle))
+            touched.add(name);
+        snapshots['::after'] = _snapshotCounters();
+        _counterSnapshot.set(el, snapshots);
+        // Match CountersAttachmentContext::RemoveCounterIfAncestorExists: a
+        // descendant-origin counter cannot remain atop an ancestor counter after
+        // leaving its originating element.
+        for (const name of touched) {
+            const stack = _stack(name);
+            if (stack.length < 2 || stack[stack.length - 1].owner !== el)
+                continue;
+            const previous = stack[stack.length - 2].owner;
+            if (previous instanceof Element && previous.contains(el))
+                stack.pop();
         }
     }
     _counterPreWalk(root);

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

@@ -261,7 +261,7 @@ const buildPseudoContentHandler = ({ vp, normColor, measureFontMetrics, textNeed
     // open-quote / close-quote / no-*-quote keywords (DM-602). Closes over the
     // handler's pickQuoteChar / isCustomCounterStyle / resolveCounterValue.
     // Extracted from capturePseudoContent (DM-1088).
-    const parsePseudoContent = (content, el, counterSnapshot) => {
+    const parsePseudoContent = (content, el, counterSnapshot, pseudo) => {
         let text = '';
         let imageUrl = '';
         let i = 0;
@@ -328,7 +328,8 @@ const buildPseudoContentHandler = ({ vp, normColor, measureFontMetrics, textNeed
                     const out = resolveCounterValue(styleArg, v);
                     return out != null ? out : String(v);
                 };
-                const snapshot = counterSnapshot.get(el) || [];
+                const captured = counterSnapshot.get(el);
+                const snapshot = captured?.[pseudo] ?? captured?.element ?? captured ?? [];
                 const matches = snapshot.filter((s) => s.name === cname).map((s) => format(s.value));
                 if (isCounters) {
                     text += matches.length > 0 ? matches.join(sep) : format(0);
@@ -556,7 +557,7 @@ const buildPseudoContentHandler = ({ vp, normColor, measureFontMetrics, textNeed
             const opacityNum = parseFloat(pcs.opacity);
             if (Number.isFinite(opacityNum) && opacityNum === 0)
                 continue;
-            const { text, imageUrl } = parsePseudoContent(content, el, counterSnapshot);
+            const { text, imageUrl } = parsePseudoContent(content, el, counterSnapshot, pseudo);
             if (text === '' && imageUrl === '') {
                 const box = captureEmptyContentBox(el, cs, pseudo, pcs, rect);
                 if (box != null)

package/dist/capture/script/walker/text-segments.d.ts

@@ -1,5 +1,12 @@
 export declare const computeElementRaster: (el: any, cs: any, tag: any, rect: any, vp: any) => undefined;
 export declare const capitalizeCss: (s: any) => string;
+/** Preserve the source span that produced every rendered text-transform chunk. */
+export declare const transformTextWithSourceSpans: (source: any, transform: any, lang: any) => {
+    sourceStart: number;
+    sourceEnd: number;
+    sourceText: string;
+    rendered: string;
+}[];
 export declare const isTamilJoinerBrokenPrefix: (cp: any, nextCp: any, clusterHasBase: any) => boolean;
 export declare const isMixedVerticalUpright: (cp: any) => boolean;
 export declare const resolveCharOrientation: (ch: any, textOrientation: any) => "upright" | "rotated";
@@ -94,6 +101,7 @@ export declare const createTextSegmentsHandler: (dependencies: any) => {
             } | undefined;
         } | {
             text: any;
+            sourceText: any;
             x: number;
             y: number;
             width: number;

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

@@ -174,6 +174,41 @@ export const capitalizeCss = (s) => {
     }
     return out;
 };
+/** Preserve the source span that produced every rendered text-transform chunk. */
+export const transformTextWithSourceSpans = (source, transform, lang) => {
+    const out = [];
+    let atWordStart = true;
+    for (let i = 0; i < source.length;) {
+        const cp = source.codePointAt(i);
+        const sourceText = String.fromCodePoint(cp);
+        let rendered = sourceText;
+        if (transform === 'uppercase')
+            rendered = lang ? sourceText.toLocaleUpperCase(lang) : sourceText.toUpperCase();
+        else if (transform === 'lowercase')
+            rendered = lang ? sourceText.toLocaleLowerCase(lang) : sourceText.toLowerCase();
+        else if (transform === 'capitalize' && atWordStart && _RE_LETTER.test(sourceText)) {
+            rendered = TITLECASE_DIGRAPHS[sourceText] || (lang ? sourceText.toLocaleUpperCase(lang) : sourceText.toUpperCase());
+        }
+        out.push({ sourceStart: i, sourceEnd: i + sourceText.length, sourceText, rendered });
+        atWordStart = !_RE_WORD_CHAR.test(sourceText) && _MIDWORD_CONNECTORS.indexOf(sourceText) < 0;
+        i += sourceText.length;
+    }
+    // Whole-string casing carries contextual rules such as Greek final sigma.
+    // When it preserves the per-span output lengths, substitute its characters
+    // without changing the source boundary map.
+    const joined = out.map((part) => part.rendered).join('');
+    const whole = transform === 'uppercase' ? (lang ? source.toLocaleUpperCase(lang) : source.toUpperCase())
+        : transform === 'lowercase' ? (lang ? source.toLocaleLowerCase(lang) : source.toLowerCase())
+            : transform === 'capitalize' ? capitalizeCss(source) : source;
+    if (whole.length === joined.length && whole !== joined) {
+        let offset = 0;
+        for (const part of out) {
+            part.rendered = whole.slice(offset, offset + part.rendered.length);
+            offset += part.rendered.length;
+        }
+    }
+    return out;
+};
 // HarfBuzz's Indic Ragel machine (`hb-ot-shaper-indic-machine.rl`, rev
 // 4de187d) accepts `z* M` as a matra group inside a broken cluster. The one
 // live gap established against Chromium is Tamil ZWJ + VOWEL SIGN E: the ZWJ
@@ -256,34 +291,24 @@ const buildTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster, normCol
         for (const node of el.childNodes) {
             if (node.nodeType !== Node.TEXT_NODE)
                 continue;
-            let raw = node.textContent || '';
+            const sourceRaw = node.textContent || '';
             const tt = cs.textTransform;
-            if (tt === 'uppercase')
-                raw = raw.toUpperCase();
-            else if (tt === 'lowercase')
-                raw = raw.toLowerCase();
-            else if (tt === 'capitalize')
-                raw = capitalizeCss(raw);
+            const mapped = transformTextWithSourceSpans(sourceRaw, tt, cs.lang || el.lang || '');
+            const raw = mapped.map((part) => part.rendered).join('');
             if (!raw.trim())
                 continue;
             text += raw.trim() + ' ';
-            for (let i = 0; i < raw.length; i++) {
-                const code = raw.charCodeAt(i);
-                const isHighSurrogate = code >= 0xD800 && code <= 0xDBFF && i + 1 < raw.length;
-                const step = isHighSurrogate ? 2 : 1;
+            for (const part of mapped) {
                 const r = document.createRange();
-                r.setStart(node, i);
-                r.setEnd(node, i + step);
+                r.setStart(node, part.sourceStart);
+                r.setEnd(node, part.sourceEnd);
                 const cr = r.getBoundingClientRect();
-                const ch = raw.slice(i, i + step);
-                const isWs = step === 1 && /\s/.test(raw[i]);
+                const ch = part.rendered;
+                const isWs = /^\s+$/.test(part.sourceText);
                 // Skip whitespace with zero bbox (collapsed whitespace).
-                if (cr.height === 0 && (cr.width === 0 || isWs)) {
-                    i += step - 1;
+                if (cr.height === 0 && (cr.width === 0 || isWs))
                     continue;
-                }
                 allChars.push({ ch, x: cr.left, y: cr.top, w: cr.width, h: cr.height, naturalW: measureNaturalWidth(ch) });
-                i += step - 1;
             }
         }
         if (allChars.length === 0) {
@@ -749,14 +774,10 @@ const buildTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster, normCol
             if (node.nodeType !== Node.TEXT_NODE)
                 continue;
             // text-transform — see header comment.
-            let raw = node.textContent || '';
+            const sourceRaw = node.textContent || '';
             const tt = cs.textTransform;
-            if (tt === 'uppercase')
-                raw = raw.toUpperCase();
-            else if (tt === 'lowercase')
-                raw = raw.toLowerCase();
-            else if (tt === 'capitalize')
-                raw = capitalizeCss(raw);
+            const mapped = transformTextWithSourceSpans(sourceRaw, tt, cs.lang || el.lang || '');
+            const raw = mapped.map((part) => part.rendered).join('');
             if (!raw.trim())
                 continue;
             // DM-747: when `<mi>` math-italic substitution applies, the element's
@@ -769,20 +790,16 @@ const buildTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster, normCol
             // Group characters by their laid-out line (matching rect.top).
             const lines = [];
             let cur = null;
-            for (let i = 0; i < raw.length; i++) {
-                const code = raw.charCodeAt(i);
-                const isHighSurrogate = code >= 0xD800 && code <= 0xDBFF && i + 1 < raw.length;
-                const step = isHighSurrogate ? 2 : 1;
+            for (let sourcePartIndex = 0; sourcePartIndex < mapped.length; sourcePartIndex++) {
+                const part = mapped[sourcePartIndex];
                 const r = document.createRange();
-                r.setStart(node, i);
-                r.setEnd(node, i + step);
+                r.setStart(node, part.sourceStart);
+                r.setEnd(node, part.sourceEnd);
                 const cr = r.getBoundingClientRect();
-                const isWs = step === 1 && /\s/.test(raw[i]);
-                if (cr.width === 0 && (cr.height === 0 || isWs)) {
-                    i += step - 1;
+                const isWs = /^\s+$/.test(part.sourceText);
+                if (cr.width === 0 && (cr.height === 0 || isWs))
                     continue;
-                }
-                let ch = raw.slice(i, i + step);
+                let ch = part.rendered;
                 // DM-747: see `mathItalicizeMi` block above — apply the mathvariant=
                 // italic substitution AFTER the Range-based measurement so the Range
                 // offsets stay valid against the original textContent (`a`, 1 code
@@ -811,11 +828,11 @@ const buildTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster, normCol
                     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 peekPart = mapped[sourcePartIndex + 1];
+                        if (peekPart != null) {
                             const pr = document.createRange();
-                            pr.setStart(node, peekI);
-                            pr.setEnd(node, peekI + 1);
+                            pr.setStart(node, peekPart.sourceStart);
+                            pr.setEnd(node, peekPart.sourceEnd);
                             const pcr = pr.getBoundingClientRect();
                             if (pcr.height > 0 && pcr.height < refH * 1.5) {
                                 topForGroup = pcr.top;
@@ -837,7 +854,8 @@ const buildTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster, normCol
                         }
                     }
                 }
-                const charRec = { ch, left: leftForGroup, top: topForGroup, right: rightForGroup, bottom: bottomForGroup };
+                const charRec = { ch, sourceText: part.sourceText, left: leftForGroup, top: topForGroup, right: rightForGroup, bottom: bottomForGroup,
+                    transformedLengthChanged: ch.length !== part.sourceText.length };
                 if (cur == null || Math.abs(topForGroup - cur.top) > 1) {
                     if (cur != null)
                         lines.push(cur);
@@ -849,7 +867,6 @@ const buildTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster, normCol
                     cur.right = Math.max(cur.right, rightForGroup);
                     cur.bottom = Math.max(cur.bottom, bottomForGroup);
                 }
-                i += step - 1;
             }
             if (cur != null)
                 lines.push(cur);
@@ -899,12 +916,15 @@ const buildTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster, normCol
             // Build text + xOffsets per line, preserving logical order.
             for (const ln of lines) {
                 ln.text = ln.chars.map((c) => c.ch).join('');
-                const xo = [];
-                for (const c of ln.chars) {
-                    for (let k = 0; k < c.ch.length; k++)
-                        xo.push(c.left);
+                ln.sourceText = ln.chars.map((c) => c.sourceText).join('');
+                if (!ln.chars.some((c) => c.transformedLengthChanged)) {
+                    const xo = [];
+                    for (const c of ln.chars) {
+                        for (let k = 0; k < c.ch.length; k++)
+                            xo.push(c.left);
+                    }
+                    ln.xOffsets = xo;
                 }
-                ln.xOffsets = xo;
             }
             for (const line of lines) {
                 const visualText = line.text.replace(/[\t\n\r]/g, ' ');
@@ -1024,11 +1044,16 @@ const buildTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster, normCol
                 }
                 textSegments.push({
                     text: visualText,
+                    sourceText: line.sourceText,
                     x: line.left - vp.x,
                     y: line.top - vp.y,
                     width: line.right - line.left,
                     height: line.bottom - line.top,
-                    xOffsets: line.xOffsets.map((v) => v - vp.x),
+                    // A length-changing transform (e.g. ß → SS) has one DOM Range for
+                    // multiple rendered codepoints, so CSSOM exposes no internal glyph
+                    // anchors. Let HarfBuzz shape that rendered run normally instead of
+                    // inventing duplicate offsets from the source span.
+                    xOffsets: line.xOffsets?.map((v) => v - vp.x),
                     rasterGlyphs: rasterGlyphs.length > 0 ? rasterGlyphs : undefined,
                     dottedCircleMarks: dottedCircleMarks.length > 0 ? dottedCircleMarks : (probeConsulted ? [] : undefined),
                 });
@@ -1064,6 +1089,12 @@ const buildTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster, normCol
         if (textSegments.length > flLineTargetIdx) {
             const flLineStyle = window.getComputedStyle(el, '::first-line');
             const firstSeg = textSegments[flLineTargetIdx];
+            if (flLineStyle.textTransform !== cs.textTransform && firstSeg.sourceText != null) {
+                const firstLineMap = transformTextWithSourceSpans(firstSeg.sourceText, flLineStyle.textTransform, flLineStyle.lang || cs.lang || el.lang || '');
+                firstSeg.text = firstLineMap.map((part) => part.rendered).join('').replace(/[\t\n\r]/g, ' ');
+                if (firstLineMap.some((part) => part.rendered.length !== part.sourceText.length))
+                    firstSeg.xOffsets = undefined;
+            }
             if (flLineStyle.fontVariant !== '' && flLineStyle.fontVariant !== cs.fontVariant) {
                 firstSeg.fontVariant = flLineStyle.fontVariant;
             }