domotion-svg 0.6.0 → 0.8.0

package/dist/capture/emoji.js

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

package/dist/capture/script/index.js

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

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

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

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

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

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

@@ -159,8 +159,19 @@ export const createPseudoContentHandler = ({ vp, normColor, measureFontMetrics,
         probe.style.marginRight = pcs.marginRight;
         probe.style.marginBottom = pcs.marginBottom;
         probe.style.marginLeft = pcs.marginLeft;
-        probe.style.transform = pcs.transform && pcs.transform !== 'none' ? pcs.transform : '';
-        probe.style.transformOrigin = pcs.transformOrigin || '';
+        // DM-928: deliberately DO NOT apply the pseudo's `transform` to the
+        // probe. CSS transforms only affect paint, not layout; the probe's
+        // `getBoundingClientRect()` returns the AXIS-ALIGNED bounding box of
+        // whatever box it currently paints. With a 45° rotation, that AABB is
+        // ~√2 × larger than the actual border-box and its top-left sits
+        // ~(diagonal-extra)/2 to the upper-left of the true border-box origin
+        // — re-rotating that AABB later via the `<g transform>` wrapper
+        // places the painted strokes at the wrong position (pricing-table
+        // checkmarks drift ~4 px left / 1 px up). Strip the transform here
+        // and let the unrotated probe report the actual border-box rect; the
+        // transform is re-applied at render time inside `flushPbTransformWrap`.
+        probe.style.transform = '';
+        probe.style.transformOrigin = '';
         // Pseudo lives logically inside the host; an absolute child of the host
         // inherits the same containing-block lookup.
         if (pseudo === '::before')

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

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

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

@@ -112,11 +112,48 @@ export const computeElementRaster = (el, cs, tag, rect, vp) => {
     const br = parseFloat(cs.borderRightWidth) || 0;
     const bt = parseFloat(cs.borderTopWidth) || 0;
     const bb = parseFloat(cs.borderBottomWidth) || 0;
+    // DM-936: vertical writing mode with text-decoration: underline paints
+    // a vertical underline OUTSIDE the inline content box (to the LEFT for
+    // `text-underline-position: left` in vertical-rl, to the RIGHT for
+    // `right`, etc.). Tight content-box clipping erases that vertical
+    // underline from the screenshot. Walk descendants to detect any
+    // text-decoration-line that mentions `underline`/`overline`/`line-
+    // through` AND expand the clip rect outward by enough margin (8 px
+    // on each side covers thicknesses up to ~6 px plus offsets). Also
+    // expand for descendant `text-shadow` for similar reasons. Horizontal
+    // writing modes already include the underline area inside the line-
+    // box height so the existing tight clip suffices.
+    let marginX = 0;
+    let marginY = 0;
+    if (hasNonHorizontalText) {
+        let hasDecoration = false;
+        const walk = (node) => {
+            if (hasDecoration || node == null)
+                return;
+            const ncs = node.nodeType === 1 ? window.getComputedStyle(node) : null;
+            if (ncs != null) {
+                const td = ncs.textDecorationLine || ncs.textDecoration || '';
+                if (td !== '' && td !== 'none' && /\b(?:underline|overline|line-through)\b/.test(td)) {
+                    hasDecoration = true;
+                    return;
+                }
+            }
+            const kids = node.children;
+            if (kids != null)
+                for (let i = 0; i < kids.length; i++)
+                    walk(kids[i]);
+        };
+        walk(el);
+        if (hasDecoration) {
+            marginX = 4;
+            marginY = 0;
+        }
+    }
     return {
-        x: rect.left - vp.x + bl + pl,
-        y: rect.top - vp.y + bt + pt,
-        width: Math.max(1, rect.width - bl - br - pl - pr),
-        height: Math.max(1, rect.height - bt - bb - pt - pb),
+        x: rect.left - vp.x + bl + pl - marginX,
+        y: rect.top - vp.y + bt + pt - marginY,
+        width: Math.max(1, rect.width - bl - br - pl - pr + 2 * marginX),
+        height: Math.max(1, rect.height - bt - bb - pt - pb + 2 * marginY),
     };
 };
 export const createTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster }) => {
@@ -235,17 +272,63 @@ export const createTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster
                 // shaping pipeline picks up.
                 if (mathItalicizeMi)
                     ch = mathItalicChar(ch);
-                const charRec = { ch, left: cr.left, top: cr.top, right: cr.right, bottom: cr.bottom };
-                if (cur == null || Math.abs(cr.top - cur.top) > 1) {
+                // DM-942: when a character is the FIRST glyph of a wrapped line
+                // immediately after a soft-hyphen or hyphenation break, Chrome's
+                // Range.getBoundingClientRect() returns a UNION rect spanning both
+                // lines (top = previous line's top, bottom = next line's bottom,
+                // height ≈ 2 × normalCharHeight, width ≈ entire wrap region). The
+                // glyph itself paints at the START of the next line. If we trust
+                // cr.top, the char gets bucketed into the previous line and the
+                // wrapped line silently loses its first character. Detect the
+                // anomaly (height significantly larger than the current line's
+                // chars) and synthesise the correct per-glyph top/left/right from
+                // the next char (peek ahead) — or, when no next char exists, use
+                // cr.bottom minus a normal char height.
+                let topForGroup = cr.top;
+                let leftForGroup = cr.left;
+                let rightForGroup = cr.right;
+                let bottomForGroup = cr.bottom;
+                if (cur != null && cur.chars.length > 0) {
+                    const refH = (cur.bottom - cur.top) || 16;
+                    if (cr.height > refH * 1.5 && cr.bottom > cur.bottom + refH * 0.5) {
+                        // Peek ahead one char to get the actual line-2 top/x.
+                        const peekI = i + step;
+                        if (peekI < raw.length) {
+                            const pr = document.createRange();
+                            pr.setStart(node, peekI);
+                            pr.setEnd(node, peekI + 1);
+                            const pcr = pr.getBoundingClientRect();
+                            if (pcr.height > 0 && pcr.height < refH * 1.5) {
+                                topForGroup = pcr.top;
+                                bottomForGroup = pcr.bottom;
+                                // The first char's left/right are unknown from cr (it's a
+                                // union spanning both lines). Place it just before the
+                                // peeked char, with width = (peek.left - cr-leftmost-of-line-2).
+                                // The peek's left is line 2's second char; estimate this
+                                // char's right edge at the peek's left, and its left at
+                                // cr.left (which IS the line-2 leftmost x when the union
+                                // spans into line 2).
+                                leftForGroup = cr.left;
+                                rightForGroup = pcr.left;
+                            }
+                        }
+                        else {
+                            // No next char — derive the next-line top from cr.bottom.
+                            topForGroup = cr.bottom - refH;
+                        }
+                    }
+                }
+                const charRec = { ch, left: leftForGroup, top: topForGroup, right: rightForGroup, bottom: bottomForGroup };
+                if (cur == null || Math.abs(topForGroup - cur.top) > 1) {
                     if (cur != null)
                         lines.push(cur);
-                    cur = { chars: [charRec], top: cr.top, bottom: cr.bottom, left: cr.left, right: cr.right };
+                    cur = { chars: [charRec], top: topForGroup, bottom: bottomForGroup, left: leftForGroup, right: rightForGroup };
                 }
                 else {
                     cur.chars.push(charRec);
-                    cur.left = Math.min(cur.left, cr.left);
-                    cur.right = Math.max(cur.right, cr.right);
-                    cur.bottom = Math.max(cur.bottom, cr.bottom);
+                    cur.left = Math.min(cur.left, leftForGroup);
+                    cur.right = Math.max(cur.right, rightForGroup);
+                    cur.bottom = Math.max(cur.bottom, bottomForGroup);
                 }
                 i += step - 1;
             }
@@ -328,28 +411,81 @@ export const createTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster
                         // first-char width.
                         let rasterTop = cRec.top - vp.y;
                         let rasterHeight = cRec.bottom - cRec.top;
+                        let rasterLeft = cRec.left - vp.x;
+                        let rasterWidth = cRec.right - cRec.left;
                         if (isFirstLetter) {
-                            const ilRaw = flStyle.initialLetter || flStyle.webkitInitialLetter || '';
-                            const ilN = parseFloat(ilRaw);
-                            const parentLineHeight = parseFloat(cs.lineHeight);
-                            if (Number.isFinite(ilN) && ilN > 1 && Number.isFinite(parentLineHeight) && parentLineHeight > 0) {
-                                const expectedHeight = ilN * parentLineHeight;
-                                if (expectedHeight > rasterHeight) {
-                                    // Extend downward only — Chrome aligns the cap-top at the
-                                    // first line's cap-height position; extra space the
-                                    // expansion captures past the actual ink is empty (will
-                                    // raster as transparent, with `omitBackground: true`) and
-                                    // doesn't paint anything visible.
-                                    rasterHeight = expectedHeight;
+                            const flFloat = flStyle.float || flStyle.cssFloat || '';
+                            const padT = parseFloat(flStyle.paddingTop) || 0;
+                            const padR = parseFloat(flStyle.paddingRight) || 0;
+                            const padB = parseFloat(flStyle.paddingBottom) || 0;
+                            const padL = parseFloat(flStyle.paddingLeft) || 0;
+                            if (flFloat === 'left' || flFloat === 'right') {
+                                // DM-931: floated ::first-letter (drop cap) is positioned
+                                // relative to the PARAGRAPH's content area, not the first
+                                // character's line-box position. `Range.getBoundingClientRect`
+                                // on the first character returns the GLYPH bounds at its
+                                // line-1 position — which doesn't match where Chrome paints
+                                // the float when `initial-letter` is set (the cap-top aligns
+                                // to line-1's cap-top, shifting the painted box DOWN from
+                                // the Range top by roughly the cap-height-vs-ascender delta).
+                                // Compute the raster rect from the pseudo's computed
+                                // padding-box (width/height + padding) + the paragraph's
+                                // border-box origin + paragraph padding/border + pseudo
+                                // margins.
+                                const pBox = el.getBoundingClientRect();
+                                const pPadT = parseFloat(cs.paddingTop) || 0;
+                                const pPadL = parseFloat(cs.paddingLeft) || 0;
+                                const pPadR = parseFloat(cs.paddingRight) || 0;
+                                const pBorT = parseFloat(cs.borderTopWidth) || 0;
+                                const pBorL = parseFloat(cs.borderLeftWidth) || 0;
+                                const pBorR = parseFloat(cs.borderRightWidth) || 0;
+                                const flMarT = parseFloat(flStyle.marginTop) || 0;
+                                const flMarL = parseFloat(flStyle.marginLeft) || 0;
+                                const flMarR = parseFloat(flStyle.marginRight) || 0;
+                                const w = parseFloat(flStyle.width);
+                                const h = parseFloat(flStyle.height);
+                                const padW = (Number.isFinite(w) && w > 0 ? w : rasterWidth) + padL + padR;
+                                const padH = (Number.isFinite(h) && h > 0 ? h : rasterHeight) + padT + padB;
+                                rasterTop = pBox.y + pBorT + pPadT + flMarT - vp.y;
+                                if (flFloat === 'left') {
+                                    rasterLeft = pBox.x + pBorL + pPadL + flMarL - vp.x;
+                                }
+                                else {
+                                    rasterLeft = pBox.x + pBox.width - pBorR - pPadR - flMarR - padW - vp.x;
+                                }
+                                rasterWidth = padW;
+                                rasterHeight = padH;
+                            }
+                            else {
+                                // Non-floated ::first-letter (raised cap via font-size only,
+                                // or `display: inline`). The Range rect tracks the painted
+                                // glyph correctly; just expand the rect by the pseudo's
+                                // padding so a `background-color` / gradient behind the
+                                // glyph isn't truncated. Apply the older `initial-letter`
+                                // height fallback for safety against under-tall Range
+                                // measurements on float-less drop caps.
+                                const ilRaw = flStyle.initialLetter || flStyle.webkitInitialLetter || '';
+                                const ilN = parseFloat(ilRaw);
+                                const parentLineHeight = parseFloat(cs.lineHeight);
+                                if (Number.isFinite(ilN) && ilN > 1 && Number.isFinite(parentLineHeight) && parentLineHeight > 0) {
+                                    const expectedHeight = ilN * parentLineHeight;
+                                    if (expectedHeight > rasterHeight)
+                                        rasterHeight = expectedHeight;
+                                }
+                                if (padT > 0 || padR > 0 || padB > 0 || padL > 0) {
+                                    rasterTop -= padT;
+                                    rasterLeft -= padL;
+                                    rasterWidth += padL + padR;
+                                    rasterHeight += padT + padB;
                                 }
                             }
                         }
                         rasterGlyphs.push({
                             charIndex: utf16Idx,
                             rect: {
-                                x: cRec.left - vp.x,
+                                x: rasterLeft,
                                 y: rasterTop,
-                                width: cRec.right - cRec.left,
+                                width: rasterWidth,
                                 height: rasterHeight,
                             },
                             // Suppress the underlying glyph emit. Two cases: