@react-x11/components 0.10.0 → 0.11.0

package/src/html/node.ts

@@ -51,14 +51,22 @@ import { codePointAtOffset, codeUnitOffsets } from '../internal/text.js';
 import { attr, HtmlSource, imageUrlOf, isElement, tagOf } from './dom.js';
 import type { Document } from './dom.js';
 import { Cascade } from './css/cascade.js';
+import type { MetricFace } from './css/cascade.js';
 import { mediaMatches, parseStylesheet } from './css/parse.js';
 import type { Stylesheet } from './css/parse.js';
 import { uaStylesheet } from './css/ua.js';
 import type { ComputedStyle, RootLook } from './css/style.js';
-import { buildBoxes, CONTENT_IMAGES } from './layout/boxes.js';
+import {
+  BOX_RAISES,
+  buildBoxes,
+  CONTENT_IMAGES,
+  LINE_BOX_RAISES,
+  SHIFTED_LINES,
+} from './layout/boxes.js';
 import type {
   Box,
   BoxTree,
+  LineBox,
   LineText,
   ReplacedKind,
   TextLayoutLike,
@@ -67,7 +75,7 @@ import { layoutDocument } from './layout/block.js';
 import { TextLayoutCache } from './layout/cache.js';
 import { shapingSafe } from './layout/shaping.js';
 import { SurfaceCache } from './surfaces.js';
-import { inlineDecoration, runFor } from './layout/inline.js';
+import { faceExtentOf, inlineDecoration, runFor } from './layout/inline.js';
 import type { FontsLike } from './layout/inline.js';
 import type { TextRun } from '../richtext/index.js';
 // Through the inline module rather than a second cache: the offsets table for
@@ -583,9 +591,9 @@ export class HtmlViewNode extends Node {
         width,
         this._viewportHeight(),
         this._scale,
-        fonts ? (family, size) => xHeightOf(fonts, family, size) : null,
-        fonts ? (family, size) => zeroWidthOf(fonts, family, size) : null,
-        fonts ? (family, size) => normalLineOf(fonts, family, size) : null,
+        fonts ? (face) => xHeightOf(fonts, face) : null,
+        fonts ? (face) => zeroWidthOf(fonts, face) : null,
+        fonts ? (face) => normalLineOf(fonts, face) : null,
         faces.length ? this._webFonts : null,
       );
       this._sheetsRead = {
@@ -1188,17 +1196,38 @@ export class HtmlViewNode extends Node {
       rect = { x: box.x, y: box.y, width: box.width, height: box.height };
     } else {
       const bands: Rect[] = [];
+      // an inline box's fragments are on the lines of the block it is laid
+      // out in, and no text of a float or a positioned box inside it — on
+      // lines of their own — is one of them (CSSOM View 6.1): a list item
+      // made inline around an absolute link measured as the link
+      let block: Box | null = box.parent;
+      while (block && !block.lines) block = block.parent;
       if (box.subtreeTextEnd > box.subtreeTextStart) {
-        collectBands(
-          tree.root,
-          box.subtreeTextStart,
-          box.subtreeTextEnd,
-          0,
-          0,
-          bands,
-        );
+        if (box.kind === 'inline' && block?.lines) {
+          lineBands(
+            block.lines,
+            box.subtreeTextStart,
+            box.subtreeTextEnd,
+            0,
+            0,
+            bands,
+          );
+        } else {
+          collectBands(
+            tree.root,
+            box.subtreeTextStart,
+            box.subtreeTextEnd,
+            0,
+            0,
+            bands,
+          );
+        }
+      }
+      if (box.kind === 'inline') {
+        fragmentReach(box, bands);
+        const fonts = this._layouts?.fonts;
+        if (fonts) fragmentHeights(box, bands, fonts);
       }
-      if (box.kind === 'inline') fragmentReach(box, bands);
       for (const band of bands) rect = rect ? unionRect(rect, band) : band;
       if (!rect) {
         // an empty subtree's range is `[0, 0)`, wherever it stands: where
@@ -1936,56 +1965,96 @@ function fragmentReach(box: Box, out: Rect[]): void {
   }
 }
 
-function collectBands(
-  box: Box,
+/**
+ * An inline element's bands made as tall as its fragments' border boxes,
+ * as CSSOM View takes an inline box's client rects (6.1): its font's
+ * content area about its own baseline, with the padding and the border
+ * above and below it, which take no room on the line (CSS 2.1 10.6.1) and
+ * which paint draws the background over (`paintInlineBoxes`). A band is a
+ * line's height across until then: a link padded 10px below measured as
+ * tall as its line and no taller.
+ */
+function fragmentHeights(box: Box, bands: Rect[], fonts: FontsLike): void {
+  let block = box.parent;
+  while (block && !block.lines) block = block.parent;
+  if (!block?.lines?.length) return;
+  const face = faceExtentOf(fonts, box.style);
+  const byTop = new Map<number, LineBox>();
+  for (const line of block.lines) byTop.set(line.y, line);
+  for (let i = 0; i < bands.length; i += 1) {
+    const band = bands[i];
+    const line = byTop.get(band.y);
+    if (!line) continue;
+    // on its own baseline, which `vertical-align` may raise off the line's
+    const raise = SHIFTED_LINES.has(line)
+      ? (LINE_BOX_RAISES.get(line)?.get(box) ?? BOX_RAISES.get(box) ?? 0)
+      : 0;
+    const baseline = line.y + line.baseline - raise;
+    const top = baseline - face.ascent - box.padTop - box.borderTop;
+    const bottom = baseline + face.descent + box.padBottom + box.borderBottom;
+    bands[i] = { x: band.x, y: top, width: band.width, height: bottom - top };
+  }
+}
+
+/** The bands of a text range on one block's own lines. */
+function lineBands(
+  lines: readonly LineBox[],
   from: number,
   to: number,
   dx: number,
   dy: number,
   out: Rect[],
 ): void {
-  if (box.subtreeTextEnd <= box.subtreeTextStart) return;
-  if (box.subtreeTextEnd <= from || box.subtreeTextStart >= to) return;
-  if (box.lines) {
-    const lines = box.lines;
-    // First line whose text can reach `from`, by binary search over the
-    // sorted text starts; stop at the first line past `to`.
-    let lo = 0;
-    let hi = lines.length;
-    while (lo < hi) {
-      const mid = (lo + hi) >> 1;
-      if (lines[mid].textEnd > from) hi = mid;
-      else lo = mid + 1;
-    }
-    for (let i = lo; i < lines.length; i += 1) {
-      const line = lines[i];
-      if (line.textStart >= to) break;
-      if (line.textEnd > from && line.textStart < to) {
-        for (const text of line.texts) {
-          const natural = text.layout.lines[text.layoutLine];
-          if (!natural) continue;
-          const a = Math.max(from, text.textStart);
-          const b = Math.min(to, text.textEnd);
-          if (b <= a) continue;
-          const offsets = layoutOffsetsOf(text.layout);
-          for (const band of bandsFor(
-            text.layout,
-            natural,
-            offsets,
-            layoutOffsetOf(text, a),
-            layoutOffsetOf(text, b, true),
-          )) {
-            out.push({
-              x: dx + band.x + text.drawX,
-              y: dy + line.y,
-              width: band.width,
-              height: line.height,
-            });
-          }
+  // First line whose text can reach `from`, by binary search over the
+  // sorted text starts; stop at the first line past `to`.
+  let lo = 0;
+  let hi = lines.length;
+  while (lo < hi) {
+    const mid = (lo + hi) >> 1;
+    if (lines[mid].textEnd > from) hi = mid;
+    else lo = mid + 1;
+  }
+  for (let i = lo; i < lines.length; i += 1) {
+    const line = lines[i];
+    if (line.textStart >= to) break;
+    if (line.textEnd > from && line.textStart < to) {
+      for (const text of line.texts) {
+        const natural = text.layout.lines[text.layoutLine];
+        if (!natural) continue;
+        const a = Math.max(from, text.textStart);
+        const b = Math.min(to, text.textEnd);
+        if (b <= a) continue;
+        const offsets = layoutOffsetsOf(text.layout);
+        for (const band of bandsFor(
+          text.layout,
+          natural,
+          offsets,
+          layoutOffsetOf(text, a),
+          layoutOffsetOf(text, b, true),
+        )) {
+          out.push({
+            x: dx + band.x + text.drawX,
+            y: dy + line.y,
+            width: band.width,
+            height: line.height,
+          });
         }
       }
     }
   }
+}
+
+function collectBands(
+  box: Box,
+  from: number,
+  to: number,
+  dx: number,
+  dy: number,
+  out: Rect[],
+): void {
+  if (box.subtreeTextEnd <= box.subtreeTextStart) return;
+  if (box.subtreeTextEnd <= from || box.subtreeTextStart >= to) return;
+  if (box.lines) lineBands(box.lines, from, to, dx, dy, out);
   // Atomics are ordinary children, reached below.
   for (const child of box.children) {
     if (child.kind === 'text' || child.kind === 'break') continue;
@@ -2375,45 +2444,42 @@ function ownerOf(boxes: readonly Box[], index: number): Element | null {
 
 export type { ControlRect, ReplacedKind, ResourceRequest, ResourceResult };
 
-/** The advance of a font's "0" at a size, laid out: null where the engine
- *  cannot lay it out. */
-function zeroWidthOf(
-  fonts: FontsLike,
-  family: string,
-  size: number,
-): number | null {
+/** The advance of a face's "0", laid out: null where the engine cannot
+ *  lay it out. */
+function zeroWidthOf(fonts: FontsLike, face: MetricFace): number | null {
+  const { family, size, weight } = face;
+  // a run is upright or slanted, as `inline.ts` sets one
+  const style = face.style === 'normal' ? 'normal' : 'italic';
   try {
-    return fonts.layout([{ text: '0', family, size }], { family, size }, {})
-      .width;
+    const run = { family, size, weight, style } as const;
+    return fonts.layout([{ text: '0', ...run }], run, {}).width;
   } catch {
     return null;
   }
 }
 
-/** A font's own line height at a size, as the engine reports it: null
- *  where it cannot say. */
-function normalLineOf(
-  fonts: FontsLike,
-  family: string,
-  size: number,
-): number | null {
+/** A face's own line height, as the engine reports it: null where it
+ *  cannot say. */
+function normalLineOf(fonts: FontsLike, face: MetricFace): number | null {
+  const { family, size, weight, style } = face;
   try {
-    const line = fonts.match(family, { size }).metrics(size).lineHeight;
+    const line = fonts
+      .match(family, { size, weight, style })
+      .metrics(size).lineHeight;
     return line > 0 ? line : null;
   } catch {
     return null;
   }
 }
 
-/** A font's x-height at a size, as the engine reports it: null where the
- *  face states none, or the engine does not say. */
-function xHeightOf(
-  fonts: FontsLike,
-  family: string,
-  size: number,
-): number | null {
+/** A face's x-height, as the engine reports it: null where the face
+ *  states none, or the engine does not say. */
+function xHeightOf(fonts: FontsLike, face: MetricFace): number | null {
+  const { family, size, weight, style } = face;
   try {
-    const metrics = fonts.match(family, { size }).metrics(size) as {
+    const metrics = fonts
+      .match(family, { size, weight, style })
+      .metrics(size) as {
       xHeight?: number | null;
     };
     const x = metrics.xHeight;