@react-x11/components 0.16.1 → 0.17.0

package/src/html/css/parse.ts

@@ -77,6 +77,43 @@ export interface Stylesheet {
   /** `@counter-style` rules, in order: a name and its descriptors, which
    *  the cascade reads into counter styles (CSS Counter Styles 3, 3). */
   counterStyles?: { prelude: string; declarations: Declaration[] }[];
+  /** `@keyframes` rules, in order (`KeyframesRule`). */
+  keyframes?: KeyframesRule[];
+}
+
+/**
+ * One `@keyframes` rule (CSS Animations 1, 3): the frames of the animation
+ * an `animation-name` names. Which rule a name finds is the cascade's to
+ * say (`Cascade.keyframes`): the last of its name whose media hold, in the
+ * latest layer, and never a prefixed one over one that is not.
+ */
+export interface KeyframesRule {
+  /** As written: a name is case-sensitive, as a custom ident is. */
+  name: string;
+  /** `@-webkit-keyframes`, which Chrome reads and which never takes the
+   *  place of an `@keyframes` of the same name, wherever either comes. */
+  prefixed: boolean;
+  /** The frames in the order written, which is the order two at one
+   *  offset cascade in. */
+  frames: Keyframe[];
+  /** The `@media` blocks the rule sits under, as a style rule's. */
+  media: MediaCondition[][] | null;
+  /** The cascade layer the rule is in, as a style rule's. */
+  layer: readonly number[] | null;
+}
+
+/** One frame of a `@keyframes`: a block of declarations at the offsets its
+ *  selector names. */
+export interface Keyframe {
+  /** Where in an iteration the frame is, 0 to 1: one per selector in its
+   *  list, `from` 0 and `to` 1. */
+  offsets: number[];
+  /** What the frame sets: no `!important` one, which a frame ignores, and
+   *  none of the animation's or a transition's own properties. */
+  declarations: Declaration[];
+  /** The `animation-timing-function` the frame eases to the next one by,
+   *  as written; null where it gives none and the animation's is used. */
+  easing: string | null;
 }
 
 /**
@@ -322,9 +359,22 @@ export function parseStylesheet(
             prelude: at.prelude,
             declarations: parseDeclarations(at.block),
           });
+        } else if (
+          (name === 'keyframes' || name === '-webkit-keyframes') &&
+          at.block !== null
+        ) {
+          const keyframes = parseKeyframes(at.prelude, at.block);
+          if (keyframes) {
+            (sheet.keyframes ??= []).push({
+              ...keyframes,
+              prefixed: name !== 'keyframes',
+              media,
+              layer,
+            });
+          }
         }
-        // @keyframes, @page: nothing to do, and the block was already
-        // consumed.
+        // @page, and an at-rule nobody knows: nothing to do, and the block
+        // was already consumed.
         continue;
       }
 
@@ -1764,6 +1814,105 @@ const GENERIC_FAMILIES = new Set([
   'default',
 ]);
 
+/** The properties a keyframe does not set: the animation's own, and a
+ *  transition's (CSS Animations 1, 3). */
+const NOT_IN_KEYFRAMES = /^(?:-webkit-)?(?:animation|transition)(?:-|$)/;
+
+/** A `<number-token>` percentage, `+12.5%` or `1e2%`. */
+const KEYFRAME_PERCENT = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?%$/i;
+
+/**
+ * A `@keyframes` block's name and frames (CSS Animations 1, 3), or null
+ * where its prelude is no name. A frame whose selector is not a list of
+ * `from`, `to` and percentages from 0 to 100 is dropped whole, as a style
+ * rule with a bad selector is, and the frames around it stand.
+ */
+function parseKeyframes(
+  prelude: string,
+  block: string,
+): { name: string; frames: Keyframe[] } | null {
+  const name = keyframesName(prelude);
+  if (name === null) return null;
+  const frames: Keyframe[] = [];
+  let i = 0;
+  const n = block.length;
+  while (i < n) {
+    i = skipTrivia(block, i);
+    if (i >= n) break;
+    // a frame holds declarations and nothing else
+    if (block[i] === '@' && startsIdent(block, i + 1)) {
+      i = readAtRule(block, i).end;
+      continue;
+    }
+    const braceAt = scanTo(block, i, '{');
+    if (braceAt >= n) break;
+    const selector = block.slice(i, braceAt);
+    const body = readBlock(block, braceAt);
+    i = body.end;
+    const offsets = keyframeOffsets(selector);
+    if (!offsets) continue;
+    let easing: string | null = null;
+    const declarations: Declaration[] = [];
+    for (const d of parseDeclarations(body.body)) {
+      if (d.important) continue;
+      if (
+        d.prop === 'animation-timing-function' ||
+        d.prop === '-webkit-animation-timing-function'
+      ) {
+        easing = d.value;
+      } else if (!NOT_IN_KEYFRAMES.test(d.prop)) {
+        declarations.push(d);
+      }
+    }
+    frames.push({ offsets, declarations, easing });
+  }
+  return { name, frames };
+}
+
+/** A `@keyframes` prelude's name: a string, or an identifier that is not
+ *  `none` or a CSS-wide keyword; null for anything else. */
+function keyframesName(prelude: string): string | null {
+  const v = prelude.trim();
+  if (!v) return null;
+  if (v[0] === '"' || v[0] === "'") {
+    const name = unquote(v);
+    return name !== v && name ? name : null;
+  }
+  if (!startsIdent(v, 0)) return null;
+  const ident = readIdent(v, 0);
+  if (ident.end !== v.length) return null;
+  return KEYFRAMES_RESERVED.has(ident.value.toLowerCase()) ? null : ident.value;
+}
+
+const KEYFRAMES_RESERVED = new Set([
+  'none',
+  'inherit',
+  'initial',
+  'unset',
+  'revert',
+  'revert-layer',
+  'default',
+]);
+
+/** A keyframe selector's offsets, 0 to 1, or null where any of its list is
+ *  not one. */
+function keyframeOffsets(selector: string): number[] | null {
+  const out: number[] = [];
+  for (const part of selector.split(',')) {
+    const v = part.trim().toLowerCase();
+    if (v === 'from') out.push(0);
+    else if (v === 'to') out.push(1);
+    else if (KEYFRAME_PERCENT.test(v)) {
+      const pct = Number(v.slice(0, -1));
+      if (!(pct >= 0 && pct <= 100)) return null;
+      out.push(pct / 100);
+    } else {
+      return null;
+    }
+  }
+  return out;
+}
+
 /**
  * A `@font-face` block, or null when it names no family or no source — a
  * rule CSS Fonts 4 (4.3) drops whole. A rule whose sources are all

package/src/html/css/style.ts

@@ -41,6 +41,13 @@ import type { ContentItem, CounterChange } from './content.js';
 import type { CustomProps } from './vars.js';
 import { parseRotate, parseScale, parseTransform } from './transform.js';
 import type { TransformFunction } from './transform.js';
+import {
+  ANIMATION_LONGHANDS,
+  NO_ANIMATIONS,
+  animationLonghand,
+  parseAnimation,
+} from './animation.js';
+import type { Animations } from './animation.js';
 import {
   LIGHT_DARK,
   SYSTEM_COLOR,
@@ -590,6 +597,10 @@ export interface ComputedStyle {
   /** `transform-origin`: the point a transform turns and scales about,
    *  from the border box's top left, a percentage of its width and height. */
   transformOrigin: [Len, Len];
+  /** `animation` and its longhands, each a list (`css/animation.ts`):
+   *  `NO_ANIMATIONS`, shared, where nothing sets one. What they leave on
+   *  the style is in its other fields already (`Cascade._computeStyle`). */
+  animations: Animations;
   zIndex: number | 'auto';
   /** A keyword, a length to raise the box by, or a percentage of its own
    *  line height. */
@@ -1085,6 +1096,7 @@ export function initialStyle(look: RootLook, scale = 1): ComputedStyle {
     scale: null,
     transform: null,
     transformOrigin: [{ pct: 50 }, { pct: 50 }],
+    animations: NO_ANIMATIONS,
     zIndex: AUTO,
     verticalAlign: 'baseline',
 
@@ -1438,13 +1450,23 @@ const BORDER_WIDTH_KEYWORDS: Record<string, number> = {
   thick: 5,
 };
 
-/** `-webkit-` names that are the multicol properties' own. */
-const MULTICOL_ALIASES: Record<string, string> = {
+/** `-webkit-` names that are the multicol properties' own, and the
+ *  animation's. */
+const PREFIXED_ALIASES: Record<string, string> = {
   '-webkit-columns': 'columns',
   '-webkit-column-count': 'column-count',
   '-webkit-column-width': 'column-width',
   '-webkit-column-gap': 'column-gap',
   '-webkit-column-break-inside': 'break-inside',
+  '-webkit-animation': 'animation',
+  '-webkit-animation-name': 'animation-name',
+  '-webkit-animation-duration': 'animation-duration',
+  '-webkit-animation-timing-function': 'animation-timing-function',
+  '-webkit-animation-delay': 'animation-delay',
+  '-webkit-animation-iteration-count': 'animation-iteration-count',
+  '-webkit-animation-direction': 'animation-direction',
+  '-webkit-animation-fill-mode': 'animation-fill-mode',
+  '-webkit-animation-play-state': 'animation-play-state',
 };
 
 /**
@@ -1463,11 +1485,11 @@ export function applyDeclaration(
   ctx: UnitContext,
 ): void {
   const written = prop.toLowerCase();
-  // the multicol properties under the names WebKit had them by, which
-  // Blink still reads, each an alias of the property (`-webkit-column-
-  // count` in its `css_properties.json5`): a page written for it alone
-  // names no other
-  const name = MULTICOL_ALIASES[written] ?? written;
+  // the multicol and animation properties under the names WebKit had them
+  // by, which Blink still reads, each an alias of the property (`-webkit-
+  // column-count` in its `css_properties.json5`): a page written for it
+  // alone names no other
+  const name = PREFIXED_ALIASES[written] ?? written;
   let value = rawValue.trim();
   if (!value) return;
   // a logical property is the physical one it stands for, the CSS-wide
@@ -1906,6 +1928,27 @@ export function applyDeclaration(
       if (a !== null) style.opacity = a;
       return;
     }
+    case 'animation': {
+      const animations = parseAnimation(value);
+      if (animations) style.animations = animations;
+      return;
+    }
+    case 'animation-name':
+    case 'animation-duration':
+    case 'animation-timing-function':
+    case 'animation-delay':
+    case 'animation-iteration-count':
+    case 'animation-direction':
+    case 'animation-fill-mode':
+    case 'animation-play-state': {
+      const animations = animationLonghand(
+        style.animations,
+        ANIMATION_LONGHANDS[name],
+        value,
+      );
+      if (animations) style.animations = animations;
+      return;
+    }
     case 'translate': {
       // `none`, or across, down, and a depth nothing here has
       if (value.trim().toLowerCase() === 'none') {
@@ -5646,6 +5689,14 @@ export function initialOne(
     style.mask = { ...style.mask, [list]: initial.mask[list] };
     return;
   }
+  const animation = ANIMATION_LONGHANDS[PREFIXED_ALIASES[name] ?? name];
+  if (animation) {
+    style.animations = {
+      ...style.animations,
+      [animation]: initial.animations[animation],
+    };
+    return;
+  }
   const keys = INHERIT_TARGETS[name];
   if (!keys) return;
   for (const key of keys) {
@@ -5663,6 +5714,15 @@ function inheritOne(
     style.mask = { ...style.mask, [list]: parent.mask[list] };
     return;
   }
+  // each longhand of the animation is a list of its own, as the mask's are
+  const animation = ANIMATION_LONGHANDS[PREFIXED_ALIASES[name] ?? name];
+  if (animation) {
+    style.animations = {
+      ...style.animations,
+      [animation]: parent.animations[animation],
+    };
+    return;
+  }
   const keys = INHERIT_TARGETS[name];
   if (!keys) return;
   // A border colour left to `currentColor` inherits as the keyword and
@@ -5717,6 +5777,8 @@ const INHERIT_TARGETS: Record<string, readonly (keyof ComputedStyle)[]> = {
   'border-image': ['borderImage'],
   mask: ['mask'],
   '-webkit-mask': ['mask'],
+  animation: ['animations'],
+  '-webkit-animation': ['animations'],
   'border-image-source': ['borderImage'],
   'border-image-slice': ['borderImage'],
   'border-image-width': ['borderImage'],

package/src/html/layout/flex.ts

@@ -252,11 +252,7 @@ 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 =
+  const baselines =
     row &&
     (box.style.alignItems === 'baseline' ||
       items.some(({ box: child }) => child.style.alignSelf === 'baseline'));
@@ -273,35 +269,41 @@ export function layoutFlex(
       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.
+    // 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]);
     }
-    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;
+  }
+  // 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
@@ -449,8 +451,11 @@ export function layoutFlex(
     }
   }
 
-  // whether Yoga's last layout took its pass for lines (`placeItems`)
-  let lined = box.style.flexWrap !== 'nowrap' || baselines;
+  // 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,
@@ -459,31 +464,20 @@ export function layoutFlex(
     own,
     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 = baselines ? baselineLines(box.style, items) : null;
-  const started = new Set<Box>();
+  // 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
     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);
-    }
-    // so it takes it only where the row wraps
-    lined = box.style.flexWrap !== 'nowrap';
     ctx.flexDepth = depth + 1;
     try {
       calculate();
@@ -716,6 +710,12 @@ 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 =
@@ -725,7 +725,11 @@ function placeItems(
     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 =
@@ -2868,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[] })[] = [];
@@ -2900,12 +2905,21 @@ 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)) {
+    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 (
+      wraps &&
+      line.length &&
+      (back ? right > last + 0.01 : left < last - 0.01)
+    ) {
       close();
       line = [];
     }
-    last = box.x;
+    last = back ? left : right;
     if (byBaseline(style, box.style)) line.push(item);
   }
   close();
@@ -2916,16 +2930,51 @@ function baselineLines<T extends { box: Box }>(
 /** 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 {
+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' &&
-    item.marginTop !== AUTO &&
-    item.marginBottom !== AUTO
+    (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`).
@@ -3035,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
@@ -3050,9 +3099,7 @@ 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: where Yoga still takes that pass for such a row, its items are
- * laid out again without it, aligned by their baselines (`layoutFlex`).
+ * it, and so is an item an `auto` margin aligns across a column.
  */
 function lineMarginFix(
   container: ComputedStyle,
@@ -3073,10 +3120,7 @@ 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
@@ -3446,9 +3490,10 @@ interface Across {
  * 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,
@@ -3482,9 +3527,25 @@ 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;
@@ -3542,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;