@react-x11/components 0.14.0 → 0.16.0

package/src/html/layout/boxes.ts

@@ -16,7 +16,7 @@
 // reason richtext's node gives for answering from what it draws: an index
 // built by a second traversal can disagree with the boxes, and a selection
 // that disagrees with the glyphs is worse than no selection.
-import type { Element } from 'domhandler';
+import type { ChildNode, Element } from 'domhandler';
 
 import type { TextRun } from '../../richtext/index.js';
 import {
@@ -28,6 +28,7 @@ import {
   NON_RENDERED,
   tagOf,
 } from '../dom.js';
+import { ShapeCopies, languageOf, metaColorScheme } from '../css/cascade.js';
 import type {
   Cascade,
   FirstLetterRules,
@@ -38,6 +39,7 @@ import type { CollapsedTable } from './collapse.js';
 import { quoteAt } from '../css/content.js';
 import type { CounterStyles } from '../css/counter-styles.js';
 import type { ContentItem } from '../css/content.js';
+import type { ShapeStyles } from '../css/shapes.js';
 import {
   CONTAIN_STYLE,
   FIRST_LINE_INHERITED,
@@ -47,7 +49,7 @@ import {
   inherit,
 } from '../css/style.js';
 import { AUTO } from '../css/values.js';
-import { svgIntrinsics } from '../svg.js';
+import { concreteSize, svgIntrinsics } from '../svg.js';
 import type { IntrinsicSize } from '../svg.js';
 import type { ComputedStyle } from '../css/style.js';
 import type { GridLines } from './grid-lines.js';
@@ -81,15 +83,32 @@ export interface Marker {
   /** Its own style where a `::marker` rule gives it one; the item's where
    *  none does. */
   style: ComputedStyle | null;
-  /** The image it is, `list-style-image`'s, at its size in device pixels,
-   *  where that has arrived; its text is then not drawn. */
-  image?: { url: string; width: number; height: number };
+  /** The image it is, `list-style-image`'s, where that has arrived, at its
+   *  size in device pixels — its own, or the one a marker image with none
+   *  is given (`Builder._markerImageSize`); its text is then not drawn.
+   *  `gap` is the room between it and the content, in device pixels
+   *  (`MARKER_IMAGE_GAP`). */
+  image?: { url: string; width: number; height: number; gap: number };
   /** Its text is its own — a string `list-style-type`, a `::marker`'s
    *  `content` — and ends at the content's edge, with no gap a number
    *  or a bullet is set apart by. */
   flush?: true;
 }
 
+/**
+ * The room between a list marker's image and the item's content, in CSS
+ * pixels: between the image and the content's edge outside the item, and
+ * after the image inside it. CSS 2.1 (12.5.1) leaves where a marker goes
+ * to the user agent, and this is Blink's `kCMarkerPaddingPx`
+ * (`ListMarker::InlineMarginsForOutside` and `…ForInside`), which WebKit
+ * has too. Outside, ours was the gap a bullet has, 0.4em — 16 pixels at
+ * 40px text where Chrome has 7 — and inside the space a marker's text ends
+ * in, a space's width. Blink writes it into the marker's margins unzoomed,
+ * so at a device scale of 2 Chrome's is 7 device pixels; here it is 7 CSS
+ * pixels at any scale, so that a page at 2x is the page at 1x doubled.
+ */
+const MARKER_IMAGE_GAP = 7;
+
 /** An out-of-flow box's static position, as an offset from the box whose
  *  flow it was taken from, which may yet move. */
 export interface StaticPosition {
@@ -713,6 +732,15 @@ export const COLUMN_ROWS = new WeakMap<
  *  that would ask the three maps above of every box ask first. */
 export const columned = { any: false };
 
+/** What the document's rules give the elements inside an inline `<svg>`
+ *  (`Cascade.shapeStyles`), null where they give none. */
+export type ShapeStyler = (box: Box) => ShapeStyles | null;
+
+/** What `BoxTree.shapeStyler` answered for each drawing's box it has been
+ *  asked of, which are the ones painted: a box restyled where it is has
+ *  its answer put here again (`HtmlViewNode._hoverInPlace`). */
+export const SHAPE_STYLES = new WeakMap<Box, ShapeStyles | null>();
+
 /** The element a pseudo-element's box is generated from, which has no
  *  element of its own (`Box.pseudo`): whose the images its styles name are,
  *  when the host is asked for them. */
@@ -774,6 +802,16 @@ export interface BoxTree {
    *  one: worked out as a selection is first painted over it, not as the
    *  tree is built, since most builds are never selected in. */
   selectionStyler: SelectionStyler | null;
+  /** What the rules give the elements in each inline `<svg>`
+   *  (`ShapeStyler`), which have no boxes and no styles, where any rule
+   *  could reach one: worked out as a drawing is first painted, since a
+   *  page of icons shows few of them at once. */
+  shapeStyler: ShapeStyler | null;
+  /** What the drawings of this build share in `Cascade.shapeStyles`: the
+   *  document's elements by their ids, indexed when first asked, where a
+   *  `<use>` finds the icon a sprite has for it; and what the rules matched
+   *  in each copy a `<use>` makes. Null where `shapeStyler` is. */
+  shapeCopies: ShapeCopies | null;
   /** Whether a float or an out-of-flow box sits in an inline box: where
    *  none does, layout looks for them among a block's own children and
    *  goes through no inline box to find them. */
@@ -811,6 +849,10 @@ export interface BuildOptions {
   imageSize(el: Element): IntrinsicSize | null;
   /** The same for an image named by url — generated content's. */
   urlSize?(url: string): IntrinsicSize | null;
+  /** How far a style's first face reaches above its baseline, in device
+   *  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;
   /** The size a real widget wants, so the box in the flow is the size the
    *  control will be drawn at. */
   controlSize(
@@ -832,6 +874,28 @@ export function buildBoxes(
   return builder.run(root as Element);
 }
 
+/** A document's first element with an id: one walk of it, the first time
+ *  an id is asked for (`ShapeCopies`). */
+function idIndex(root: Element): (id: string) => Element | null {
+  let index: Map<string, Element> | null = null;
+  return (id) => {
+    if (!index) {
+      index = new Map();
+      const stack: ChildNode[] = [...root.children].reverse();
+      for (let node = stack.pop(); node; node = stack.pop()) {
+        if (!isElement(node)) continue;
+        const own = node.attribs.id;
+        if (own && !index.has(own)) index.set(own, node);
+        const children = node.children;
+        for (let i = children.length - 1; i >= 0; i -= 1) {
+          stack.push(children[i]);
+        }
+      }
+    }
+    return index.get(id) ?? null;
+  };
+}
+
 /**
  * How deep the box tree may go. Everything downstream of the builder — the
  * fix-up pass, layout, paint, the accessor walks — recurses on box depth, so
@@ -839,8 +903,17 @@ export function buildBoxes(
  * output, a runaway template) from a stack overflow five phases later.
  * Blink's parser flattens at 512 for the same reason; content past the cap
  * is dropped, which beats the alternative of crashing the application.
+ *
  * The parser keeps a document to 256 elements (`dom.ts`), so what reaches
- * this now is the anonymous boxes a table builds round each of them.
+ * this is the anonymous boxes a table builds round them, which the builder
+ * counts as it goes (`wrappersAround`), since the fix-up makes them after
+ * it. Counted as elements, a `display: table-cell` box in another was one
+ * level where it is four boxes — a table, a row group, a row and the cell
+ * — and every pass pays for a box: painting one takes some 800 bytes of
+ * the stack. Two hundred and fifty cells deep, a thousand boxes, layout
+ * and paint each ran out of the 984 KB V8 gives the main thread, and the
+ * document came out blank. 512 boxes paint in under half of it, and are a
+ * cell in a cell 128 deep.
  */
 const MAX_DEPTH = 512;
 
@@ -901,11 +974,15 @@ class Builder {
   run(root: Element): BoxTree {
     const cascade = this._options.cascade;
     cascade.beginSharing(this._options.kept ?? null);
+    cascade.pageColorScheme = metaColorScheme(root);
     const { style: rootStyle, html: impliedHtml } = cascade.rootStyle(
       hasBody(root),
       hasHtml(root),
     );
     const rootBox = new Box('block', null, rootStyle);
+    // the root standing in for a `<body>` has its background clipped to
+    // the document's text as the body's would be
+    if (rootStyle.backgroundClipText) this._clipText = true;
     // a fragment's root stands in for a `<body>`, counters and all
     this._scopes.open();
     this._counterChanges(rootStyle, {
@@ -923,6 +1000,7 @@ class Builder {
     const anonymous = anonymousStyles(cascade.initial);
     fixUp(rootBox, anonymous);
     assignSubtreeRanges(rootBox);
+    const copies = cascade.stylesShapes ? new ShapeCopies(idIndex(root)) : null;
     return {
       root: rootBox,
       anonymous,
@@ -939,6 +1017,8 @@ class Builder {
       firstLine: this._firstLine,
       firstLineStyler: this._firstLine ? this._firstLineStyler() : null,
       selectionStyler: cascade.hasSelection ? this._selectionStyler() : null,
+      shapeStyler: copies ? this._shapeStyler(copies) : null,
+      shapeCopies: copies,
       nestedOutOfLine: this._nestedOutOfLine,
       movedInline: this._movedInline,
       clipText: this._clipText,
@@ -971,6 +1051,20 @@ class Builder {
     };
   }
 
+  /** `BoxTree.shapeStyler`, over this build's cascade: each drawing's
+   *  once, from its box's style as it is when first asked. */
+  private _shapeStyler(copies: ShapeCopies): ShapeStyler {
+    const cascade = this._options.cascade;
+    return (box) => {
+      let shapes = SHAPE_STYLES.get(box);
+      if (shapes === undefined) {
+        shapes = box.el ? cascade.shapeStyles(box.el, box.style, copies) : null;
+        SHAPE_STYLES.set(box, shapes);
+      }
+      return shapes;
+    };
+  }
+
   /** `BoxTree.firstLineStyler`, over this build's cascade. */
   private _firstLineStyler(): FirstLineStyler {
     const cascade = this._options.cascade;
@@ -1160,8 +1254,10 @@ class Builder {
       return;
     }
 
-    if (this._depth >= MAX_DEPTH) return;
     const kind = boxKindFor(style.display);
+    // the box, and the anonymous boxes the fix-up will put round it
+    const depth = 1 + wrappersAround(into.kind, kind, style);
+    if (this._depth + depth > MAX_DEPTH) return;
     const box = new Box(kind, el, style);
     into.append(box);
     if (
@@ -1191,7 +1287,7 @@ class Builder {
     let markerStyle: ComputedStyle | null = null;
     let ownMarker = false;
     let markerImage: { url: string; size: IntrinsicSize } | null = null;
-    let insideImage: string | null = null;
+    let insideImage: NonNullable<Marker['image']> | null = null;
     if (style.display === 'list-item' && style.listStyleImage) {
       // asked for as generated content's images are, and the tree built
       // again when it arrives; until it has, and where it never does, the
@@ -1226,20 +1322,21 @@ class Builder {
         flush = true;
       }
       if (markerImage && !ownMarker) {
-        if (style.listStylePosition === 'inside') insideImage = markerImage.url;
+        const [width, height] = this._markerImageSize(
+          markerImage.size,
+          markerStyle ?? style,
+        );
+        const gap = MARKER_IMAGE_GAP * (this._options.scale ?? 1);
+        const image = { url: markerImage.url, width, height, gap };
+        if (style.listStylePosition === 'inside') insideImage = image;
         else {
-          const scale = this._options.scale ?? 1;
           box.marker = {
             text: '',
             layout: null,
             x: 0,
             y: 0,
             style: markerStyle,
-            image: {
-              url: markerImage.url,
-              width: (markerImage.size.width ?? 0) * scale,
-              height: (markerImage.size.height ?? 0) * scale,
-            },
+            image,
           };
         }
       } else if (text && style.listStylePosition === 'inside') {
@@ -1272,19 +1369,23 @@ class Builder {
       : null;
     const ownLetter = ownRules ? { rules: ownRules, punctuation: [] } : null;
     if (ownLetter) this._firstLetter = ownLetter;
-    this._depth += 1;
+    this._depth += depth;
     if (insideImage) {
       // an inline image at the start of the first line, as a generated
-      // image is, and the space a marker's text ends in
-      this._contentImage(insideImage, box, style, el);
-      this._textNode(' ', box, style, el);
+      // image is, and the room after it Blink gives it rather than a
+      // space: the content's own white space after it is kept, as it is
+      // after an image (`MARKER_IMAGE_GAP`)
+      const { url, gap } = insideImage;
+      const image = this._contentImage(url, box, style, el, insideImage);
+      if (style.direction === 'rtl') image.style.marginLeft = gap;
+      else image.style.marginRight = gap;
     } else if (insideMarker) {
       this._insideMarker(insideMarker, style, markerStyle, box, el);
     }
     this._pseudo(el, 'before', style, box);
     this._children(el, box, style, childInFlex, el, key);
     this._pseudo(el, 'after', style, box);
-    this._depth -= 1;
+    this._depth -= depth;
     this._letterAfter(flow, skipped, outerLetter, ownLetter);
     if (flow !== 'inline') this._endLine();
     this._ws = after(flow, this._ws, around);
@@ -1724,14 +1825,14 @@ class Builder {
             .join(item.separator);
           break;
         case 'open-quote':
-          text += quoteAt(style.quotes, this._quoteDepth, 0);
+          text += quoteAt(style.quotes, this._quoteDepth, 0, languageOf(el));
           this._quoteDepth += 1;
           break;
         case 'close-quote':
           // a close with nothing open writes nothing and closes nothing
           if (this._quoteDepth > 0) {
             this._quoteDepth -= 1;
-            text += quoteAt(style.quotes, this._quoteDepth, 1);
+            text += quoteAt(style.quotes, this._quoteDepth, 1, languageOf(el));
           }
           break;
         case 'no-open-quote':
@@ -1757,7 +1858,10 @@ class Builder {
     into: Box,
     style: ComputedStyle,
     owner: Element,
-  ): void {
+    /** Its size where it is a list marker's, which has one whatever the
+     *  image says (`_markerImageSize`). */
+    marker?: { width: number; height: number },
+  ): Box {
     const box = new Box('replaced', null, {
       ...inherit(style, this._options.cascade.initial),
       display: 'inline',
@@ -1767,11 +1871,40 @@ class Builder {
     CONTENT_IMAGES.set(box, url);
     const size = this._options.urlSize?.(url) ?? null;
     this._contentImages.push({ url, element: owner, sized: !!size });
-    if (size) setIntrinsics(box, size, this._options.scale ?? 1);
+    if (marker) {
+      const { width, height } = marker;
+      const ratio = width > 0 && height > 0 ? width / height : 0;
+      box.intrinsic = { width, height, missing: 0, ratio };
+    } else if (size) setIntrinsics(box, size, this._options.scale ?? 1);
     else box.intrinsic = { width: 0, height: 0, missing: 0, ratio: 0 };
     this._ws = after('atomic', this._ws, this._ws);
     this._lettered = false;
     this._abandonLetter();
+    return box;
+  }
+
+  /**
+   * A list marker image's size, in device pixels: its own where it has one,
+   * and where it lacks some — an SVG with only a `viewBox`, or with no size
+   * and no ratio — CSS Images' default sizing in a square half its face's
+   * ascent across. CSS Lists 3 (3.3) makes the square 1em, which both
+   * engines find too large (w3c/csswg-drafts#4207): Blink's is half the
+   * ascent, rounded to a whole pixel first
+   * (`LayoutListMarkerImage::DefaultSize`), Gecko's 0.4em, and this is
+   * Blink's. A `viewBox` alone came to 0 by 0 and drew no marker at all,
+   * and inside the item to the 300 by 150 a generated image defaults to.
+   */
+  private _markerImageSize(
+    size: IntrinsicSize,
+    style: ComputedStyle,
+  ): [number, number] {
+    let side = 0;
+    // CoreText reads a size of 0 as its default twelve points
+    if ((size.width === null || size.height === null) && style.fontSize > 0) {
+      const ascent = this._options.faceAscent?.(style) ?? style.fontSize * 0.8;
+      side = Math.round(ascent) / 2;
+    }
+    return concreteSize(size, side, side, this._options.scale ?? 1);
   }
 
   /** A text node, whitespace-processed per the inherited `white-space`. */
@@ -2437,6 +2570,47 @@ function after(
   }
 }
 
+/**
+ * How many anonymous boxes the fix-up will put between a box of `kind` and
+ * the box it is appended to, `parent` (`fixUpTable`, `wrapOrphans`,
+ * `wrapTableParts`): a table part outside a table is given what it is
+ * missing of one, and what is in a table and no part of it is given a
+ * cell, a row and a row group. A cell in a block is in a table, a row group
+ * and a row of its own, and a block in a row is in a cell. Counted against
+ * `MAX_DEPTH`, which bounds the boxes and not the elements.
+ */
+function wrappersAround(
+  parent: BoxKind,
+  kind: BoxKind,
+  style: ComputedStyle,
+): number {
+  const column =
+    style.display === 'table-column' || style.display === 'table-column-group';
+  switch (parent) {
+    case 'table':
+      if (kind === 'table-row-group' || kind === 'table-caption' || column) {
+        return 0;
+      }
+      return kind === 'table-row' ? 1 : kind === 'table-cell' ? 2 : 3;
+    case 'table-row-group':
+      return kind === 'table-row' ? 0 : kind === 'table-cell' ? 1 : 2;
+    case 'table-row':
+      return kind === 'table-cell' ? 0 : 1;
+  }
+  // a part out of flow is no part (`isTablePart`)
+  if (
+    style.position === 'absolute' ||
+    style.position === 'fixed' ||
+    style.float !== 'none'
+  ) {
+    return 0;
+  }
+  if (kind === 'table-row-group' || kind === 'table-caption' || column) {
+    return 1;
+  }
+  return kind === 'table-row' ? 2 : kind === 'table-cell' ? 3 : 0;
+}
+
 function boxKindFor(display: ComputedStyle['display']): BoxKind {
   switch (display) {
     case 'inline':

package/src/html/layout/css-grid.ts

@@ -31,6 +31,7 @@ import { Box, GRID_TRACKS, isBlank } from './boxes.js';
 import {
   FLEXED_HEIGHT,
   MIN_CONTENT_PROBE,
+  STRETCHED_ACROSS,
   USED_HEIGHT,
   centreButton,
   clampHeight,
@@ -60,6 +61,9 @@ interface Item {
   /** Min-content and max-content widths, margin box, taken when asked. */
   min: number;
   max: number;
+  /** Whether it is a table stretched across its area (`STRETCHED_ACROSS`),
+   *  which `layoutItem` decides. */
+  across: boolean;
 }
 
 /**
@@ -203,6 +207,11 @@ export function layoutGrid(
       const extra = style.boxSizing === 'border-box' ? 0 : box.horizontalExtra;
       widest = narrowest = Math.max(style.width + extra, box.horizontalExtra);
     } else {
+      // A percentage is of an area the columns are still being sized for,
+      // and what it comes to depends on what the item makes them: it is
+      // `auto` for that (CSS Sizing 3, 5.2.1), and the item's content says
+      // how wide it is. Measured at the width a percentage made of the
+      // probe's, an item `width: 100%` made its `auto` column nothing.
       const fresh = box.intrinsicMaxContent < 0;
       widest = maxContentOf(box, ctx);
       if (box.intrinsicMinContent < 0) {
@@ -210,8 +219,7 @@ export function layoutGrid(
         // which is the max-content one only if it was made just now
         const exact =
           fresh && ctx.fonts ? exactMinContent(box, ctx.fonts) : null;
-        box.intrinsicMinContent =
-          exact ?? measureIntrinsicWidth(box, ctx, MIN_CONTENT_PROBE);
+        box.intrinsicMinContent = exact ?? minContentOf(box, ctx);
       }
       narrowest = box.intrinsicMinContent;
     }
@@ -366,18 +374,19 @@ export function layoutGrid(
     } else if (align === 'center') dy = (tall - outerHeight) / 2;
     else if (align === 'flex-end') dy = tall - outerHeight;
     else if (
-      (align === 'stretch' || align === 'baseline') &&
+      (align === 'stretch' || align === 'normal' || align === 'baseline') &&
       child.style.height === AUTO &&
       !child.style.heightKeyword &&
-      (child.style.alignSelf === 'stretch' ||
+      (align === 'stretch' ||
         (child.kind !== 'replaced' && !child.style.aspectRatio))
     ) {
       // a stretched item is its area's height, within its own least and
       // greatest (10.3): taller than what it holds, or shorter where its
       // tracks let it be, what it holds then running past it. An image, a
-      // control or a box with an `aspect-ratio` keeps its own height, as
-      // `normal` has one with a natural size or a ratio — which is what
-      // the grid's `stretch` may be, and the item's own may not.
+      // control or a box with an `aspect-ratio` keeps its own height under
+      // `normal`, which stretches only an item with neither a natural size
+      // nor a ratio, and is stretched by `stretch`, the grid's or its own
+      // (6.2, and CSS Box Alignment 3, 6.1).
       const stretched = tall - child.marginTop - child.marginBottom;
       const height = clampHeight(
         child,
@@ -401,21 +410,27 @@ export function layoutGrid(
       // purpose"): a card's `margin-top: auto` takes what its row is taller
       // than the card by, its `flex: 1` grows into it (CSS Flexbox 8.1,
       // 9.7). Its content's own height is the same layout, and kept.
+      // A table shares out among its rows what the area is taller than
+      // they are (`layoutTable`), and is no shorter than they are however
+      // short its area: its rows are the least it can be, as they are
+      // where it has a height of its own (CSS 2.1 17.5.3).
       if (
         child.kind !== 'replaced' &&
         (wide !== null ||
           percentHeightsIn(child) ||
-          (child.kind === 'flex' && height !== child.height))
+          (child.kind === 'flex' && height !== child.height) ||
+          (child.kind === 'table' && height > child.height + 0.01))
       ) {
         FLEXED_HEIGHT.set(child, Math.max(0, height - child.verticalExtra));
         try {
-          ctx.layoutSubtree(child, width, area);
+          layoutAcross(item, width, area, ctx);
         } finally {
           FLEXED_HEIGHT.delete(child);
         }
       }
       child.width = width;
-      child.height = height;
+      child.height =
+        child.kind === 'table' ? Math.max(height, child.height) : height;
       centreButton(child);
     }
     moveTo(
@@ -596,6 +611,7 @@ function place(
           cols: p.bs,
           min: -1,
           max: -1,
+          across: false,
         }
       : {
           box: p.box,
@@ -605,6 +621,7 @@ function place(
           cols: p.as,
           min: -1,
           max: -1,
+          across: false,
         },
   );
 }
@@ -641,14 +658,37 @@ function extent(
 }
 
 /** An item's max-content width, its border box's: measured once in the
- *  box's life, as a table cell's is (`Box.intrinsicMaxContent`). */
+ *  box's life, as a table cell's is (`Box.intrinsicMaxContent`). Its
+ *  content's, whatever width it has of its own (`minContentOf`). */
 function maxContentOf(box: Box, ctx: LayoutContext): number {
   if (box.intrinsicMaxContent < 0) {
-    box.intrinsicMaxContent = measureIntrinsicWidth(box, ctx, Infinity);
+    box.intrinsicMaxContent = measureIntrinsicWidth(
+      box,
+      ctx,
+      Infinity,
+      box.kind !== 'replaced',
+    );
   }
   return box.intrinsicMaxContent;
 }
 
+/**
+ * An item's min-content width, its border box's. What it is measured for is
+ * what it contributes to its columns, and the width a percentage makes of
+ * them is not known then: a box that is not replaced is as wide as its
+ * content for that, whatever its own `width` says, and a replaced element
+ * takes its percentage of nothing (CSS Sizing 3, 5.2.1). A width that is a
+ * length is weighed apart (`measure` in `layoutGrid`).
+ */
+function minContentOf(box: Box, ctx: LayoutContext): number {
+  return measureIntrinsicWidth(
+    box,
+    ctx,
+    MIN_CONTENT_PROBE,
+    box.kind !== 'replaced',
+  );
+}
+
 /**
  * Lay an item out in its area: stretched across it where its width is
  * `auto` and it is stretched, or at its content's width, no wider than
@@ -693,11 +733,7 @@ function layoutItem(
       probed = true;
     }
     if (child.intrinsicMinContent < 0) {
-      child.intrinsicMinContent = measureIntrinsicWidth(
-        child,
-        ctx,
-        MIN_CONTENT_PROBE,
-      );
+      child.intrinsicMinContent = minContentOf(child, ctx);
       probed = true;
     }
     if (probed) resolveEdges(child, area);
@@ -757,7 +793,15 @@ function layoutItem(
     width = Math.min(widest, Math.max(narrowest, room));
   }
   if (child.kind !== 'replaced') {
-    ctx.layoutSubtree(child, width, area);
+    // a table stretched across is as wide as its area, which in a block's
+    // flow it would shrink from to its columns (`STRETCHED_ACROSS`)
+    item.across =
+      across &&
+      child.kind === 'table' &&
+      style.width === AUTO &&
+      !keyword &&
+      through === null;
+    layoutAcross(item, width, area, ctx);
     return;
   }
   // a replaced element sizes itself from its style: then it is given the
@@ -776,6 +820,27 @@ function layoutItem(
   }
 }
 
+/** Lay an item out at a width: a table stretched across its area at that
+ *  width as its own (`STRETCHED_ACROSS`), for this layout alone. */
+function layoutAcross(
+  item: Item,
+  width: number,
+  area: number,
+  ctx: LayoutContext,
+): void {
+  const child = item.box;
+  if (!item.across) {
+    ctx.layoutSubtree(child, width, area);
+    return;
+  }
+  STRETCHED_ACROSS.add(child);
+  try {
+    ctx.layoutSubtree(child, width, area);
+  } finally {
+    STRETCHED_ACROSS.delete(child);
+  }
+}
+
 /** What the percentages in a box's padding come to across it, its edges
  *  resolved: what a width of its content's, measured with them of nothing,
  *  is short of its border box by. */
@@ -875,9 +940,9 @@ function percentOwn(box: Box): boolean {
 /**
  * An item's border-box height before the rows are sized, where it has one
  * then: a height of its own — a percentage of the rows it spans where they
- * have a length for a size — or the rows' where it is stretched down them
- * by its own `align-self`. Null where it has none, which is where its
- * height is its content's.
+ * have a length for a size — or the rows' where `stretch` stretches it
+ * down them, its own `align-self` or the grid's `align-items`. Null where
+ * it has none, which is where its height is its content's.
  */
 function heightBeforeRows(box: Box, rows: number): number | null {
   const style = box.style;
@@ -890,10 +955,12 @@ function heightBeforeRows(box: Box, rows: number): number | null {
         : own + box.verticalExtra,
     );
   }
+  const align =
+    style.alignSelf === AUTO ? box.parent?.style.alignItems : style.alignSelf;
   if (
     style.height === AUTO &&
     !style.heightKeyword &&
-    style.alignSelf === 'stretch' &&
+    align === 'stretch' &&
     Number.isFinite(rows) &&
     !autoMargins(box, 'y').some(Boolean)
   ) {