@react-x11/components 0.8.0 → 0.10.0

package/src/html/layout/table.ts

@@ -13,17 +13,22 @@
 // algorithm is too slow — which, on a table with a thousand rows, it is.
 import { AUTO, isPct, resolveOrNull } from '../css/values.js';
 import type { Len } from '../css/values.js';
-import { Box } from './boxes.js';
-import { measureIntrinsicWidth, moveTo, resolveEdges } from './block.js';
+import { Box, CLIPPED_CELLS, COLLAPSED_CELLS, isBlank } from './boxes.js';
+import {
+  CELL_CONTENT,
+  MIN_CONTENT_PROBE,
+  clampHeight,
+  exactMinContent,
+  layoutBlockIn,
+  measureIntrinsicWidth,
+  moveContent,
+  moveTo,
+  resolveEdges,
+} from './block.js';
 import type { LayoutContext } from './block.js';
-
-interface Cell {
-  box: Box;
-  row: number;
-  column: number;
-  colSpan: number;
-  rowSpan: number;
-}
+import { firstBaselineIn } from './inline.js';
+import { tableGrid } from './grid.js';
+import type { Cell } from './grid.js';
 
 /** Lay out a table's insides. Returns the content height. */
 export function layoutTable(
@@ -31,67 +36,146 @@ export function layoutTable(
   ctx: LayoutContext,
   contentWidth: number,
 ): number {
-  const rows: Box[] = [];
-  const captions: Box[] = [];
-  for (const child of table.children) {
-    if (child.kind === 'table-caption') captions.push(child);
-    else if (child.kind === 'table-row-group') {
-      for (const row of child.children) {
-        if (row.kind === 'table-row') rows.push(row);
+  const { rows, captions, cells, columnCount, columnBoxes, columnGroups } =
+    tableGrid(table);
+  table.captionTop = 0;
+  table.captionBottom = 0;
+  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 (table.style.width === 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,
+        );
       }
-    } else if (child.kind === 'table-row') rows.push(child);
+      table.width = Math.max(0, inner) + table.horizontalExtra;
+    }
+    layoutCaptions(captions, ctx, table);
+    return 0;
   }
 
-  const { cells, columnCount } = gridOf(rows);
-  if (!columnCount)
-    return layoutCaptionsOnly(captions, ctx, table, contentWidth);
-
   const style = table.style;
-  const spacing = style.borderCollapse === 'collapse' ? 0 : style.borderSpacing;
+  // 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);
 
   for (const cell of cells) resolveEdges(cell.box, contentWidth);
 
-  const widths =
-    style.tableLayout === 'fixed'
-      ? fixedColumns(table, cells, columnCount, available)
-      : autoColumns(cells, columnCount, available, ctx, contentWidth);
+  // 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' && style.width !== 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,
+        style.width !== AUTO,
+        spacing,
+      );
 
   // --- place ---------------------------------------------------------------
-  let y = table.contentY;
-  for (const caption of captions) {
-    resolveEdges(caption, contentWidth);
-    ctx.layoutSubtree(caption, contentWidth);
-    moveTo(caption, table.contentX, y);
-    y += caption.height;
+  // 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.
+  if (style.width === AUTO) {
+    let room = 0;
+    if (captions.length) {
+      room = captionMinimum(captions, ctx) - table.horizontalExtra - gaps;
+    }
+    const min = resolveOrNull(style.minWidth, contentWidth);
+    if (min !== null) {
+      const inner =
+        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 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
+  // laid out at the width they would have had, so that taking it out
+  // changes no row's height.
   const columnX: number[] = new Array<number>(columnCount);
+  const gone: boolean[] = new Array<boolean>(columnCount);
+  let anyGone = false;
   let x = table.contentX + spacing;
   for (let c = 0; c < columnCount; c += 1) {
     columnX[c] = x;
-    x += widths[c] + spacing;
+    gone[c] = collapsedColumn(columnBoxes[c], columnGroups[c]);
+    if (gone[c]) anyGone = true;
+    else x += widths[c] + spacing;
   }
   // A table with `width: auto` is as wide as its columns need, not as wide as
   // its container — it shrinks to fit, which is what makes a two-column table
   // in a wide document a small table rather than a pair of columns stranded
   // at the left of a full-width box. The columns were sized against the space
-  // on offer, so this only ever narrows.
-  const used = Math.min(x - table.contentX, contentWidth);
-  const tableContentWidth = style.width === AUTO ? used : contentWidth;
-  if (style.width === AUTO)
+  // on offer, so this narrows it — but never past the least its columns can
+  // be (CSS 2.1 17.5.2.2): a table whose words do not fit is wider than the
+  // room, as a word is, and one beside a float goes below it.
+  //
+  // A table set to a width is as wide as it or its columns, whichever is the
+  // wider: columns set wider than the table widen it. A column taken out
+  // gives its room back either way, set width or not.
+  const used = x - table.contentX;
+  let tableContentWidth = contentWidth;
+  if (style.width === AUTO) {
+    tableContentWidth = used;
     table.width = tableContentWidth + table.horizontalExtra;
+  } else if (used > contentWidth || anyGone) {
+    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 += spacing;
+  y += 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.
-  for (const cell of cells) {
+  // 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.
+  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);
+    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];
     const specified = resolveOrNull(cell.box.style.height, NaN);
     if (specified !== null) {
       cell.box.height = Math.max(
@@ -100,9 +184,18 @@ export function layoutTable(
       );
     }
   }
-  for (const cell of cells) {
+  // 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);
+  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], cell.box.height);
+    rowHeight[cell.row] = Math.max(
+      rowHeight[cell.row],
+      lift[i] + cell.box.height,
+    );
   }
   for (let r = 0; r < rows.length; r += 1) {
     const specified = resolveOrNull(rows[r].style.height, NaN);
@@ -111,76 +204,229 @@ 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.
-  for (const cell of cells) {
+  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 += spacing * (last - cell.row);
-    const missing = cell.box.height - covered;
+    covered += rowSpacing * (last - cell.row);
+    const missing = lift[i] + cell.box.height - covered;
     if (missing > 0) rowHeight[last] += missing;
   }
 
+  // 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`)
+  const wanted = resolveOrNull(style.height, table.percentHeightBase);
+  if (rows.length) {
+    const extraBox = table.verticalExtra;
+    const set =
+      wanted === null
+        ? 0
+        : style.boxSizing === 'border-box'
+          ? wanted
+          : wanted + extraBox;
+    const inner = clampHeight(table, set) - extraBox;
+    let total = 0;
+    for (const h of rowHeight) total += h;
+    const extra = inner - total - rowSpacing * (rows.length + 1);
+    if (extra > 0) growRows(rowHeight, rowSizing(rows, cells), extra, inner);
+  }
+
+  // And a row it takes out has sized the columns with the rest, and is as
+  // tall as nothing, with no spacing after it; its cells inherit the value,
+  // and are not drawn.
+  const rowGone: boolean[] = new Array<boolean>(rows.length);
   for (let r = 0; r < rows.length; r += 1) {
     rowTop[r] = y;
-    y += rowHeight[r] + spacing;
+    rowGone[r] = rows[r].style.visibility === 'collapse';
+    if (rowGone[r]) rowHeight[r] = 0;
+    else y += rowHeight[r] + rowSpacing;
   }
 
-  for (const cell of cells) {
+  for (let i = 0; i < cells.length; i += 1) {
+    const cell = cells[i];
     const last = Math.min(rows.length - 1, cell.row + cell.rowSpan - 1);
     let height = 0;
-    for (let r = cell.row; r <= last; r += 1) height += rowHeight[r];
-    height += spacing * (last - cell.row);
-    const width = spannedWidth(widths, cell, spacing);
+    let clip = false;
+    for (let r = cell.row; r <= last; r += 1) {
+      height += rowHeight[r];
+      if (r > cell.row && rowGone[r]) clip = true;
+    }
+    height += rowSpacing * (last - cell.row);
+    if (clip) {
+      // down to the last of its rows left in the table, whose spacing went
+      // with the rows taken out
+      let bottom = rowTop[cell.row] + rowHeight[cell.row];
+      for (let r = cell.row + 1; r <= last; r += 1) {
+        if (!rowGone[r]) bottom = rowTop[r] + rowHeight[r];
+      }
+      height = bottom - rowTop[cell.row];
+    }
+    let width = spannedWidth(widths, cell, spacing);
+    // Where its columns are: a cell spanning a column taken out is laid out
+    // across all of them, moved left by the width of the ones before the
+    // first left in, and clipped to the ones left, which cuts out what was
+    // in those (CSS 2.1 17.5.5). The spacing after them goes from the end
+    // of its content, which does not line up with the columns it spans.
+    // One wholly in them is not drawn.
+    let placeX = columnX[cell.column];
+    let boxX = placeX;
+    if (anyGone) {
+      const lastColumn = Math.min(
+        columnCount - 1,
+        cell.column + cell.colSpan - 1,
+      );
+      let first = -1;
+      let end = -1;
+      let before = 0;
+      let some = false;
+      for (let c = cell.column; c <= lastColumn; c += 1) {
+        if (!gone[c]) {
+          if (first < 0) first = c;
+          end = c;
+        } else {
+          if (first < 0) before += (some ? spacing : 0) + widths[c];
+          some = true;
+        }
+      }
+      if (first < 0) COLLAPSED_CELLS.add(cell.box);
+      else if (some) {
+        clip = true;
+        boxX = columnX[first];
+        placeX = boxX - before;
+        width = columnX[end] + widths[end] - boxX;
+      }
+    }
     const inner = cell.box.height;
     // `vertical-align` inside a cell moves the *content*, not the box: the
-    // box fills the row, and the content sits top, middle or bottom in it.
-    let offset = 0;
+    // box fills the row, background and all, and the content sits top,
+    // middle, bottom or on the row's baseline in it — in the box a height
+    // of its own makes too, which is no content to be moved
+    let offset = lift[i];
     const va = cell.box.style.verticalAlign;
-    if (va === 'middle') offset = Math.max(0, (height - inner) / 2);
-    else if (va === 'bottom') offset = Math.max(0, height - inner);
-    moveTo(cell.box, columnX[cell.column], rowTop[cell.row] + offset);
+    const content = natural[i];
+    const room = Math.max(height, inner);
+    if (va === 'middle') offset = Math.max(0, (room - content) / 2);
+    else if (va === 'bottom') offset = Math.max(0, room - content);
+    moveTo(cell.box, placeX, rowTop[cell.row]);
+    moveContent(cell.box, offset);
+    cell.box.x = boxX;
     cell.box.width = width;
-    cell.box.height = Math.max(inner, height - offset);
+    if (clip) {
+      cell.box.height = height;
+      CLIPPED_CELLS.add(cell.box);
+    } else {
+      cell.box.height = Math.max(inner, height);
+    }
   }
 
+  // where the grid lines fell, for the collapsed borders drawn along them
+  const collapsed = table.collapsed;
+  if (collapsed && collapsed.columns === columnCount) {
+    const last = columnCount - 1;
+    collapsed.lineX = columnX.map((cx) => cx - table.x);
+    collapsed.lineX.push(columnX[last] + widths[last] - table.x);
+    collapsed.lineY = rowTop.map((ry) => ry - table.y);
+    const bottom = rows.length - 1;
+    collapsed.lineY.push(rowTop[bottom] + rowHeight[bottom] - table.y);
+  }
+
+  // A row, and a group of them, spans the columns: from the first one's
+  // 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);
   for (let r = 0; r < rows.length; r += 1) {
     const row = rows[r];
-    row.x = table.contentX;
+    row.x = gridX;
     row.y = rowTop[r];
-    row.width = tableContentWidth;
+    row.width = gridWidth;
     row.height = rowHeight[r];
   }
   for (const child of table.children) {
     if (child.kind !== 'table-row-group') continue;
     const groupRows = child.children.filter((row) => row.kind === 'table-row');
     if (!groupRows.length) continue;
-    child.x = table.contentX;
+    child.x = gridX;
     child.y = groupRows[0].y;
-    child.width = tableContentWidth;
+    child.width = gridWidth;
     child.height =
       groupRows[groupRows.length - 1].y +
       groupRows[groupRows.length - 1].height -
       child.y;
   }
 
-  return y - table.contentY;
+  return y - top;
 }
 
-function layoutCaptionsOnly(
-  captions: Box[],
-  ctx: LayoutContext,
-  table: Box,
-  contentWidth: number,
-): number {
-  let y = table.contentY;
+/** 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 {
+  return (column ?? group)?.style.visibility === 'collapse';
+}
+
+/**
+ * A table's captions, which are outside the table box (CSS 2.1 17.4): as
+ * wide as its border box, the ones on top above its border, and the ones
+ * at the bottom laid out here and placed below it by `finishCaptions`,
+ * once the table's height is known.
+ */
+function layoutCaptions(captions: Box[], ctx: LayoutContext, table: Box): void {
+  let y = table.y;
   for (const caption of captions) {
-    resolveEdges(caption, contentWidth);
-    ctx.layoutSubtree(caption, contentWidth);
-    moveTo(caption, table.contentX, y);
-    y += caption.height;
+    // laid out at the offset its margins give it across the table, which
+    // is where it stays across
+    layoutBlockIn(caption, ctx, table.width);
+    const height = caption.marginTop + caption.height + caption.marginBottom;
+    if (caption.style.captionSide === 'bottom') {
+      table.captionBottom += height;
+      continue;
+    }
+    moveTo(caption, table.x + caption.x, y + caption.marginTop);
+    y += height;
+    table.captionTop += height;
   }
-  return y - table.contentY;
+}
+
+/** The narrowest the widest caption can be, margins in: its own width
+ *  where it has one, and its longest word where it has not. */
+function captionMinimum(captions: Box[], ctx: LayoutContext): number {
+  let widest = 0;
+  for (const caption of captions) {
+    let width = measureIntrinsicWidth(caption, ctx, MIN_CONTENT_PROBE);
+    // and as wide as a length its own `width` sets: the probe lays it out
+    // at none, so an empty caption set to 100px measured nothing, and the
+    // table under it was as narrow as its cells
+    const set = caption.style.width;
+    if (set !== AUTO && !isPct(set)) {
+      const length = resolveOrNull(set, 0);
+      if (length !== null) {
+        const extra =
+          caption.style.boxSizing === 'border-box'
+            ? 0
+            : caption.horizontalExtra;
+        width = Math.max(width, length + extra);
+      }
+    }
+    widest = Math.max(widest, width + caption.marginLeft + caption.marginRight);
+  }
+  return widest;
+}
+
+/** The table box has its height: the captions go around it, the bottom
+ *  ones below it, and the box grows to hold them. */
+export function finishCaptions(table: Box): void {
+  if (!table.captionTop && !table.captionBottom) return;
+  let y = table.y + table.captionTop + table.height;
+  for (const caption of table.children) {
+    if (caption.kind !== 'table-caption') continue;
+    if (caption.style.captionSide !== 'bottom') continue;
+    moveTo(caption, table.x + caption.x, y + caption.marginTop);
+    y += caption.marginTop + caption.height + caption.marginBottom;
+  }
+  table.height += table.captionTop + table.captionBottom;
 }
 
 function spannedWidth(widths: number[], cell: Cell, spacing: number): number {
@@ -191,84 +437,69 @@ function spannedWidth(widths: number[], cell: Cell, spacing: number): number {
 }
 
 /**
- * Assign every cell a row and a column, honouring `colspan` and `rowspan`.
- * The occupancy grid is what makes a `rowspan` in an earlier row push a
- * later row's cells to the right, which is the bug every naive table
- * renderer ships with.
+ * `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.
  */
-function gridOf(rows: Box[]): { cells: Cell[]; columnCount: number } {
-  const cells: Cell[] = [];
-  const occupied: boolean[][] = [];
-  let columnCount = 0;
-
-  const mark = (r: number, c: number): void => {
-    (occupied[r] ??= [])[c] = true;
-  };
-  const taken = (r: number, c: number): boolean => occupied[r]?.[c] === true;
-
-  for (let r = 0; r < rows.length; r += 1) {
-    let c = 0;
-    for (const box of rows[r].children) {
-      if (box.kind !== 'table-cell') continue;
-      while (taken(r, c)) c += 1;
-      const colSpan = Math.max(1, spanAttr(box, 'colspan'));
-      const rowSpan = Math.max(1, spanAttr(box, 'rowspan'));
-      cells.push({ box, row: r, column: c, colSpan, rowSpan });
-      for (let dr = 0; dr < rowSpan; dr += 1) {
-        for (let dc = 0; dc < colSpan; dc += 1) mark(r + dr, c + dc);
-      }
-      c += colSpan;
-      columnCount = Math.max(columnCount, c);
-    }
-  }
-  return { cells, columnCount };
-}
-
-function spanAttr(box: Box, name: string): number {
-  const raw = box.el?.attribs?.[name];
-  if (!raw) return 1;
-  const n = parseInt(raw, 10);
-  return Number.isFinite(n) && n > 0 ? Math.min(n, 1000) : 1;
-}
-
-/** `table-layout: fixed` — the first row and any `width` decide, and the
- *  rest of the table is not measured at all. That is the whole point of it. */
 function fixedColumns(
-  table: Box,
   cells: Cell[],
+  columnWidths: (number | null)[],
   columnCount: number,
   available: number,
+  spacing: number,
 ): number[] {
   const widths: number[] = new Array<number>(columnCount).fill(0);
-  const fixed: boolean[] = new Array<boolean>(columnCount).fill(false);
+  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;
+  }
   for (const cell of cells) {
     if (cell.row > 0) break;
-    const len = cell.box.style.width;
-    if (len === AUTO) continue;
-    const px = lengthAgainst(len, available);
+    const px = tableWidth(cell.box.style.width, available);
     if (px === null) continue;
-    const per = px / cell.colSpan;
-    for (
-      let c = cell.column;
-      c < cell.column + cell.colSpan && c < columnCount;
-      c += 1
-    ) {
-      widths[c] = per;
-      fixed[c] = true;
+    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;
+  for (let c = 0; c < columnCount; c += 1) {
+    if (set[c]) used += widths[c];
+    else unset += 1;
   }
-  const used = widths.reduce((a, b) => a + b, 0);
   const remaining = Math.max(0, available - used);
-  const autoCount = fixed.filter((f) => !f).length;
-  const each = autoCount ? remaining / autoCount : 0;
-  for (let c = 0; c < columnCount; c += 1) if (!fixed[c]) widths[c] = each;
-  // A table narrower than its container keeps the width it asked for; one
-  // wider than it is left wide and overflows, which is what a browser does
-  // and what makes an oversized table scrollable rather than crushed.
-  const total = widths.reduce((a, b) => a + b, 0);
-  if (total < available && table.style.width !== AUTO) {
-    const scale = available / (total || 1);
-    for (let c = 0; c < columnCount; c += 1) widths[c] *= scale;
+  if (unset) {
+    for (let c = 0; c < columnCount; c += 1) {
+      if (!set[c]) widths[c] = remaining / unset;
+    }
+  } else if (remaining > 0 && columnCount) {
+    for (let c = 0; c < columnCount; c += 1) {
+      widths[c] +=
+        used > 0 ? (widths[c] / used) * remaining : remaining / columnCount;
+    }
   }
   return widths;
 }
@@ -285,22 +516,26 @@ function fixedColumns(
  */
 function autoColumns(
   cells: Cell[],
+  columnWidths: (number | null)[],
   columnCount: number,
   available: number,
   ctx: LayoutContext,
   containingWidth: number,
+  fill: boolean,
+  spacing: number,
 ): 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);
+  const spanning: Cell[] = [];
 
   for (const cell of cells) {
-    // Two probe layouts per cell: unconstrained for max-content, and at a
-    // width of 1 for min-content — which the line breaker answers by
-    // breaking at every opportunity, so the widest line is the longest
-    // unbreakable word.
+    // 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
@@ -313,68 +548,343 @@ function autoColumns(
         ctx,
         Infinity,
       );
-      cell.box.intrinsicMinContent = measureIntrinsicWidth(cell.box, ctx, 1);
+      // 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);
     }
-    const cellMax = cell.box.intrinsicMaxContent;
-    const cellMin = cell.box.intrinsicMinContent;
-
-    const len = cell.box.style.width;
-    const width = len === AUTO ? null : lengthAgainst(len, containingWidth);
-    if (cell.colSpan === 1) {
-      max[cell.column] = Math.max(max[cell.column], cellMax);
-      min[cell.column] = Math.max(min[cell.column], cellMin);
-      if (width !== null) {
-        explicit[cell.column] = Math.max(
-          explicit[cell.column] ?? 0,
-          width + cell.box.horizontalExtra,
-        );
-      }
-    } else {
-      // A spanning cell contributes to its columns only when they cannot
-      // already hold it, spread evenly — which is the spec's rule reduced to
-      // the part that matters visually.
-      const last = Math.min(columnCount - 1, cell.column + cell.colSpan - 1);
-      let currentMax = 0;
-      let currentMin = 0;
-      for (let c = cell.column; c <= last; c += 1) {
-        currentMax += max[c];
-        currentMin += min[c];
-      }
-      const spread = last - cell.column + 1;
-      if (cellMax > currentMax) {
-        const each = (cellMax - currentMax) / spread;
-        for (let c = cell.column; c <= last; c += 1) max[c] += each;
-      }
-      if (cellMin > currentMin) {
-        const each = (cellMin - currentMin) / spread;
-        for (let c = cell.column; c <= last; c += 1) min[c] += each;
-      }
+    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);
     }
   }
 
+  // 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)
+  for (let c = 0; c < columnCount; c += 1) {
+    const own = columnWidths[c];
+    if (own !== null) explicit[c] = Math.max(explicit[c] ?? 0, own);
+  }
+
+  // A spanning cell comes after the cells of one column, the narrower
+  // spans first, and adds to its columns only what they come short of it
+  // (CSS 2.1 17.5.2.2, step 3). It holds the spacing between them too,
+  // room the columns need not find. What it adds goes to those of them
+  // with no width set, in proportion to their content, and evenly where
+  // 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.
+  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];
+    if (!(want > have)) return;
+    let free = false;
+    for (let c = cell.column; c <= last && !free; c += 1) {
+      free = explicit[c] === null;
+    }
+    let weight = 0;
+    let count = 0;
+    for (let c = cell.column; c <= last; c += 1) {
+      if (free && explicit[c] !== null) continue;
+      weight += max[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;
+    }
+  };
+
+  // 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 (let c = 0; c < columnCount; c += 1) {
     if (explicit[c] !== null) {
-      max[c] = Math.max(max[c], explicit[c] as number);
+      max[c] = Math.max(min[c], explicit[c] as number);
       min[c] = Math.max(min[c], Math.min(explicit[c] as number, max[c]));
     }
-    min[c] = Math.min(min[c], 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);
+  }
+  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 an explicit width still fills it, by
-    // growing the columns in proportion to what they asked for.
-    return max;
+    // 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;
+    let count = 0;
+    for (let c = 0; c < columnCount; c += 1) {
+      if (!set && explicit[c] !== null) continue;
+      weight += max[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),
+    );
   }
   const totalMin = min.reduce((a, b) => a + b, 0);
-  if (totalMin >= available) return min;
+  if (totalMin >= available) {
+    // 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),
+    );
+  }
   const slack = available - totalMin;
   const surplus = totalMax - totalMin;
   return max.map((m, c) => min[c] + ((m - min[c]) / surplus) * slack);
 }
 
+/**
+ * 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.
+ */
+function columnWidths(
+  columnBoxes: (Box | null)[],
+  columnGroups: (Box | null)[],
+  base: number,
+): (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;
+}
+
+/** A column's or a column group's width, within its limits, or null where
+ *  it sets none. */
+function partWidth(box: Box, base: number): number | null {
+  const style = box.style;
+  const width = tableWidth(style.width, base);
+  const min = lengthAgainst(style.minWidth, base) ?? 0;
+  if (width === null && !(min > 0)) return null;
+  const max =
+    style.maxWidth === 'none' ? null : lengthAgainst(style.maxWidth, base);
+  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. */
+function cellWidth(cell: Cell, base: number): number | null {
+  const style = cell.box.style;
+  const len = style.width;
+  const width = len === AUTO ? null : tableWidth(len, base);
+  const min = lengthAgainst(style.minWidth, base) ?? 0;
+  if (width === null && !(min > 0)) return null;
+  const max =
+    style.maxWidth === 'none' ? null : lengthAgainst(style.maxWidth, base);
+  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;
+}
+
+/** A cell's or a column's width. One that adds a percentage to a length,
+ *  a `calc()`, is `auto` in a table, as browsers read it: a column cannot be
+ *  both a share of the table and a size of its own. */
+function tableWidth(len: Len, base: number): number | null {
+  if (isPct(len) && (len.px || len.of)) return null;
+  return lengthAgainst(len, base);
+}
+
 function lengthAgainst(len: Len, base: number): number | null {
   if (len === AUTO) return null;
-  if (isPct(len)) return Number.isFinite(base) ? (len.pct / 100) * base : null;
-  return len;
+  return resolveOrNull(len, base);
+}
+
+/**
+ * How far each cell's content moves down to put its baseline on its first
+ * 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.
+ */
+function baselineLifts(cells: Cell[], rowCount: number): number[] {
+  const lift = new Array<number>(cells.length).fill(0);
+  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);
+  const row = new Array<number>(rowCount).fill(-Infinity);
+  for (let i = 0; i < cells.length; i += 1) {
+    const box = cells[i].box;
+    const va = box.style.verticalAlign;
+    if (va === 'top' || va === 'middle' || va === 'bottom') continue;
+    const first = firstBaselineIn(box);
+    if (first === null && !holdsFlow(box)) continue;
+    own[i] =
+      first !== null
+        ? first - box.y
+        : box.height - 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;
+}
+
+/** Whether a cell has anything in flow in it. */
+function holdsFlow(box: Box): boolean {
+  for (const child of box.children) {
+    if (child.outOfFlow || child.isFloat) continue;
+    if (child.kind === 'text' && isBlank(child.text)) continue;
+    return true;
+  }
+  return false;
+}
+
+/** What a row's height is set as: a length its own or a cell's in it
+ *  sets, which makes it constrained, and a percentage one does. */
+interface RowSizing {
+  constrained: boolean;
+  percent: number | null;
+}
+
+function rowSizing(rows: Box[], cells: Cell[]): RowSizing[] {
+  const sizing = rows.map((row): RowSizing => {
+    const height = row.style.height;
+    return {
+      constrained: typeof height === 'number',
+      percent: height !== AUTO && isPct(height) ? height.pct : null,
+    };
+  });
+  for (const cell of cells) {
+    if (cell.rowSpan > 1 || !sizing[cell.row]) continue;
+    const height = cell.box.style.height;
+    const row = sizing[cell.row];
+    if (typeof height === 'number') row.constrained = true;
+    else if (height !== AUTO && isPct(height)) {
+      row.percent = Math.max(row.percent ?? 0, height.pct);
+    }
+  }
+  return sizing;
+}
+
+/**
+ * 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.
+ */
+function growRows(
+  heights: number[],
+  sizing: RowSizing[],
+  extra: number,
+  base: number,
+): 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 empty: number[] = [];
+  const nothingSetEmpty: number[] = [];
+  const full: number[] = [];
+  const nothingSetFull: 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) {
+      empty.push(r);
+      if (!set) nothingSetEmpty.push(r);
+    } else {
+      full.push(r);
+      if (set) setFull += 1;
+      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;
+    extra -= give;
+    if (!(extra > 0)) return;
+  }
+  const grow = (which: number[], even: boolean) => {
+    let sum = 0;
+    for (const r of which) sum += heights[r];
+    for (const r of which) {
+      heights[r] +=
+        even || !(sum > 0) ? extra / which.length : (extra * heights[r]) / sum;
+    }
+  };
+  if (nothingSetFull.length) grow(nothingSetFull, false);
+  else if (empty.length && empty.length + setFull === n) {
+    grow(nothingSetEmpty.length ? nothingSetEmpty : empty, true);
+  } else grow(full, false);
 }