@react-x11/components 0.13.0 → 0.14.0

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,13 @@
 // 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,
   MIN_CONTENT_PROBE,
   clampHeight,
+  cyclicWidth,
   exactMinContent,
   layoutBlockIn,
   measureIntrinsicWidth,
@@ -40,12 +42,16 @@ 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 auto =
+    table.style.width === AUTO || cyclicWidth(table.style, contentWidth);
   if (!columnCount) {
     // With no columns, an auto table is as wide as its widest caption can
     // be and its `min-width` asks, as one with columns is at the least
     // (17.5.2), rather than as the room on offer: a caption over no cells
     // was centred in the width of the page.
-    if (table.style.width === AUTO) {
+    if (auto) {
       let inner = captions.length
         ? captionMinimum(captions, ctx) - table.horizontalExtra
         : 0;
@@ -72,11 +78,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;
+  const fixed = style.tableLayout === 'fixed' && !auto;
   // a percentage of the table's width less its spacing (CSS 2.1 17.5.2.1)
   const set = columnWidths(columnBoxes, columnGroups, available);
   const widths = fixed
@@ -88,14 +101,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 +158,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 +177,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
@@ -303,7 +326,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 +487,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 +731,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 +751,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 +774,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. */