@react-x11/components 0.13.0 → 0.14.0

package/src/html/layout/boxes.ts

@@ -202,6 +202,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 +641,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 +671,48 @@ 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 };
+
 /** 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. */
@@ -733,6 +790,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 {
@@ -882,6 +943,7 @@ class Builder {
       movedInline: this._movedInline,
       clipText: this._clipText,
       impliedHtml,
+      paletteScheme: cascade.initial.colorScheme,
     };
   }
 
@@ -1043,7 +1105,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 +1410,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,8 @@ import { Box, GRID_TRACKS, isBlank } from './boxes.js';
 import {
   FLEXED_HEIGHT,
   MIN_CONTENT_PROBE,
+  USED_HEIGHT,
+  centreButton,
   clampHeight,
   clampWidth,
   exactMinContent,
@@ -60,6 +62,25 @@ interface Item {
   max: number;
 }
 
+/**
+ * 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;
+}
+
 /**
  * Lay out a grid container's children. Returns the content height.
  */
@@ -78,7 +99,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
@@ -240,14 +267,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 +329,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 +395,28 @@ 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.
       if (
         child.kind !== 'replaced' &&
-        (wide !== null || percentHeightsIn(child))
+        (wide !== null ||
+          percentHeightsIn(child) ||
+          (child.kind === 'flex' && height !== child.height))
       ) {
         FLEXED_HEIGHT.set(child, Math.max(0, height - child.verticalExtra));
         try {
-          ctx.layoutSubtree(child, width);
+          ctx.layoutSubtree(child, width, area);
         } finally {
           FLEXED_HEIGHT.delete(child);
         }
       }
       child.width = width;
       child.height = height;
+      centreButton(child);
     }
     moveTo(
       child,
@@ -617,15 +649,25 @@ function maxContentOf(box: Box, ctx: LayoutContext): number {
   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. */
+/**
+ * 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 +676,35 @@ 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,
       );
+      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 +757,7 @@ function layoutItem(
     width = Math.min(widest, Math.max(narrowest, room));
   }
   if (child.kind !== 'replaced') {
-    ctx.layoutSubtree(child, width);
+    ctx.layoutSubtree(child, width, area);
     return;
   }
   // a replaced element sizes itself from its style: then it is given the
@@ -718,6 +776,21 @@ function layoutItem(
   }
 }
 
+/** 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). */