domotion-svg 0.2.2 → 0.3.2

package/dist/capture/script/walker/pseudo-content.d.ts

@@ -1,8 +1,10 @@
-export declare const createPseudoContentHandler: ({ vp, normColor, measureFontMetrics, textNeedsRaster }: {
+export declare const createPseudoContentHandler: ({ vp, normColor, measureFontMetrics, textNeedsRaster, resolveCounterValue, isCustomCounterStyle }: {
     vp: any;
     normColor: any;
     measureFontMetrics: any;
     textNeedsRaster: any;
+    resolveCounterValue: any;
+    isCustomCounterStyle: any;
 }) => {
     capturePseudoContent: (el: any, cs: any, rect: any, counterSnapshot: any) => {
         pseudoSegments: ({
@@ -38,6 +40,7 @@ export declare const createPseudoContentHandler: ({ vp, normColor, measureFontMe
                 fontSize: number;
                 fontWeight: string;
                 fontFamily: string;
+                fontStyle: string;
                 fontAscent: any;
             };
             color: string;
@@ -54,9 +57,16 @@ export declare const createPseudoContentHandler: ({ vp, normColor, measureFontMe
                 lineH: number;
                 fontSize: number;
                 backgroundColor: any;
+                backgroundImage: string | undefined;
                 borderRadius: number | undefined;
                 borderWidth: number | undefined;
                 borderColor: any;
+                transform: string | undefined;
+                transformOrigin: string | undefined;
+                borderTopColor: any;
+                borderRightColor: any;
+                borderBottomColor: any;
+                borderLeftColor: any;
             } | null;
             imageUrl?: undefined;
             renderWidth?: undefined;
@@ -74,6 +84,7 @@ export declare const createPseudoContentHandler: ({ vp, normColor, measureFontMe
             width: number;
             height: number;
             backgroundColor: any;
+            backgroundImage: string | undefined;
             borderTopWidth: number;
             borderTopColor: any;
             borderTopStyle: string;
@@ -87,6 +98,8 @@ export declare const createPseudoContentHandler: ({ vp, normColor, measureFontMe
             borderLeftColor: any;
             borderLeftStyle: string;
             borderRadius: number;
+            transform: string | undefined;
+            transformOrigin: string | undefined;
         }[];
     };
 };

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

@@ -52,7 +52,125 @@
 // entries), and everything that mixes pseudo positioning with the
 // element's own textSegments. Those depend on text shaping state that
 // hasn't been pulled out of captureInner yet — follow-up.
-export const createPseudoContentHandler = ({ vp, normColor, measureFontMetrics, textNeedsRaster }) => {
+export const createPseudoContentHandler = ({ vp, normColor, measureFontMetrics, textNeedsRaster, resolveCounterValue, isCustomCounterStyle }) => {
+    // DM-785: Chrome's HarfBuzz-shaped layout width differs from
+    // `canvas.measureText` by ~1-3px on bold uppercase short strings (the
+    // gradient-pill / MOST POPULAR / NEW badge pattern). Measuring via an
+    // off-screen <span> with the pseudo's resolved font properties and reading
+    // `getBoundingClientRect().width` matches the painted width exactly because
+    // it goes through the same shaping pipeline Chrome uses for layout. Only
+    // matters for `width: auto` absolute pseudos — the DM-507 numeric `pcs.width`
+    // path is still authoritative when present.
+    const probePseudoTextWidth = (text, pcs) => {
+        const span = document.createElement('span');
+        span.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;left:-99999px;top:-99999px;white-space:pre;line-height:normal;margin:0;padding:0;border:0;text-indent:0';
+        span.style.fontFamily = pcs.fontFamily || '';
+        span.style.fontSize = pcs.fontSize || '';
+        span.style.fontWeight = pcs.fontWeight || '';
+        span.style.fontStyle = pcs.fontStyle || '';
+        span.style.fontStretch = pcs.fontStretch || '';
+        span.style.fontVariant = pcs.fontVariant || '';
+        span.style.fontFeatureSettings = pcs.fontFeatureSettings || '';
+        span.style.fontVariationSettings = pcs.fontVariationSettings || '';
+        span.style.letterSpacing = pcs.letterSpacing || '';
+        span.style.wordSpacing = pcs.wordSpacing || '';
+        span.textContent = text;
+        document.body.appendChild(span);
+        const w = span.getBoundingClientRect().width;
+        document.body.removeChild(span);
+        return w;
+    };
+    // DM-768: when a static-flow pseudo declares `display: inline-block` (or
+    // inline-flex / inline-grid / inline-table) the box participates in Chrome's
+    // inline vertical-align math — `vertical-align: middle` aligns the pseudo's
+    // mid-point with the parent's baseline + 0.5 × x-height, `baseline` aligns
+    // the pseudo's bottom to the parent baseline, etc. The earlier formula
+    // (`rect.top + hostBorT + hostPadT + pMarT`) ignores that and places the
+    // pseudo at the host's content-area top — i.e. the line-box top — so an
+    // inline-block down-caret with `border-top: 5px solid` paints 6-7 px too
+    // high inside its parent button. Probe instead: insert a real sentinel
+    // mirroring the pseudo's box (display / size / borders / padding / margin /
+    // vertical-align) at the pseudo's logical position in the host and read its
+    // `getBoundingClientRect()`. Chrome lays out the sentinel exactly where the
+    // pseudo would have gone, so we get the correct x/y without re-deriving
+    // font metrics + vertical-align semantics ourselves.
+    const probePseudoStaticBoxRect = (el, pseudo, pcs) => {
+        const probe = document.createElement('span');
+        probe.style.cssText = 'pointer-events:none;visibility:hidden;box-sizing:content-box';
+        probe.style.display = pcs.display;
+        probe.style.width = pcs.width;
+        probe.style.height = pcs.height;
+        probe.style.paddingTop = pcs.paddingTop;
+        probe.style.paddingRight = pcs.paddingRight;
+        probe.style.paddingBottom = pcs.paddingBottom;
+        probe.style.paddingLeft = pcs.paddingLeft;
+        probe.style.borderTopWidth = pcs.borderTopWidth;
+        probe.style.borderRightWidth = pcs.borderRightWidth;
+        probe.style.borderBottomWidth = pcs.borderBottomWidth;
+        probe.style.borderLeftWidth = pcs.borderLeftWidth;
+        probe.style.borderStyle = 'solid';
+        probe.style.borderColor = 'transparent';
+        probe.style.marginTop = pcs.marginTop;
+        probe.style.marginRight = pcs.marginRight;
+        probe.style.marginBottom = pcs.marginBottom;
+        probe.style.marginLeft = pcs.marginLeft;
+        probe.style.verticalAlign = pcs.verticalAlign;
+        probe.style.font = ''; // inherit so line-box metrics match the pseudo's parent
+        if (pseudo === '::before')
+            el.insertBefore(probe, el.firstChild);
+        else
+            el.appendChild(probe);
+        const r = probe.getBoundingClientRect();
+        probe.remove();
+        return r;
+    };
+    // For `position: absolute` / `position: fixed` pseudos, the containing block
+    // is the nearest positioned ancestor of the host (NOT the host itself when
+    // the host is `position: static`). NYT's mobile nav `.css-sdhjrl::after`
+    // fade-out is `position: absolute; right: 0; top:0; width: 24px; height: 40px`
+    // on a `position: static; display: flex; overflow: scroll` NAV — the pseudo's
+    // computed `top` / `left` resolve against a far-up ancestor, so naïvely adding
+    // them to the host's padding-box origin places the gradient ~3088px below the
+    // NAV (where there's no NAV to fade over). Instead, inject a real absolutely-
+    // positioned sentinel as a child of the host: it inherits the same containing
+    // block the pseudo would have, and Chrome lays it out at the exact rect the
+    // pseudo paints to. Read its `getBoundingClientRect` directly.
+    const probePseudoAbsoluteBoxRect = (el, pseudo, pcs) => {
+        const probe = document.createElement('div');
+        probe.style.cssText = 'pointer-events:none;visibility:hidden;box-sizing:content-box;margin:0';
+        probe.style.position = pcs.position;
+        probe.style.top = pcs.top;
+        probe.style.right = pcs.right;
+        probe.style.bottom = pcs.bottom;
+        probe.style.left = pcs.left;
+        probe.style.width = pcs.width;
+        probe.style.height = pcs.height;
+        probe.style.paddingTop = pcs.paddingTop;
+        probe.style.paddingRight = pcs.paddingRight;
+        probe.style.paddingBottom = pcs.paddingBottom;
+        probe.style.paddingLeft = pcs.paddingLeft;
+        probe.style.borderTopWidth = pcs.borderTopWidth;
+        probe.style.borderRightWidth = pcs.borderRightWidth;
+        probe.style.borderBottomWidth = pcs.borderBottomWidth;
+        probe.style.borderLeftWidth = pcs.borderLeftWidth;
+        probe.style.borderStyle = 'solid';
+        probe.style.borderColor = 'transparent';
+        probe.style.marginTop = pcs.marginTop;
+        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 || '';
+        // Pseudo lives logically inside the host; an absolute child of the host
+        // inherits the same containing-block lookup.
+        if (pseudo === '::before')
+            el.insertBefore(probe, el.firstChild);
+        else
+            el.appendChild(probe);
+        const r = probe.getBoundingClientRect();
+        probe.remove();
+        return r;
+    };
     const pickQuoteChar = (forEl, isOpen) => {
         // Count q-element ancestors above this element (depth=0 = the first q
         // not inside another q). The pseudo lives ON forEl so when forEl IS a
@@ -113,6 +231,17 @@ export const createPseudoContentHandler = ({ vp, normColor, measureFontMetrics,
             const content = pcs.content;
             if (content == null || content === 'none' || content === 'normal' || content === '')
                 continue;
+            // DM-665 / DM-677: pseudos with computed `opacity: 0` paint nothing in
+            // Chrome (Material-style ripple / hover overlays use this — Google's
+            // `a.gb_C::before` is the empty-content variant we already skipped;
+            // `a.gb_A::before` on the mobile "Sign in" pill is the same idea but
+            // with `content: " "` (a single space, non-empty) so it slipped past
+            // the previous gate). Skip ALL opacity-zero pseudos before doing any
+            // measurement / box-rect work; capturing them anyway would paint an
+            // opaque box over the host's actual content.
+            const opacityNum = parseFloat(pcs.opacity);
+            if (Number.isFinite(opacityNum) && opacityNum === 0)
+                continue;
             let text = '';
             let imageUrl = '';
             let i = 0;
@@ -161,16 +290,28 @@ export const createPseudoContentHandler = ({ vp, normColor, measureFontMetrics,
                     });
                     const cname = args[0];
                     const sep = isCounters ? (args[1] ?? '') : '';
-                    // counter-style argument (third arg of counters, second of
-                    // counter) is currently ignored — decimal-only. Most fixtures
-                    // use the default style; non-decimal can be added later.
+                    // DM-788: third arg of counters() / second arg of counter() is a
+                    // `<counter-style>` name. When that name matches a custom
+                    // `@counter-style` rule captured in the pre-walk, run each value
+                    // through the resolver so prefix / suffix / pad / negative / range
+                    // / fallback descriptors apply — e.g. `counter(step, prefixed)`
+                    // produces "Step 01:  " instead of plain decimal "1".
+                    const styleArg = isCounters ? args[2] : args[1];
+                    const useCustomStyle = styleArg != null && styleArg !== ''
+                        && isCustomCounterStyle != null && isCustomCounterStyle(styleArg);
+                    const format = (v) => {
+                        if (!useCustomStyle)
+                            return String(v);
+                        const out = resolveCounterValue(styleArg, v);
+                        return out != null ? out : String(v);
+                    };
                     const snapshot = counterSnapshot.get(el) || [];
-                    const matches = snapshot.filter((s) => s.name === cname).map((s) => String(s.value));
+                    const matches = snapshot.filter((s) => s.name === cname).map((s) => format(s.value));
                     if (isCounters) {
-                        text += matches.length > 0 ? matches.join(sep) : '0';
+                        text += matches.length > 0 ? matches.join(sep) : format(0);
                     }
                     else {
-                        text += matches.length > 0 ? matches[matches.length - 1] : '0';
+                        text += matches.length > 0 ? matches[matches.length - 1] : format(0);
                     }
                     i = closeIdx + 1;
                 }
@@ -202,13 +343,29 @@ export const createPseudoContentHandler = ({ vp, normColor, measureFontMetrics,
                 // side or a visible background.
                 const bgRaw = pcs.backgroundColor;
                 const hasBg = bgRaw && bgRaw !== '' && bgRaw !== 'rgba(0, 0, 0, 0)' && bgRaw !== 'transparent';
+                // DM-767: capture background-image (linear-gradient / radial-gradient /
+                // url) on empty-content pseudos too. The `.corner::after` accent stripe
+                // pattern in `24-deep-pseudo-shapes` is an absolutely-positioned 4 px
+                // strip with a `linear-gradient` background and no color / border —
+                // without this check the pseudoBox emit was skipped entirely.
+                const bgImgRaw = pcs.backgroundImage;
+                const hasBgImg = bgImgRaw != null && bgImgRaw !== '' && bgImgRaw !== 'none';
                 const bwT = parseFloat(pcs.borderTopWidth) || 0;
                 const bwR = parseFloat(pcs.borderRightWidth) || 0;
                 const bwB = parseFloat(pcs.borderBottomWidth) || 0;
                 const bwL = parseFloat(pcs.borderLeftWidth) || 0;
                 const hasBorder = bwT > 0 || bwR > 0 || bwB > 0 || bwL > 0;
                 const isBlockLike = pcs.display === 'block' || pcs.display === 'inline-block' || pcs.display === 'flex';
-                if (isBlockLike && (hasBg || hasBorder)) {
+                // DM-665: `opacity: 0` pseudos paint nothing (Material-style ripple
+                // / hover overlays use this pattern — Google's `a.gb_C::before` is
+                // a 40×40 dark-grey absolute box that's invisible at rest). Capturing
+                // them anyway would paint an opaque box over the host's content
+                // (the apps-grid SVG underneath the anchor). Skip empty-content
+                // pseudos whose `opacity: 0` makes them visually a no-op.
+                const opacityNum = parseFloat(pcs.opacity);
+                if (Number.isFinite(opacityNum) && opacityNum === 0)
+                    continue;
+                if (isBlockLike && (hasBg || hasBgImg || hasBorder)) {
                     const hostPadL = parseFloat(cs.paddingLeft) || 0;
                     const hostPadT = parseFloat(cs.paddingTop) || 0;
                     const hostBorL = parseFloat(cs.borderLeftWidth) || 0;
@@ -235,44 +392,100 @@ export const createPseudoContentHandler = ({ vp, normColor, measureFontMetrics,
                     let borderBoxX;
                     let borderBoxY;
                     if (pcs.position === 'absolute' || pcs.position === 'fixed') {
-                        const pcsLeft = parseFloat(pcs.left);
-                        const pcsTop = parseFloat(pcs.top);
-                        const pcsRight = parseFloat(pcs.right);
-                        const pcsBottom = parseFloat(pcs.bottom);
-                        const paddingBoxL = rect.left - vp.x + hostBorL;
-                        const paddingBoxT = rect.top - vp.y + hostBorT;
-                        const paddingBoxR = rect.right - vp.x - hostBorR;
-                        const paddingBoxB = rect.bottom - vp.y - (parseFloat(cs.borderBottomWidth) || 0);
-                        if (!isNaN(pcsLeft))
-                            borderBoxX = paddingBoxL + pcsLeft;
-                        else if (!isNaN(pcsRight))
-                            borderBoxX = paddingBoxR - pcsRight - borderBoxW;
-                        else
-                            borderBoxX = paddingBoxL;
-                        if (!isNaN(pcsTop))
-                            borderBoxY = paddingBoxT + pcsTop;
-                        else if (!isNaN(pcsBottom))
-                            borderBoxY = paddingBoxB - pcsBottom - borderBoxH;
-                        else
-                            borderBoxY = paddingBoxT;
+                        // Use a real positioned sentinel to find the pseudo's true painted
+                        // rect. Chrome's containing-block lookup walks up from the host
+                        // looking for a positioned ancestor (or a transformed / filtered
+                        // / contained ancestor); the same lookup applies to a real child
+                        // of the host. Probing avoids re-implementing that walk + all the
+                        // containing-block-establishing properties. NYT mobile's nav fade-
+                        // out `.css-sdhjrl::after` (`position: absolute; right: 0`) on a
+                        // `position: static` NAV is the trigger case — the pseudo's
+                        // resolved `top` / `left` are relative to a far-up positioned
+                        // ancestor, not the NAV, so the prior additive math placed the
+                        // gradient thousands of pixels off the NAV.
+                        const pr = probePseudoAbsoluteBoxRect(el, pseudo, pcs);
+                        borderBoxX = pr.left - vp.x;
+                        borderBoxY = pr.top - vp.y;
                     }
                     else {
                         const pMarT = parseFloat(pcs.marginTop) || 0;
                         borderBoxX = rect.left - vp.x + hostBorL + hostPadL + pMarL;
                         borderBoxY = rect.top - vp.y + hostBorT + hostPadT + pMarT;
+                        // DM-768: static `display: inline-block` (and inline-flex / inline-grid /
+                        // inline-table) pseudos participate in Chrome's inline vertical-align
+                        // math — the formula above ignores `vertical-align` and pins the box to
+                        // the host's content-area top, which is 6-7 px too high for a typical
+                        // `vertical-align: middle` down-caret. Probe with a real sentinel that
+                        // mirrors the pseudo's box properties.
+                        //
+                        // CSS render order on the line is: ::before → real children → ::after.
+                        // The sentinel is a real child:
+                        //   - For ::before, the sentinel renders AFTER the pseudo. The
+                        //     pseudo's own position is unchanged; the sentinel just shifts
+                        //     subsequent content. So the pseudo's border-box left =
+                        //     probe.left − pMarR − borderBoxW − pMarL (back out the sentinel
+                        //     gap), and the pseudo's top equals probe.top (both lay out
+                        //     on the same line with matching `vertical-align`).
+                        //   - For ::after, the sentinel renders BEFORE the pseudo. Without
+                        //     the sentinel, the pseudo would take the slot the sentinel
+                        //     now occupies, so the pseudo's border-box left = probe.left
+                        //     and top = probe.top.
+                        const dispIsInline = pcs.display === 'inline-block' || pcs.display === 'inline-flex' || pcs.display === 'inline-grid' || pcs.display === 'inline-table';
+                        if (dispIsInline) {
+                            const pr = probePseudoStaticBoxRect(el, pseudo, pcs);
+                            borderBoxY = pr.top - vp.y;
+                            if (pseudo === '::after') {
+                                borderBoxX = pr.left - vp.x;
+                            }
+                            else {
+                                const pMarR = parseFloat(pcs.marginRight) || 0;
+                                borderBoxX = pr.left - vp.x - pMarR - borderBoxW - pMarL;
+                            }
+                        }
+                    }
+                    // DM-710: if the host has a CSS transform whose 2D submatrix is
+                    // singular (zero determinant), the host's painted area collapses
+                    // to a point / line and the pseudo paints nothing visible —
+                    // Apple's `.globalnav-bag-badge` carries `transform: matrix(0, 0,
+                    // 0, 0, 0, 0)` as the "no items in cart" state, and the empty
+                    // ::before with `width: 13px; background: black; border-radius:
+                    // 13px` would otherwise emit as a visible dot. Skip the pseudoBox
+                    // in that case; the live-rect model already drops the host itself.
+                    let degenerateHostTransform = false;
+                    if (cs.transform && cs.transform !== 'none') {
+                        const m2 = /^matrix\(\s*([-\d.eE]+)\s*,\s*([-\d.eE]+)\s*,\s*([-\d.eE]+)\s*,\s*([-\d.eE]+)/.exec(cs.transform);
+                        if (m2) {
+                            const a = parseFloat(m2[1]);
+                            const b = parseFloat(m2[2]);
+                            const c = parseFloat(m2[3]);
+                            const d = parseFloat(m2[4]);
+                            if (Math.abs(a * d - b * c) < 1e-9)
+                                degenerateHostTransform = true;
+                        }
                     }
-                    if (borderBoxW > 0 && borderBoxH > 0) {
+                    if (borderBoxW > 0 && borderBoxH > 0 && !degenerateHostTransform) {
+                        // DM-783: the pseudo's own `transform` (rotate/scale/translate/
+                        // matrix) wraps the pseudoBox at render time. getComputedStyle
+                        // returns the resolved matrix() form, and transformOrigin returns
+                        // resolved px values relative to the pseudo's box top-left — both
+                        // can be pasted directly into an SVG `<g>` wrapper. Captured only
+                        // when non-`none` to keep the captured tree compact.
+                        const pcsTransform = pcs.transform && pcs.transform !== 'none' ? pcs.transform : undefined;
+                        const pcsTransformOrigin = pcsTransform != null ? (pcs.transformOrigin || undefined) : undefined;
                         pseudoBoxes.push({
                             x: borderBoxX,
                             y: borderBoxY,
                             width: borderBoxW,
                             height: borderBoxH,
                             backgroundColor: hasBg ? normColor(bgRaw) : undefined,
+                            backgroundImage: hasBgImg ? bgImgRaw : undefined,
                             borderTopWidth: bwT, borderTopColor: bwT > 0 ? normColor(pcs.borderTopColor) : undefined, borderTopStyle: pcs.borderTopStyle,
                             borderRightWidth: bwR, borderRightColor: bwR > 0 ? normColor(pcs.borderRightColor) : undefined, borderRightStyle: pcs.borderRightStyle,
                             borderBottomWidth: bwB, borderBottomColor: bwB > 0 ? normColor(pcs.borderBottomColor) : undefined, borderBottomStyle: pcs.borderBottomStyle,
                             borderLeftWidth: bwL, borderLeftColor: bwL > 0 ? normColor(pcs.borderLeftColor) : undefined, borderLeftStyle: pcs.borderLeftStyle,
                             borderRadius: parseFloat(pcs.borderRadius) || 0,
+                            transform: pcsTransform,
+                            transformOrigin: pcsTransformOrigin,
                         });
                     }
                 }
@@ -332,22 +545,12 @@ export const createPseudoContentHandler = ({ vp, normColor, measureFontMetrics,
             }
             if (text === '')
                 continue;
-            // Measure via canvas using the pseudo's computed font.
-            const fontSpec = pcs.font || (pcs.fontWeight + ' ' + pcs.fontSize + ' ' + pcs.fontFamily);
-            const measureCanvas = document.createElement('canvas');
-            const mctx = measureCanvas.getContext('2d');
-            mctx.font = fontSpec;
-            // DM-507: prefer Chrome's resolved layout width over
-            // canvas.measureText when available. For position:absolute pseudos
-            // with auto-width Chrome shrink-to-fits the box and
-            // getComputedStyle returns the resolved content-box width.
-            // canvas.measureText drifts ~1-2px from Chrome's actual layout in
-            // common bold / symbol-mix fixtures because the canvas font-
-            // shaping path differs slightly from Chrome's HarfBuzz paint
-            // pipeline. Falling back to canvas measurement when pcs.width is
-            // unavailable (typical for non-positioned inline pseudos) keeps
-            // the existing path.
-            let pseudoWidth = mctx.measureText(text).width;
+            // DM-785: probe-span measurement matches Chrome's HarfBuzz-shaped
+            // layout width — canvas.measureText drifted ~1-3px on bold uppercase
+            // short strings (visible on rotated gradient pills as the text
+            // overflowing the badge). DM-507 numeric-pcs.width override still
+            // wins when the pseudo's box has an authored fixed width.
+            let pseudoWidth = probePseudoTextWidth(text, pcs);
             if (pcs.position === 'absolute' || pcs.position === 'fixed') {
                 const pcsW = parseFloat(pcs.width);
                 if (!isNaN(pcsW) && pcsW > 0)
@@ -449,12 +652,15 @@ export const createPseudoContentHandler = ({ vp, normColor, measureFontMetrics,
                 width: pseudoWidth,
                 height: elFontSize,
                 // Carry pseudo-specific typography so the renderer can respect
-                // per-pseudo color, font-size, font-weight, font-family (CSS
-                // lets pseudos style independently of their parent).
+                // per-pseudo color, font-size, font-weight, font-family, font-style
+                // (CSS lets pseudos style independently of their parent — Slashdot's
+                // "Most Discussed" carousel heading is a ::after that's italic+bordered
+                // on a non-italic host div).
                 color: pcs.color,
                 fontSize: elFontSize,
                 fontWeight: pcs.fontWeight,
                 fontFamily: pcs.fontFamily,
+                fontStyle: pcs.fontStyle,
                 fontAscent: pseudoMetrics.ascent,
             };
             // DM-497: stash pseudo's own background / border-radius on the
@@ -466,26 +672,49 @@ export const createPseudoContentHandler = ({ vp, normColor, measureFontMetrics,
             const pseudoBgColor = pseudoBgRaw && pseudoBgRaw !== '' && pseudoBgRaw !== 'rgba(0, 0, 0, 0)' && pseudoBgRaw !== 'transparent'
                 ? normColor(pseudoBgRaw) : '';
             const pseudoBR = parseFloat(pcs.borderRadius) || 0;
-            // Capture a uniform border when all four sides match. Mixed-side
-            // styling is rare on pseudos in real-world fixtures and falls
-            // through.
-            const bw = parseFloat(pcs.borderTopWidth) || 0;
-            const bwUniform = bw > 0
-                && (parseFloat(pcs.borderRightWidth) || 0) === bw
-                && (parseFloat(pcs.borderBottomWidth) || 0) === bw
-                && (parseFloat(pcs.borderLeftWidth) || 0) === bw;
+            // Capture a uniform border when all four sides match (renders as
+            // `<rect stroke=…>`). When a single side carries a border (e.g.
+            // `border-bottom: 1px solid rgba(255,255,255,0.5)` on Slashdot's
+            // `.carouselHeading::after`) we still capture per-side widths +
+            // colors so the renderer can emit a `<line>` for the visible side.
+            const bwTop = parseFloat(pcs.borderTopWidth) || 0;
+            const bwRight = parseFloat(pcs.borderRightWidth) || 0;
+            const bwBottom = parseFloat(pcs.borderBottomWidth) || 0;
+            const bwLeft = parseFloat(pcs.borderLeftWidth) || 0;
+            const bwUniform = bwTop > 0 && bwRight === bwTop && bwBottom === bwTop && bwLeft === bwTop;
             const pseudoBC = bwUniform ? normColor(pcs.borderTopColor) : '';
+            const colorIsPaintable = (raw) => raw !== '' && raw !== 'rgba(0, 0, 0, 0)' && raw !== 'transparent';
+            const sideBorderTopColor = bwTop > 0 ? normColor(pcs.borderTopColor) : '';
+            const sideBorderRightColor = bwRight > 0 ? normColor(pcs.borderRightColor) : '';
+            const sideBorderBottomColor = bwBottom > 0 ? normColor(pcs.borderBottomColor) : '';
+            const sideBorderLeftColor = bwLeft > 0 ? normColor(pcs.borderLeftColor) : '';
+            const hasPerSideBorder = !bwUniform && ((bwTop > 0 && colorIsPaintable(sideBorderTopColor))
+                || (bwRight > 0 && colorIsPaintable(sideBorderRightColor))
+                || (bwBottom > 0 && colorIsPaintable(sideBorderBottomColor))
+                || (bwLeft > 0 && colorIsPaintable(sideBorderLeftColor)));
+            // DM-782: background-image (linear-gradient / radial-gradient / url())
+            // on text-content pseudos. The empty-content path already plumbs this
+            // (DM-767); the text-content path was dropping it, so "gradient badge"
+            // patterns (`.tier.popular::before { content: "MOST POPULAR"; background:
+            // linear-gradient(135deg, ...) }`) lost the pill bg behind the white
+            // glyphs.
+            const pseudoBgImgRaw = pcs.backgroundImage;
+            const hasPseudoBgImg = pseudoBgImgRaw != null && pseudoBgImgRaw !== '' && pseudoBgImgRaw !== 'none';
+            // DM-783: pseudo's own `transform` (rotate/scale/translate/matrix)
+            // wraps both the paint box AND the glyph emit at render time.
+            const pseudoTransform = pcs.transform && pcs.transform !== 'none' ? pcs.transform : undefined;
+            const pseudoTransformOrigin = pseudoTransform != null ? (pcs.transformOrigin || undefined) : undefined;
             let pseudoBoxStyles = null;
-            if (pseudoBgColor !== '' || pseudoBR > 0 || (bwUniform && pseudoBC !== '' && pseudoBC !== 'rgba(0, 0, 0, 0)')) {
+            if (pseudoBgColor !== '' || hasPseudoBgImg || pseudoBR > 0 || (bwUniform && pseudoBC !== '' && pseudoBC !== 'rgba(0, 0, 0, 0)') || hasPerSideBorder || pseudoTransform != null) {
                 pseudoBoxStyles = {
                     padL: parseFloat(pcs.paddingLeft) || 0,
                     padR: parseFloat(pcs.paddingRight) || 0,
                     padT: parseFloat(pcs.paddingTop) || 0,
                     padB: parseFloat(pcs.paddingBottom) || 0,
-                    borL: parseFloat(pcs.borderLeftWidth) || 0,
-                    borR: parseFloat(pcs.borderRightWidth) || 0,
-                    borT: parseFloat(pcs.borderTopWidth) || 0,
-                    borB: parseFloat(pcs.borderBottomWidth) || 0,
+                    borL: bwLeft,
+                    borR: bwRight,
+                    borT: bwTop,
+                    borB: bwBottom,
                     // Inline-box bg paints at line-height, not at font-size — so
                     // the box's vertical extent is lineH + padding + border (not
                     // fontSize). Capture lineH alongside the metrics; the post-
@@ -494,9 +723,20 @@ export const createPseudoContentHandler = ({ vp, normColor, measureFontMetrics,
                     lineH,
                     fontSize: elFontSize,
                     backgroundColor: pseudoBgColor !== '' ? pseudoBgColor : undefined,
+                    backgroundImage: hasPseudoBgImg ? pseudoBgImgRaw : undefined,
                     borderRadius: pseudoBR > 0 ? pseudoBR : undefined,
-                    borderWidth: bwUniform ? bw : undefined,
+                    borderWidth: bwUniform ? bwTop : undefined,
                     borderColor: bwUniform && pseudoBC !== '' && pseudoBC !== 'rgba(0, 0, 0, 0)' ? pseudoBC : undefined,
+                    transform: pseudoTransform,
+                    transformOrigin: pseudoTransformOrigin,
+                    // Per-side colors. Renderer reads these when no uniform border
+                    // is set and emits a `<line>` for each side whose width > 0 and
+                    // color is paintable. Undefined when the side has no visible
+                    // border, keeping the captured tree compact in the common case.
+                    borderTopColor: hasPerSideBorder && bwTop > 0 && colorIsPaintable(sideBorderTopColor) ? sideBorderTopColor : undefined,
+                    borderRightColor: hasPerSideBorder && bwRight > 0 && colorIsPaintable(sideBorderRightColor) ? sideBorderRightColor : undefined,
+                    borderBottomColor: hasPerSideBorder && bwBottom > 0 && colorIsPaintable(sideBorderBottomColor) ? sideBorderBottomColor : undefined,
+                    borderLeftColor: hasPerSideBorder && bwLeft > 0 && colorIsPaintable(sideBorderLeftColor) ? sideBorderLeftColor : undefined,
                 };
             }
             // If the pseudo contains any codepoint Chrome paints via a color-

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

@@ -168,9 +168,29 @@ export const createPseudoInjectHandler = () => {
                     p.seg.pseudoBox = {
                         x: bx, y: boxTop, width: bw, height: bh,
                         backgroundColor: bs.backgroundColor,
+                        // DM-782: gradient/url() bg-image plumbing — renderer threads
+                        // each comma-separated layer through `buildBackgroundLayerDef`
+                        // and paints rect(s) behind the glyphs (mirrors the empty-
+                        // content pseudoBox path in `element-tree-to-svg.ts`).
+                        backgroundImage: bs.backgroundImage,
                         borderRadius: bs.borderRadius,
                         borderWidth: bs.borderWidth,
                         borderColor: bs.borderColor,
+                        // Per-side widths + colors for non-uniform borders (e.g. a
+                        // bare `border-bottom` on a pseudo). Width fields are always
+                        // emitted so the renderer doesn't have to fall back to zero
+                        // when a `borderWidth` (uniform) shorthand is absent.
+                        borL: bs.borL, borR: bs.borR, borT: bs.borT, borB: bs.borB,
+                        borderTopColor: bs.borderTopColor,
+                        borderRightColor: bs.borderRightColor,
+                        borderBottomColor: bs.borderBottomColor,
+                        borderLeftColor: bs.borderLeftColor,
+                        // DM-783: pseudo's `transform` + `transformOrigin`. Renderer
+                        // wraps the box + glyphs in a pre-baked
+                        // translate-(transform)-translate matrix so the rotation/scale
+                        // pivots around the box-relative origin instead of (0,0).
+                        transform: bs.transform,
+                        transformOrigin: bs.transformOrigin,
                     };
                 }
             }