domotion-svg 0.2.2 → 0.3.2

package/src/capture/script/walker/pseudo-content.ts

@@ -53,7 +53,124 @@
 // 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
@@ -105,6 +222,16 @@ export const createPseudoContentHandler = ({ vp, normColor, measureFontMetrics,
       const pcs = window.getComputedStyle(el, pseudo);
       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 = '';
@@ -145,15 +272,26 @@ 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;
         } else if (content.startsWith('open-quote', i)) {
@@ -180,13 +318,28 @@ 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;
@@ -214,37 +367,97 @@ 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,
             });
           }
         }
@@ -303,22 +516,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) pseudoWidth = pcsW;
@@ -414,12 +617,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
@@ -431,26 +637,51 @@ 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: string): boolean => 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-
@@ -459,9 +690,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/src/capture/script/walker/pseudo-inject.ts

@@ -167,9 +167,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,
           };
         }
       }

package/src/capture/script/walker/text-segments.ts

@@ -144,6 +144,53 @@ export const createTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster
     const firstLetterStyled = flFsRaw > 0 && Math.abs(flFsRaw - elFsRaw) > 0.5;
     let firstCharSeen = false;
 
+    // DM-747 / DM-791: MathML `<mi>` with a single token character is
+    // automatically painted with the Mathematical Italic alphabet (the
+    // mathvariant=italic mapping from MathML 4 / Core). Chrome paints
+    // `<mi>a</mi>` using U+1D44E (𝑎), `<mi>α</mi>` using U+1D6FC (𝛼), etc.
+    // The computed `font-style` stays `normal` and `font-family` stays
+    // `math`, so we can't detect this through CSS — we apply the mapping
+    // ourselves at capture time so the downstream text-shaping pipeline
+    // picks up the right glyphs from whatever math font the system has.
+    const elTag = el.tagName != null ? el.tagName.toLowerCase() : '';
+    const _miText = (el.textContent || '').trim();
+    const mathItalicizeMi = elTag === 'mi'
+      && [..._miText].length === 1
+      && /^[a-zA-ZΑ-ΩΆΈΉΊΌΎΏα-ωϐϑϕϖϗϰϱϵ∂∇]$/u.test(_miText);
+    const mathItalicChar = (ch) => {
+      const code = ch.codePointAt(0);
+      if (code == null) return ch;
+      // Latin Mathematical Italic Capital A..Z = U+1D434..U+1D44D.
+      if (code >= 0x41 && code <= 0x5A) return String.fromCodePoint(0x1D434 + (code - 0x41));
+      // Latin Mathematical Italic Small a..z = U+1D44E..U+1D467, except
+      // U+1D455 ("h") is reserved — Chrome paints U+210E (ℎ, PLANCK CONSTANT).
+      if (code >= 0x61 && code <= 0x7A) {
+        if (code === 0x68) return 'ℎ';
+        return String.fromCodePoint(0x1D44E + (code - 0x61));
+      }
+      // Greek Mathematical Italic Capital Α..Ω = U+1D6E2..U+1D6FA.
+      // The block is dense: 25 codepoints for Α (U+0391) through Ω (U+03A9),
+      // skipping nothing in the source range.
+      if (code >= 0x0391 && code <= 0x03A9) return String.fromCodePoint(0x1D6E2 + (code - 0x0391));
+      // Greek Mathematical Italic Small α..ω = U+1D6FC..U+1D71B.
+      // U+03C2 (final sigma ς) maps to the regular U+1D70D position; the
+      // block is contiguous.
+      if (code >= 0x03B1 && code <= 0x03C9) return String.fromCodePoint(0x1D6FC + (code - 0x03B1));
+      // Greek symbol variants — these alternate forms get their own italic
+      // codepoints at the tail of the lowercase Greek block.
+      switch (code) {
+        case 0x2202: return String.fromCodePoint(0x1D715); // ∂ → italic partial differential
+        case 0x03F5: return String.fromCodePoint(0x1D716); // ϵ (lunate) → italic epsilon symbol
+        case 0x03D1: return String.fromCodePoint(0x1D717); // ϑ (theta sym) → italic theta symbol
+        case 0x03F0: return String.fromCodePoint(0x1D718); // ϰ (kappa sym) → italic kappa symbol
+        case 0x03D5: return String.fromCodePoint(0x1D719); // ϕ (phi sym) → italic phi symbol
+        case 0x03F1: return String.fromCodePoint(0x1D71A); // ϱ (rho sym) → italic rho symbol
+        case 0x03D6: return String.fromCodePoint(0x1D71B); // ϖ (pi sym) → italic pi symbol
+        case 0x2207: return String.fromCodePoint(0x1D6FB); // ∇ (nabla) → italic nabla (upper-block tail)
+        default: return ch;
+      }
+    };
+
     for (const node of el.childNodes) {
       if (node.nodeType !== Node.TEXT_NODE) continue;
       // text-transform — see header comment.
@@ -153,7 +200,13 @@ export const createTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster
       else if (tt === 'lowercase') raw = raw.toLowerCase();
       else if (tt === 'capitalize') raw = raw.replace(/\b\p{L}/gu, (ch) => ch.toUpperCase());
       if (!raw.trim()) continue;
-      text += raw.trim() + ' ';
+      // DM-747: when `<mi>` math-italic substitution applies, the element's
+      // aggregate `text` field should carry the substituted codepoint too —
+      // it's used for aria-label / accessibility and matches the painted
+      // glyph. The per-character ranges still measure against the original
+      // textContent (see below).
+      const rawForText = mathItalicizeMi ? mathItalicChar(raw.trim()) : raw.trim();
+      text += rawForText + ' ';
 
       // Group characters by their laid-out line (matching rect.top).
       const lines = [];
@@ -168,7 +221,14 @@ export const createTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster
         const cr = r.getBoundingClientRect();
         const isWs = step === 1 && /\s/.test(raw[i]);
         if (cr.width === 0 && (cr.height === 0 || isWs)) { i += step - 1; continue; }
-        const ch = raw.slice(i, i + step);
+        let ch = raw.slice(i, i + step);
+        // 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
+        // unit) while the captured glyph string carries the surrogate-pair
+        // math-italic codepoint (`𝑎`, 2 code units) that the downstream
+        // 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) {
           if (cur != null) lines.push(cur);
@@ -239,13 +299,42 @@ export const createTextSegmentsHandler = ({ vp, measureFontMetrics, needsRaster
           const isFirstLetter = firstLetterStyled && !firstCharSeen && /\S/.test(cRec.ch);
           if (isFirstLetter) firstCharSeen = true;
           if ((cp != null && needsRaster(cp, nextCp)) || isFirstLetter) {
+            // DM-823: for floated ::first-letter drop caps (initial-letter:
+            // N M), `Range.getBoundingClientRect()` returns the line-box of
+            // the first character in the NORMAL flow — but Chrome paints the
+            // float at a much larger box (~N × parent-line-height tall). The
+            // bitmap captured at the Range rect gets vertically truncated,
+            // visible as a clipped W / B / T drop cap in the rendered SVG.
+            // Expand the rasterRect downward by the difference between
+            // (N × parent-line-height) and the natural-flow Range height so
+            // the screenshot includes the full painted glyph. Width stays
+            // unchanged — Chrome's drop cap matches the natural-flow
+            // first-char width.
+            let rasterTop = cRec.top - vp.y;
+            let rasterHeight = cRec.bottom - cRec.top;
+            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;
+                }
+              }
+            }
             rasterGlyphs.push({
               charIndex: utf16Idx,
               rect: {
                 x: cRec.left - vp.x,
-                y: cRec.top - vp.y,
+                y: rasterTop,
                 width: cRec.right - cRec.left,
-                height: cRec.bottom - cRec.top,
+                height: rasterHeight,
               },
               // ::first-letter drop caps: suppress the path glyph so
               // only the rasterized big letter paints (DM-439).

package/src/capture/script/walker/transforms.ts

@@ -131,6 +131,20 @@ export const createTransformsHandler = () => {
       ? frozenTransform
       : 'none',
     transformOrigin: cs.transformOrigin,
+    // DM-751: extract `matrix3d` translateZ so the paint-order sort can
+    // honor 3D Z position when the parent element has
+    // `transform-style: preserve-3d` (which sorts children by Z in 3D
+    // space, not by z-index per CSS Transforms 2 §6). We can't represent
+    // perspective / actual 3D rendering in SVG; this is paint-order only.
+    translateZ: (function () {
+      const tt = cs.transform;
+      if (tt == null || tt === 'none' || tt === '') return undefined;
+      const m3 = /^matrix3d\(([^)]+)\)/.exec(tt);
+      if (m3 == null) return undefined;
+      const parts = m3[1].split(',').map((s) => parseFloat(s.trim()));
+      const tz = parts[14];
+      return Number.isFinite(tz) && tz !== 0 ? tz : undefined;
+    })(),
     // DM-587: separately flag elements that ORIGINALLY had a non-none
     // transform — even though we discard the value to suppress the wrap,
     // CSS Transforms 2 §4 says any non-none transform creates a stacking