@react-x11/components 0.13.0 → 0.14.1

package/src/html/layout/boxes.ts

@@ -38,6 +38,7 @@ import type { CollapsedTable } from './collapse.js';
 import { quoteAt } from '../css/content.js';
 import type { CounterStyles } from '../css/counter-styles.js';
 import type { ContentItem } from '../css/content.js';
+import type { ShapeStyles } from '../css/shapes.js';
 import {
   CONTAIN_STYLE,
   FIRST_LINE_INHERITED,
@@ -202,6 +203,17 @@ export interface LineText {
    * the ones before a forced break that fit take room on the line.
    */
   hung?: { at: number; x: number; width: number }[];
+  /**
+   * How far the line goes on past this text for the collapsible spaces it
+   * ends on, which its engine, laying out a piece of a line as a line,
+   * stripped: the room they take where more follows them on the line, and
+   * none where the line ends on them, since CSS removes them there (CSS
+   * Text 3, 4.1.2). They are the text's, in the elements they are in, and
+   * `trailRun` is the run they are the end of: whose underline, line
+   * through and highlight go on under them.
+   */
+  trail?: number;
+  trailRun?: TextRun;
   /** Any offset in the layout's own text as a document index — how a run
    *  under the pointer finds the element whose text it is. Per pass: the
    *  layout may be one an earlier pass made (`TextLayoutCache`), and the
@@ -630,12 +642,16 @@ export const CLAMPED = new WeakSet<Box>();
 /** A grid's tracks as its layout left them, each column's and each row's
  *  start and end from the content box's corner, with the lines of each
  *  axis by number and by name: what an absolutely positioned box's grid
- *  area is found in (CSS Grid 1, 9.1). */
+ *  area is found in (CSS Grid 1, 9.1). And the first of its items in
+ *  row-major order, where they were placed and not where they were
+ *  written, which the grid's own baseline is taken from (10.6): null for a
+ *  grid with no item. */
 export interface GridTracks {
   cols: [number, number][];
   rows: [number, number][];
   colLines: GridLines;
   rowLines: GridLines;
+  first: Box | null;
 }
 export const GRID_TRACKS = new WeakMap<Box, GridTracks>();
 
@@ -656,6 +672,57 @@ export const CUT_BLOCKS = new WeakMap<Box, Box[]>();
  *  the clearance in (`elementRect`). Only the blocks that had clearance. */
 export const CLEARED_FROM = new WeakMap<Box, number>();
 
+/**
+ * One piece of a block that a column break falls inside (CSS Multi-column
+ * 1): its border box in one column, as far as the box goes in it, and where
+ * the whole box would stand there — the box its background and its borders
+ * are drawn as, cut to the piece (`box-decoration-break: slice`).
+ */
+export interface ColumnPiece {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  /** The top of the whole box, in this column, and its height. */
+  wholeY: number;
+  wholeHeight: number;
+}
+
+/** The pieces of each block a column break falls inside, in the order of
+ *  the columns. The block's own rect is what takes them all in, as a
+ *  browser's bounding rect of it is. */
+export const COLUMN_PIECES = new WeakMap<Box, ColumnPiece[]>();
+
+/** The lines of a box that columns took apart: they are not one under
+ *  another, and a search that counts on their tops rising reads them all
+ *  instead. */
+export const COLUMN_LINES = new WeakSet<LineBox[]>();
+
+/**
+ * The rows of a text's layout that are in the text's own column, from the
+ * layout's origin, where the layout's lines went to more than one: a layout
+ * is drawn whole, so it is drawn once for each column, there, and clipped
+ * to the rows that are that column's. One object for all the texts of a
+ * layout in a column, which is what tells a draw of it from another.
+ */
+export const COLUMN_ROWS = new WeakMap<
+  LineText,
+  { top: number; bottom: number }
+>();
+
+/** Whether any layout has broken a box between columns: what the walks
+ *  that would ask the three maps above of every box ask first. */
+export const columned = { any: false };
+
+/** What the document's rules give the elements inside an inline `<svg>`
+ *  (`Cascade.shapeStyles`), null where they give none. */
+export type ShapeStyler = (box: Box) => ShapeStyles | null;
+
+/** What `BoxTree.shapeStyler` answered for each drawing's box it has been
+ *  asked of, which are the ones painted: a box restyled where it is has
+ *  its answer put here again (`HtmlViewNode._hoverInPlace`). */
+export const SHAPE_STYLES = new WeakMap<Box, ShapeStyles | null>();
+
 /** The element a pseudo-element's box is generated from, which has no
  *  element of its own (`Box.pseudo`): whose the images its styles name are,
  *  when the host is asked for them. */
@@ -717,6 +784,11 @@ export interface BoxTree {
    *  one: worked out as a selection is first painted over it, not as the
    *  tree is built, since most builds are never selected in. */
   selectionStyler: SelectionStyler | null;
+  /** What the rules give the elements in each inline `<svg>`
+   *  (`ShapeStyler`), which have no boxes and no styles, where any rule
+   *  could reach one: worked out as a drawing is first painted, since a
+   *  page of icons shows few of them at once. */
+  shapeStyler: ShapeStyler | null;
   /** Whether a float or an out-of-flow box sits in an inline box: where
    *  none does, layout looks for them among a block's own children and
    *  goes through no inline box to find them. */
@@ -733,6 +805,10 @@ export interface BoxTree {
    *  (`Cascade.rootStyle`), whose background is the canvas's; null where
    *  the document has either. */
   impliedHtml: ComputedStyle | null;
+  /** The scheme the palette is, which the element the document is drawn
+   *  in is of: where the root element's is the other, the canvas is that
+   *  scheme's and opaque (`paintDocument`). */
+  paletteScheme: 'light' | 'dark';
 }
 
 export interface BuildOptions {
@@ -878,10 +954,12 @@ class Builder {
       firstLine: this._firstLine,
       firstLineStyler: this._firstLine ? this._firstLineStyler() : null,
       selectionStyler: cascade.hasSelection ? this._selectionStyler() : null,
+      shapeStyler: cascade.stylesShapes ? this._shapeStyler() : null,
       nestedOutOfLine: this._nestedOutOfLine,
       movedInline: this._movedInline,
       clipText: this._clipText,
       impliedHtml,
+      paletteScheme: cascade.initial.colorScheme,
     };
   }
 
@@ -909,6 +987,20 @@ class Builder {
     };
   }
 
+  /** `BoxTree.shapeStyler`, over this build's cascade: each drawing's
+   *  once, from its box's style as it is when first asked. */
+  private _shapeStyler(): ShapeStyler {
+    const cascade = this._options.cascade;
+    return (box) => {
+      let shapes = SHAPE_STYLES.get(box);
+      if (shapes === undefined) {
+        shapes = box.el ? cascade.shapeStyles(box.el, box.style) : null;
+        SHAPE_STYLES.set(box, shapes);
+      }
+      return shapes;
+    };
+  }
+
   /** `BoxTree.firstLineStyler`, over this build's cascade. */
   private _firstLineStyler(): FirstLineStyler {
     const cascade = this._options.cascade;
@@ -1043,7 +1135,7 @@ class Builder {
       }
     }
     // a translation is moved by the same pass
-    if (style.translate || style.transformTranslate) this._relative = true;
+    if (style.translate || style.transform) this._relative = true;
     if (style.backgroundClipText) this._clipText = true;
     if (style.verticalAlign !== 'baseline' && style.display === 'inline') {
       this._movedInline = true;
@@ -1348,7 +1440,7 @@ class Builder {
       }
     }
     // a translation is moved by the same pass
-    if (style.translate || style.transformTranslate) this._relative = true;
+    if (style.translate || style.transform) this._relative = true;
     if (style.backgroundClipText) this._clipText = true;
     if (style.verticalAlign !== 'baseline' && style.display === 'inline') {
       this._movedInline = true;

package/src/html/layout/cache.ts

@@ -186,6 +186,8 @@ export const RUN_FIELDS = [
   'underlineOffset',
   'underlineThickness',
   'strike',
+  'strikeStyle',
+  'strikeThickness',
   'href',
   'features',
   'nowrap',
@@ -221,6 +223,8 @@ function sameRun(a: TextRun, b: TextRun): boolean {
     a.underlineOffset === b.underlineOffset &&
     a.underlineThickness === b.underlineThickness &&
     a.strike === b.strike &&
+    a.strikeStyle === b.strikeStyle &&
+    a.strikeThickness === b.strikeThickness &&
     a.href === b.href &&
     a.features === b.features &&
     a.nowrap === b.nowrap &&
@@ -249,6 +253,8 @@ function sameStyle(
     a.underlineOffset === b.underlineOffset &&
     a.underlineThickness === b.underlineThickness &&
     a.strike === b.strike &&
+    a.strikeStyle === b.strikeStyle &&
+    a.strikeThickness === b.strikeThickness &&
     a.href === b.href &&
     a.features === b.features &&
     a.nowrap === b.nowrap &&

package/src/html/layout/css-grid.ts

@@ -31,6 +31,9 @@ import { Box, GRID_TRACKS, isBlank } from './boxes.js';
 import {
   FLEXED_HEIGHT,
   MIN_CONTENT_PROBE,
+  STRETCHED_ACROSS,
+  USED_HEIGHT,
+  centreButton,
   clampHeight,
   clampWidth,
   exactMinContent,
@@ -58,6 +61,28 @@ interface Item {
   /** Min-content and max-content widths, margin box, taken when asked. */
   min: number;
   max: number;
+  /** Whether it is a table stretched across its area (`STRETCHED_ACROSS`),
+   *  which `layoutItem` decides. */
+  across: boolean;
+}
+
+/**
+ * The first of a grid's items in row-major order: the one furthest to the
+ * start of the first row that holds an item, which the grid's baseline is
+ * taken from (CSS Grid 1, 10.6).
+ */
+function firstItem(items: Item[]): Box | null {
+  let first: Item | null = null;
+  for (const item of items) {
+    if (
+      first === null ||
+      item.row < first.row ||
+      (item.row === first.row && item.col < first.col)
+    ) {
+      first = item;
+    }
+  }
+  return first?.box ?? null;
 }
 
 /**
@@ -78,7 +103,13 @@ export function layoutGrid(
       positionOutOfFlow(child, box, ctx, false);
       continue;
     }
-    resolveEdges(child, Number.isFinite(contentWidth) ? contentWidth : 0);
+    // While the columns are sized, the area an item is in has no width for
+    // the percentages in its margins and its padding to be of, and they
+    // are of nothing (CSS Sizing 3, 5.2.1): a column is as wide as what
+    // is in the item. They are of the area once it has a width
+    // (`layoutItem`). Taken of the grid's width, an item `margin: 0 25%`
+    // made its `min-content` column half the grid wide.
+    resolveEdges(child, 0);
     boxes.push(child);
   }
   // the gaps: a percentage of the grid's content size along them, and of
@@ -176,6 +207,11 @@ export function layoutGrid(
       const extra = style.boxSizing === 'border-box' ? 0 : box.horizontalExtra;
       widest = narrowest = Math.max(style.width + extra, box.horizontalExtra);
     } else {
+      // A percentage is of an area the columns are still being sized for,
+      // and what it comes to depends on what the item makes them: it is
+      // `auto` for that (CSS Sizing 3, 5.2.1), and the item's content says
+      // how wide it is. Measured at the width a percentage made of the
+      // probe's, an item `width: 100%` made its `auto` column nothing.
       const fresh = box.intrinsicMaxContent < 0;
       widest = maxContentOf(box, ctx);
       if (box.intrinsicMinContent < 0) {
@@ -183,8 +219,7 @@ export function layoutGrid(
         // which is the max-content one only if it was made just now
         const exact =
           fresh && ctx.fonts ? exactMinContent(box, ctx.fonts) : null;
-        box.intrinsicMinContent =
-          exact ?? measureIntrinsicWidth(box, ctx, MIN_CONTENT_PROBE);
+        box.intrinsicMinContent = exact ?? minContentOf(box, ctx);
       }
       narrowest = box.intrinsicMinContent;
     }
@@ -240,14 +275,15 @@ export function layoutGrid(
       item,
       extent(widths, lefts, item.col, item.cols),
       ctx,
-      heightBefore(item),
+      spanBefore(item),
     );
   }
 
   // a height of the grid's own, or else the least it may be, which the
-  // `fr` rows and the `auto` ones fill
+  // `fr` rows and the `auto` ones fill: its `min-height`, or the height a
+  // column it is an item of flexed it to (`USED_HEIGHT`)
   const own = Number.isFinite(definite);
-  const least = own ? 0 : leastHeight(box);
+  const least = own ? 0 : Math.max(leastHeight(box), USED_HEIGHT.get(box) ?? 0);
   // the rows against a height: percentages of it, or `auto` without one
   const sizeRows = (base: number, available: number, atLeast: number) => {
     const rowTracks: SizingTrack[] = [];
@@ -301,18 +337,14 @@ export function layoutGrid(
     if (Object.is(child.percentHeightBase, tall) || !percentOwn(child))
       continue;
     child.percentHeightBase = tall;
-    layoutItem(
-      item,
-      extent(widths, lefts, item.col, item.cols),
-      ctx,
-      heightBeforeRows(child, tall),
-    );
+    layoutItem(item, extent(widths, lefts, item.col, item.cols), ctx, tall);
   }
   GRID_TRACKS.set(box, {
     cols: tracksOf(widths, lefts, keepCols),
     rows: tracksOf(heights, tops, keepRows),
     colLines,
     rowLines,
+    first: firstItem(items),
   });
 
   for (const item of items) {
@@ -371,20 +403,34 @@ export function layoutGrid(
       const width =
         wide === null ? child.width : clampWidth(child, wide, area, ctx);
       // what is in it takes its percentages of that height, which a
-      // stretch makes definite, as it does a flex item's
+      // stretch makes definite, as it does a flex item's — and an item that
+      // is a flex or grid container lays its own items out in it (11.1:
+      // "the grid area's width and height are considered definite for this
+      // purpose"): a card's `margin-top: auto` takes what its row is taller
+      // than the card by, its `flex: 1` grows into it (CSS Flexbox 8.1,
+      // 9.7). Its content's own height is the same layout, and kept.
+      // A table shares out among its rows what the area is taller than
+      // they are (`layoutTable`), and is no shorter than they are however
+      // short its area: its rows are the least it can be, as they are
+      // where it has a height of its own (CSS 2.1 17.5.3).
       if (
         child.kind !== 'replaced' &&
-        (wide !== null || percentHeightsIn(child))
+        (wide !== null ||
+          percentHeightsIn(child) ||
+          (child.kind === 'flex' && height !== child.height) ||
+          (child.kind === 'table' && height > child.height + 0.01))
       ) {
         FLEXED_HEIGHT.set(child, Math.max(0, height - child.verticalExtra));
         try {
-          ctx.layoutSubtree(child, width);
+          layoutAcross(item, width, area, ctx);
         } finally {
           FLEXED_HEIGHT.delete(child);
         }
       }
       child.width = width;
-      child.height = height;
+      child.height =
+        child.kind === 'table' ? Math.max(height, child.height) : height;
+      centreButton(child);
     }
     moveTo(
       child,
@@ -564,6 +610,7 @@ function place(
           cols: p.bs,
           min: -1,
           max: -1,
+          across: false,
         }
       : {
           box: p.box,
@@ -573,6 +620,7 @@ function place(
           cols: p.as,
           min: -1,
           max: -1,
+          across: false,
         },
   );
 }
@@ -609,23 +657,56 @@ function extent(
 }
 
 /** An item's max-content width, its border box's: measured once in the
- *  box's life, as a table cell's is (`Box.intrinsicMaxContent`). */
+ *  box's life, as a table cell's is (`Box.intrinsicMaxContent`). Its
+ *  content's, whatever width it has of its own (`minContentOf`). */
 function maxContentOf(box: Box, ctx: LayoutContext): number {
   if (box.intrinsicMaxContent < 0) {
-    box.intrinsicMaxContent = measureIntrinsicWidth(box, ctx, Infinity);
+    box.intrinsicMaxContent = measureIntrinsicWidth(
+      box,
+      ctx,
+      Infinity,
+      box.kind !== 'replaced',
+    );
   }
   return box.intrinsicMaxContent;
 }
 
-/** Lay an item out in its area: stretched across it where its width is
- *  `auto` and it is stretched, or at its content's width, no wider than
- *  the area, where it is aligned instead. */
+/**
+ * An item's min-content width, its border box's. What it is measured for is
+ * what it contributes to its columns, and the width a percentage makes of
+ * them is not known then: a box that is not replaced is as wide as its
+ * content for that, whatever its own `width` says, and a replaced element
+ * takes its percentage of nothing (CSS Sizing 3, 5.2.1). A width that is a
+ * length is weighed apart (`measure` in `layoutGrid`).
+ */
+function minContentOf(box: Box, ctx: LayoutContext): number {
+  return measureIntrinsicWidth(
+    box,
+    ctx,
+    MIN_CONTENT_PROBE,
+    box.kind !== 'replaced',
+  );
+}
+
+/**
+ * Lay an item out in its area: stretched across it where its width is
+ * `auto` and it is stretched, or at its content's width, no wider than
+ * the area, where it is aligned instead.
+ *
+ * The area is the item's containing block (CSS Grid 1, 3.3), so it is its
+ * width that a percentage in the item's margins, its padding, its
+ * `min-width` and its `max-width` is of (6.4, and CSS 2.1 8.3, 8.4 and
+ * 10.4), whatever width the item comes to in it. With its own width
+ * standing for its area's, an item `width: 50%; max-width: 80%` was four
+ * tenths of its column, and one `min-width: 50%` aligned to the start was
+ * as wide as its text.
+ */
 function layoutItem(
   item: Item,
   area: number,
   ctx: LayoutContext,
-  /** Its border box's height before the rows are sized, where it has one. */
-  tall: number | null,
+  /** The height of the rows it spans, where they have one yet. */
+  rows: number,
 ): void {
   const child = item.box;
   const style = child.style;
@@ -634,19 +715,31 @@ function layoutItem(
     style.justifySelf === 'auto'
       ? (parent?.justifyItems ?? 'normal')
       : style.justifySelf;
+  resolveEdges(child, area);
+  // its border box's height before the rows are sized, where it has one
+  const tall = heightBeforeRows(child, rows);
   const margins = child.marginLeft + child.marginRight;
   const room = Math.max(0, area - margins);
-  // its content's widths, border box: measured once in its life
+  // Its content's widths, border box: measured once in its life, with the
+  // percentages in its padding of nothing, as they are while the columns
+  // are sized, and here with what those come to of its area. Measuring
+  // resolves its edges against nothing, and they are put back.
+  const padded = percentPadding(child);
   const content = (): [number, number] => {
-    if (child.intrinsicMaxContent < 0) maxContentOf(child, ctx);
+    let probed = false;
+    if (child.intrinsicMaxContent < 0) {
+      maxContentOf(child, ctx);
+      probed = true;
+    }
     if (child.intrinsicMinContent < 0) {
-      child.intrinsicMinContent = measureIntrinsicWidth(
-        child,
-        ctx,
-        MIN_CONTENT_PROBE,
-      );
+      child.intrinsicMinContent = minContentOf(child, ctx);
+      probed = true;
     }
-    return [child.intrinsicMinContent, child.intrinsicMaxContent];
+    if (probed) resolveEdges(child, area);
+    return [
+      child.intrinsicMinContent + padded,
+      child.intrinsicMaxContent + padded,
+    ];
   };
   const keyword = style.widthKeyword;
   // `stretch` fills its area, and so does `normal` but for a replaced
@@ -699,7 +792,15 @@ function layoutItem(
     width = Math.min(widest, Math.max(narrowest, room));
   }
   if (child.kind !== 'replaced') {
-    ctx.layoutSubtree(child, width);
+    // a table stretched across is as wide as its area, which in a block's
+    // flow it would shrink from to its columns (`STRETCHED_ACROSS`)
+    item.across =
+      across &&
+      child.kind === 'table' &&
+      style.width === AUTO &&
+      !keyword &&
+      through === null;
+    layoutAcross(item, width, area, ctx);
     return;
   }
   // a replaced element sizes itself from its style: then it is given the
@@ -718,6 +819,42 @@ function layoutItem(
   }
 }
 
+/** Lay an item out at a width: a table stretched across its area at that
+ *  width as its own (`STRETCHED_ACROSS`), for this layout alone. */
+function layoutAcross(
+  item: Item,
+  width: number,
+  area: number,
+  ctx: LayoutContext,
+): void {
+  const child = item.box;
+  if (!item.across) {
+    ctx.layoutSubtree(child, width, area);
+    return;
+  }
+  STRETCHED_ACROSS.add(child);
+  try {
+    ctx.layoutSubtree(child, width, area);
+  } finally {
+    STRETCHED_ACROSS.delete(child);
+  }
+}
+
+/** What the percentages in a box's padding come to across it, its edges
+ *  resolved: what a width of its content's, measured with them of nothing,
+ *  is short of its border box by. */
+function percentPadding(box: Box): number {
+  const { paddingLeft, paddingRight } = box.style;
+  let out = 0;
+  if (isPct(paddingLeft)) {
+    out += box.padLeft - Math.max(0, resolve(paddingLeft, 0));
+  }
+  if (isPct(paddingRight)) {
+    out += box.padRight - Math.max(0, resolve(paddingRight, 0));
+  }
+  return out;
+}
+
 /** Whether a box's content is its least size through a ratio, which it is
  *  where the box shows what overflows it and its least width is `auto`
  *  (CSS Sizing 4, 5.2). */