@react-x11/components 0.13.0 → 0.14.1

package/src/html/layout/shaping.ts

@@ -47,29 +47,38 @@ export function shapingSafe(engine: FontsLike): FontsLike {
         return engine.layout(stood.content, style, options);
       }
     };
-    // Everything else the engine answers is its own, called on it: `match`,
-    // and what a caller feature-detects — ntk's `prewarm`, which
-    // `_warmFaces` asks for — where a wrapper that forwarded only the two
-    // it knew of hid the rest, and warming stopped without a word.
-    const bound = new Map<PropertyKey, { from: unknown; to: unknown }>();
-    safe = new Proxy(engine, {
-      get(target, key) {
-        if (key === 'layout') return layout;
-        const value: unknown = Reflect.get(target, key, target);
-        if (typeof value !== 'function') return value;
-        let hit = bound.get(key);
-        if (hit?.from !== value) {
-          hit = { from: value, to: value.bind(target) };
-          bound.set(key, hit);
-        }
-        return hit.to;
-      },
-    });
+    safe = withLayout(engine, layout);
     SAFE.set(engine, safe);
   }
   return safe;
 }
 
+/**
+ * `engine` with another `layout`. Everything else the engine answers is its
+ * own, called on it: `match`, and what a caller feature-detects — ntk's
+ * `prewarm`, which `_warmFaces` asks for — where a wrapper that forwarded
+ * only the two it knew of hid the rest, and warming stopped without a word.
+ */
+export function withLayout(
+  engine: FontsLike,
+  layout: FontsLike['layout'],
+): FontsLike {
+  const bound = new Map<PropertyKey, { from: unknown; to: unknown }>();
+  return new Proxy(engine, {
+    get(target, key) {
+      if (key === 'layout') return layout;
+      const value: unknown = Reflect.get(target, key, target);
+      if (typeof value !== 'function') return value;
+      let hit = bound.get(key);
+      if (hit?.from !== value) {
+        hit = { from: value, to: value.bind(target) };
+        bound.set(key, hit);
+      }
+      return hit.to;
+    },
+  });
+}
+
 /** `content` with each character its face cannot shape replaced, or null
  *  when there is none to replace. */
 function standIns(

package/src/html/layout/table.ts

@@ -13,11 +13,16 @@
 // algorithm is too slow — which, on a table with a thousand rows, it is.
 import { AUTO, isPct, resolveOrNull } from '../css/values.js';
 import type { Len } from '../css/values.js';
+import type { ComputedStyle } from '../css/style.js';
 import { Box, CLIPPED_CELLS, COLLAPSED_CELLS, isBlank } from './boxes.js';
 import {
   CELL_CONTENT,
+  FLEXED_HEIGHT,
   MIN_CONTENT_PROBE,
+  STRETCHED_ACROSS,
+  USED_HEIGHT,
   clampHeight,
+  cyclicWidth,
   exactMinContent,
   layoutBlockIn,
   measureIntrinsicWidth,
@@ -40,12 +45,19 @@ export function layoutTable(
     tableGrid(table);
   table.captionTop = 0;
   table.captionBottom = 0;
+  // a percentage of a width that is not known is `auto`: the table is as
+  // wide as its columns where its content is measured (`cyclicWidth`)
+  const own =
+    table.style.width === AUTO || cyclicWidth(table.style, 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 (table.style.width === AUTO) {
+    if (auto) {
       let inner = captions.length
         ? captionMinimum(captions, ctx) - table.horizontalExtra
         : 0;
@@ -72,11 +84,18 @@ export function layoutTable(
   const gaps = spacing * (columnCount + 1);
   const available = Math.max(0, contentWidth - gaps);
 
-  for (const cell of cells) resolveEdges(cell.box, contentWidth);
+  // 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
+  // content does. It is a share of the row once the columns have their
+  // widths, below. Taken of the table's width here, and of the cell's own
+  // where the cell was laid out, a padded cell's column was wider than
+  // its share and its padding narrower.
+  for (const cell of cells) resolveEdges(cell.box, 0);
 
   // 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;
+  // 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
@@ -88,14 +107,14 @@ export function layoutTable(
         available,
         ctx,
         contentWidth,
-        style.width !== AUTO,
+        !auto,
         spacing,
       );
 
   // --- place ---------------------------------------------------------------
   // An auto table is at least as wide as its widest caption can be (CSS 2.1
   // 17.5.2), and as its `min-width` asks; the columns share what that adds.
-  if (style.width === AUTO) {
+  if (auto) {
     let room = 0;
     if (captions.length) {
       room = captionMinimum(captions, ctx) - table.horizontalExtra - gaps;
@@ -145,7 +164,7 @@ export function layoutTable(
   // gives its room back either way, set width or not.
   const used = x - table.contentX;
   let tableContentWidth = contentWidth;
-  if (style.width === AUTO) {
+  if (auto) {
     tableContentWidth = used;
     table.width = tableContentWidth + table.horizontalExtra;
   } else if (used > contentWidth || anyGone) {
@@ -164,11 +183,21 @@ export function layoutTable(
   // 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);
+  for (const columnWidth of widths) rowWidth += columnWidth;
   const natural: number[] = new Array<number>(cells.length);
   for (let i = 0; i < cells.length; i += 1) {
     const cell = cells[i];
     const width = spannedWidth(widths, cell, spacing);
-    ctx.layoutSubtree(cell.box, width);
+    ctx.layoutSubtree(cell.box, 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
@@ -187,15 +216,21 @@ export function layoutTable(
   // A cell aligned on the baseline — every value but `top`, `middle` and
   // `bottom` — hangs its first line on its first row's baseline, the lowest
   // of theirs from the row's top (CSS 2.1 17.5.3), and the row is as tall as
-  // the cells hung from it need.
-  const lift = baselineLifts(cells, rows.length);
+  // the cells hung from it need. What moves down is the content, so a cell
+  // needs the lift and its content, and a height it sets is a least one
+  // beside that rather than more room under the lift: two cells set
+  // `height: 80px` with text of two sizes in them are a row 80px tall, where
+  // the lift on top of the height made it 104px. A cell spanning rows 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: number): number =>
+    Math.max(cells[i].box.height, lift[i] + natural[i]);
   for (let i = 0; i < cells.length; i += 1) {
     const cell = cells[i];
     if (cell.rowSpan > 1) continue;
-    rowHeight[cell.row] = Math.max(
-      rowHeight[cell.row],
-      lift[i] + cell.box.height,
-    );
+    rowHeight[cell.row] = Math.max(rowHeight[cell.row], needs(i));
   }
   for (let r = 0; r < rows.length; r += 1) {
     const specified = resolveOrNull(rows[r].style.height, NaN);
@@ -211,14 +246,20 @@ export function layoutTable(
     let covered = 0;
     for (let r = cell.row; r <= last; r += 1) covered += rowHeight[r];
     covered += rowSpacing * (last - cell.row);
-    const missing = lift[i] + cell.box.height - covered;
+    const missing = needs(i) - 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`)
+  // which leaves how to its user agents: `growRows`). So is the height a
+  // flex or grid layout gave it, stretched or flexed (`FLEXED_HEIGHT`,
+  // `USED_HEIGHT`), which is its wrapper box's, captions and all (CSS
+  // Flexbox 1, 4): taken as the table's box alone, a table stretched down
+  // its line kept its rows at their content's height, and a cell had
+  // nothing for `vertical-align` to centre its content in.
   const wanted = resolveOrNull(style.height, table.percentHeightBase);
+  const given = FLEXED_HEIGHT.get(table) ?? USED_HEIGHT.get(table) ?? NaN;
   if (rows.length) {
     const extraBox = table.verticalExtra;
     const set =
@@ -227,7 +268,10 @@ export function layoutTable(
         : style.boxSizing === 'border-box'
           ? wanted
           : wanted + extraBox;
-    const inner = clampHeight(table, set) - extraBox;
+    let inner = clampHeight(table, set) - extraBox;
+    if (Number.isFinite(given)) {
+      inner = Math.max(inner, given - table.captionTop - table.captionBottom);
+    }
     let total = 0;
     for (const h of rowHeight) total += h;
     const extra = inner - total - rowSpacing * (rows.length + 1);
@@ -303,7 +347,9 @@ export function layoutTable(
     // `vertical-align` inside a cell moves the *content*, not the box: the
     // 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
+    // of its own makes too, which is no content to be moved. The cell was
+    // laid out above, in this pass over the cells, so this is the one move
+    // its content and its static positions get (`moveContent`)
     let offset = lift[i];
     const va = cell.box.style.verticalAlign;
     const content = natural[i];
@@ -462,7 +508,7 @@ function fixedColumns(
   }
   for (const cell of cells) {
     if (cell.row > 0) break;
-    const px = tableWidth(cell.box.style.width, available);
+    const px = ownWidth(cell.box.style, available);
     if (px === null) continue;
     const box = cell.box;
     const outer =
@@ -706,14 +752,14 @@ function columnWidths(
 }
 
 /** A column's or a column group's width, within its limits, or null where
- *  it sets none. */
+ *  it sets none. The limits are lengths: a percentage in them does what it
+ *  does in a cell's (`cellWidth`). */
 function partWidth(box: Box, base: number): number | null {
   const style = box.style;
-  const width = tableWidth(style.width, base);
-  const min = lengthAgainst(style.minWidth, base) ?? 0;
+  const width = ownWidth(style, base);
+  const min = typeof style.minWidth === 'number' ? style.minWidth : 0;
   if (width === null && !(min > 0)) return null;
-  const max =
-    style.maxWidth === 'none' ? null : lengthAgainst(style.maxWidth, base);
+  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);
@@ -726,15 +772,20 @@ function partWidth(box: Box, base: number): number | null {
  *  `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. */
+ *  wide as that.
+ *
+ *  Where they are lengths. A percentage `min-width` is ignored, and a
+ *  percentage `max-width` holds a percentage `width` and nothing else
+ *  (CSS Tables 3, 3.8.2, and `ownWidth`): a cell `width: 100px;
+ *  max-width: 10%` in a table of 600 is 100 wide, where it was 60, and
+ *  one set `min-width: 150%` takes no more than its content asks. */
 function cellWidth(cell: Cell, base: number): number | null {
   const style = cell.box.style;
   const len = style.width;
-  const width = len === AUTO ? null : tableWidth(len, base);
-  const min = lengthAgainst(style.minWidth, base) ?? 0;
+  const width = ownWidth(style, base);
+  const min = typeof style.minWidth === 'number' ? style.minWidth : 0;
   if (width === null && !(min > 0)) return null;
-  const max =
-    style.maxWidth === 'none' ? null : lengthAgainst(style.maxWidth, base);
+  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);
@@ -744,6 +795,19 @@ function cellWidth(cell: Cell, base: number): number | null {
   return own + cell.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
+ *  — the percentage each contributes is `min(percentage width, percentage
+ *  max-width)`, a `max-width` that is no percentage counting as an
+ *  infinite one (CSS Tables 3, 3.8.2). */
+function ownWidth(style: ComputedStyle, base: number): number | null {
+  const width = tableWidth(style.width, base);
+  const limit = style.maxWidth;
+  if (width === null || !isPct(style.width)) return width;
+  if (limit === 'none' || !isPct(limit) || limit.px || limit.of) return width;
+  return Math.min(width, lengthAgainst(limit, base) ?? width);
+}
+
 /** 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. */
@@ -762,12 +826,18 @@ function lengthAgainst(len: Len, base: number): number | null {
  * row's: 0 for a cell aligned `top`, `middle` or `bottom`, which is placed
  * once the row's height is known. A cell's baseline is its first line box's,
  * at any depth, or the bottom of its content where it has none (CSS 2.1
- * 17.5.3); it is taken as laid out, from the cell's top. An empty cell has
- * nothing to align and says nothing about the row's, as in a browser: its
- * content's bottom is its height, which would hang every other cell in the
- * row from the bottom of a cell given a height and nothing in it.
+ * 17.5.3); it is taken as laid out, from the cell's top. That bottom is of
+ * the content (`natural`) and not of a height the cell sets, which "does not
+ * increase the height of the cell box": taken from the set height, a cell
+ * holding one block of 30px in 80px hung the text beside it from 80px. An
+ * empty cell has nothing to align and says nothing about the row's, as in a
+ * browser.
  */
-function baselineLifts(cells: Cell[], rowCount: number): number[] {
+function baselineLifts(
+  cells: Cell[],
+  rowCount: number,
+  natural: number[],
+): number[] {
   const lift = new Array<number>(cells.length).fill(0);
   let any = false;
   for (const cell of cells) {
@@ -786,7 +856,7 @@ function baselineLifts(cells: Cell[], rowCount: number): number[] {
     own[i] =
       first !== null
         ? first - box.y
-        : box.height - box.padBottom - box.borderBottom;
+        : natural[i] - box.padBottom - box.borderBottom;
     row[cells[i].row] = Math.max(row[cells[i].row], own[i]);
   }
   for (let i = 0; i < cells.length; i += 1) {