@react-x11/components 0.14.0 → 0.14.1

package/src/html/layout/table.ts

@@ -17,7 +17,10 @@ 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,
@@ -44,8 +47,11 @@ export function layoutTable(
   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 =
+  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
@@ -88,8 +94,8 @@ export function layoutTable(
   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' && !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
@@ -210,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);
@@ -234,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 =
@@ -250,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);
@@ -805,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) {
@@ -829,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) {

package/src/html/node.ts

@@ -60,6 +60,7 @@ import {
 import type { HoverTouch, KeptStyles, MetricFace } from './css/cascade.js';
 import { mediaMatches, parseStylesheet } from './css/parse.js';
 import type { MediaCondition, Stylesheet } from './css/parse.js';
+import type { ShapeStyles } from './css/shapes.js';
 import { uaStylesheet } from './css/ua.js';
 import type { ComputedStyle, RootLook } from './css/style.js';
 import {
@@ -74,6 +75,7 @@ import {
   GENERATED_FROM,
   INLINE_OFFSETS,
   LINE_BOX_RAISES,
+  SHAPE_STYLES,
   SHIFTED_LINES,
   TEXT_SHIFTS,
   columned,
@@ -1711,7 +1713,39 @@ export class HtmlViewNode extends Node {
       styleOf(el);
       if (refused) return false;
     }
-    if (!changed.size && pseudoRules === HOVER_PSEUDO_NONE) return true;
+    // The drawings the move reached. What the rules give the shapes in one
+    // is no box's style (`BoxTree.shapeStyler`), so it is asked for again:
+    // of a drawing whose own style changed — its colour, a custom property
+    // — and of each where a rule that reaches into a drawing tests the
+    // pointer, `a:hover svg path`. One with another answer is painted
+    // again; one never painted has none yet, and asks when it is.
+    const redrawn: [Box, ShapeStyles | null][] = [];
+    if (tree.shapeStyler) {
+      for (const el of reach) {
+        if (tagOf(el) !== 'svg') continue;
+        const style = fresh.get(el);
+        if (!style) continue;
+        if (!changed.has(el) && !cascade.shapesFollowPointer) continue;
+        const box = this._firstBoxesOf(tree).get(el);
+        const was = box && SHAPE_STYLES.get(box);
+        if (!box || was === undefined) continue;
+        const shapes = cascade.shapeStyles(el, style);
+        if (shapes?.key !== was?.key) redrawn.push([box, shapes]);
+      }
+    }
+    const redraw = (): Rect[] => {
+      const inks: Rect[] = [];
+      for (const [box, shapes] of redrawn) {
+        SHAPE_STYLES.set(box, shapes);
+        const ink = inkOf(box);
+        if (ink) inks.push(ink);
+      }
+      return inks;
+    };
+    if (!changed.size && pseudoRules === HOVER_PSEUDO_NONE) {
+      this._repaintInk(redraw());
+      return true;
+    }
     for (const el of changed.keys()) {
       const tag = tagOf(el);
       // their backgrounds are the canvas's
@@ -1830,7 +1864,10 @@ export class HtmlViewNode extends Node {
         }
       }
     }
-    if (!restyled.length) return true;
+    if (!restyled.length) {
+      this._repaintInk(redraw());
+      return true;
+    }
 
     // the text: each layout holding a run of a restyled box's, made again
     // with its new ink, where it comes out the same shape
@@ -1883,6 +1920,7 @@ export class HtmlViewNode extends Node {
     for (const [el, style] of changed) {
       tree.styles.set(el, { style, inFlex: tree.styles.get(el)!.inFlex });
     }
+    for (const ink of redraw()) inks.push(ink);
     // A box that moved moves what is in it, as layout moved it the first
     // time (`applyRelativeOffsets`), and a later layout moves it the same
     // way; where it reached the document's end, before or after, the
@@ -1923,14 +1961,7 @@ export class HtmlViewNode extends Node {
    *  of: made on the first move over a tree, which is one walk of it. */
   private _firstBoxes: { tree: BoxTree; of: Map<Element, Box> } | null = null;
 
-  /**
-   * The blocks a restyle of `changed` has to look in: for each element, the
-   * box its text is set in the lines of — the nearest box around its first
-   * that is not an inline one — which holds every box that takes its style
-   * from it, the pieces a block in it broke it into among them
-   * (`breakAround`). One that is inside another is left to it.
-   */
-  private _blocksOf(tree: BoxTree, changed: Iterable<Element>): Box[] {
+  private _firstBoxesOf(tree: BoxTree): Map<Element, Box> {
     let index = this._firstBoxes;
     if (index?.tree !== tree) {
       const of = new Map<Element, Box>();
@@ -1944,9 +1975,21 @@ export class HtmlViewNode extends Node {
       }
       index = this._firstBoxes = { tree, of };
     }
+    return index.of;
+  }
+
+  /**
+   * The blocks a restyle of `changed` has to look in: for each element, the
+   * box its text is set in the lines of — the nearest box around its first
+   * that is not an inline one — which holds every box that takes its style
+   * from it, the pieces a block in it broke it into among them
+   * (`breakAround`). One that is inside another is left to it.
+   */
+  private _blocksOf(tree: BoxTree, changed: Iterable<Element>): Box[] {
+    const first = this._firstBoxesOf(tree);
     const blocks = new Set<Box>();
     for (const el of changed) {
-      let box: Box | null = index.of.get(el) ?? null;
+      let box: Box | null = first.get(el) ?? null;
       while (
         box?.parent &&
         (box.kind === 'inline' || box.kind === 'text' || box.kind === 'break')