@react-x11/components 0.12.0 → 0.14.0

package/src/html/layout/boxes.ts

@@ -28,7 +28,12 @@ import {
   NON_RENDERED,
   tagOf,
 } from '../dom.js';
-import type { Cascade, FirstLetterRules } from '../css/cascade.js';
+import type {
+  Cascade,
+  FirstLetterRules,
+  KeptStyles,
+  SelectionStyle,
+} from '../css/cascade.js';
 import type { CollapsedTable } from './collapse.js';
 import { quoteAt } from '../css/content.js';
 import type { CounterStyles } from '../css/counter-styles.js';
@@ -197,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
@@ -556,6 +572,10 @@ export type FirstLineStyler = (
   parent: ComputedStyle,
 ) => ComputedStyle;
 
+/** The `::selection` of the element a box's text is in, or null for the
+ *  palette's highlight (`Cascade.selectionStyle`). */
+export type SelectionStyler = (box: Box | null) => SelectionStyle | null;
+
 /** The url of an image generated content put in a pseudo-element: it has
  *  no element of its own to name it (`imageUrlOf`). */
 export const CONTENT_IMAGES = new WeakMap<Box, string>();
@@ -621,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>();
 
@@ -641,6 +665,54 @@ export const PAINT_ORDER = new WeakMap<Box, Box[]>();
  *  a browser's does (`elementRect`). */
 export const CUT_BLOCKS = new WeakMap<Box, Box[]>();
 
+/** Where a block that clearance moved below the floats would have stood
+ *  without it, its border edge's top (CSS 2.1 9.5.2): a browser's
+ *  fragment of an inline box around such a block starts there, and takes
+ *  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. */
@@ -673,6 +745,10 @@ export interface BoxTree {
   controls: Box[];
   /** Every box carrying an `href`, for click and hover. */
   links: Box[];
+  /** The style of an anonymous box under a parent's (`anonymousStyles`):
+   *  the one the fix-up gave each it made, and what such a box takes when
+   *  its parent's style changes where it is (`HtmlViewNode._hoverInPlace`). */
+  anonymous: AnonymousStyle;
   /** Every box with a `background-image`, a border image or a mask image,
    *  an element's or a pseudo-element's, for the host to be asked for: a
    *  document has a handful, and finding them was a walk over every box
@@ -694,6 +770,10 @@ export interface BoxTree {
   /** Each box's style on a first line (`FirstLineStyler`), where any
    *  block has a `::first-line`. */
   firstLineStyler: FirstLineStyler | null;
+  /** Each box's `::selection` (`SelectionStyler`), where any rule styles
+   *  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;
   /** 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. */
@@ -710,10 +790,17 @@ 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 {
   cascade: Cascade;
+  /** The styles of the tree this one replaces, where only some elements'
+   *  can have changed since (`Cascade.beginSharing`). */
+  kept?: KeptStyles | null;
   /** Device pixels per CSS pixel. An image's pixels and a `width="600"`
    *  attribute are CSS pixels; every box is device, so both are multiplied
    *  on the way in. Default 1. */
@@ -813,7 +900,7 @@ class Builder {
 
   run(root: Element): BoxTree {
     const cascade = this._options.cascade;
-    cascade.beginSharing();
+    cascade.beginSharing(this._options.kept ?? null);
     const { style: rootStyle, html: impliedHtml } = cascade.rootStyle(
       hasBody(root),
       hasHtml(root),
@@ -832,10 +919,13 @@ class Builder {
     // it carries no margins of its own and cannot collapse with anything.
     this._children(root, rootBox, rootStyle, false, null, ROOT_SHARE_KEY);
     this._endLine();
-    fixUp(rootBox, anonymousStyles(cascade.initial));
+    cascade.endSharing();
+    const anonymous = anonymousStyles(cascade.initial);
+    fixUp(rootBox, anonymous);
     assignSubtreeRanges(rootBox);
     return {
       root: rootBox,
+      anonymous,
       text: this._chunks.join(''),
       textBoxes: this._textBoxes,
       textStyles: this._textStyles,
@@ -848,10 +938,36 @@ class Builder {
       negative: this._negative,
       firstLine: this._firstLine,
       firstLineStyler: this._firstLine ? this._firstLineStyler() : null,
+      selectionStyler: cascade.hasSelection ? this._selectionStyler() : null,
       nestedOutOfLine: this._nestedOutOfLine,
       movedInline: this._movedInline,
       clipText: this._clipText,
       impliedHtml,
+      paletteScheme: cascade.initial.colorScheme,
+    };
+  }
+
+  /** `BoxTree.selectionStyler`, over this build's cascade: an element's
+   *  over its parent's, each once. A box with no element of its own — text,
+   *  an anonymous box — is its nearest element's. */
+  private _selectionStyler(): SelectionStyler {
+    const cascade = this._options.cascade;
+    const styles = this._styles;
+    const known = new Map<Element, SelectionStyle | null>();
+    const of = (el: Element): SelectionStyle | null => {
+      let found = known.get(el);
+      if (found !== undefined) return found;
+      // the parser keeps a document to 256 elements deep (`dom.ts`)
+      const parent = isElement(el.parent) ? of(el.parent) : null;
+      const own = styles.get(el)?.style;
+      found = own ? cascade.selectionStyle(el, own, parent) : parent;
+      known.set(el, found);
+      return found;
+    };
+    return (box) => {
+      let at = box;
+      while (at && !at.el) at = at.parent;
+      return at?.el ? of(at.el) : null;
     };
   }
 
@@ -989,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;
@@ -1024,7 +1140,9 @@ class Builder {
     }
 
     // an `<object>` is its image once it has one, and its content until;
-    // an `<embed>` its image, and a `<video>` its poster, or a frame
+    // an `<embed>` its image, and a `<video>` its poster, or a frame; an
+    // image button its image, and a button saying what it is for until it
+    // has one, so it can be pressed either way
     const replaced =
       tag === 'object'
         ? this._options.imageSize(el)
@@ -1032,7 +1150,11 @@ class Builder {
           : 'none'
         : (tag === 'embed' || tag === 'video') && this._options.imageSize(el)
           ? 'image'
-          : replacedKind(el, tag);
+          : isImageButton(el, tag)
+            ? this._options.imageSize(el)
+              ? 'image'
+              : 'button'
+            : replacedKind(el, tag);
     if (replaced !== 'none') {
       this._replaced(el, tag, replaced, style, into);
       return;
@@ -1288,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;
@@ -2359,6 +2481,13 @@ function setIntrinsics(box: Box, size: IntrinsicSize, scale: number): void {
   };
 }
 
+/** An `<input type=image>`: a picture that submits its form. */
+function isImageButton(el: Element, tag: string): boolean {
+  return (
+    tag === 'input' && (attr(el, 'type') ?? '').trim().toLowerCase() === 'image'
+  );
+}
+
 function replacedKind(el: Element, tag: string): ReplacedKind {
   switch (tag) {
     case 'img':
@@ -2662,24 +2791,24 @@ function namesImages(style: ComputedStyle): boolean {
  * paragraph after it the height of the div further down. One per parent
  * style, which the cascade already shares between elements.
  */
-type AnonymousStyle = (
-  parent: Box,
+export type AnonymousStyle = (
+  parent: ComputedStyle,
   display: ComputedStyle['display'],
 ) => ComputedStyle;
 
 function anonymousStyles(initial: ComputedStyle): AnonymousStyle {
   const made = new WeakMap<ComputedStyle, Map<string, ComputedStyle>>();
   return (parent, display) => {
-    let byDisplay = made.get(parent.style);
+    let byDisplay = made.get(parent);
     if (!byDisplay) {
       byDisplay = new Map();
-      made.set(parent.style, byDisplay);
+      made.set(parent, byDisplay);
     }
     let style = byDisplay.get(display);
     if (!style) {
       // `display` is the one property it does not start from: it is the
       // box the fix-up made, and layout asks the style what a box is
-      style = inherit(parent.style, initial);
+      style = inherit(parent, initial);
       style.display = display;
       byDisplay.set(display, style);
     }
@@ -2787,7 +2916,7 @@ function anonymousOf(
   anonymous: AnonymousStyle,
   display: ComputedStyle['display'] = kind as ComputedStyle['display'],
 ): Box {
-  const box = new Box(kind, null, anonymous(parent, display));
+  const box = new Box(kind, null, anonymous(parent.style, display));
   box.parent = parent;
   for (const child of run) {
     child.parent = box;

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). */