@react-x11/components 0.16.0 → 0.16.1

package/src/html/layout/boxes.ts

@@ -562,6 +562,40 @@ export type ReplacedKind =
   /** An inline `<svg>`: a drawing, sized by what it says of its size. */
   | 'svg';
 
+/**
+ * Where a control sits on the line, as Chrome sets it: a field, a select
+ * or an input button on the baseline of the text it shows, its line in its
+ * face centred in its content box — that face's ascent and descent — and a
+ * checkbox, a radio button or a range on its border box's bottom, its
+ * bottom margin under the line. A `<textarea>` is none of these, and sits
+ * on its bottom margin edge as a box that scrolls does.
+ */
+export const CONTROL_BASELINES = new WeakMap<
+  Box,
+  InlineDecoration | 'border'
+>();
+
+function controlBaseline(
+  el: Element,
+  kind: ReplacedKind,
+  style: ComputedStyle,
+  options: BuildOptions,
+): InlineDecoration | 'border' | null {
+  if (kind === 'checkbox' || kind === 'radio') return 'border';
+  if (kind === 'input' && (attr(el, 'type') ?? '').toLowerCase() === 'range') {
+    return 'border';
+  }
+  if (kind !== 'input' && kind !== 'select' && kind !== 'button') return null;
+  // a list box shows rows, and sits on its bottom edge
+  if (kind === 'select' && Number(attr(el, 'size') ?? 1) > 1) return null;
+  return (
+    options.faceExtent?.(style) ?? {
+      ascent: style.fontSize * 0.8,
+      descent: style.fontSize * 0.2,
+    }
+  );
+}
+
 /** A replaced box's intrinsic dimensions, in device pixels. */
 export interface Intrinsic {
   /** Its size — or, on an axis `missing` names, the default object size of
@@ -853,6 +887,10 @@ export interface BuildOptions {
    *  pixels: what a list marker's image with no size of its own is sized
    *  by (`_markerImageSize`). Where it is not known, 0.8em. */
   faceAscent?(style: ComputedStyle): number | undefined;
+  /** How far a style's first face reaches above and below its baseline,
+   *  in device pixels: where a control sets its text, which is where its
+   *  baseline is (`CONTROL_BASELINES`). */
+  faceExtent?(style: ComputedStyle): InlineDecoration | undefined;
   /** The size a real widget wants, so the box in the flow is the size the
    *  control will be drawn at. */
   controlSize(
@@ -1486,6 +1524,8 @@ class Builder {
       ratio: 0,
     };
     this._controls.push(box);
+    const baseline = controlBaseline(el, replaced, style, this._options);
+    if (baseline) CONTROL_BASELINES.set(box, baseline);
     // A control's value is the widget's, not the document's: putting it in
     // the selection index would make Ctrl+A copy the contents of every text
     // field, which no document viewer does.

package/src/html/layout/flex.ts

@@ -252,6 +252,14 @@ export function layoutFlex(
   const direction =
     box.style.direction === 'rtl' ? Y.DIRECTION_RTL : Y.DIRECTION_LTR;
   const row = box.style.flexDirection.startsWith('row');
+  // Yoga aligns the lines of a box that wraps, or of a row that aligns by
+  // baselines, in one pass of its own, which drops a margin
+  // (`lineMarginFix`) — and not those of a column that does not wrap,
+  // whatever it aligns by, whose margins Yoga keeps
+  let baselines =
+    row &&
+    (box.style.alignItems === 'baseline' ||
+      items.some(({ box: child }) => child.style.alignSelf === 'baseline'));
   // An `auto` margin across a row that wraps takes the room its line has
   // past the item (CSS Flexbox 8.1, 9.6), where Yoga's pass that sets the
   // items across their lines reads an item's alignment and not its
@@ -264,6 +272,37 @@ export function layoutFlex(
       const aligned = autoAcross(child.style, reverse);
       if (aligned) node.setAlignSelf(ALIGN[aligned]);
     }
+  } else if (baselines) {
+    // Yoga takes a row that does not wrap through that pass as well, and
+    // sets its line there as tall as its items and not the row: an item
+    // centred or at the end of a row of a height was centred or ended in
+    // the items' height. It has sized that line already, as the most any
+    // item reaches down to its bottom edge — a baseline, to Yoga — and the
+    // largest bottom margin besides, whichever items those are: a row of
+    // no height of its own was as tall as both. And it sets an item with
+    // an `auto` margin by its baseline: at the top, where the margin puts
+    // it at the bottom, and every item beside it as far down as its height
+    // reached. That item takes no part in aligning the line by baselines
+    // (9.4 step 8), and Yoga is told the alignment its margins come to.
+    // With fewer than two items left that do take part, they come to their
+    // line's start (8.3), which Yoga is told as well: then nothing in the
+    // row is aligned by its baseline, Yoga takes no such pass, and the line
+    // is the row. Two or more are lined up by their baselines once those
+    // are known (`baselineLines`), and the row laid out again with none.
+    for (const { box: child, node } of items) {
+      const aligned = autoAcross(child.style, false);
+      if (aligned) node.setAlignSelf(ALIGN[aligned]);
+    }
+    const aligned = items.filter(({ box: child }) =>
+      byBaseline(box.style, child.style),
+    );
+    if (aligned.length < 2) {
+      for (const { node } of aligned) node.setAlignSelf(Y.ALIGN_FLEX_START);
+      if (box.style.alignItems === 'baseline') {
+        root.setAlignItems(Y.ALIGN_FLEX_START);
+      }
+      baselines = false;
+    }
   }
   // frozen at its least size on the one line of a box that does not
   // wrap, by a basis where Yoga takes one along the main axis
@@ -288,12 +327,13 @@ export function layoutFlex(
   // `align-content` spaces out come out of its layout as tall as their
   // line and the room after it as well (`unspace`): laid out so that each
   // is as tall as its line, where the box has room to space them out in —
-  // a height, or a minimum one
+  // a height, or a minimum one — and with the lines at its start where it
+  // may be too short for them, a height or a maximum one
   const spaced =
     row &&
     bounded &&
     !hold.frozen &&
-    (height !== null || floor > 0) &&
+    (height !== null || floor > 0 || ceiling < Infinity) &&
     spacesLines(box.style);
   const ask =
     restretched.length > 0
@@ -409,18 +449,15 @@ export function layoutFlex(
     }
   }
 
-  // Yoga aligns the lines of a box that wraps, or aligns by baselines, in
-  // one pass of its own, which drops a margin (`lineMarginFix`)
-  const baselines =
-    box.style.alignItems === 'baseline' ||
-    items.some(({ box: child }) => child.style.alignSelf === 'baseline');
+  // whether Yoga's last layout took its pass for lines (`placeItems`)
+  let lined = box.style.flexWrap !== 'nowrap' || baselines;
   let bottom = placeItems(
     box,
     ctx,
     items,
     row,
     own,
-    box.style.flexWrap !== 'nowrap' || baselines,
+    lined,
     contentWidth,
     undefined,
     crossed ? crossLines(box.style, items, contentWidth, columnGap) : undefined,
@@ -430,11 +467,11 @@ export function layoutFlex(
   // by the flex layout again, set at their lines' starts with the margins
   // that put their baselines together, which makes each line as tall as
   // that does
-  const lines = row && baselines ? baselineLines(box.style, items) : null;
+  const lines = baselines ? baselineLines(box.style, items) : null;
+  const started = new Set<Box>();
   if (lines) {
     // every one of them, and the box's own `baseline` too, which is what
     // takes Yoga down that pass
-    const started = new Set<Box>();
     for (const line of lines) {
       line.forEach(({ box: child, node }, i) => {
         node.setAlignSelf(Y.ALIGN_FLEX_START);
@@ -445,6 +482,8 @@ export function layoutFlex(
     if (box.style.alignItems === 'baseline') {
       root.setAlignItems(Y.ALIGN_FLEX_START);
     }
+    // so it takes it only where the row wraps
+    lined = box.style.flexWrap !== 'nowrap';
     ctx.flexDepth = depth + 1;
     try {
       calculate();
@@ -457,7 +496,7 @@ export function layoutFlex(
       items,
       row,
       own,
-      box.style.flexWrap !== 'nowrap',
+      lined,
       contentWidth,
       started,
     );
@@ -485,8 +524,9 @@ export function layoutFlex(
       items,
       row,
       own,
-      box.style.flexWrap !== 'nowrap' || baselines,
+      lined,
       contentWidth,
+      started,
     );
   }
 
@@ -680,7 +720,7 @@ function placeItems(
     const placed = crossed?.get(child);
     const across =
       lined && !placed
-        ? lineMarginFix(box.style, child, node, row, started?.has(child))
+        ? lineMarginFix(box.style, child, node, row, own, started?.has(child))
         : 0;
     const itemHeight = row ? heightOf(node, laid) : laid.main;
     const left =
@@ -896,6 +936,14 @@ function applyItem(
   if (style.flexShrink) node.setFlexShrink(style.flexShrink);
   if (style.alignSelf !== AUTO)
     node.setAlignSelf(ALIGN[style.alignSelf] ?? Y.ALIGN_AUTO);
+  // `stretch` sets an item whose height is a percentage of none at its
+  // line's start, as tall as its content (`heightOfNone`), where Yoga,
+  // which is handed no height for it, stretched it across the line
+  if (row && box.parent && heightOfNone(style, own)) {
+    const align =
+      style.alignSelf === AUTO ? box.parent.style.alignItems : style.alignSelf;
+    if (align === 'stretch') node.setAlignSelf(Y.ALIGN_FLEX_START);
+  }
 
   // Yoga's sizes are border boxes, as `box-sizing: border-box` has them;
   // a `content-box` length is the content's, and the item's padding and
@@ -2858,22 +2906,26 @@ function baselineLines<T extends { box: Box }>(
       line = [];
     }
     last = box.x;
-    const own = box.style;
-    const aligned = own.alignSelf === AUTO ? style.alignItems : own.alignSelf;
-    // an `auto` margin across the line takes it over alignment
-    if (
-      aligned === 'baseline' &&
-      own.marginTop !== AUTO &&
-      own.marginBottom !== AUTO
-    ) {
-      line.push(item);
-    }
+    if (byBaseline(style, box.style)) line.push(item);
   }
   close();
   // one alone on its line is at its start already
   return several ? out : null;
 }
 
+/** Whether an item takes part in aligning its line by baselines (CSS
+ *  Flexbox 8.3, 9.4 step 8): aligned by its baseline, with no `auto`
+ *  margin across the line, which takes it over its alignment. */
+function byBaseline(container: ComputedStyle, item: ComputedStyle): boolean {
+  const aligned =
+    item.alignSelf === AUTO ? container.alignItems : item.alignSelf;
+  return (
+    aligned === 'baseline' &&
+    item.marginTop !== AUTO &&
+    item.marginBottom !== AUTO
+  );
+}
+
 /**
  * Whether Yoga made a line of a row that wraps the row's height, where its
  * items make it another (CSS Flexbox 9.4, steps 7 and 8; `layoutFlex`).
@@ -2999,13 +3051,16 @@ function autoAcross(
  * top one; and one centred, half the difference. A column's, whose cross
  * axis runs right to left, or that wraps in reverse, is left as Yoga has
  * it, and so is an item an `auto` margin aligns in a row that does not
- * wrap.
+ * wrap: where Yoga still takes that pass for such a row, its items are
+ * laid out again without it, aligned by their baselines (`layoutFlex`).
  */
 function lineMarginFix(
   container: ComputedStyle,
   item: Box,
   node: YogaNode,
   row: boolean,
+  /** Whether the flex box has a definite height. */
+  own: boolean,
   started = false,
 ): number {
   const reverse = container.flexWrap === 'wrap-reverse';
@@ -3024,6 +3079,11 @@ function lineMarginFix(
         : null;
   } else {
     align = style.alignSelf === AUTO ? container.alignItems : style.alignSelf;
+    // which sets one whose height is a percentage of none at its line's
+    // start, as Yoga is told it does (`applyItem`)
+    if (align === 'stretch' && row && heightOfNone(style, own)) {
+      align = 'flex-start';
+    }
   }
   const leading = node.getComputedMargin(row ? Y.EDGE_TOP : Y.EDGE_LEFT);
   const trailing = node.getComputedMargin(row ? Y.EDGE_BOTTOM : Y.EDGE_RIGHT);
@@ -3041,11 +3101,14 @@ function lineMarginFix(
 
 /** An item's first baseline, down from its border edge: its content's
  *  first line's, or where it has none, or is replaced, one synthesized
- *  from its border box — its bottom edge. */
+ *  from its border box — its bottom edge. Past that edge where the line
+ *  is: only a scroll container's is held to its box (`firstBaselineIn`),
+ *  and an item shorter than its text, or whose padding puts the text
+ *  under it, sits on its text where it had sat on its bottom. */
 function itemBaseline(item: Box): number {
   if (item.kind !== 'replaced') {
     const found = firstBaselineIn(item);
-    if (found !== null) return Math.min(found - item.y, item.height);
+    if (found !== null) return found - item.y;
   }
   return item.height;
 }
@@ -3197,6 +3260,16 @@ function spacesLines(style: ComputedStyle): boolean {
  * makes too, and is kept. Where they do, Yoga is asked again as the row
  * is, for where the lines and the items are, and the heights are kept from
  * the first layout.
+ *
+ * And where the lines are taller than the row, `space-around` and
+ * `space-evenly` fall back to `safe center`, which sets them at the row's
+ * own start, its top (CSS Box Alignment 3, 4.3 and 5.1; CSS Flexbox 8.4).
+ * Yoga falls back to `flex-start` for both, which is the bottom where the
+ * lines run bottom to top, and ran them out past the row's top. It sets
+ * the lines of a row that wraps in reverse top to bottom and turns them
+ * over once they are set, so it is asked for them at `flex-end` there,
+ * which comes out at the top — where the lines it set at their start, or
+ * spaced, reach past the row's bottom.
  */
 function unspace(
   root: YogaNode,
@@ -3206,6 +3279,16 @@ function unspace(
   layout: () => void,
 ): void {
   for (const { laid } of items) laid.unstretched = NaN;
+  const lines = root.getAlignContent();
+  // where the lines start at the row's bottom, its start is their end
+  const safe =
+    reverse &&
+    (lines === Y.ALIGN_SPACE_AROUND || lines === Y.ALIGN_SPACE_EVENLY);
+  const atEnd = (): void => {
+    root.setAlignContent(Y.ALIGN_FLEX_END);
+    layout();
+    root.setAlignContent(lines);
+  };
   // each item Yoga stretches: `stretch`, with no height of its own
   const align = root.getAlignItems();
   const stretched = items.filter(({ node }) => {
@@ -3216,15 +3299,24 @@ function unspace(
   });
   if (stretched.length === 0) {
     layout();
+    // spaced where there is room, and else at their start, past the bottom
+    if (
+      safe &&
+      linesReach(root, items, reverse) - root.getComputedHeight() > NEAR
+    ) {
+      atEnd();
+    }
     return;
   }
-  const lines = root.getAlignContent();
   root.setAlignContent(Y.ALIGN_FLEX_START);
   layout();
   root.setAlignContent(lines);
-  if (!(root.getComputedHeight() - linesReach(root, items, reverse) > NEAR)) {
+  const room = root.getComputedHeight() - linesReach(root, items, reverse);
+  if (safe && room < -NEAR) {
+    atEnd();
     return;
   }
+  if (!(room > NEAR)) return;
   const heights = stretched.map(({ node }) => node.getComputedHeight());
   layout();
   stretched.forEach(({ node, laid }, i) => {
@@ -3276,6 +3368,22 @@ function linesReach(
   return reach;
 }
 
+/**
+ * Whether a row item's height is a percentage of a height its flex box has
+ * none of. That is `auto` to the item's size (CSS 2.1 10.5), and is not
+ * handed to Yoga (`applyItem`), but it is not `auto` to its alignment:
+ * `stretch` stretches an item whose height computes to `auto` (CSS Flexbox
+ * 8.3), and this one's computes to the percentage. Such an item is as tall
+ * as its content, set at its line's start, which is what Yoga is told.
+ */
+function heightOfNone(
+  style: ComputedStyle,
+  /** Whether the flex box has a definite height. */
+  own: boolean,
+): boolean {
+  return !own && isPct(style.height);
+}
+
 /** Whether an item is stretched across its line: `stretch`, its own or its
  *  container's, with no height of its own and no `auto` margin across. */
 function stretches(
@@ -3331,9 +3439,10 @@ interface Across {
  * where they are short of the box; `center` and `flex-end` whether they are
  * or not, so that lines wider than the box run past both its sides, or its
  * start; and the spacing values only where there is room, setting the lines
- * at the box's start where there is none (CSS Box Alignment 3, 4.3:
- * `space-between` falls back to `flex-start`, `space-around` and
- * `space-evenly` to `safe center`, the start where the lines overflow). An
+ * at their start where there is none, or at the box's (CSS Box Alignment 3,
+ * 4.3: `space-between` falls back to `flex-start`, `space-around` and
+ * `space-evenly` to `safe center`, the box's own start where the lines
+ * overflow, and not theirs where they wrap in reverse). An
  * item with an `auto` margin across its line takes the room the line has
  * past it on that side (8.1), and none where there is none; a stretched
  * item is as wide as its line less its margins, within its limits (9.4,
@@ -3381,6 +3490,10 @@ function crossLines(
   for (const size of across) room -= size;
   let at = 0;
   let between = gap;
+  // Where they are wider than the box, `space-around` and `space-evenly`
+  // set the lines at the box's own start (`safe center`), which is where
+  // their last one ends where they wrap in reverse: they run past its end
+  const reverse = style.flexWrap === 'wrap-reverse';
   switch (crossContent(style)) {
     case 'flex-end':
       at = room;
@@ -3398,13 +3511,13 @@ function crossLines(
       if (room > 0) {
         at = room / count / 2;
         between += room / count;
-      }
+      } else if (reverse) at = room;
       break;
     case 'space-evenly':
       if (room > 0) {
         at = room / (count + 1);
         between += room / (count + 1);
-      }
+      } else if (reverse) at = room;
       break;
   }
   const placed = new Map<Box, Across>();

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,
@@ -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' &&

package/src/html/node.ts

@@ -1051,6 +1051,10 @@ export class HtmlViewNode extends Node {
             const fonts = this._fonts();
             return fonts ? faceExtentOf(fonts, style).ascent : undefined;
           },
+          faceExtent: (style) => {
+            const fonts = this._fonts();
+            return fonts ? faceExtentOf(fonts, style) : undefined;
+          },
           controlSize: (el, kind, style) =>
             measureControl(el, kind, style, this._fonts(), look),
         });