@react-x11/components 0.14.1 → 0.16.1

package/src/html/layout/inline.ts

@@ -45,6 +45,7 @@ import { inkColor, isTransparent, resolve } from '../css/values.js';
 import { tagOf } from '../dom.js';
 import {
   BOX_RAISES,
+  CONTROL_BASELINES,
   GRID_TRACKS,
   LINE_BOX_RAISES,
   PADDED_FACES,
@@ -483,7 +484,7 @@ function linesOf(
   // text a box's background shows through (`background-clip: text`): its
   // layouts are made through a recorder, so paint can lay the same text out
   // again with no ink of its own and fill it with that background
-  if (options.clipText && clipsText(block, items)) {
+  if (options.clipText && clipsText(items)) {
     CLIPPED_TEXT.add(block);
     fonts = recording(fonts);
   }
@@ -3329,6 +3330,22 @@ function atomicRaise(
  */
 function atomicBaseline(box: Box): number {
   const margin = box.height + box.marginTop + box.marginBottom;
+  // a control on its text's baseline, or on its border box's bottom,
+  // where layout containment does not keep its baseline in
+  const control =
+    box.style.contain & CONTAIN_LAYOUT ? undefined : CONTROL_BASELINES.get(box);
+  if (control === 'border') return box.marginTop + box.height;
+  if (control) {
+    const content = box.height - box.verticalExtra;
+    const text = control.ascent + control.descent;
+    return (
+      box.marginTop +
+      box.borderTop +
+      box.padTop +
+      (content - text) / 2 +
+      control.ascent
+    );
+  }
   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
@@ -3468,14 +3485,14 @@ function tableBaseline(table: Box): number | null {
  * chevron, and the line it was on came out shorter than a browser's.
  */
 function lastBaselineIn(box: Box): number | null {
-  if (box.kind === 'flex') return flexBaseline(box);
+  if (box.kind === 'flex') return heldIn(box, flexBaseline(box));
   if (box.lines?.length) {
     const line = box.lines[box.lines.length - 1];
-    return line.y + line.baseline;
+    return heldIn(box, line.y + line.baseline);
   }
   for (let i = box.children.length - 1; i >= 0; i -= 1) {
     const found = childBaseline(box.children[i], lastBaselineIn);
-    if (found !== null) return found;
+    if (found !== null) return heldIn(box, found);
   }
   return null;
 }
@@ -3483,15 +3500,32 @@ 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);
-  if (box.lines?.length) return box.lines[0].y + box.lines[0].baseline;
+  if (box.kind === 'flex') return heldIn(box, flexBaseline(box));
+  if (box.lines?.length) {
+    return heldIn(box, box.lines[0].y + box.lines[0].baseline);
+  }
   for (const child of box.children) {
     const found = childBaseline(child, firstBaselineIn);
-    if (found !== null) return found;
+    if (found !== null) return heldIn(box, found);
   }
   return null;
 }
 
+/**
+ * A box's baseline as its content gives it, held to its border box where
+ * the box is a scroll container (CSS Box Alignment 3, 9.1), at either edge
+ * — and only there: a box whose text overflows it otherwise, or clips it
+ * (`overflow: clip` is no scroll container), has the baseline its text
+ * has, as Chrome has it. Held at every box, so a scroll container deep in
+ * an item, or in an inline block, holds the baseline it gives to its box.
+ * The flex layout held every item to its height, and an item shorter
+ * than its text sat its text's descent below the items beside it.
+ */
+function heldIn(box: Box, found: number | null): number | null {
+  if (found === null || !scrolls(box.style)) return found;
+  return Math.min(Math.max(found, box.y), box.y + box.height);
+}
+
 function childBaseline(
   child: Box,
   inside: (box: Box) => number | null,
@@ -3502,9 +3536,9 @@ function childBaseline(
   // 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 —
-  // and a button that clips keeps its label's, here as on a line of its
-  // own (`atomicBaseline`)
+  // Alignment 3, 9.2): its first is its first line's, clipped or not, held
+  // to its border box (`heldIn`) — and a button that clips keeps its
+  // label's, here as on a line of its own (`atomicBaseline`)
   if (
     inside === lastBaselineIn &&
     child.kind !== 'flex' &&
@@ -5333,6 +5367,22 @@ function alignShift(
   }
 }
 
+/**
+ * Where an empty line in `style`'s block sets the point it holds, between
+ * `left` and `right`: an absolutely positioned box that was inline-level
+ * before it was made a block has its static position there, as though it
+ * were all its line held (CSS 2.1 10.3.7, as browsers place it). Such a
+ * line is its block's last, which `text-align-last` sets.
+ */
+export function emptyLinePoint(
+  style: ComputedStyle,
+  left: number,
+  right: number,
+): number {
+  const shift = alignShift(lastAlignOf(style), style.direction === 'rtl');
+  return left + (right - left) * shift;
+}
+
 /** How far a line of a layout moves to where it belongs in its box. */
 type LinePlacer = (line: { x: number; width: number }) => number;
 
@@ -5392,9 +5442,9 @@ export function inklessLayout(layout: object): TextLayoutLike | null {
 }
 
 /** Whether any of a block's text is text a background shows through. */
-function clipsText(block: Box, items: Item[]): boolean {
+function clipsText(items: Item[]): boolean {
   for (const item of items) {
-    if (item.kind === 'text' && !item.control && clipBoxOf(item.box, block)) {
+    if (item.kind === 'text' && !item.control && clipBoxOf(item.box)) {
       return true;
     }
   }
@@ -5402,12 +5452,16 @@ function clipsText(block: Box, items: Item[]): boolean {
 }
 
 /** The box whose background a text box's glyphs show: the nearest element
- *  box from it up to the block its lines are in with `background-clip:
- *  text`, or null. */
-export function clipBoxOf(box: Box | null, block: Box): Box | null {
+ *  box from it up with `background-clip: text`, or null. That is past the
+ *  block its lines are in: an ancestor's background is clipped to the text
+ *  of its descendants in flow and floating, a block, an inline-block, a
+ *  flex item or a table cell's among them (CSS Backgrounds 4, 3.7), and
+ *  `bg-clip-text` on a `<div>` round a heading showed nothing through it.
+ *  Not past an absolutely positioned box, whose text is its own. */
+export function clipBoxOf(box: Box | null): Box | null {
   for (let at = box; at; at = at.parent) {
     if (at.kind !== 'text' && at.style.backgroundClipText) return at;
-    if (at === block) break;
+    if (at.outOfFlow) return null;
   }
   return null;
 }