@react-x11/components 0.9.0 → 0.11.0

package/dist/html/layout/table.js

@@ -12,76 +12,151 @@
 // beside it because that is the one an author reaches for when the auto
 // algorithm is too slow — which, on a table with a thousand rows, it is.
 import { AUTO, isPct, resolveOrNull } 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 { firstBaselineIn } from './inline.js';
+import { tableGrid } from './grid.js';
 /** Lay out a table's insides. Returns the content height. */
 export function layoutTable(table, ctx, contentWidth) {
-    const rows = [];
-    const captions = [];
-    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);
             }
+            table.width = Math.max(0, inner) + table.horizontalExtra;
         }
-        else if (child.kind === 'table-row')
-            rows.push(child);
+        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 = new Array(columnCount);
+    const gone = new Array(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 = new Array(rows.length);
     const rowHeight = new Array(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 = 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);
+        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(cell.box.height, specified + cell.box.verticalExtra);
         }
     }
-    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);
@@ -91,47 +166,152 @@ 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.
-    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 = new Array(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)
+        let clip = false;
+        for (let r = cell.row; r <= last; r += 1) {
             height += rowHeight[r];
-        height += spacing * (last - cell.row);
-        const width = spannedWidth(widths, cell, spacing);
+            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;
+        const content = natural[i];
+        const room = Math.max(height, inner);
         if (va === 'middle')
-            offset = Math.max(0, (height - inner) / 2);
+            offset = Math.max(0, (room - content) / 2);
         else if (va === 'bottom')
-            offset = Math.max(0, height - inner);
-        moveTo(cell.box, columnX[cell.column], rowTop[cell.row] + offset);
+            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) {
@@ -140,25 +320,81 @@ export function layoutTable(table, ctx, contentWidth) {
         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;
+}
+/** 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) {
+    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, ctx, table) {
+    let y = table.y;
+    for (const caption of captions) {
+        // 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;
+    }
 }
-function layoutCaptionsOnly(captions, ctx, table, contentWidth) {
-    let 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, ctx) {
+    let widest = 0;
     for (const caption of captions) {
-        resolveEdges(caption, contentWidth);
-        ctx.layoutSubtree(caption, contentWidth);
-        moveTo(caption, table.contentX, y);
-        y += caption.height;
+        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 y - table.contentY;
+    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) {
+    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, cell, spacing) {
     let width = 0;
@@ -168,81 +404,73 @@ function spannedWidth(widths, cell, spacing) {
     return width + spacing * (last - cell.column);
 }
 /**
- * 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) {
-    const cells = [];
-    const occupied = [];
-    let columnCount = 0;
-    const mark = (r, c) => {
-        (occupied[r] ??= [])[c] = true;
-    };
-    const taken = (r, c) => 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, name) {
-    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, cells, columnCount, available) {
+function fixedColumns(cells, columnWidths, columnCount, available, spacing) {
     const widths = new Array(columnCount).fill(0);
-    const fixed = new Array(columnCount).fill(false);
+    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;
+    }
     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;
         }
     }
-    const used = widths.reduce((a, b) => a + b, 0);
+    let used = 0;
+    let unset = 0;
+    for (let c = 0; c < columnCount; c += 1) {
+        if (set[c])
+            used += widths[c];
+        else
+            unset += 1;
+    }
     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;
 }
@@ -256,15 +484,16 @@ function fixedColumns(table, cells, columnCount, available) {
  * 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.
  */
-function autoColumns(cells, columnCount, available, ctx, containingWidth) {
+function autoColumns(cells, columnWidths, columnCount, available, ctx, containingWidth, fill, spacing) {
     const max = new Array(columnCount).fill(0);
     const min = new Array(columnCount).fill(0);
     const explicit = new Array(columnCount).fill(null);
+    const spanning = [];
     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
@@ -273,68 +502,345 @@ function autoColumns(cells, columnCount, available, ctx, containingWidth) {
         // 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);
-            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);
-            }
+        if (cell.colSpan > 1) {
+            spanning.push(cell);
+            continue;
         }
-        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;
-            }
+        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, 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)
+            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]);
+            max[c] = Math.max(min[c], explicit[c]);
             min[c] = Math.max(min[c], Math.min(explicit[c], 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, 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;
+                    }
+                }
+            }
+        }
+        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, base) {
+    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, base) {
+    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, base) {
+    if (isPct(len) && (len.px || len.of))
+        return null;
+    return lengthAgainst(len, base);
+}
 function lengthAgainst(len, base) {
     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, rowCount) {
+    const lift = new Array(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(cells.length).fill(NaN);
+    const row = new Array(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) {
+    for (const child of box.children) {
+        if (child.outOfFlow || child.isFloat)
+            continue;
+        if (child.kind === 'text' && isBlank(child.text))
+            continue;
+        return true;
+    }
+    return false;
+}
+function rowSizing(rows, cells) {
+    const sizing = rows.map((row) => {
+        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, 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;
+    });
+    const empty = [];
+    const nothingSetEmpty = [];
+    const full = [];
+    const nothingSetFull = [];
+    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, even) => {
+        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);
 }
 //# sourceMappingURL=table.js.map