@react-x11/components 0.14.0 → 0.16.0

package/src/html/layout/table.ts

@@ -17,11 +17,15 @@ import type { ComputedStyle } from '../css/style.js';
 import { Box, CLIPPED_CELLS, COLLAPSED_CELLS, isBlank } from './boxes.js';
 import {
   CELL_CONTENT,
+  FLEXED_HEIGHT,
   MIN_CONTENT_PROBE,
+  STRETCHED_ACROSS,
+  USED_HEIGHT,
   clampHeight,
   cyclicWidth,
   exactMinContent,
   layoutBlockIn,
+  layoutSubtree,
   measureIntrinsicWidth,
   moveContent,
   moveTo,
@@ -30,54 +34,45 @@ import {
 import type { LayoutContext } from './block.js';
 import { firstBaselineIn } from './inline.js';
 import { tableGrid } from './grid.js';
-import type { Cell } from './grid.js';
+import type { Cell, TableGrid } from './grid.js';
 
-/** Lay out a table's insides. Returns the content height. */
+/**
+ * Lay out a table's insides. Returns the content height.
+ *
+ * A table in a cell is measured and laid out from inside the layout of the
+ * table around it, so nested tables hold every level's frames on the stack
+ * at once. So this is the phases and nothing else, and what waits on the
+ * stack while a cell's content is measured (`measureCell`) and laid out
+ * (`layoutCells`) is the few values passed between them; the columns'
+ * arithmetic (`sizeColumns`, `autoColumns`) and the rows' (`placeRows`)
+ * are done before or after, in frames of their own. As one function, every
+ * local of every phase in the one frame the interpreter keeps whole, a
+ * level of nested tables took 4 KB of the stack where it takes 2.8, and
+ * `display: table-cell` boxes 254 deep, as deep as the parser lets a
+ * document go, ran out of the 984 KB V8 gives the main thread: the
+ * document came out blank. (The box builder stops them at 128 now, for
+ * paint's sake, `MAX_DEPTH`.)
+ */
 export function layoutTable(
   table: Box,
   ctx: LayoutContext,
   contentWidth: number,
 ): number {
-  const { rows, captions, cells, columnCount, columnBoxes, columnGroups } =
-    tableGrid(table);
+  const grid = tableGrid(table);
   table.captionTop = 0;
   table.captionBottom = 0;
   // a percentage of a width that is not known is `auto`: the table is as
   // wide as its columns where its content is measured (`cyclicWidth`)
-  const auto =
+  const own =
     table.style.width === AUTO || cyclicWidth(table.style, contentWidth);
-  if (!columnCount) {
-    // With no columns, an auto table is as wide as its widest caption can
-    // be and its `min-width` asks, as one with columns is at the least
-    // (17.5.2), rather than as the room on offer: a caption over no cells
-    // was centred in the width of the page.
-    if (auto) {
-      let inner = captions.length
-        ? captionMinimum(captions, ctx) - table.horizontalExtra
-        : 0;
-      const min = resolveOrNull(table.style.minWidth, contentWidth);
-      if (min !== null) {
-        inner = Math.max(
-          inner,
-          table.style.boxSizing === 'border-box'
-            ? min - table.horizontalExtra
-            : min,
-        );
-      }
-      table.width = Math.max(0, inner) + table.horizontalExtra;
-    }
-    layoutCaptions(captions, ctx, table);
+  // — and one a grid stretches across its area is as wide as that, as a
+  // table with a width of its own is (`STRETCHED_ACROSS`)
+  const auto = own && !STRETCHED_ACROSS.has(table);
+  if (!grid.columnCount) {
+    layoutColumnless(table, grid.captions, ctx, contentWidth, auto);
     return 0;
   }
 
-  const style = table.style;
-  // between the columns, and between the rows (CSS 2.1 17.6.1)
-  const apart = style.borderCollapse !== 'collapse';
-  const spacing = apart ? style.borderSpacing : 0;
-  const rowSpacing = apart ? style.borderSpacingY : 0;
-  const gaps = spacing * (columnCount + 1);
-  const available = Math.max(0, contentWidth - gaps);
-
   // While the columns are sized, a percentage in a cell's padding is of
   // nothing: the width it is of is the one the columns are being sized to
   // come to (CSS Sizing 3, 5.2.1), and a cell asks of its column what its
@@ -85,31 +80,92 @@ export function layoutTable(
   // widths, below. Taken of the table's width here, and of the cell's own
   // where the cell was laid out, a padded cell's column was wider than
   // its share and its padding narrower.
-  for (const cell of cells) resolveEdges(cell.box, 0);
+  for (const cell of grid.cells) resolveEdges(cell.box, 0);
 
   // a fixed layout needs a width to be fixed to; with `auto` a table is laid
-  // out by its contents after all (CSS 2.1 17.5.2.1)
-  const fixed = style.tableLayout === 'fixed' && !auto;
-  // a percentage of the table's width less its spacing (CSS 2.1 17.5.2.1)
-  const set = columnWidths(columnBoxes, columnGroups, available);
-  const widths = fixed
-    ? fixedColumns(cells, set, columnCount, available, spacing)
-    : autoColumns(
-        cells,
-        set,
-        columnCount,
-        available,
-        ctx,
-        contentWidth,
-        !auto,
-        spacing,
+  // out by its contents after all (CSS 2.1 17.5.2.1), stretched or not
+  const fixed = table.style.tableLayout === 'fixed' && !own;
+  if (!fixed) for (const cell of grid.cells) measureCell(cell.box, ctx);
+  const columns = sizeColumns(table, grid, contentWidth, fixed, auto, ctx);
+  layoutCaptions(grid.captions, ctx, table);
+  const natural = layoutCells(grid.cells, columns, ctx);
+  return placeRows(table, grid, columns, natural);
+}
+
+/** A table with no columns, and its captions. */
+function layoutColumnless(
+  table: Box,
+  captions: Box[],
+  ctx: LayoutContext,
+  contentWidth: number,
+  auto: boolean,
+): void {
+  // With no columns, an auto table is as wide as its widest caption can
+  // be and its `min-width` asks, as one with columns is at the least
+  // (17.5.2), rather than as the room on offer: a caption over no cells
+  // was centred in the width of the page.
+  if (auto) {
+    let inner = captions.length
+      ? captionMinimum(captions, ctx) - table.horizontalExtra
+      : 0;
+    const min = resolveOrNull(table.style.minWidth, contentWidth);
+    if (min !== null) {
+      inner = Math.max(
+        inner,
+        table.style.boxSizing === 'border-box'
+          ? min - table.horizontalExtra
+          : min,
       );
+    }
+    table.width = Math.max(0, inner) + table.horizontalExtra;
+  }
+  layoutCaptions(captions, ctx, table);
+  TABLE_CONTENT.set(
+    table,
+    table.captionTop + table.captionBottom + table.verticalExtra,
+  );
+}
+
+/** Where a table's columns are (`sizeColumns`). */
+interface Columns {
+  widths: number[];
+  /** Each column's left edge. */
+  columnX: number[];
+  /** Whether `visibility: collapse` takes each column out, and any. */
+  gone: boolean[];
+  anyGone: boolean;
+  /** Where the columns end: past the last one left in, and the spacing
+   *  after it. */
+  end: number;
+  /** Between the columns, and between the rows (CSS 2.1 17.6.1). */
+  spacing: number;
+  rowSpacing: number;
+}
+
+/** A table's columns sized and placed, and the table as wide as they
+ *  make it. Its cells are measured already (`measureCell`). */
+function sizeColumns(
+  table: Box,
+  grid: TableGrid,
+  contentWidth: number,
+  fixed: boolean,
+  auto: boolean,
+  ctx: LayoutContext,
+): Columns {
+  const { cells, captions, columnCount, columnBoxes, columnGroups } = grid;
+  const style = table.style;
+  // between the columns, and between the rows (CSS 2.1 17.6.1)
+  const apart = style.borderCollapse !== 'collapse';
+  const spacing = apart ? style.borderSpacing : 0;
+  const rowSpacing = apart ? style.borderSpacingY : 0;
+  const gaps = spacing * (columnCount + 1);
+  const available = Math.max(0, contentWidth - gaps);
 
-  // --- place ---------------------------------------------------------------
   // An auto table is at least as wide as its widest caption can be (CSS 2.1
-  // 17.5.2), and as its `min-width` asks; the columns share what that adds.
+  // 17.5.2), and as its `min-width` asks; the columns share what that adds
+  // as they share a width of the table's own (`autoColumns`).
+  let room = 0;
   if (auto) {
-    let room = 0;
     if (captions.length) {
       room = captionMinimum(captions, ctx) - table.horizontalExtra - gaps;
     }
@@ -119,17 +175,37 @@ export function layoutTable(
         style.boxSizing === 'border-box' ? min - table.horizontalExtra : min;
       room = Math.max(room, inner - gaps);
     }
-    const sum = widths.reduce((a, b) => a + b, 0);
-    if (room > sum) {
-      for (let c = 0; c < columnCount; c += 1) {
-        widths[c] +=
-          sum > 0
-            ? (widths[c] / sum) * (room - sum)
-            : (room - sum) / columnCount;
-      }
-    }
   }
+  // A percentage, a column's or a cell's, is of the table's width less
+  // its spacing: CSS Tables 3's assignable table width, which Blink takes
+  // one of in either layout, so a 50% cell in a table of 300 spaced 2 is
+  // 147. In an auto table it is of the width the columns come to, and
+  // helps decide it (`autoColumns`).
+  const set = columnWidths(columnBoxes, columnGroups, available, fixed);
+  const widths = fixed
+    ? fixedColumns(
+        cells,
+        set,
+        columnPercents(columnBoxes, columnGroups),
+        columnLeast(columnBoxes, columnGroups),
+        columnCount,
+        available,
+        spacing,
+      )
+    : autoColumns(
+        cells,
+        set,
+        columnLeast(columnBoxes, columnGroups),
+        columnPercents(columnBoxes, columnGroups),
+        columnCount,
+        available,
+        !auto,
+        spacing,
+        room,
+        percentagesWiden(table, contentWidth),
+      );
 
+  // --- place ---------------------------------------------------------------
   // A column that `visibility: collapse` takes out of the table has been
   // sized with the rest, and is no room at all where they are placed (CSS
   // 2.1 17.5.5): no width, and no spacing after it. Its cells are still
@@ -165,60 +241,112 @@ export function layoutTable(
     tableContentWidth = used;
     table.width = used + table.horizontalExtra;
   }
-  layoutCaptions(captions, ctx, table);
-
-  const top = table.contentY + table.captionTop;
-  let y = top;
-  const rowTop: number[] = new Array<number>(rows.length);
-  const rowHeight: number[] = new Array<number>(rows.length).fill(0);
-  y += rowSpacing;
+  return { widths, columnX, gone, anyGone, end: x, spacing, rowSpacing };
+}
 
-  // Size every cell at its column width first, so a row's height is the
-  // tallest cell in it rather than the first one that was measured. What
-  // its content came to is kept apart from a height the cell sets: it is
-  // that content `vertical-align` moves in the cell.
-  //
-  // A percentage in a cell's padding is of the width of its row: the
-  // columns and the spacing between them, without the spacing either side
-  // and the table's own padding. CSS 2.1 8.4 has it of the containing
-  // block's width and names none for a cell; the row's is what browsers
-  // take, and what the table's content box is wherever there is no
-  // spacing. Every column counts, one `visibility: collapse` takes out
-  // too, so that taking it out changes no row's height.
-  let rowWidth = spacing * Math.max(0, columnCount - 1);
+/**
+ * Every cell laid out at its columns' width, all of them before a row is
+ * sized, so a row's height is the tallest cell in it rather than the first
+ * one that was measured. What its content came to is kept apart from a
+ * height the cell sets: it is that content `vertical-align` moves in the
+ * cell.
+ *
+ * A percentage in a cell's padding is of the width of its row: the
+ * columns and the spacing between them, without the spacing either side
+ * and the table's own padding. CSS 2.1 8.4 has it of the containing
+ * block's width and names none for a cell; the row's is what browsers
+ * take, and what the table's content box is wherever there is no
+ * spacing. Every column counts, one `visibility: collapse` takes out
+ * too, so that taking it out changes no row's height.
+ *
+ * Returns what each cell's content came to.
+ */
+function layoutCells(
+  cells: Cell[],
+  columns: Columns,
+  ctx: LayoutContext,
+): number[] {
+  const { widths, spacing } = columns;
+  let rowWidth = spacing * Math.max(0, widths.length - 1);
   for (const columnWidth of widths) rowWidth += columnWidth;
   const natural: number[] = new Array<number>(cells.length);
   for (let i = 0; i < cells.length; i += 1) {
     const cell = cells[i];
     const width = spannedWidth(widths, cell, spacing);
-    ctx.layoutSubtree(cell.box, width, rowWidth);
+    layoutSubtree(cell.box, ctx, width, rowWidth);
     natural[i] = CELL_CONTENT.get(cell.box) ?? cell.box.height;
     // A height a cell sets is a least one: its content is laid out as a
     // block's, which keeps a height it sets and lets the content run out of
     // it, and a cell does not. `<td height="10">` with a line in it is as
     // tall as the line (CSS 2.1 17.5.3), where it was 10px with the line
     // hanging out of it.
-    if (natural[i] > cell.box.height) cell.box.height = natural[i];
+    //
+    // The height is of the box `box-sizing` names, and a border-box one
+    // holds at least the padding and border; a cell's `min-height` and
+    // `max-height` count for nothing here, as in Blink (`ComputeRowData`),
+    // so the height its own layout clamped to them is not kept. The padding
+    // went on a border-box height a second time, and a cell set 80px tall
+    // was 100px. (Quirks mode takes every cell's height as a border box;
+    // `<Html>` has no quirks mode.)
+    cell.box.height = natural[i];
     const specified = resolveOrNull(cell.box.style.height, NaN);
     if (specified !== null) {
+      const extra = cell.box.verticalExtra;
+      const set = Math.max(0, specified);
       cell.box.height = Math.max(
         cell.box.height,
-        specified + cell.box.verticalExtra,
+        cell.box.style.boxSizing === 'border-box'
+          ? Math.max(set, extra)
+          : set + extra,
       );
     }
   }
+  return natural;
+}
+
+/** The rows' heights, and the rows and the cells placed, once every cell
+ *  is laid out at its columns' width (`layoutCells`) and its content came
+ *  to `natural`. Returns the rows' height. */
+function placeRows(
+  table: Box,
+  grid: TableGrid,
+  columns: Columns,
+  natural: number[],
+): number {
+  const { rows, cells } = grid;
+  const { widths, columnX, gone, anyGone, spacing, rowSpacing } = columns;
+  const columnCount = widths.length;
+  const style = table.style;
+  const top = table.contentY + table.captionTop;
+  let y = top;
+  const rowTop: number[] = new Array<number>(rows.length);
+  const rowHeight: number[] = new Array<number>(rows.length).fill(0);
+  y += rowSpacing;
+
   // A cell aligned on the baseline — every value but `top`, `middle` and
   // `bottom` — hangs its first line on its first row's baseline, the lowest
   // of theirs from the row's top (CSS 2.1 17.5.3), and the row is as tall as
-  // the cells hung from it need.
-  const lift = baselineLifts(cells, rows.length);
+  // the cells hung from it need. What moves down is the content, so a cell
+  // needs the lift and its content, and a height it sets is a least one
+  // beside that rather than more room under the lift: two cells set
+  // `height: 80px` with text of two sizes in them are a row 80px tall, where
+  // the lift on top of the height made it 104px.
+  //
+  // A cell spanning rows asks its first row for its baseline and nothing
+  // under it, and the rows it spans for its content and height alone, as
+  // Chrome sizes it (Blink's `RowBaselineTabulator` gives it an ascent and
+  // no descent): the lifted content hangs out of the cell. 17.5.3 asks only
+  // that the rows encompass the cell, whose box is as tall as its content.
+  const { lift, own: ascent } = baselineLifts(cells, rows.length, natural);
+  const needs = (i: number): number =>
+    cells[i].rowSpan > 1
+      ? cells[i].box.height
+      : Math.max(cells[i].box.height, lift[i] + natural[i]);
   for (let i = 0; i < cells.length; i += 1) {
     const cell = cells[i];
-    if (cell.rowSpan > 1) continue;
-    rowHeight[cell.row] = Math.max(
-      rowHeight[cell.row],
-      lift[i] + cell.box.height,
-    );
+    const need = cell.rowSpan > 1 ? lift[i] + ascent[i] : needs(i);
+    // NaN for a spanning cell with no baseline, which Math.max would keep
+    if (need > rowHeight[cell.row]) rowHeight[cell.row] = need;
   }
   for (let r = 0; r < rows.length; r += 1) {
     const specified = resolveOrNull(rows[r].style.height, NaN);
@@ -226,22 +354,73 @@ export function layoutTable(
   }
   // A row-spanning cell only forces height when the rows it covers do not
   // already provide it — otherwise a `rowspan="3"` cell would make each of
-  // its three rows as tall as all of it.
+  // its three rows as tall as all of it — and what they come short of it
+  // is shared out over them (`growRows`), where it all went to the last.
+  // Blink takes the cells in an order of its own: one inside another's
+  // rows first, so that the outer one is given what the inner left it; of
+  // two over the same rows, the taller; and else from the top down.
+  const spanning: number[] = [];
+  const lastRow = (cell: Cell): number =>
+    Math.min(rows.length - 1, cell.row + cell.rowSpan - 1);
   for (let i = 0; i < cells.length; i += 1) {
-    const cell = cells[i];
-    if (cell.rowSpan <= 1) continue;
-    const last = Math.min(rows.length - 1, cell.row + cell.rowSpan - 1);
-    let covered = 0;
-    for (let r = cell.row; r <= last; r += 1) covered += rowHeight[r];
-    covered += rowSpacing * (last - cell.row);
-    const missing = lift[i] + cell.box.height - covered;
-    if (missing > 0) rowHeight[last] += missing;
+    if (cells[i].rowSpan > 1) spanning.push(i);
+  }
+  if (spanning.length) {
+    const starts: boolean[] = new Array<boolean>(rows.length).fill(false);
+    for (const i of spanning) {
+      if (lastRow(cells[i]) > cells[i].row) starts[cells[i].row] = true;
+    }
+    spanning.sort((a, b) => {
+      const p = cells[a];
+      const q = cells[b];
+      const pEnd = lastRow(p);
+      const qEnd = lastRow(q);
+      if (p.row === q.row && pEnd === qEnd) return needs(b) - needs(a);
+      if (p.row >= q.row && pEnd <= qEnd) return -1;
+      if (q.row >= p.row && qEnd <= pEnd) return 1;
+      return p.row - q.row;
+    });
+    const sizing = rowSizing(rows, cells);
+    for (const i of spanning) {
+      const cell = cells[i];
+      const last = lastRow(cell);
+      let covered = 0;
+      for (let r = cell.row; r <= last; r += 1) covered += rowHeight[r];
+      covered += rowSpacing * (last - cell.row);
+      const missing = needs(i) - covered;
+      if (missing > 0) {
+        growRows(rowHeight, sizing, missing, null, cell.row, last, starts);
+      }
+    }
   }
 
+  // What the rows come to before any height is shared out to them, the
+  // spacing above, below and between them in (`TABLE_CONTENT`)
+  let rowsOwn = rowSpacing;
+  for (let r = 0; r < rows.length; r += 1) {
+    if (rows[r].style.visibility !== 'collapse') {
+      rowsOwn += rowHeight[r] + rowSpacing;
+    }
+  }
+  TABLE_CONTENT.set(
+    table,
+    rowsOwn + table.captionTop + table.captionBottom + table.verticalExtra,
+  );
+
   // A table's own height, within its least and greatest, is a least
   // height: what its rows come short of it goes to them (CSS 2.1 17.5.3,
-  // which leaves how to its user agents: `growRows`)
+  // which leaves how to its user agents: `growRows`). So is the height a
+  // flex or grid layout gave it, stretched or flexed (`FLEXED_HEIGHT`,
+  // `USED_HEIGHT`), which is its wrapper box's, captions and all (CSS
+  // Flexbox 1, 4): taken as the table's box alone, a table stretched down
+  // its line kept its rows at their content's height, and a cell had
+  // nothing for `vertical-align` to centre its content in. That one is its
+  // height in place of its own, which the flex layout started from: flexed
+  // down a column shorter than a height of its own, it is as short as that,
+  // where its rows let it be (Blink: "A table interprets forced block-size
+  // as the block-size of its rows", `flex_layout_algorithm.cc`).
   const wanted = resolveOrNull(style.height, table.percentHeightBase);
+  const given = givenHeight(table);
   if (rows.length) {
     const extraBox = table.verticalExtra;
     const set =
@@ -250,7 +429,9 @@ export function layoutTable(
         : style.boxSizing === 'border-box'
           ? wanted
           : wanted + extraBox;
-    const inner = clampHeight(table, set) - extraBox;
+    const inner = Number.isFinite(given)
+      ? given - table.captionTop - table.captionBottom
+      : clampHeight(table, set) - extraBox;
     let total = 0;
     for (const h of rowHeight) total += h;
     const extra = inner - total - rowSpacing * (rows.length + 1);
@@ -362,7 +543,7 @@ export function layoutTable(
   // left edge to the last one's right, the spacing around them outside it
   // (CSS 2.1 17.5.1), as it is above and below.
   const gridX = table.contentX + spacing;
-  const gridWidth = Math.max(0, x - spacing - gridX);
+  const gridWidth = Math.max(0, columns.end - spacing - gridX);
   for (let r = 0; r < rows.length; r += 1) {
     const row = rows[r];
     row.x = gridX;
@@ -386,6 +567,20 @@ export function layoutTable(
   return y - top;
 }
 
+/**
+ * A table's height as its rows and captions came to in its last layout,
+ * border box, apart from a height it sets or is given: the least it can be
+ * at the width it was laid out at. What a flex layout holds a table item to
+ * down a column (`flex.ts`'s `autoMinimums`).
+ */
+export const TABLE_CONTENT = new WeakMap<Box, number>();
+
+/** The content height a flex or grid layout gave a table, its captions in
+ *  (`FLEXED_HEIGHT`, `USED_HEIGHT`), and else NaN. */
+export function givenHeight(table: Box): number {
+  return FLEXED_HEIGHT.get(table) ?? USED_HEIGHT.get(table) ?? NaN;
+}
+
 /** Whether `visibility: collapse` takes a column out: its own, or the
  *  column group's that holds it with no column box of its own. */
 function collapsedColumn(column: Box | null, group: Box | null): boolean {
@@ -464,137 +659,291 @@ function spannedWidth(widths: number[], cell: Cell, spacing: number): number {
 /**
  * `table-layout: fixed`: the columns and the first row decide, and the rest
  * of the table is not measured at all, which is the whole point of it (CSS
- * 2.1 17.5.2.1). A column with a `width` sets its own; failing that, a cell
- * of the first row with one sets the columns it spans, by its border box and
- * less the spacing between them; the columns left share what remains, and
- * where nothing remains, what is left of a table wider than its columns is
- * shared among all of them.
+ * 2.1 17.5.2.1). Each column is set to a length, to a percentage of the
+ * table's width less its spacing, or to neither. A `<col>` set to a length
+ * has it whatever its cells say; otherwise a cell of the first row sets
+ * the column it is in, its percentage over the `<col>`'s where it is the
+ * larger. A cell spanning columns gives each that has no length an even
+ * share of its border box less the spacing between them, and each that
+ * has neither an even share of its percentage: `<td colspan=2
+ * style="width:60%">` sets two columns to 30%, and one 200 wide over a
+ * `<col>` of 50 and a column of nothing makes that 99, where it was the
+ * 148 the `<col>` left. All of this is Blink's, which CSS 2.1 leaves to
+ * the browser.
+ *
+ * The table's width is shared out as Blink shares it too
+ * (`SynchronizeAssignableTableInlineSizeAndColumnsFixed`): the lengths
+ * first, then the percentages, then what is left to the columns set to
+ * neither. Percentages that come to more than 100% are scaled until they
+ * come to that, and percentages that come to more than the lengths leave
+ * are scaled down to it. Where no column is set to neither, what is left
+ * goes to the lengths, or failing those to the percentages. Only a column's
+ * least widens the table: its length, or a `<col>`'s `min-width`. Taken
+ * as lengths, two cells of 60% made a table of 300 one of 359, where each
+ * is 147 and the table 300; and a length of 100 beside a 60% column
+ * shared what the two left with it, 106.4 and 187.6, where the length
+ * takes it all, 117.6 and 176.4.
  */
 function fixedColumns(
   cells: Cell[],
   columnWidths: (number | null)[],
+  columnPercents: (number | null)[],
+  columnLeast: (number | null)[],
   columnCount: number,
   available: number,
   spacing: number,
 ): number[] {
-  const widths: number[] = new Array<number>(columnCount).fill(0);
-  const set: boolean[] = new Array<boolean>(columnCount).fill(false);
-  for (let c = 0; c < columnCount; c += 1) {
-    const px = columnWidths[c];
-    if (px === null) continue;
-    widths[c] = px;
-    set[c] = true;
-  }
+  // each column's length, its percentage, and what a cell with the
+  // percentage adds to it where its padding and borders are not in it
+  const length = columnWidths.map((px, c) =>
+    columnPercents[c] === null ? px : null,
+  );
+  const percent = columnPercents.slice();
+  const added: number[] = new Array<number>(columnCount).fill(0);
   for (const cell of cells) {
     if (cell.row > 0) break;
-    const px = ownWidth(cell.box.style, available);
-    if (px === null) continue;
     const box = cell.box;
-    const outer =
-      box.style.boxSizing === 'border-box'
-        ? Math.max(px, box.horizontalExtra)
-        : px + box.horizontalExtra;
-    const last = Math.min(columnCount, cell.column + cell.colSpan);
-    let taken = spacing * (last - cell.column - 1);
-    let open = 0;
-    for (let c = cell.column; c < last; c += 1) {
-      if (set[c]) taken += widths[c];
-      else open += 1;
-    }
-    if (!open) continue;
-    const each = Math.max(0, outer - taken) / open;
-    for (let c = cell.column; c < last; c += 1) {
-      if (set[c]) continue;
-      widths[c] = each;
-      set[c] = true;
-    }
-  }
-  let used = 0;
-  let unset = 0;
+    const first = cell.column;
+    const last = Math.min(columnCount, first + cell.colSpan);
+    const span = last - first;
+    const share = ownPercent(box.style);
+    if (share !== null) {
+      for (let c = first; c < last; c += 1) {
+        if (length[c] !== null) continue;
+        if (span > 1) {
+          if (percent[c] === null) percent[c] = share / span;
+        } else if (percent[c] === null || share > (percent[c] as number)) {
+          percent[c] = share;
+          added[c] =
+            box.style.boxSizing === 'border-box' ? 0 : box.horizontalExtra;
+        }
+      }
+      continue;
+    }
+    const px = ownWidth(box.style, available);
+    if (px === null) continue;
+    // A length within a length `max-width`, which a `min-width` raises
+    // and does nothing else to: a fixed table does not measure its cells'
+    // content, so a least width has nothing to hold up (CSS Tables 3,
+    // 3.8.2 and 3.8.3, as Blink reads them). Unheld, a cell `width: 300px;
+    // max-width: 100px` took 300 of the table.
+    const outer = Math.min(outerWidth(box, px), cellLimits(box).cap);
+    const each = Math.max(0, outer - spacing * (span - 1)) / span;
+    for (let c = first; c < last; c += 1) {
+      if (length[c] === null) length[c] = each;
+    }
+  }
+
+  // The table is as wide as the least its columns come to, which is what
+  // widens it past its own width: the lengths, and the `min-width` of each
+  // `<col>` set to anything else.
+  let least = 0;
+  let total = 0;
+  for (let c = 0; c < columnCount; c += 1) {
+    const floor = columnLeast[c] ?? 0;
+    const px = length[c];
+    if (percent[c] === null && px !== null) {
+      length[c] = Math.max(px, floor);
+      least += length[c] as number;
+    } else {
+      least += floor;
+    }
+    if (percent[c] !== null) total += percent[c] as number;
+  }
+  const target = Math.max(available, least);
+  const scale = total > 100 ? 100 / total : 1;
+  const ofTarget: number[] = new Array<number>(columnCount).fill(0);
+  let lengths = 0;
+  let percents = 0;
+  let percentCount = 0;
+  let autoCount = 0;
+  let zeroCount = 0;
   for (let c = 0; c < columnCount; c += 1) {
-    if (set[c]) used += widths[c];
-    else unset += 1;
+    const share = percent[c];
+    const px = length[c];
+    if (share !== null) {
+      ofTarget[c] = Math.max(
+        columnLeast[c] ?? 0,
+        ((share * scale) / 100) * target + added[c],
+      );
+      percents += ofTarget[c];
+      percentCount += 1;
+    } else if (px === null) {
+      autoCount += 1;
+    } else if (px > 0) {
+      lengths += px;
+    } else {
+      zeroCount += 1;
+    }
   }
-  const remaining = Math.max(0, available - used);
-  if (unset) {
+
+  const widths: number[] = new Array<number>(columnCount).fill(0);
+  let assigned = 0;
+  // the lengths fit, since they widen the table; they grow into what the
+  // percentages leave where no column is set to neither
+  if (lengths > 0) {
+    const room = Math.max(0, target - percents);
+    const grow = !autoCount && lengths < room ? room / lengths : 1;
     for (let c = 0; c < columnCount; c += 1) {
-      if (!set[c]) widths[c] = remaining / unset;
+      const px = length[c];
+      if (percent[c] !== null || px === null || !(px > 0)) continue;
+      widths[c] = px * grow;
+      assigned += widths[c];
     }
-  } else if (remaining > 0 && columnCount) {
+  }
+  if (assigned >= target) return widths;
+  // the percentages are scaled down to what the lengths leave, and up to
+  // it where no column is set to neither
+  if (percentCount) {
+    const room = target - assigned;
+    const toRoom = percents > room || (!autoCount && percents < room);
     for (let c = 0; c < columnCount; c += 1) {
-      widths[c] +=
-        used > 0 ? (widths[c] / used) * remaining : remaining / columnCount;
+      if (percent[c] === null) continue;
+      widths[c] = !toRoom
+        ? ofTarget[c]
+        : percents > 0
+          ? (ofTarget[c] * room) / percents
+          : room / percentCount;
+      assigned += widths[c];
+    }
+  }
+  // The columns set to neither share what is left. One set to 0 is set to
+  // a length that gets nothing, unless every column is set to 0.
+  const rest = target - assigned;
+  const all = zeroCount === columnCount;
+  if (!all && !autoCount) return widths;
+  for (let c = 0; c < columnCount; c += 1) {
+    if (percent[c] !== null) continue;
+    if (all || length[c] === null) {
+      widths[c] = rest / (all ? zeroCount : autoCount);
     }
   }
   return widths;
 }
 
+/**
+ * A cell's max-content and min-content widths, for `autoColumns`: two probe
+ * layouts, unconstrained for max-content, and at no width for min-content
+ * (`MIN_CONTENT_PROBE`) — which the line breaker answers by breaking at
+ * every opportunity, so the widest line is the longest unbreakable word.
+ *
+ * Cached on the box, because intrinsic widths are width-independent by
+ * definition — measuring them per layout pass made a *resize* of a 500-row
+ * table cost as much as its first layout (223ms of re-probing measured
+ * against 10ms with the cache). The cache's invalidation rule is the box's
+ * lifetime: any DOM or style change rebuilds the tree.
+ *
+ * Every cell is measured before the columns are sized, and not in the loop
+ * that sizes them, so that the frame a table in the cell is measured under
+ * is this small one and not `autoColumns`'s (`layoutTable`).
+ */
+function measureCell(box: Box, ctx: LayoutContext): void {
+  if (box.intrinsicMaxContent >= 0) return;
+  box.intrinsicMaxContent = measureIntrinsicWidth(box, ctx, Infinity);
+  // where its words say it exactly, read from the layout just made
+  box.intrinsicMinContent =
+    (ctx.fonts && exactMinContent(box, ctx.fonts)) ??
+    measureIntrinsicWidth(box, ctx, MIN_CONTENT_PROBE, true);
+}
+
 /**
  * The auto algorithm: measure every cell's max-content and min-content
- * width, then distribute.
+ * width, gather them into columns, and share the table's width out over
+ * them, as CSS Tables 3 has it (3.9.3, "width distribution") and Blink
+ * implements it (`DistributeInlineSizeToComputedInlineSizeAuto`).
  *
- * The distribution is the part worth stating. When the max-content widths
+ * The distribution is the part worth stating. A column is set to a
+ * percentage, set to a length, or neither, and the table's width is shared
+ * out in steps, each tried only where the one before falls short: every
+ * column at its least; then the percentage columns grown towards their
+ * percentage of the table; then the columns set to a length grown towards
+ * it; then the rest towards their max-content. When the max-content widths
  * fit, they are used — a small table is exactly as wide as its contents.
- * When they do not, the surplus over each column's minimum is scaled down in
- * proportion, so a column of long prose gives up more than a column of
- * dates. A column with an explicit `width` is honoured before either.
+ * When they do not, the surplus over each column's minimum is scaled down
+ * in proportion, so a column of long prose gives up more than a column of
+ * dates. What a table has over all of that goes to the columns set to
+ * nothing, or else to those set to a length, or else to the percentages.
+ *
+ * What a cell asks is its content within its length limits (CSS Tables 3,
+ * 3.8.2): its outer min-content width is `max(min-width, min-content)`
+ * and its outer max-content width `max(min-width, min-content,
+ * min(max-width, max-content))`. A `max-width` caps the min-content too,
+ * as Blink has it where the draft does not (`CreateCellInlineConstraint`),
+ * so that `td { max-width: 50px }` over a long word, or a line that does
+ * not wrap and ends in an ellipsis, makes a column 50 wide and not the
+ * word's. Neither limit sets the column's width, which only a `width`
+ * does: a cell `min-width: 100px` over 10px of content in a table of 600
+ * takes its share of the rest, as one 100 wide would.
+ *
+ * A percentage is kept a percentage until the table's width is known, and
+ * is of that, less its spacing: resolved against the room on offer and
+ * held as a length, `<col style="width:20%">` beside a column of 100 made
+ * a table of 180 in 400 of room, where it is 125 — the 100 is the other
+ * 80% of it. That is how a table's percentages make it wider than its
+ * content (`gridMax`), and what `widen` says it may (`percentagesWiden`).
+ * `room` is what its captions and its `min-width` hold an auto table to,
+ * and is shared out with the rest: added on in proportion afterwards, a
+ * caption 200 wide over a column of 50 and one set to 50 made them 100
+ * each, where the column set to nothing takes it all.
  */
 function autoColumns(
   cells: Cell[],
   columnWidths: (number | null)[],
+  columnLeast: (number | null)[],
+  columnPercents: (number | null)[],
   columnCount: number,
   available: number,
-  ctx: LayoutContext,
-  containingWidth: number,
   fill: boolean,
   spacing: number,
+  room: number,
+  widen: boolean,
 ): number[] {
   const max: number[] = new Array<number>(columnCount).fill(0);
   const min: number[] = new Array<number>(columnCount).fill(0);
   const explicit: (number | null)[] = new Array<number | null>(
     columnCount,
   ).fill(null);
+  // each column's percentage: its own, or the most a cell of it asks
+  const percent = columnPercents.slice();
   const spanning: Cell[] = [];
+  // each cell's outer min-content and max-content, within its limits
+  const asks = new Map<Cell, { min: number; max: number }>();
 
   for (const cell of cells) {
-    // Two probe layouts per cell: unconstrained for max-content, and at no
-    // width for min-content (`MIN_CONTENT_PROBE`) — which the line breaker
-    // answers by breaking at every opportunity, so the widest line is the
-    // longest unbreakable word.
-    //
-    // Cached on the box, because intrinsic widths are width-independent by
-    // definition — measuring them per layout pass made a *resize* of a
-    // 500-row table cost as much as its first layout (223ms of re-probing
-    // measured against 10ms with the cache). The cache's invalidation rule
-    // is the box's lifetime: any DOM or style change rebuilds the tree.
-    if (cell.box.intrinsicMaxContent < 0) {
-      cell.box.intrinsicMaxContent = measureIntrinsicWidth(
-        cell.box,
-        ctx,
-        Infinity,
-      );
-      // where its words say it exactly, read from the layout just made
-      cell.box.intrinsicMinContent =
-        (ctx.fonts && exactMinContent(cell.box, ctx.fonts)) ??
-        measureIntrinsicWidth(cell.box, ctx, MIN_CONTENT_PROBE, true);
-    }
+    // what its content asks, measured before (`measureCell`)
+    const { floor, cap } = cellLimits(cell.box);
+    const low = Math.min(Math.max(cell.box.intrinsicMinContent, floor), cap);
+    const ask = {
+      min: low,
+      max: Math.max(low, Math.min(cell.box.intrinsicMaxContent, cap)),
+    };
+    asks.set(cell, ask);
     if (cell.colSpan > 1) {
       spanning.push(cell);
       continue;
     }
-    max[cell.column] = Math.max(max[cell.column], cell.box.intrinsicMaxContent);
-    min[cell.column] = Math.max(min[cell.column], cell.box.intrinsicMinContent);
-    const width = cellWidth(cell, containingWidth);
-    if (width !== null) {
-      explicit[cell.column] = Math.max(explicit[cell.column] ?? 0, width);
-    }
+    const c = cell.column;
+    max[c] = Math.max(max[c], ask.max);
+    min[c] = Math.max(min[c], ask.min);
+    // a percentage is the column's, 0% among them, as Blink keeps it
+    const share = ownPercent(cell.box.style);
+    if (share !== null) percent[c] = Math.max(percent[c] ?? 0, share);
+    const width = cellWidth(cell);
+    if (width !== null) explicit[c] = Math.max(explicit[c] ?? 0, width);
   }
 
   // a column's own width counts as its cells' do: at least that, and its
-  // content's max where that is wider (CSS 2.1 17.5.2.2, step 2)
+  // content's max where that is wider (CSS 2.1 17.5.2.2, step 2); and its
+  // `min-width` alone is the least it and its content are, as a cell's
+  // is, and sets no width (CSS Tables 3, 3.8.2)
   for (let c = 0; c < columnCount; c += 1) {
     const own = columnWidths[c];
     if (own !== null) explicit[c] = Math.max(explicit[c] ?? 0, own);
+    const floor = columnLeast[c];
+    if (floor !== null) {
+      min[c] = Math.max(min[c], floor);
+      max[c] = Math.max(max[c], floor);
+    }
   }
 
   // A spanning cell comes after the cells of one column, the narrower
@@ -605,173 +954,452 @@ function autoColumns(
   // they have none. Taken in document order and spread evenly, a spanning
   // cell in a first row was shared out before the cells of one column
   // under it were seen, and a column one of them set to 5px took half.
+  //
+  // A column with a percentage is first that much of what the cell asks,
+  // less the spacing, as Blink's distribution over the span resolves it;
+  // what is left goes to the columns set to nothing, or else to those set
+  // to a length, or else to the percentages, by them: `<td colspan=2>` 100
+  // wide over a 50% column and one set to nothing, each of 10, makes them
+  // 50 each. A spanning cell's own percentage goes first to the columns it
+  // spans that have none, as much more as the ones that have come short
+  // of it, in proportion to their content (Blink's
+  // `DistributeColspanCellToColumnsAuto`): `<td colspan=2 style="width:
+  // 50%">` over two columns makes each 25%.
   spanning.sort((a, b) => a.colSpan - b.colSpan);
   const grow = (into: number[], want: number, cell: Cell): void => {
-    const last = Math.min(columnCount - 1, cell.column + cell.colSpan - 1);
-    let have = spacing * (last - cell.column);
-    for (let c = cell.column; c <= last; c += 1) have += into[c];
+    const first = cell.column;
+    const last = Math.min(columnCount - 1, first + cell.colSpan - 1);
+    const between = spacing * (last - first);
+    let have = between;
+    for (let c = first; c <= last; c += 1) have += into[c];
     if (!(want > have)) return;
-    let free = false;
-    for (let c = cell.column; c <= last && !free; c += 1) {
-      free = explicit[c] === null;
+    for (let c = first; c <= last; c += 1) {
+      const share = percent[c];
+      if (share === null) continue;
+      const size = (share / 100) * (want - between);
+      if (size > into[c]) {
+        have += size - into[c];
+        into[c] = size;
+      }
     }
+    if (!(want > have)) return;
+    let takes = (c: number): boolean =>
+      explicit[c] === null && percent[c] === null;
+    let any = false;
+    for (let c = first; c <= last && !any; c += 1) any = takes(c);
+    if (!any) takes = (c) => percent[c] === null;
+    for (let c = first; c <= last && !any; c += 1) any = takes(c);
+    if (!any) takes = () => true;
+    const byPercent = !any;
+    const weightOf = (c: number): number =>
+      byPercent ? (percent[c] as number) : max[c];
     let weight = 0;
     let count = 0;
-    for (let c = cell.column; c <= last; c += 1) {
-      if (free && explicit[c] !== null) continue;
-      weight += max[c];
+    for (let c = first; c <= last; c += 1) {
+      if (!takes(c)) continue;
+      weight += weightOf(c);
       count += 1;
     }
-    for (let c = cell.column; c <= last; c += 1) {
-      if (free && explicit[c] !== null) continue;
-      into[c] +=
-        weight > 0 ? ((want - have) * max[c]) / weight : (want - have) / count;
+    const extra = want - have;
+    for (let c = first; c <= last; c += 1) {
+      if (!takes(c)) continue;
+      into[c] += weight > 0 ? (extra * weightOf(c)) / weight : extra / count;
     }
   };
 
+  for (const cell of spanning) {
+    const share = ownPercent(cell.box.style);
+    if (share !== null) spreadPercent(percent, max, share, cell, columnCount);
+  }
   // what the columns' content alone asks, before their set widths: the
   // least a column gives way to when the table has less room than its
   // cells' widths want, as beside a float
   const least = min.slice();
-  for (const cell of spanning) grow(least, cell.box.intrinsicMinContent, cell);
+  for (const cell of spanning) grow(least, asks.get(cell)!.min, cell);
+  // A column set to a length is at least that wide, where there is room;
+  // one with a percentage too is that, and its length is only the most
+  // its content asks, which is what its percentage holds the table to
   for (let c = 0; c < columnCount; c += 1) {
-    if (explicit[c] !== null) {
-      max[c] = Math.max(min[c], explicit[c] as number);
-      min[c] = Math.max(min[c], Math.min(explicit[c] as number, max[c]));
-    }
+    const own = explicit[c];
+    if (own === null) continue;
+    max[c] = Math.max(min[c], own);
+    if (percent[c] === null) min[c] = Math.max(min[c], Math.min(own, max[c]));
   }
   // and with them: a spanning cell's own width is the least it is, as a
   // single cell's is (step 1), so a cell over three columns set to 100px,
   // with 20px between them, has 60 to share, where it had none
   for (const cell of spanning) {
-    const own = cellWidth(cell, containingWidth) ?? 0;
-    grow(min, Math.max(cell.box.intrinsicMinContent, own), cell);
-    grow(max, Math.max(cell.box.intrinsicMaxContent, own), cell);
+    const own = cellWidth(cell) ?? 0;
+    const ask = asks.get(cell)!;
+    grow(min, Math.max(ask.min, own), cell);
+    grow(max, Math.max(ask.max, own), cell);
   }
   for (let c = 0; c < columnCount; c += 1) min[c] = Math.min(min[c], max[c]);
 
-  const totalMax = max.reduce((a, b) => a + b, 0);
-  if (totalMax <= available) {
-    // Everything fits. A table with a width of its own still fills it (CSS
-    // 2.1 17.5.2.2): the columns not set to a width take the rest in
-    // proportion to what they asked for, or every column does where all are
-    // set. Returned as asked, `<table width="600">` drew its cells at their
-    // content's width and left the rest of its 600 empty.
-    if (!fill || available <= totalMax) return max;
-    const set = explicit.every((w) => w !== null);
-    let weight = 0;
+  // The percentages come to no more than 100, the columns' in order:
+  // where they would, a column has what is left, which may be none
+  let total = 0;
+  for (let c = 0; c < columnCount; c += 1) {
+    const share = percent[c];
+    if (share === null) continue;
+    percent[c] = share + total > 100 ? 100 - total : share;
+    total += percent[c] as number;
+  }
+
+  // How wide the table is: the room on offer where it has a width of its
+  // own, and where it has not, as wide as its columns ask, up to the room
+  // (CSS Tables 3, 3.9.2) — wide enough for its percentages too
+  const most = gridMax(max, percent, total, widen);
+  let target = fill ? available : Math.min(available, most);
+  target = Math.max(target, room);
+  if (!Number.isFinite(target)) target = Math.max(most, room);
+
+  // The guesses, each a sum over the columns (3.9.3): every column at its
+  // least; the percentages at theirs; the lengths at theirs; and every
+  // column at its max-content, the percentages still at theirs
+  const sized: number[] = new Array<number>(columnCount).fill(0);
+  let atLeast = 0;
+  let atPercent = 0;
+  let atSet = 0;
+  let atMax = 0;
+  for (let c = 0; c < columnCount; c += 1) {
+    atLeast += least[c];
+    const share = percent[c];
+    if (share !== null) {
+      // a percentage of the border box, so never narrower than its content
+      sized[c] = Math.max(min[c], (share / 100) * target);
+      atPercent += sized[c];
+      atSet += sized[c];
+      atMax += sized[c];
+    } else {
+      atPercent += least[c];
+      atSet += min[c];
+      atMax += max[c];
+    }
+  }
+  if (target <= atLeast) {
+    // Less room than the cells' content needs: a table never goes narrower
+    // than its words (CSS 2.1 17.5.2.2), which it overflows.
+    return least;
+  }
+  if (target <= atPercent) {
+    // The percentages grow from their least towards their size, each by as
+    // much as it has to go, and the rest stay at theirs
+    const deficit = target - atLeast;
+    let increase = 0;
     let count = 0;
     for (let c = 0; c < columnCount; c += 1) {
-      if (!set && explicit[c] !== null) continue;
-      weight += max[c];
+      if (percent[c] === null) continue;
+      increase += sized[c] - least[c];
       count += 1;
     }
-    const extra = available - totalMax;
-    return max.map((m, c) =>
-      !set && explicit[c] !== null
-        ? m
-        : m + (weight > 0 ? (extra * m) / weight : extra / count),
+    return least.map((l, c) =>
+      percent[c] === null
+        ? l
+        : l +
+          (increase > 0
+            ? (deficit * (sized[c] - l)) / increase
+            : deficit / count),
     );
   }
-  const totalMin = min.reduce((a, b) => a + b, 0);
-  if (totalMin >= available) {
+  if (target <= atSet) {
     // Less room than the cells' widths want: a width a cell was set to
-    // gives way first, down to what its content asks, and a table never
-    // goes narrower than its words (CSS 2.1 17.5.2.2), which it overflows.
-    const totalLeast = least.reduce((a, b) => a + b, 0);
-    if (totalLeast >= available) return least;
-    const give = totalMin - totalLeast;
-    return min.map(
-      (m, c) => m - ((m - least[c]) / give) * (totalMin - available),
+    // gives way first, down to what its content asks.
+    const give = atSet - atPercent;
+    return min.map((m, c) =>
+      percent[c] !== null
+        ? sized[c]
+        : m - ((m - least[c]) / give) * (atSet - target),
     );
   }
-  const slack = available - totalMin;
-  const surplus = totalMax - totalMin;
-  return max.map((m, c) => min[c] + ((m - min[c]) / surplus) * slack);
+  if (target < atMax) {
+    const slack = target - atSet;
+    const surplus = atMax - atSet;
+    return max.map((m, c) =>
+      percent[c] !== null
+        ? sized[c]
+        : min[c] + ((m - min[c]) / surplus) * slack,
+    );
+  }
+  // Everything fits. A table with a width of its own still fills it (CSS
+  // 2.1 17.5.2.2), and an auto table its captions and `min-width`: the
+  // columns set to nothing take the rest in proportion to what they asked
+  // for; where there are none, the columns set to a length; and where
+  // every column has a percentage, those, by it. Returned as asked,
+  // `<table width="600">` drew its cells at their content's width and left
+  // the rest of its 600 empty.
+  let takes: (c: number) => boolean = (c) =>
+    percent[c] === null && explicit[c] === null;
+  let any = false;
+  for (let c = 0; c < columnCount && !any; c += 1) any = takes(c);
+  if (!any) takes = (c) => percent[c] === null;
+  for (let c = 0; c < columnCount && !any; c += 1) any = takes(c);
+  const byPercent = !any;
+  if (byPercent) takes = () => true;
+  const weightOf = (c: number): number =>
+    byPercent ? (percent[c] as number) : max[c];
+  let weight = 0;
+  let count = 0;
+  for (let c = 0; c < columnCount; c += 1) {
+    if (!takes(c)) continue;
+    weight += weightOf(c);
+    count += 1;
+  }
+  const extra = target - atMax;
+  return max.map((m, c) => {
+    const base = percent[c] !== null ? sized[c] : m;
+    if (!takes(c)) return base;
+    return base + (weight > 0 ? (extra * weightOf(c)) / weight : extra / count);
+  });
+}
+
+/** What Blink makes the most of a table's percentages can make it,
+ *  kTableMaxInlineSize, where the columns with one come to 100% and there
+ *  are others with content: no width is wide enough. */
+const PERCENT_TABLE_MOST = 1_000_000;
+
+/**
+ * The widest an auto table's columns make it, less its spacing (CSS
+ * Tables 3, 3.9.2, GRIDMAX): what they ask, and what their percentages
+ * need where they may count (`widen`). The draft says that a percentage
+ * is a constraint the table should try to satisfy and no more; Blink's
+ * `ComputeGridInlineMinMax` widens the table until it can: a column's
+ * content is no more than its percentage of the table, and the columns
+ * with none are the rest of it. Chrome's: a 20% column over 10 of content
+ * beside one of 100 is a table of 125, and two 30% columns of 10 one of
+ * 33.33.
+ */
+function gridMax(
+  max: number[],
+  percent: (number | null)[],
+  total: number,
+  widen: boolean,
+): number {
+  let most = 0;
+  for (const m of max) most += m;
+  if (!widen || !(total > 0)) return most;
+  let estimate = 0;
+  let rest = 0;
+  for (let c = 0; c < max.length; c += 1) {
+    const share = percent[c];
+    if (share !== null && share > 0) {
+      if (max[c] > 0) estimate = Math.max(estimate, (max[c] * 100) / share);
+    } else {
+      rest += max[c];
+    }
+  }
+  const others =
+    rest > 0
+      ? total >= 100 - 1e-6
+        ? PERCENT_TABLE_MOST
+        : (rest * 100) / (100 - total)
+      : 0;
+  return Math.max(most, others, estimate);
+}
+
+/** A spanning cell's percentage, over the columns it spans: what it has
+ *  more than theirs goes to the ones with none, in proportion to their
+ *  content, or evenly where they have none. */
+function spreadPercent(
+  percent: (number | null)[],
+  max: number[],
+  share: number,
+  cell: Cell,
+  columnCount: number,
+): void {
+  const last = Math.min(columnCount - 1, cell.column + cell.colSpan - 1);
+  let taken = 0;
+  let weight = 0;
+  let count = 0;
+  for (let c = cell.column; c <= last; c += 1) {
+    const own = percent[c];
+    if (own !== null) taken += own;
+    else {
+      weight += max[c];
+      count += 1;
+    }
+  }
+  const surplus = share - taken;
+  if (!(surplus > 0) || !count) return;
+  for (let c = cell.column; c <= last; c += 1) {
+    if (percent[c] !== null) continue;
+    percent[c] = weight > 0 ? (surplus * max[c]) / weight : surplus / count;
+  }
 }
 
 /**
- * The width each column is set to, or null: a column's own `width`, or its
- * group's shared among the columns of a group that has none of its own
- * (HTML's `<colgroup span>`); and a group's `width` spread over its columns
- * where theirs come to less (CSS 2.1 17.5.2.2, step 4). Each within its
- * `min-width` and `max-width`, which apply to columns and column groups as
- * to any block (10.4), so `min-width` alone sets one.
+ * Whether an auto table's percentages may make it wider than its content
+ * (`gridMax`), as Blink's `AllowColumnPercentages` has it: not where its
+ * width is `max-content`, and where it is measured for what it asks of a
+ * table cell, a flex box or a grid around it, not either — which is the
+ * width it is measured at being no width at all (`Infinity`). Laid out,
+ * a table always may; and measured for a float or an inline block, which
+ * are as wide as it asks, it may too. Chrome's: a table of a 20% column
+ * and a 100px one asks 110 of a cell around it and 125 of a float.
+ */
+function percentagesWiden(table: Box, contentWidth: number): boolean {
+  if (table.style.widthKeyword === 'max-content') return false;
+  if (Number.isFinite(contentWidth)) return true;
+  for (let box = table.parent; box; box = box.parent) {
+    if (box.kind === 'table-cell' || box.kind === 'flex') return false;
+  }
+  return true;
+}
+
+/**
+ * The width each column is set to, or null, from the `<col>` and the
+ * `<colgroup>` it is in. A group is its columns' default and no more: the
+ * width specified for a column is its column's, or else its group's (CSS
+ * Tables 3, 3.8.3), so a `<col>` with a width of its own keeps it however
+ * wide the group is, and one with none takes the group's whole, not a
+ * share of it. A group with no `<col>` stands for each column it spans
+ * (`<colgroup span>`), and each is as wide as the group says. That is
+ * HTML 4's "a default width for each column" and Blink's
+ * (`ColumnConstraintsBuilder`), where CSS 2.1 17.5.2.2 spread a group's
+ * width over its columns wherever theirs came to less: a group of 100
+ * over two columns of 20 made each 50, and over two of none made each 50,
+ * where Chrome has 20 and 100.
+ *
+ * Only a length is a default, raised to the group's `min-width` and the
+ * `<col>`'s, and only in an auto table, as Blink has it: a fixed table
+ * takes no group's width for a `<col>`, and its columns share the table as
+ * though the group set none. A `<col>` with a percentage keeps it in a
+ * fixed table, of the table's width; in an auto table a percentage is no
+ * length (`columnPercents`), and a `<col>` with one takes its group's
+ * length beside it, as Blink's `CreateColumn` does — `<colgroup
+ * style="width:100px"><col style="width:20%">` is a column that needs 100
+ * and is a fifth of the table, which makes the table 500.
  */
 function columnWidths(
   columnBoxes: (Box | null)[],
   columnGroups: (Box | null)[],
   base: number,
+  fixed: boolean,
 ): (number | null)[] {
-  const widths = columnBoxes.map((column) =>
-    column ? partWidth(column, base) : null,
-  );
-  let group: Box | null = null;
-  for (let c = 0; c <= columnGroups.length; c += 1) {
-    if (c < columnGroups.length && columnGroups[c] === group) continue;
-    // the group that ends here, over its columns from `start`
-    if (group) {
-      const width = partWidth(group, base);
-      let start = c - 1;
-      while (start > 0 && columnGroups[start - 1] === group) start -= 1;
-      if (width !== null) {
-        let have = 0;
-        for (let i = start; i < c; i += 1) have += widths[i] ?? 0;
-        if (have < width) {
-          const each = (width - have) / (c - start);
-          for (let i = start; i < c; i += 1) {
-            widths[i] = (widths[i] ?? 0) + each;
-          }
-        }
-      }
-    }
-    group = c < columnGroups.length ? columnGroups[c] : null;
-  }
-  return widths;
+  const read = (box: Box): number | null =>
+    fixed || !isPct(box.style.width) ? partWidth(box, base) : null;
+  return columnBoxes.map((column, c) => {
+    const group = columnGroups[c];
+    if (!column) return group ? read(group) : null;
+    const own = read(column);
+    if (own !== null || fixed || !group || isPct(group.style.width)) return own;
+    const width = read(group);
+    return width === null ? null : Math.max(width, partLeast(column) ?? 0);
+  });
 }
 
-/** A column's or a column group's width, within its limits, or null where
- *  it sets none. The limits are lengths: a percentage in them does what it
- *  does in a cell's (`cellWidth`). */
+/** The percentage each column is set to, or null: its `<col>`'s, or its
+ *  group's where the group stands for it with no `<col>`. A group's
+ *  percentage is no default for the `<col>`s in it, and a column set to
+ *  0% has none, as Blink has both (`ColumnConstraintsBuilder`,
+ *  `CreateColumn`). */
+function columnPercents(
+  columnBoxes: (Box | null)[],
+  columnGroups: (Box | null)[],
+): (number | null)[] {
+  return columnBoxes.map((column, c) => {
+    const part = column ?? columnGroups[c];
+    return (part && ownPercent(part.style)) || null;
+  });
+}
+
+/** The least each column is, where a `min-width` says (`partLeast`): its
+ *  `<col>`'s, or, where it has none, the group it is in. A group's
+ *  `min-width` does not reach the `<col>`s in it, as in Blink, which makes
+ *  a group's limits a column's only where the group stands for it:
+ *  `<colgroup style="min-width:100px">` over two `<col>`s of 10px content
+ *  is 20 wide, where the 100 was spread over them. */
+function columnLeast(
+  columnBoxes: (Box | null)[],
+  columnGroups: (Box | null)[],
+): (number | null)[] {
+  return columnBoxes.map((column, c) => {
+    const part = column ?? columnGroups[c];
+    return part ? partLeast(part) : null;
+  });
+}
+
+/** A column's or a column group's width, or null where it sets none: its
+ *  `width`, raised to a length `min-width`. A `max-width` does nothing to
+ *  it. CSS Tables 3, 3.8.2 makes a column's outer min-content width
+ *  `max(min-width, width)`, which is at least as wide as any `max-width`
+ *  could hold it to, and Blink reads no `max-width` on a column at all
+ *  (`CreateColumn`): `<col style="width:100px; max-width:50px">` is 100
+ *  wide, where it was 50. A percentage `max-width` holds a percentage
+ *  `width` (`ownWidth`), and a percentage `min-width` is ignored. */
 function partWidth(box: Box, base: number): number | null {
-  const style = box.style;
-  const width = ownWidth(style, base);
-  const min = typeof style.minWidth === 'number' ? style.minWidth : 0;
-  if (width === null && !(min > 0)) return null;
-  const max = typeof style.maxWidth === 'number' ? style.maxWidth : null;
-  let out = width ?? 0;
-  if (max !== null) out = Math.min(out, max);
-  return Math.max(0, out, min);
-}
-
-/** A cell's own `width`, its padding and borders in, or null. A
- *  percentage is a share of the table its padding and borders are part
- *  of, as browsers read it: added on, a 90% cell and a 10% one came to
- *  more than the table, which then took it back from both. Held within its
- *  `min-width` and `max-width` as a column's is (`partWidth`), which CSS
- *  2.1 leaves undefined and every browser does: a cell set `width: 3in;
- *  max-width: 1in` is an inch wide, and one with `min-width` alone is as
- *  wide as that.
- *
- *  Where they are lengths. A percentage `min-width` is ignored, and a
- *  percentage `max-width` holds a percentage `width` and nothing else
- *  (CSS Tables 3, 3.8.2, and `ownWidth`): a cell `width: 100px;
- *  max-width: 10%` in a table of 600 is 100 wide, where it was 60, and
- *  one set `min-width: 150%` takes no more than its content asks. */
-function cellWidth(cell: Cell, base: number): number | null {
-  const style = cell.box.style;
-  const len = style.width;
-  const width = ownWidth(style, base);
-  const min = typeof style.minWidth === 'number' ? style.minWidth : 0;
-  if (width === null && !(min > 0)) return null;
-  const max = typeof style.maxWidth === 'number' ? style.maxWidth : null;
-  let own = width ?? 0;
-  if (max !== null) own = Math.min(own, max);
-  own = Math.max(0, own, min);
-  if (isPct(len) && own === width) {
-    return Math.max(width, cell.box.horizontalExtra);
-  }
-  return own + cell.box.horizontalExtra;
+  const width = ownWidth(box.style, base);
+  if (width === null) return null;
+  return Math.max(0, width, partLeast(box) ?? 0);
+}
+
+/** The least a column or a column group is, where a length `min-width`
+ *  says: what its cells ask is held up to it, and it sets no width of its
+ *  own. A fixed table's columns ask nothing, so there it is only the least
+ *  the table is (`fixedColumns`). Read as a width, `<col
+ *  style="min-width:100px">` held a column of prose to 100 in an auto
+ *  table, where it is as wide as the prose is. */
+function partLeast(box: Box): number | null {
+  const min = box.style.minWidth;
+  return typeof min === 'number' && min > 0 ? min : null;
+}
+
+/** A cell's own length `width`, its padding and borders in, or null. A
+ *  length is held within a length `max-width`, which CSS 2.1 leaves
+ *  undefined and every browser does: a cell set `width: 3in; max-width:
+ *  1in` is an inch wide, and one `width: 100px; max-width: 10%` 100, a
+ *  percentage limit holding a percentage only (CSS Tables 3, 3.8.2). A
+ *  `min-width` sets no width, and holds up what the cell asks instead. A
+ *  percentage is its column's (`ownPercent`). */
+function cellWidth(cell: Cell): number | null {
+  const box = cell.box;
+  if (isPct(box.style.width)) return null;
+  const width = lengthAgainst(box.style.width, NaN);
+  if (width === null) return null;
+  return Math.min(outerWidth(box, width), cellLimits(box).cap);
+}
+
+/** A cell's, a column's or a column group's percentage `width`, or null
+ *  where it is none: no more than a percentage `max-width` (CSS Tables 3,
+ *  3.8.2, as `ownWidth`), and not a `calc()` that adds a length to it,
+ *  which is `auto` (`tableWidth`). In an auto table it is a share of the
+ *  table that the cell's padding and borders are part of, as browsers
+ *  read it: added on, a 90% cell and a 10% one came to more than the
+ *  table, which then took it back from both. In a fixed one a
+ *  `content-box` cell's are added to it, as Blink's
+ *  `percent_border_padding` has them (`fixedColumns`). A length
+ *  `max-width` does not hold it: `width: 50%; max-width: 100px` is half
+ *  the table, as in Blink, which keeps a percentage apart from the lengths
+ *  that cap what a cell's content asks. */
+function ownPercent(style: ComputedStyle): number | null {
+  const width = style.width;
+  if (!isPct(width) || width.px || width.of) return null;
+  const limit = style.maxWidth;
+  if (limit === 'none' || !isPct(limit) || limit.px || limit.of) {
+    return width.pct;
+  }
+  return Math.min(width.pct, limit.pct);
+}
+
+/** A cell's length `min-width` and `max-width` as border-box widths, the
+ *  limit raised to the least, or 0 and Infinity where it has none: what
+ *  its column sizes its content within (`autoColumns`), and a fixed table
+ *  its width (`fixedColumns`). As Blink's `InlineSizesFromStyle`. */
+function cellLimits(box: Box): { floor: number; cap: number } {
+  const { minWidth, maxWidth } = box.style;
+  const floor = typeof minWidth === 'number' ? outerWidth(box, minWidth) : 0;
+  const cap =
+    typeof maxWidth === 'number'
+      ? Math.max(outerWidth(box, maxWidth), floor)
+      : Infinity;
+  return { floor, cap };
+}
+
+/** A width a cell's style gives, as its border box. */
+function outerWidth(box: Box, width: number): number {
+  return box.style.boxSizing === 'border-box'
+    ? Math.max(width, box.horizontalExtra)
+    : width + box.horizontalExtra;
 }
 
 /** A cell's, a column's or a column group's `width` as the columns read
@@ -805,20 +1433,27 @@ function lengthAgainst(len: Len, base: number): number | null {
  * row's: 0 for a cell aligned `top`, `middle` or `bottom`, which is placed
  * once the row's height is known. A cell's baseline is its first line box's,
  * at any depth, or the bottom of its content where it has none (CSS 2.1
- * 17.5.3); it is taken as laid out, from the cell's top. An empty cell has
- * nothing to align and says nothing about the row's, as in a browser: its
- * content's bottom is its height, which would hang every other cell in the
- * row from the bottom of a cell given a height and nothing in it.
+ * 17.5.3); it is taken as laid out, from the cell's top. That bottom is of
+ * the content (`natural`) and not of a height the cell sets, which "does not
+ * increase the height of the cell box": taken from the set height, a cell
+ * holding one block of 30px in 80px hung the text beside it from 80px. An
+ * empty cell has nothing to align and says nothing about the row's, as in a
+ * browser. `own` is each cell's baseline from its top, NaN where it has none
+ * to give.
  */
-function baselineLifts(cells: Cell[], rowCount: number): number[] {
+function baselineLifts(
+  cells: Cell[],
+  rowCount: number,
+  natural: number[],
+): { lift: number[]; own: number[] } {
   const lift = new Array<number>(cells.length).fill(0);
+  const own = new Array<number>(cells.length).fill(NaN);
   let any = false;
   for (const cell of cells) {
     const va = cell.box.style.verticalAlign;
     if (va !== 'top' && va !== 'middle' && va !== 'bottom') any = true;
   }
-  if (!any) return lift;
-  const own = new Array<number>(cells.length).fill(NaN);
+  if (!any) return { lift, own };
   const row = new Array<number>(rowCount).fill(-Infinity);
   for (let i = 0; i < cells.length; i += 1) {
     const box = cells[i].box;
@@ -829,13 +1464,13 @@ function baselineLifts(cells: Cell[], rowCount: number): number[] {
     own[i] =
       first !== null
         ? first - box.y
-        : box.height - box.padBottom - box.borderBottom;
+        : natural[i] - box.padBottom - box.borderBottom;
     row[cells[i].row] = Math.max(row[cells[i].row], own[i]);
   }
   for (let i = 0; i < cells.length; i += 1) {
     if (own[i] === own[i]) lift[i] = row[cells[i].row] - own[i];
   }
-  return lift;
+  return { lift, own };
 }
 
 /** Whether a cell has anything in flow in it. */
@@ -877,32 +1512,48 @@ function rowSizing(rows: Box[], cells: Cell[]): RowSizing[] {
 
 /**
  * The height a table has past its rows' given out among them, as browsers
- * give it (the CSS Tables 3 draft leaves it open, csswg-drafts#4418): first
- * to the rows a percentage sets, up to it; then to the rows nothing sets
- * that have content, in proportion to their heights; then, where every row
- * with content is set, to the empty rows, those nothing sets first, evenly;
- * and else to every row with content, in proportion. A row whose cells set
- * its height keeps it while an empty row beside it takes the rest.
+ * give it (the CSS Tables 3 draft leaves it open, csswg-drafts#4418; this is
+ * Blink's `DistributeExcessBlockSizeToRows`): first to the rows a percentage
+ * of `base` sets, up to it; then to the rows nothing sets that have
+ * content, in proportion to their heights; then, where every row with
+ * content is set, to the empty rows, those nothing sets first, evenly; and
+ * else to every row with content, in proportion. A row whose cells set its
+ * height keeps it while an empty row beside it takes the rest.
+ *
+ * What a cell spanning the rows `first` to `last` needs past them goes out
+ * the same way, with three differences, and `starts` says which rows a
+ * spanning cell starts in. A percentage is of nothing yet (`base` is null),
+ * so a row one sets is a row nothing sets. Before anything else, the rows
+ * after the first that another spanning cell starts in take it all,
+ * evenly. And empty rows take none of it unless every row is empty, when
+ * the last takes it.
  */
 function growRows(
   heights: number[],
   sizing: RowSizing[],
   extra: number,
-  base: number,
+  base: number | null,
+  first = 0,
+  last = heights.length - 1,
+  starts: boolean[] | null = null,
 ): void {
-  const n = heights.length;
-  const deficit = heights.map((h, r) => {
-    const pct = sizing[r].percent;
-    return pct ? Math.max(0, (pct / 100) * base - h) : 0;
-  });
+  const deficit: number[] = [];
   const empty: number[] = [];
   const nothingSetEmpty: number[] = [];
   const full: number[] = [];
   const nothingSetFull: number[] = [];
+  const spanned: number[] = [];
   let setFull = 0;
-  for (let r = 0; r < n; r += 1) {
-    const set = sizing[r].constrained || sizing[r].percent !== null;
-    if (heights[r] === 0 && deficit[r] === 0) {
+  let owed = 0;
+  for (let r = first; r <= last; r += 1) {
+    const pct = sizing[r].percent;
+    const short =
+      pct && base !== null ? Math.max(0, (pct / 100) * base - heights[r]) : 0;
+    deficit.push(short);
+    owed += short;
+    const set = pct !== null ? base !== null : sizing[r].constrained;
+    if (starts?.[r] && r > first) spanned.push(r);
+    if (heights[r] === 0 && short === 0) {
       empty.push(r);
       if (!set) nothingSetEmpty.push(r);
     } else {
@@ -911,10 +1562,11 @@ function growRows(
       else nothingSetFull.push(r);
     }
   }
-  const owed = deficit.reduce((a, b) => a + b, 0);
   if (owed > 0) {
     const give = Math.min(owed, extra);
-    for (let r = 0; r < n; r += 1) heights[r] += (give * deficit[r]) / owed;
+    for (let r = first; r <= last; r += 1) {
+      heights[r] += (give * deficit[r - first]) / owed;
+    }
     extra -= give;
     if (!(extra > 0)) return;
   }
@@ -926,8 +1578,12 @@ function growRows(
         even || !(sum > 0) ? extra / which.length : (extra * heights[r]) / sum;
     }
   };
-  if (nothingSetFull.length) grow(nothingSetFull, false);
-  else if (empty.length && empty.length + setFull === n) {
+  if (spanned.length) grow(spanned, true);
+  else if (nothingSetFull.length) grow(nothingSetFull, false);
+  else if (starts) {
+    if (full.length) grow(full, false);
+    else heights[last] += extra;
+  } else if (empty.length && empty.length + setFull === last - first + 1) {
     grow(nothingSetEmpty.length ? nothingSetEmpty : empty, true);
   } else grow(full, false);
 }