@react-x11/components 0.13.0 → 0.14.0

package/src/html/layout/inline.ts

@@ -42,8 +42,10 @@ import {
   scrolls,
 } from '../css/style.js';
 import { inkColor, isTransparent, resolve } from '../css/values.js';
+import { tagOf } from '../dom.js';
 import {
   BOX_RAISES,
+  GRID_TRACKS,
   LINE_BOX_RAISES,
   PADDED_FACES,
   isOffset,
@@ -415,13 +417,21 @@ interface Cut {
 function cutOf(
   style: ComputedStyle,
   clamp: InlineOptions['clamp'],
+  width: number,
 ): Cut | null {
   // the ellipsis a clamp ends in is placed apart (`ellipsized`)
   if (clamp) return { maxLines: clamp.lines, overflow: 'clip' };
+  // `text-overflow` is how the line is drawn where it runs out of its
+  // box, and no part of how wide it is (CSS Overflow 3, 5.1): in a box of
+  // no width, which shows none of it and is what the box's content is
+  // measured in at its least (`MIN_CONTENT_PROBE`), the line is left
+  // whole. Cut there, ntk left the ellipsis alone, and a button whose
+  // label is a `truncate` span was measured as wide as one
   if (
     style.textOverflow === 'ellipsis' &&
     !wraps(style) &&
-    style.overflowX !== 'visible'
+    style.overflowX !== 'visible' &&
+    width > 0
   ) {
     return { maxLines: 1, overflow: 'ellipsis', wrap: false };
   }
@@ -644,7 +654,7 @@ function linesOf(
     // line at a time, or the lines after the first were lost. A clamp is
     // the paragraph's, and stays one layout.
     const clamp = options.clamp;
-    let cut = cutOf(style, clamp);
+    let cut = cutOf(style, clamp, options.width);
     const perLine = cut !== null && !clamp && hasNewline;
     // an embedding cannot be cut into chunks
     if (perLine && !hasControls(items)) {
@@ -1420,6 +1430,7 @@ function linesOf(
           if (!text) continue;
           const m = hung.exec(text);
           if (!m) break;
+          if (!trailing) placed.trailRun = segment.runs[i];
           trailing = m[0] + trailing;
           if (m[0].length < text.length) break;
         }
@@ -1436,6 +1447,7 @@ function linesOf(
               : spaceAdvance(fonts, segment.runs[segment.runs.length - 1]) *
                 trailing.length;
           open.x += open.hang;
+          placed.trail = open.hang;
         }
       } else if (hung.total) holdHung();
       index = segment.nextIndex;
@@ -2390,6 +2402,24 @@ function finishLine(
   if (!open.texts.length && !open.atomics.length && !open.edges.length) {
     return null;
   }
+  if (open.hang > 0) {
+    // The line ends on the spaces its last text ends on, and they are
+    // removed (CSS Text 3, 4.1.2): the text takes no room for them, and
+    // what was set after them, the end edges of the boxes they are in,
+    // stands where the text's content ends. Left a space past it, a list
+    // item that ended its line was a space wider than its link.
+    for (let i = open.order.length - 1; i >= 0; i -= 1) {
+      const placed = open.order[i];
+      if (placed.kind === 'text') {
+        placed.item.trail = 0;
+        placed.item.trailRun = undefined;
+        break;
+      }
+      if (placed.kind !== 'edge') break;
+      placed.at -= open.hang;
+      placed.item.x -= open.hang;
+    }
+  }
   const reordered = levels
     ? levelPieces(open, levels) ||
       open.order.some((p) => p.kind === 'edge' && needsOrdering(p, rtl))
@@ -3298,7 +3328,19 @@ function atomicRaise(
  * be after.
  */
 function atomicBaseline(box: Box): number {
-  const bottom = box.height + box.marginTop + box.marginBottom;
+  const margin = box.height + box.marginTop + box.marginBottom;
+  const button = isButton(box);
+  // A `<button>` with no line in it sits on the bottom of its content box,
+  // not of its margin box: where its label would have sat. No specification
+  // says so and every browser does — Blink gives the element the content
+  // box as the edge its baseline is synthesized from
+  // (`HTMLButtonElement::AdjustStyle`). An icon button drawn of blocks, the
+  // three bars of a menu toggle, stood its padding under the baseline, and
+  // the line it was on was as much taller: GitHub's header, by four pixels.
+  // And so one whose layout containment keeps its label's baseline in.
+  const bottom = button
+    ? margin - box.marginBottom - box.borderBottom - box.padBottom
+    : margin;
   if (
     box.kind === 'replaced' ||
     // a box that clips sits on its bottom margin edge, for legacy reasons
@@ -3307,8 +3349,8 @@ function atomicBaseline(box: Box): number {
     // sits on its first item's, as it does unclipped. A MediaWiki button
     // is an `overflow: hidden` inline flex box of one icon, and stood its
     // whole height on the baseline, the line under it the strut's descent
-    // taller
-    (scrolls(box.style) && box.kind !== 'flex') ||
+    // taller. Nor a `<button>`, which sits on its label clipped or not
+    (scrolls(box.style) && box.kind !== 'flex' && !button) ||
     // layout containment keeps its baseline in (CSS Containment 2, 3.3)
     box.style.contain & CONTAIN_LAYOUT
   ) {
@@ -3325,17 +3367,31 @@ function atomicBaseline(box: Box): number {
   return baseline === null ? bottom : box.marginTop + (baseline - box.y);
 }
 
+/** Whether a box is a `<button>` element's: one drawn as the document's,
+ *  which a replaced control is not. */
+export function isButton(box: Box): boolean {
+  return (
+    box.el !== null && box.kind !== 'replaced' && tagOf(box.el) === 'button'
+  );
+}
+
 /**
- * A flex container's first baseline, or its last (CSS Flexbox 8.5): that
- * of the first item on its first line that is aligned by its baseline — the
- * last on its last line — or where none is, of its first item, or last,
- * in `order`. An item gives its own, or where it has none, its border
- * box's bottom edge. Not its last child's: an `inline-flex` of a small
- * item and a big one sat on the big one's baseline. Null for a box with no
- * item.
+ * A flex container's baseline, its first (CSS Flexbox 8.5): that of the
+ * first item on its first line that is aligned by its baseline, or where
+ * none is, of its first item, in `order`. An item gives its own, or where
+ * it has none, its border box's bottom edge. Not its last child's: an
+ * `inline-flex` of a small item and a big one sat on the big one's
+ * baseline. Null for a box with no item.
+ *
+ * A grid's is that of its first item in row-major order, by where it was
+ * placed and not where it was written (CSS Grid 1, 10.6).
  */
-function flexBaseline(box: Box, first: boolean): number | null {
-  let items: Box[] = [];
+function flexBaseline(box: Box): number | null {
+  if (box.style.grid) {
+    const item = GRID_TRACKS.get(box)?.first;
+    return item ? itemBaselineOf(item) : null;
+  }
+  const items: Box[] = [];
   let reordered = false;
   for (const child of box.children) {
     if (child.outOfFlow || child.isFloat) continue;
@@ -3345,15 +3401,11 @@ function flexBaseline(box: Box, first: boolean): number | null {
   }
   if (!items.length) return null;
   if (reordered) items.sort((a, b) => a.style.order - b.style.order);
-  if (!first) items = items.reverse();
   const style = box.style;
-  if (style.flexDirection.startsWith('row') && !style.grid) {
-    // a line ends where the next item does not go on along the main axis,
-    // which from the last item is where it goes on
+  if (style.flexDirection.startsWith('row')) {
+    // a line ends where the next item does not go on along the main axis
     const back =
-      ((style.flexDirection === 'row-reverse') !==
-        (style.direction === 'rtl')) !==
-      !first;
+      (style.flexDirection === 'row-reverse') !== (style.direction === 'rtl');
     let last = NaN;
     for (const item of items) {
       if (!Number.isNaN(last) && (back ? item.x >= last : item.x <= last)) {
@@ -3364,24 +3416,20 @@ function flexBaseline(box: Box, first: boolean): number | null {
         item.style.alignSelf === 'auto'
           ? style.alignItems
           : item.style.alignSelf;
-      if (align === 'baseline') return itemBaselineOf(item, first, style);
+      if (align === 'baseline') return itemBaselineOf(item);
     }
   }
-  return itemBaselineOf(items[0], first, style);
+  return itemBaselineOf(items[0]);
 }
 
-/** A flex item's baseline, in document coordinates: its first line's or
- *  its last's — its bottom margin edge where it clips what it holds — or
- *  where it has none, its border box's bottom edge, which a grid does not
- *  take from its item, and has none of its own then (CSS Grid 1, 9). */
-function itemBaselineOf(
-  item: Box,
-  first: boolean,
-  container: ComputedStyle,
-): number | null {
-  const found = childBaseline(item, first ? firstBaselineIn : lastBaselineIn);
-  if (found !== null) return found;
-  return container.grid ? null : item.y + item.height;
+/** A flex item's baseline or a grid item's, in document coordinates: its
+ *  first line's, or where it has none, one synthesized from its border
+ *  edges, the bottom one (CSS Flexbox 8.5, CSS Grid 1, 10.6). A grid took
+ *  none from such an item and had none of its own: a grid of icons stood
+ *  its whole height on the baseline, where a browser stands it on the
+ *  first icon's bottom edge. */
+function itemBaselineOf(item: Box): number {
+  return childBaseline(item, firstBaselineIn) ?? item.y + item.height;
 }
 
 /**
@@ -3409,10 +3457,18 @@ function tableBaseline(table: Box): number | null {
  * what overflows it gives its bottom margin edge and no deeper, whatever
  * text it holds (CSS Box Alignment's synthesized baseline). Null where
  * nothing in it has one.
+ *
+ * A flex box or a grid among them gives its first baseline, the one it has
+ * on a line of its own, and a table gives none: what an inline-block takes
+ * from a block-level child in Blink, where only a block container is asked
+ * for its last (`UseLastBaselineForInlineBaseline`), and in Gecko, where a
+ * child is asked for its default one and a table is passed over
+ * (`nsBlockFrame::GetNaturalBaselineBOffset`). Asked for its last, a grid
+ * of an icon, a label and a chevron in a button sat the button on the
+ * chevron, and the line it was on came out shorter than a browser's.
  */
 function lastBaselineIn(box: Box): number | null {
-  // a flex box's is its items', in the order it lays them out
-  if (box.kind === 'flex') return flexBaseline(box, false);
+  if (box.kind === 'flex') return flexBaseline(box);
   if (box.lines?.length) {
     const line = box.lines[box.lines.length - 1];
     return line.y + line.baseline;
@@ -3427,7 +3483,7 @@ function lastBaselineIn(box: Box): number | null {
 /** The same, from the first line box or child: a table's baseline is its
  *  first row's, and so is a table cell's. */
 export function firstBaselineIn(box: Box): number | null {
-  if (box.kind === 'flex') return flexBaseline(box, true);
+  if (box.kind === 'flex') return flexBaseline(box);
   if (box.lines?.length) return box.lines[0].y + box.lines[0].baseline;
   for (const child of box.children) {
     const found = childBaseline(child, firstBaselineIn);
@@ -3443,12 +3499,17 @@ function childBaseline(
   if (child.outOfFlow || child.isFloat || child.kind === 'replaced') {
     return null;
   }
+  // a table is passed over for a block's last baseline (`lastBaselineIn`)
+  if (inside === lastBaselineIn && child.kind === 'table') return null;
   // the legacy rule is a block container's last baseline alone (CSS Box
-  // Alignment 3, 9.2): its first is its first line's, clipped or not
+  // Alignment 3, 9.2): its first is its first line's, clipped or not —
+  // and a button that clips keeps its label's, here as on a line of its
+  // own (`atomicBaseline`)
   if (
     inside === lastBaselineIn &&
     child.kind !== 'flex' &&
-    scrolls(child.style)
+    scrolls(child.style) &&
+    !isButton(child)
   ) {
     return child.y + child.height + child.marginBottom;
   }
@@ -4143,6 +4204,8 @@ const RUN_STYLE = [
   'underlineOffset',
   'underlineThickness',
   'strike',
+  'strikeStyle',
+  'strikeThickness',
 ] as const;
 
 /**
@@ -4710,26 +4773,57 @@ export function runFor(text: string, style: ComputedStyle): TextRun {
   // colours of the elements that set them (`decorate`)
   if (style.underline) {
     run.underline = style.underline;
-    // CSS's five rule styles and SGR 4's five are the same set under two
-    // names; richtext speaks SGR's, so `solid` is `single` and `wavy` is
-    // `curly`. The other three are spelled identically.
-    run.underlineStyle =
-      style.underlineStyle === 'wavy'
-        ? 'curly'
-        : style.underlineStyle === 'solid'
-          ? 'single'
-          : style.underlineStyle;
-    if (style.underlineOffset !== null) {
-      run.underlineOffset = style.underlineOffset;
-    }
-    if (style.underlineThickness !== null) {
-      run.underlineThickness = style.underlineThickness;
+    run.underlineStyle = ruleStyle(style.underlineStyle);
+    // The band the rule is drawn in: as thick as the box that set it made
+    // it (`usedThickness`), and as far under the baseline as that box said.
+    // `auto` leaves how far to the user agent, at or under the baseline
+    // (CSS Text Decoration 4, 2.7 and 2.8), and it is half the rule's
+    // thickness, a pixel at the least — Blink's gap, which keeps a thick
+    // rule as clear of its letters as a thin one. A length is from the
+    // baseline itself.
+    const band = style.underlineThickness ?? 1;
+    const top =
+      style.underlineOffset === null
+        ? Math.max(1, Math.ceil(band / 2))
+        : Math.round(style.underlineOffset);
+    if (run.underlineStyle === 'dotted' || run.underlineStyle === 'dashed') {
+      // dots and dashes are a stroke along the band's middle, its width the
+      // nearest whole pixel to the band's: 1.6 is two, where a solid rule's
+      // is the one pixel it fills
+      const width = Math.round(band);
+      run.underlineThickness = width;
+      run.underlineOffset =
+        top + Math.floor(Math.max(band / 2, 0.5)) - Math.floor(width / 2);
+    } else {
+      run.underlineThickness = Math.floor(band);
+      run.underlineOffset = top;
     }
   }
-  if (style.lineThrough) run.strike = style.lineThrough;
+  if (style.lineThrough) {
+    run.strike = style.lineThrough;
+    run.strikeStyle = ruleStyle(style.lineThroughStyle);
+    // as thick as the box that set it made it, on whole pixels as the
+    // underline's is: a solid rule fills the ones it covers, and dots and
+    // dashes are the nearest whole pixel wide. Where it is drawn is each
+    // run's own face's to say (`paintRunRules`).
+    const band = style.lineThroughThickness ?? 1;
+    run.strikeThickness =
+      run.strikeStyle === 'dotted' || run.strikeStyle === 'dashed'
+        ? Math.round(band)
+        : Math.floor(band);
+  }
   return run;
 }
 
+/** A CSS rule style as richtext names it. CSS's five and SGR 4's five are
+ *  the same set under two names; richtext speaks SGR's, so `solid` is
+ *  `single` and `wavy` is `curly`. The other three are spelled identically. */
+function ruleStyle(
+  style: ComputedStyle['underlineStyle'],
+): NonNullable<TextRun['underlineStyle']> {
+  return style === 'wavy' ? 'curly' : style === 'solid' ? 'single' : style;
+}
+
 /**
  * Maps a code-unit offset in text handed to `TextLayout` back to its offset
  * in the document index. The two differ because a layout covers one segment