@react-x11/components 0.16.0 → 0.17.0

package/src/html/layout/flex.ts

@@ -252,6 +252,10 @@ export function layoutFlex(
   const direction =
     box.style.direction === 'rtl' ? Y.DIRECTION_RTL : Y.DIRECTION_LTR;
   const row = box.style.flexDirection.startsWith('row');
+  const 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 +268,43 @@ export function layoutFlex(
       const aligned = autoAcross(child.style, reverse);
       if (aligned) node.setAlignSelf(ALIGN[aligned]);
     }
+  } else if (baselines) {
+    // Yoga takes a row aligned by baselines through that pass whether it
+    // wraps or not, and sets an item with an `auto` margin there 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.
+    for (const { box: child, node } of items) {
+      const aligned = autoAcross(child.style, false);
+      if (aligned) node.setAlignSelf(ALIGN[aligned]);
+    }
+  }
+  // Items aligned by their baselines, which Yoga cannot see, are told they
+  // are at their lines' starts, which is where one is that shares its line
+  // with no other (8.3); those that do share one are lined up by their
+  // baselines once those are known (`baselineLines`), and the row laid out
+  // again. Told an item is aligned by its baseline, Yoga sizes each line
+  // of the row as the most any item on it reaches down to its bottom edge
+  // — a baseline, to Yoga — and the largest bottom margin besides,
+  // whichever items those are, and stretches the items on the line to
+  // that: a row of no height of its own was as tall as both, and
+  // `align-content` had that much less room to share out. And it takes a
+  // row that does not wrap through its pass for lines, which sets the one
+  // 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. Told none is, it takes neither. A row whose lines wrap in
+  // reverse is left to Yoga.
+  const started = new Set<Box>();
+  if (baselines && box.style.flexWrap !== 'wrap-reverse') {
+    for (const { box: child, node } of items) {
+      if (!byBaseline(box.style, child.style)) continue;
+      node.setAlignSelf(Y.ALIGN_FLEX_START);
+      started.add(child);
+    }
+    if (box.style.alignItems === 'baseline') {
+      root.setAlignItems(Y.ALIGN_FLEX_START);
+    }
   }
   // 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 +329,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,42 +451,33 @@ 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');
+  // Yoga aligns the lines of a box that wraps in one pass of its own, which
+  // drops a margin (`lineMarginFix`), and keeps the margins of one that
+  // does not, which it takes through that pass only where it is told an
+  // item is aligned by its baseline: here, never
+  const lined = box.style.flexWrap !== 'nowrap';
   let bottom = placeItems(
     box,
     ctx,
     items,
     row,
     own,
-    box.style.flexWrap !== 'nowrap' || baselines,
+    lined,
     contentWidth,
-    undefined,
+    started,
     crossed ? crossLines(box.style, items, contentWidth, columnGap) : undefined,
   );
-  // Items aligned by their baselines, which Yoga cannot see, are aligned
-  // with their baselines known (`baselineLines`)
-  // 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;
+  // Items that share a line and are aligned by their baselines are laid
+  // out by the flex layout again, set at their lines' starts with the
+  // margins that put their baselines together (`baselineLines`), which
+  // makes each line as tall as that does
+  const lines = started.size > 1 ? baselineLines(box.style, items) : null;
   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);
+      line.forEach(({ node }, i) => {
         node.setMargin(Y.EDGE_TOP, line.margins[i]);
-        started.add(child);
       });
     }
-    if (box.style.alignItems === 'baseline') {
-      root.setAlignItems(Y.ALIGN_FLEX_START);
-    }
     ctx.flexDepth = depth + 1;
     try {
       calculate();
@@ -457,7 +490,7 @@ export function layoutFlex(
       items,
       row,
       own,
-      box.style.flexWrap !== 'nowrap',
+      lined,
       contentWidth,
       started,
     );
@@ -485,8 +518,9 @@ export function layoutFlex(
       items,
       row,
       own,
-      box.style.flexWrap !== 'nowrap' || baselines,
+      lined,
       contentWidth,
+      started,
     );
   }
 
@@ -676,16 +710,26 @@ function placeItems(
   let bottom = 0;
   // the lines of a row that wraps in reverse are turned round to run up it
   const reverse = row && box.style.flexWrap === 'wrap-reverse';
+  // the left edge a column's items aligned by baselines share, where it
+  // does not wrap (`baselineEdge`); a column that wraps is `crossed`
+  const edge =
+    row || box.style.flexWrap !== 'nowrap'
+      ? NaN
+      : baselineEdge(box.style, items);
   for (const { box: child, node, laid } of items) {
     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 =
       box.contentX +
-      (placed ? placed.x : node.getComputedLeft() + (row ? 0 : across));
+      (placed
+        ? placed.x
+        : !Number.isNaN(edge) && byBaseline(box.style, child.style, false)
+          ? edge
+          : node.getComputedLeft() + (row ? 0 : across));
     // which Yoga turns an item round in by the height it laid it out at, and
     // not the one it is (`unspace`)
     const top =
@@ -896,6 +940,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
@@ -2820,17 +2872,18 @@ function contentBottom(box: Box): number {
  * its bottom edge, so it lined them up by their bottoms. With the items laid
  * out, each line's, and for each the top margin that sets it at the line's
  * start with its first baseline where the lowest-reaching one's is — or
- * null where no line has two to align.
+ * null where no line has two to align. Not for a row whose lines wrap in
+ * reverse, which grow from their ends and are left to Yoga (`layoutFlex`).
  */
-function baselineLines<T extends { box: Box }>(
+function baselineLines<T extends { box: Box; node: YogaNode }>(
   style: ComputedStyle,
   items: readonly T[],
 ): (T[] & { margins: number[] })[] | null {
-  // a line that grows from its end is aligned from there, and left to Yoga
-  if (style.flexWrap === 'wrap-reverse') return null;
   const wraps = style.flexWrap !== 'nowrap';
-  // along a line the items go the way the main axis does, and the next
-  // line starts where one does not
+  // along a line the items go the way the main axis does, each margin box
+  // after the last one's end, and the next line starts before it (9.3): at
+  // the line's start, where an item with a margin before it was further
+  // along than one alone on the line before
   const back =
     (style.flexDirection === 'row-reverse') !== (style.direction === 'rtl');
   const out: (T[] & { margins: number[] })[] = [];
@@ -2852,28 +2905,76 @@ function baselineLines<T extends { box: Box }>(
     out.push(Object.assign(line, { margins }));
   };
   for (const item of items) {
-    const box = item.box;
-    if (wraps && line.length && (back ? box.x >= last : box.x <= last)) {
-      close();
-      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
+    const { box, node } = item;
+    const left = node.getComputedLeft() - node.getComputedMargin(Y.EDGE_LEFT);
+    const right =
+      node.getComputedLeft() +
+      node.getComputedWidth() +
+      node.getComputedMargin(Y.EDGE_RIGHT);
     if (
-      aligned === 'baseline' &&
-      own.marginTop !== AUTO &&
-      own.marginBottom !== AUTO
+      wraps &&
+      line.length &&
+      (back ? right > last + 0.01 : left < last - 0.01)
     ) {
-      line.push(item);
+      close();
+      line = [];
     }
+    last = back ? left : right;
+    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,
+  /** Whether the line is a row's, across which its margins are its top
+   *  and bottom ones; a column's are its left and right ones. */
+  row = true,
+): boolean {
+  const aligned =
+    item.alignSelf === AUTO ? container.alignItems : item.alignSelf;
+  return (
+    aligned === 'baseline' &&
+    (row ? item.marginTop : item.marginLeft) !== AUTO &&
+    (row ? item.marginBottom : item.marginRight) !== AUTO
+  );
+}
+
+/**
+ * Where the items a column that does not wrap aligns by baselines have
+ * their left edges, from its content box's: NaN where it has none.
+ *
+ * A horizontal item has no baseline across a column, and one is made from
+ * its border box — the line-under edge of the vertical writing mode it is
+ * taken to have, its left, whichever way its text runs (CSS Box Alignment
+ * 3, 9.1). So the items share their left edges, and are set together at
+ * the line's cross start, the column's left or, where it runs right to
+ * left, its right (9.3; CSS Flexbox 8.3), as Chrome sets them: as far from
+ * there as the most any of them reaches past its edge on that side. Yoga
+ * never aligns a column by baselines, and sets each at its line's start
+ * with its margin there, so that is the furthest any of them is from the
+ * start: the rightmost left edge, or from the right the leftmost.
+ */
+function baselineEdge(
+  container: ComputedStyle,
+  items: readonly { box: Box; node: YogaNode }[],
+): number {
+  const rtl = container.direction === 'rtl';
+  let edge = NaN;
+  for (const { box, node } of items) {
+    if (!byBaseline(container, box.style, false)) continue;
+    const left = node.getComputedLeft();
+    if (!(rtl ? left >= edge : left <= edge)) edge = left;
+  }
+  return edge;
+}
+
 /**
  * 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`).
@@ -2983,13 +3084,13 @@ function autoAcross(
 
 /**
  * How far an item is from where it belongs across its line, where Yoga
- * (3.2.1) aligned the lines in the pass it takes for a box that wraps or
- * aligns by baselines: it sets an item aligned to its line's start there
- * as though it had no margin at that side, and one centred as though it had
- * none at either — `items-start` in a wrapping row put every card's top
- * margin under it. By the margin at the start of the line's cross axis, and
- * by half what it exceeds the one at the end by, as Yoga holds them: for an
- * item set at its line's start (`started`), its baseline's.
+ * (3.2.1) aligned the lines in the pass it takes for a box that wraps: it
+ * sets an item aligned to its line's start there as though it had no
+ * margin at that side, and one centred as though it had none at either —
+ * `items-start` in a wrapping row put every card's top margin under it. By
+ * the margin at the start of the line's cross axis, and by half what it
+ * exceeds the one at the end by, as Yoga holds them: for an item set at
+ * its line's start (`started`), its baseline's.
  *
  * A row whose lines wrap in reverse Yoga lays out as though they wrapped
  * forward, and then turns each item over across the box, its margins with
@@ -2998,14 +3099,15 @@ function autoAcross(
  * stretched, is its bottom margin down from its line's top where it is its
  * 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.
+ * it, and so is an item an `auto` margin aligns across a column.
  */
 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';
@@ -3018,12 +3120,14 @@ function lineMarginFix(
   let align: string | null;
   if (started) align = 'flex-start';
   else if (lead === AUTO || trail === AUTO) {
-    align =
-      row && container.flexWrap !== 'nowrap'
-        ? autoAcross(style, reverse)
-        : null;
+    align = row ? autoAcross(style, reverse) : 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 +3145,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 +3304,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 +3323,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 +3343,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 +3412,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,15 +3483,17 @@ 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,
- * step 11), and as tall as the column made it; and the rest are where
- * `align-self` says, a baseline at the line's start, as a column has none
- * across it to align by.
+ * step 11), and as tall as the column made it; those aligned by baselines
+ * share their left edges, set together at the line's start, where a column
+ * that does not wrap sets them (`baselineEdge`); and the rest are where
+ * `align-self` says.
  */
 function crossLines(
   style: ComputedStyle,
@@ -3373,14 +3527,34 @@ function crossLines(
     lead.push(fromRight ? r : l);
     trail.push(fromRight ? l : r);
   });
-  const across = lines.map((line) =>
-    line.reduce((most, i) => Math.max(most, sizes[i] + lead[i] + trail[i]), 0),
-  );
+  // A line is as wide as its widest item, margins and all, and as the
+  // items it aligns by baselines come to, sharing their left edges: the
+  // most any reaches from the line's start to that edge, and the most any
+  // reaches past it (`baselineEdge`; 9.4 step 8). `reach` is each line's
+  // first, where those items' left edges are from its start.
+  const reach: number[] = [];
+  const across = lines.map((line) => {
+    let most = 0;
+    let before = -Infinity;
+    let after = -Infinity;
+    for (const i of line) {
+      most = Math.max(most, sizes[i] + lead[i] + trail[i]);
+      if (!byBaseline(style, items[i].box.style, false)) continue;
+      before = Math.max(before, lead[i] + (fromRight ? sizes[i] : 0));
+      after = Math.max(after, trail[i] + (fromRight ? 0 : sizes[i]));
+    }
+    reach.push(before);
+    return Math.max(most, before + after);
+  });
   const count = lines.length;
   let room = width - gap * (count - 1);
   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 +3572,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>();
@@ -3429,6 +3603,8 @@ function crossLines(
         if (itemWidth > most) itemWidth = most;
         if (itemWidth < least) itemWidth = least;
         itemWidth = Math.max(itemWidth, box.horizontalExtra);
+      } else if (byBaseline(style, own, false)) {
+        offset = reach[k] - (fromRight ? itemWidth : 0);
       } else {
         const align = own.alignSelf === AUTO ? style.alignItems : own.alignSelf;
         if (align === 'center') offset += free / 2;

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),
         });
@@ -3514,6 +3518,14 @@ function hoverChange(
       }
       continue;
     }
+    // what an element's animations leave is in its other fields already
+    // (`Cascade._computeStyle`); the lists themselves draw nothing
+    if (key === 'animations') {
+      if (!sameValue(a[key], b[key])) {
+        change ??= { ink: false, reach: false, order: false, move: false };
+      }
+      continue;
+    }
     if (sameValue(a[key], b[key])) continue;
     change ??= { ink: true, reach: false, order: false, move: false };
     change.ink = true;