@react-x11/components 0.14.1 → 0.16.0

package/dist/html/layout/table.js

@@ -13,12 +13,28 @@
 // algorithm is too slow — which, on a table with a thousand rows, it is.
 import { AUTO, isPct, resolveOrNull } from '../css/values.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, measureIntrinsicWidth, moveContent, moveTo, resolveEdges, } from './block.js';
+import { CELL_CONTENT, FLEXED_HEIGHT, MIN_CONTENT_PROBE, STRETCHED_ACROSS, USED_HEIGHT, clampHeight, cyclicWidth, exactMinContent, layoutBlockIn, layoutSubtree, measureIntrinsicWidth, moveContent, moveTo, resolveEdges, } from './block.js';
 import { firstBaselineIn } from './inline.js';
 import { 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, ctx, contentWidth) {
-    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
@@ -27,33 +43,10 @@ export function layoutTable(table, ctx, contentWidth) {
     // — 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 (!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);
+    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
@@ -61,21 +54,56 @@ export function layoutTable(table, ctx, contentWidth) {
     // 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)
+    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), stretched or not
-    const fixed = style.tableLayout === 'fixed' && !own;
-    // 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);
-    // --- place ---------------------------------------------------------------
+    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, captions, ctx, contentWidth, auto) {
+    // 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);
+}
+/** 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, grid, contentWidth, fixed, auto, ctx) {
+    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);
     // 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;
         }
@@ -84,16 +112,17 @@ export function layoutTable(table, ctx, contentWidth) {
             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 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
@@ -132,45 +161,74 @@ export function layoutTable(table, ctx, contentWidth) {
         tableContentWidth = used;
         table.width = used + table.horizontalExtra;
     }
-    layoutCaptions(captions, ctx, table);
-    const top = table.contentY + table.captionTop;
-    let y = top;
-    const rowTop = new Array(rows.length);
-    const rowHeight = new Array(rows.length).fill(0);
-    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. 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);
+    return { widths, columnX, gone, anyGone, end: x, spacing, rowSpacing };
+}
+/**
+ * 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, columns, ctx) {
+    const { widths, spacing } = columns;
+    let rowWidth = spacing * Math.max(0, widths.length - 1);
     for (const columnWidth of widths)
         rowWidth += columnWidth;
     const natural = new Array(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) {
-            cell.box.height = Math.max(cell.box.height, specified + cell.box.verticalExtra);
+            const extra = cell.box.verticalExtra;
+            const set = Math.max(0, specified);
+            cell.box.height = Math.max(cell.box.height, 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, grid, columns, natural) {
+    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 = new Array(rows.length);
+    const rowHeight = new Array(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
@@ -178,17 +236,23 @@ export function layoutTable(table, ctx, contentWidth) {
     // 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 needs
-    // the same of them, which is where Chrome differs: it sizes a spanning
-    // cell by its content and height alone and lets the lifted content hang
-    // out of it, and the rows here "encompass the cell" (17.5.3).
-    const lift = baselineLifts(cells, rows.length, natural);
-    const needs = (i) => Math.max(cells[i].box.height, lift[i] + natural[i]);
+    // 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) => 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], needs(i));
+        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);
@@ -197,20 +261,59 @@ export function layoutTable(table, ctx, contentWidth) {
     }
     // 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 = [];
+    const lastRow = (cell) => 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 = needs(i) - covered;
-        if (missing > 0)
-            rowHeight[last] += missing;
+        if (cells[i].rowSpan > 1)
+            spanning.push(i);
+    }
+    if (spanning.length) {
+        const starts = new Array(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`). So is the height a
@@ -218,9 +321,13 @@ export function layoutTable(table, ctx, contentWidth) {
     // `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.
+    // 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 = FLEXED_HEIGHT.get(table) ?? USED_HEIGHT.get(table) ?? NaN;
+    const given = givenHeight(table);
     if (rows.length) {
         const extraBox = table.verticalExtra;
         const set = wanted === null
@@ -228,10 +335,9 @@ export function layoutTable(table, ctx, contentWidth) {
             : style.boxSizing === 'border-box'
                 ? wanted
                 : wanted + extraBox;
-        let inner = clampHeight(table, set) - extraBox;
-        if (Number.isFinite(given)) {
-            inner = Math.max(inner, given - table.captionTop - table.captionBottom);
-        }
+        const inner = Number.isFinite(given)
+            ? given - table.captionTop - table.captionBottom
+            : clampHeight(table, set) - extraBox;
         let total = 0;
         for (const h of rowHeight)
             total += h;
@@ -349,7 +455,7 @@ export function layoutTable(table, ctx, contentWidth) {
     // 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;
@@ -373,6 +479,18 @@ export function layoutTable(table, ctx, contentWidth) {
     }
     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();
+/** 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) {
+    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, group) {
@@ -449,124 +567,279 @@ function spannedWidth(widths, cell, spacing) {
 /**
  * `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, columnWidths, columnCount, available, spacing) {
-    const widths = new Array(columnCount).fill(0);
-    const set = new Array(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;
-    }
+function fixedColumns(cells, columnWidths, columnPercents, columnLeast, columnCount, available, spacing) {
+    // 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 = new Array(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;
+        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]) {
+                    percent[c] = share;
+                    added[c] =
+                        box.style.boxSizing === 'border-box' ? 0 : box.horizontalExtra;
+                }
+            }
+            continue;
         }
-        if (!open)
+        const px = ownWidth(box.style, available);
+        if (px === null)
             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;
+        // 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;
         }
     }
-    let used = 0;
-    let unset = 0;
+    // 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) {
-        if (set[c])
-            used += widths[c];
-        else
-            unset += 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];
+        }
+        else {
+            least += floor;
+        }
+        if (percent[c] !== null)
+            total += percent[c];
+    }
+    const target = Math.max(available, least);
+    const scale = total > 100 ? 100 / total : 1;
+    const ofTarget = new Array(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) {
+        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 = new Array(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, ctx) {
+    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, columnWidths, columnCount, available, ctx, containingWidth, fill, spacing) {
+function autoColumns(cells, columnWidths, columnLeast, columnPercents, columnCount, available, fill, spacing, room, widen) {
     const max = new Array(columnCount).fill(0);
     const min = new Array(columnCount).fill(0);
     const explicit = new Array(columnCount).fill(null);
+    // each column's percentage: its own, or the most a cell of it asks
+    const percent = columnPercents.slice();
     const spanning = [];
+    // each cell's outer min-content and max-content, within its limits
+    const asks = new Map();
     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
     // spans first, and adds to its columns only what they come short of it
@@ -576,174 +849,441 @@ function autoColumns(cells, columnWidths, columnCount, available, ctx, containin
     // 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, want, cell) => {
-        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)
+        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) => 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) => byPercent ? percent[c] : max[c];
         let weight = 0;
         let count = 0;
-        for (let c = cell.column; c <= last; c += 1) {
-            if (free && explicit[c] !== null)
+        for (let c = first; c <= last; c += 1) {
+            if (!takes(c))
                 continue;
-            weight += max[c];
+            weight += weightOf(c);
             count += 1;
         }
-        for (let c = cell.column; c <= last; c += 1) {
-            if (free && explicit[c] !== null)
+        const extra = want - have;
+        for (let c = first; c <= last; c += 1) {
+            if (!takes(c))
                 continue;
-            into[c] +=
-                weight > 0 ? ((want - have) * max[c]) / weight : (want - have) / count;
+            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);
+        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]);
-            min[c] = Math.max(min[c], Math.min(explicit[c], 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];
+    }
+    // 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 = new Array(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)
+            if (percent[c] === null)
                 continue;
-            weight += max[c];
+            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));
-    }
-    const slack = available - totalMin;
-    const surplus = totalMax - totalMin;
-    return max.map((m, c) => min[c] + ((m - min[c]) / surplus) * slack);
+        // 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));
+    }
+    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) => 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) => byPercent ? percent[c] : 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 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.
+ * 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 columnWidths(columnBoxes, columnGroups, base) {
-    const widths = columnBoxes.map((column) => column ? partWidth(column, base) : null);
-    let group = 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;
-                    }
-                }
-            }
+function gridMax(max, percent, total, widen) {
+    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];
         }
-        group = c < columnGroups.length ? columnGroups[c] : null;
     }
-    return widths;
+    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, max, share, cell, columnCount) {
+    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;
+    }
+}
+/**
+ * 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, contentWidth) {
+    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, columnGroups, base, fixed) {
+    const read = (box) => 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);
+    });
+}
+/** 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, columnGroups) {
+    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, columnGroups) {
+    return columnBoxes.map((column, c) => {
+        const part = column ?? columnGroups[c];
+        return part ? partLeast(part) : null;
+    });
 }
-/** 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`). */
+/** 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, base) {
-    const style = box.style;
-    const width = ownWidth(style, base);
-    const min = typeof style.minWidth === 'number' ? style.minWidth : 0;
-    if (width === null && !(min > 0))
+    const width = ownWidth(box.style, base);
+    if (width === null)
         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, base) {
-    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 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) {
+    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) {
+    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) {
+    const width = style.width;
+    if (!isPct(width) || width.px || width.of)
         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);
+    const limit = style.maxWidth;
+    if (limit === 'none' || !isPct(limit) || limit.px || limit.of) {
+        return width.pct;
     }
-    return own + cell.box.horizontalExtra;
+    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) {
+    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, width) {
+    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
  *  it, or null: a percentage no more than a percentage its `max-width` is
@@ -782,10 +1322,12 @@ function lengthAgainst(len, base) {
  * 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.
+ * browser. `own` is each cell's baseline from its top, NaN where it has none
+ * to give.
  */
 function baselineLifts(cells, rowCount, natural) {
     const lift = new Array(cells.length).fill(0);
+    const own = new Array(cells.length).fill(NaN);
     let any = false;
     for (const cell of cells) {
         const va = cell.box.style.verticalAlign;
@@ -793,8 +1335,7 @@ function baselineLifts(cells, rowCount, natural) {
             any = true;
     }
     if (!any)
-        return lift;
-    const own = new Array(cells.length).fill(NaN);
+        return { lift, own };
     const row = new Array(rowCount).fill(-Infinity);
     for (let i = 0; i < cells.length; i += 1) {
         const box = cells[i].box;
@@ -814,7 +1355,7 @@ function baselineLifts(cells, rowCount, natural) {
         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. */
 function holdsFlow(box) {
@@ -850,27 +1391,40 @@ function rowSizing(rows, cells) {
 }
 /**
  * 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, sizing, extra, base) {
-    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;
-    });
+function growRows(heights, sizing, extra, base, first = 0, last = heights.length - 1, starts = null) {
+    const deficit = [];
     const empty = [];
     const nothingSetEmpty = [];
     const full = [];
     const nothingSetFull = [];
+    const spanned = [];
     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);
@@ -883,11 +1437,11 @@ function growRows(heights, sizing, extra, base) {
                 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;
@@ -901,9 +1455,17 @@ function growRows(heights, sizing, extra, base) {
                 even || !(sum > 0) ? extra / which.length : (extra * heights[r]) / sum;
         }
     };
-    if (nothingSetFull.length)
+    if (spanned.length)
+        grow(spanned, true);
+    else if (nothingSetFull.length)
         grow(nothingSetFull, false);
-    else if (empty.length && empty.length + setFull === n) {
+    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