render-tag 0.1.22 → 0.1.24

package/lib/layout.d.ts

@@ -9,6 +9,10 @@ export declare function getFontMetrics(ctx: CanvasRenderingContext2D, style: Res
     ascent: number;
     descent: number;
 };
+/** True for an element declaring `background-clip:text` with a visible
+ * background (gradient image or solid color) — the fill/decorations of every
+ * glyph it covers must sample that background instead of painting it as a box. */
+export declare function hasTextClip(style: ResolvedStyle): boolean;
 /**
  * Build the layout tree from the styled tree using pure canvas measurement.
  * No DOM measurements used — all positions computed from CSS values + canvas.measureText.

package/lib/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../src/layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAc,SAAS,EAAc,aAAa,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AA4C3G;;GAEG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,wBAAwB,EAAE,KAAK,EAAE,aAAa,GAAG,IAAI,CAGnF;AAgBD,wBAAgB,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAc5D;AA8HD,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEpD;AAMD,wBAAgB,cAAc,CAAC,GAAG,EAAE,wBAAwB,EAAE,KAAK,EAAE,aAAa,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAWvH;AAyjED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,wBAAwB,EAC7B,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,MAAM,EACtB,kBAAkB,UAAO,EACzB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,YAAY,EAAE,UAAU,KAAK,IAAI,GACvD;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,UAAU,EAAE,CAAA;CAAE,CAmD1D"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../src/layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAc,SAAS,EAAc,aAAa,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AA4C3G;;GAEG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,wBAAwB,EAAE,KAAK,EAAE,aAAa,GAAG,IAAI,CAGnF;AAgBD,wBAAgB,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAc5D;AA8HD,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEpD;AAMD,wBAAgB,cAAc,CAAC,GAAG,EAAE,wBAAwB,EAAE,KAAK,EAAE,aAAa,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAWvH;AAmFD;;kFAEkF;AAClF,wBAAgB,WAAW,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAIzD;AAsnED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,wBAAwB,EAC7B,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,MAAM,EACtB,kBAAkB,UAAO,EACzB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,YAAY,EAAE,UAAU,KAAK,IAAI,GACvD;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,UAAU,EAAE,CAAA;CAAE,CAmD1D"}

package/lib/layout.js

@@ -280,6 +280,14 @@ function hasVisibleBoxStyles(style) {
         return true;
     return false;
 }
+/** True for an element declaring `background-clip:text` with a visible
+ * background (gradient image or solid color) — the fill/decorations of every
+ * glyph it covers must sample that background instead of painting it as a box. */
+export function hasTextClip(style) {
+    return style.webkitBackgroundClip === 'text' &&
+        ((!!style.backgroundImage && style.backgroundImage !== 'none') ||
+            !isTransparent(style.backgroundColor));
+}
 /** True for atomic inline-block words (boxOpen && boxClose && text together). */
 function isAtomicInlineBlock(w) {
     return !!(w.boxOpen && w.boxClose && w.text);
@@ -364,15 +372,21 @@ function applyEllipsisToLine(ctx, line, maxWidth) {
  */
 function collectTextRuns(node) {
     const runs = [];
-    function walk(n, boxStyle) {
+    function walk(n, boxStyle, clipStyle, strokeImageStyle) {
         if (n.tagName === '#text' && n.textContent) {
-            runs.push({ text: n.textContent, style: n.style, boxStyle });
+            runs.push({ text: n.textContent, style: n.style, boxStyle, clipStyle, strokeImageStyle });
             return;
         }
         const isInlineBlock = n.style.display === 'inline-block';
         // Inline-block always needs box treatment (padding/margin affect layout)
         const isBox = isInlineBlock || (isInline(n) && hasVisibleBoxStyles(n.style));
         const newBoxStyle = isBox ? n.style : boxStyle;
+        // Track the nearest inline element declaring a background-clip:text
+        // background or a --rt-text-stroke-image, so those paints reach descendant
+        // runs that don't carry the (non-inheriting) properties themselves.
+        const newClipStyle = isInline(n) && hasTextClip(n.style) ? n.style : clipStyle;
+        const newStrokeImageStyle = isInline(n) && n.style.webkitTextStrokeImage && n.style.webkitTextStrokeImage !== 'none'
+            ? n.style : strokeImageStyle;
         const hasHorizSpacing = isBox && (n.style.paddingLeft > 0 || n.style.paddingRight > 0 ||
             n.style.borderLeftWidth > 0 || n.style.borderRightWidth > 0);
         if (isInlineBlock) {
@@ -384,6 +398,8 @@ function collectTextRuns(node) {
                 text: allText,
                 style: n.style,
                 boxStyle: newBoxStyle,
+                clipStyle: newClipStyle,
+                strokeImageStyle: newStrokeImageStyle,
                 // Store the full box info for atomic inline-block handling
                 boxOpen: n.style, // signals this is a boxed element
                 boxClose: n.style,
@@ -401,7 +417,7 @@ function collectTextRuns(node) {
             runs.push({ text: '', style: n.style, boxStyle: newBoxStyle, boxOpen: n.style });
         }
         for (const child of n.children) {
-            walk(child, isBox ? newBoxStyle : boxStyle);
+            walk(child, isBox ? newBoxStyle : boxStyle, newClipStyle, newStrokeImageStyle);
         }
         if (hasHorizSpacing) {
             runs.push({ text: '', style: n.style, boxStyle: newBoxStyle, boxClose: n.style });
@@ -509,6 +525,8 @@ function tokenizeString(ctx, text, run, allWords, cumState) {
                     isSpace: true,
                     isTab: true,
                     boxStyle: run.boxStyle,
+                    clipStyle: run.clipStyle,
+                    strokeImageStyle: run.strokeImageStyle,
                 });
                 continue;
             }
@@ -519,6 +537,8 @@ function tokenizeString(ctx, text, run, allWords, cumState) {
                 style: run.style,
                 isSpace,
                 boxStyle: run.boxStyle,
+                clipStyle: run.clipStyle,
+                strokeImageStyle: run.strokeImageStyle,
             });
         }
     }
@@ -554,6 +574,8 @@ function tokenizeString(ctx, text, run, allWords, cumState) {
                     style: run.style,
                     isSpace: true,
                     boxStyle: run.boxStyle,
+                    clipStyle: run.clipStyle,
+                    strokeImageStyle: run.strokeImageStyle,
                 });
                 continue;
             }
@@ -572,6 +594,8 @@ function tokenizeString(ctx, text, run, allWords, cumState) {
                             style: run.style,
                             isSpace: false,
                             boxStyle: run.boxStyle,
+                            clipStyle: run.clipStyle,
+                            strokeImageStyle: run.strokeImageStyle,
                         });
                     }
                     continue;
@@ -595,6 +619,8 @@ function tokenizeString(ctx, text, run, allWords, cumState) {
                 style: run.style,
                 isSpace: false,
                 boxStyle: run.boxStyle,
+                clipStyle: run.clipStyle,
+                strokeImageStyle: run.strokeImageStyle,
             });
         }
         // Propagate cumulative state back to caller (for \u200B/\u00AD splits)
@@ -638,6 +664,8 @@ function tokenizeRuns(ctx, runs) {
                 boxStyle: run.boxStyle,
                 boxOpen: run.boxOpen,
                 boxClose: run.boxClose,
+                clipStyle: run.clipStyle,
+                strokeImageStyle: run.strokeImageStyle,
             });
             continue;
         }
@@ -1292,6 +1320,12 @@ function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe
  */
 function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = false, clamp) {
     const results = [];
+    // Text nodes covered by an inline element declaring background-clip:text
+    // (clipRuns) or --rt-text-stroke-image (strokeImageRuns), mapped to that
+    // declaring element's style. A post-pass turns each per-line run of
+    // same-declarer nodes into a fragment-spanning paint box.
+    const clipRuns = new Map();
+    const strokeImageRuns = new Map();
     if (clamp && (clamp.exhausted || clamp.remaining <= 0)) {
         // An ancestor's clamp already used its line budget — drop this content.
         clamp.exhausted = true;
@@ -1575,7 +1609,7 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
                 else {
                     if (currentGroup)
                         groups.push(currentGroup);
-                    currentGroup = { text: word.text, style: word.style, width: word.width, boxStyle: word.boxStyle, x: 0, padBefore: pendingPad };
+                    currentGroup = { text: word.text, style: word.style, width: word.width, boxStyle: word.boxStyle, clipStyle: word.clipStyle, strokeImageStyle: word.strokeImageStyle, x: 0, padBefore: pendingPad };
                     pendingPad = 0;
                 }
             }
@@ -1604,14 +1638,19 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
             }
             // Emit text groups
             for (const group of groups) {
-                results.push({
+                const node = {
                     type: 'text',
                     text: group.text,
                     x: group.x + group.width, // x = right edge for RTL textAlign
                     y: lineBaselineY,
                     width: group.width,
                     style: { ...group.style, direction: 'rtl' },
-                });
+                };
+                results.push(node);
+                if (group.clipStyle)
+                    clipRuns.set(node, group.clipStyle);
+                if (group.strokeImageStyle)
+                    strokeImageRuns.set(node, group.strokeImageStyle);
             }
         }
         else {
@@ -1633,14 +1672,19 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
                 // right-aligns the whole line at the left edge (x=curX), drawing it
                 // off-screen. The canvas BiDi engine still reorders the embedded
                 // Arabic/Hebrew runs within the LTR line.
-                results.push({
+                const node = {
                     type: 'text',
                     text: lineText,
                     x: curX,
                     y: lineBaselineY,
                     width: measuredWidth,
                     style: { ...textWords[0].style, direction: 'ltr' },
-                });
+                };
+                results.push(node);
+                if (textWords[0].clipStyle)
+                    clipRuns.set(node, textWords[0].clipStyle);
+                if (textWords[0].strokeImageStyle)
+                    strokeImageRuns.set(node, textWords[0].strokeImageStyle);
             }
             else {
                 // Mixed styles: word by word
@@ -1653,14 +1697,19 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
                     if (word.boxOpen && word.boxClose) {
                         const s = word.style;
                         const textX = curX + s.marginLeft + s.borderLeftWidth + s.paddingLeft;
-                        results.push({
+                        const node = {
                             type: 'text',
                             text: word.text,
                             x: textX,
                             y: lineBaselineY,
                             width: cachedMeasureWidth(ctx, word.text),
                             style: word.style,
-                        });
+                        };
+                        results.push(node);
+                        if (word.clipStyle)
+                            clipRuns.set(node, word.clipStyle);
+                        if (word.strokeImageStyle)
+                            strokeImageRuns.set(node, word.strokeImageStyle);
                         curX += word.width;
                         continue;
                     }
@@ -1673,14 +1722,19 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
                         baselineY += verticalAlignShift(va, wA, wD, pfs, maxAscent, maxDescent, lineHeight);
                     }
                     const effectiveWidth = word.width + (word.isSpace ? justifyExtraPerSpace : 0);
-                    results.push({
+                    const node = {
                         type: 'text',
                         text: word.text,
                         x: curX,
                         y: baselineY,
                         width: effectiveWidth,
                         style: word.style,
-                    });
+                    };
+                    results.push(node);
+                    if (word.clipStyle)
+                        clipRuns.set(node, word.clipStyle);
+                    if (word.strokeImageStyle)
+                        strokeImageRuns.set(node, word.strokeImageStyle);
                     curX += effectiveWidth;
                 }
             }
@@ -1705,8 +1759,70 @@ function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = fal
         });
         curY += effectiveLineHeight;
     }
+    assignInlineFragmentBoxes(ctx, results, clipRuns, (node, s, box) => {
+        node.clip = {
+            image: s.backgroundImage && s.backgroundImage !== 'none' ? s.backgroundImage : undefined,
+            color: !isTransparent(s.backgroundColor) ? s.backgroundColor : undefined,
+            ...box,
+        };
+    });
+    assignInlineFragmentBoxes(ctx, results, strokeImageRuns, (node, s, box) => {
+        node.strokeImage = { image: s.webkitTextStrokeImage, ...box };
+    });
     return { nodes: results, height: curY - y };
 }
+/**
+ * Give each text run covered by an inline paint declarer (background-clip:text
+ * background, --rt-text-stroke-image) a paint box spanning the declaring
+ * element's fragment on its line.
+ *
+ * Browsers paint the declaring element's background over its inline fragment
+ * (the run of glyphs it covers on one line) and clip it to the text; with
+ * `background-size:100% 100%` the gradient fills that fragment box. Consecutive
+ * text nodes sharing the same declaring element (same style object) on the
+ * same baseline form one fragment; a wrap to the next line starts a new one
+ * (box-decoration-break:clone semantics — Chrome's default `slice` continues
+ * the gradient across line fragments; accepted approximation), and unlike a
+ * per-run gradient it never restarts per word.
+ */
+function assignInlineFragmentBoxes(ctx, results, runs, assign) {
+    if (runs.size === 0)
+        return;
+    const edges = (n) => n.style.direction === 'rtl'
+        ? { left: n.x - n.width, right: n.x } // RTL x is the right edge
+        : { left: n.x, right: n.x + n.width };
+    for (let i = 0; i < results.length;) {
+        const first = results[i];
+        const declarer = first.type === 'text' ? runs.get(first) : undefined;
+        if (!declarer) {
+            i++;
+            continue;
+        }
+        let j = i;
+        let left = Infinity, right = -Infinity;
+        while (j < results.length) {
+            const n = results[j];
+            if (n.type !== 'text' || runs.get(n) !== declarer || n.y !== first.y)
+                break;
+            const e = edges(n);
+            if (e.left < left)
+                left = e.left;
+            if (e.right > right)
+                right = e.right;
+            j++;
+        }
+        const { ascent, descent } = getFontMetrics(ctx, declarer);
+        const box = {
+            x: left,
+            y: first.y - ascent,
+            width: right - left,
+            height: ascent + descent,
+        };
+        for (let k = i; k < j; k++)
+            assign(results[k], declarer, box);
+        i = j;
+    }
+}
 // ─── Block layout ──────────────────────────────────────────────────────
 /**
  * Collapse margins between two adjacent block elements.
@@ -2019,21 +2135,41 @@ function addListMarker(ctx, box, node) {
     let markerX;
     let markerY = baselineY;
     let markerDirection = 'ltr';
+    // Style/width the marker glyph is actually DRAWN with. Numbers draw at the
+    // li font (unchanged); bullets scale up (see below), so keep these separate.
+    let markerDrawStyle = markerStyleObj;
+    let markerDrawWidth = markerWidth;
     const contentStartX = box.x + style.borderLeftWidth + style.paddingLeft;
     const boxRightEdge = box.x + box.width;
     if (isBullet) {
         const { ascent } = getFontMetrics(ctx, markerStyleObj);
         const m = ctx.measureText(node.listMarker);
-        const gap = explicitGap !== undefined ? explicitGap : 7 + ascent / 3;
+        // Blink's marker unit: the disc DIAMETER, the variable part of the gap, and
+        // the vertical centering all key off this one value (a 2/3·ascent marker
+        // box with a half-filling disc → ascent/3). Named once so tuning one keeps
+        // the trio in sync.
+        const markerUnit = ascent / 3;
+        const gap = explicitGap !== undefined ? explicitGap : 7 + markerUnit;
+        // Chrome paints bullet symbols (disc/circle/square) as a SYNTHETIC shape of
+        // that diameter, NOT the font's smaller '•'/'○'/'■' glyph (Roboto's '•' ink
+        // is ~0.22em vs Chrome's ~0.31em disc). Match it by scaling the glyph so its
+        // ink height equals markerUnit. Keeping the marker a text node means fill /
+        // stroke / shadow / gradient still apply exactly as before.
+        const inkH = (m.actualBoundingBoxAscent ?? 0) + (m.actualBoundingBoxDescent ?? 0);
+        const scale = inkH > 0 ? markerUnit / inkH : 1;
+        const inkRight = (m.actualBoundingBoxRight ?? markerWidth) * scale;
+        const inkLeft = (m.actualBoundingBoxLeft ?? 0) * scale;
+        const glyphInkCenter = (((m.actualBoundingBoxAscent ?? 0) - (m.actualBoundingBoxDescent ?? 0)) / 2) * scale;
         if (isRTL) {
             // actualBoundingBoxLeft is positive when ink extends left of origin
-            markerX = boxRightEdge + gap + (m.actualBoundingBoxLeft ?? 0);
+            markerX = boxRightEdge + gap + inkLeft;
         }
         else {
-            markerX = contentStartX - gap - (m.actualBoundingBoxRight ?? markerWidth);
+            markerX = contentStartX - gap - inkRight;
         }
-        const glyphInkCenter = ((m.actualBoundingBoxAscent ?? 0) - (m.actualBoundingBoxDescent ?? 0)) / 2;
-        markerY = baselineY - ascent / 3 + glyphInkCenter;
+        markerY = baselineY - markerUnit + glyphInkCenter;
+        markerDrawStyle = { ...markerStyleObj, fontSize: markerStyleObj.fontSize * scale };
+        markerDrawWidth = markerWidth * scale;
     }
     else {
         const gap = explicitGap !== undefined
@@ -2062,22 +2198,25 @@ function addListMarker(ctx, box, node) {
         text: node.listMarker,
         x: markerX,
         y: markerY,
-        width: markerWidth,
-        style: { ...markerStyleObj, textDecorationLine: 'none', textDecorations: [], fontWeight: ms?.fontWeight ?? 400, fontStyle: ms?.fontStyle ?? 'normal', direction: markerDirection },
+        width: markerDrawWidth,
+        style: { ...markerDrawStyle, textDecorationLine: 'none', textDecorations: [], fontWeight: ms?.fontWeight ?? 400, fontStyle: ms?.fontStyle ?? 'normal', direction: markerDirection },
     });
     // Also publish the marker through the LayoutLine stream so result.lines
     // sees the bullet/number alongside the item text. Markers are added AFTER
     // inline content is laid out, so they don't go through layoutInlineContent.
     // The buildLayoutTree sort+merge step picks up the marker by its baseline.
     // RTL numbered markers store their right edge in markerX (textAlign trick).
-    const markerLeftX = markerDirection === 'rtl' ? markerX - markerWidth : markerX;
+    // bounds.width is the (scaled) glyph ADVANCE, not its ink extent — same
+    // convention as numbered markers; the ink right edge itself is pinned to
+    // contentStart - gap above.
+    const markerLeftX = markerDirection === 'rtl' ? markerX - markerDrawWidth : markerX;
     _lines.push({
         y: Math.round(baselineY),
         text: node.listMarker,
         bounds: {
             x: markerLeftX,
             y: box.y + style.borderTopWidth + style.paddingTop,
-            width: markerWidth,
+            width: markerDrawWidth,
             height: lineHeight,
         },
     });