@react-x11/components 0.14.1 → 0.16.1

package/src/html/layout/boxes.ts

@@ -16,7 +16,7 @@
 // reason richtext's node gives for answering from what it draws: an index
 // built by a second traversal can disagree with the boxes, and a selection
 // that disagrees with the glyphs is worse than no selection.
-import type { Element } from 'domhandler';
+import type { ChildNode, Element } from 'domhandler';
 
 import type { TextRun } from '../../richtext/index.js';
 import {
@@ -28,6 +28,7 @@ import {
   NON_RENDERED,
   tagOf,
 } from '../dom.js';
+import { ShapeCopies, languageOf, metaColorScheme } from '../css/cascade.js';
 import type {
   Cascade,
   FirstLetterRules,
@@ -48,7 +49,7 @@ import {
   inherit,
 } from '../css/style.js';
 import { AUTO } from '../css/values.js';
-import { svgIntrinsics } from '../svg.js';
+import { concreteSize, svgIntrinsics } from '../svg.js';
 import type { IntrinsicSize } from '../svg.js';
 import type { ComputedStyle } from '../css/style.js';
 import type { GridLines } from './grid-lines.js';
@@ -82,15 +83,32 @@ export interface Marker {
   /** Its own style where a `::marker` rule gives it one; the item's where
    *  none does. */
   style: ComputedStyle | null;
-  /** The image it is, `list-style-image`'s, at its size in device pixels,
-   *  where that has arrived; its text is then not drawn. */
-  image?: { url: string; width: number; height: number };
+  /** The image it is, `list-style-image`'s, where that has arrived, at its
+   *  size in device pixels — its own, or the one a marker image with none
+   *  is given (`Builder._markerImageSize`); its text is then not drawn.
+   *  `gap` is the room between it and the content, in device pixels
+   *  (`MARKER_IMAGE_GAP`). */
+  image?: { url: string; width: number; height: number; gap: number };
   /** Its text is its own — a string `list-style-type`, a `::marker`'s
    *  `content` — and ends at the content's edge, with no gap a number
    *  or a bullet is set apart by. */
   flush?: true;
 }
 
+/**
+ * The room between a list marker's image and the item's content, in CSS
+ * pixels: between the image and the content's edge outside the item, and
+ * after the image inside it. CSS 2.1 (12.5.1) leaves where a marker goes
+ * to the user agent, and this is Blink's `kCMarkerPaddingPx`
+ * (`ListMarker::InlineMarginsForOutside` and `…ForInside`), which WebKit
+ * has too. Outside, ours was the gap a bullet has, 0.4em — 16 pixels at
+ * 40px text where Chrome has 7 — and inside the space a marker's text ends
+ * in, a space's width. Blink writes it into the marker's margins unzoomed,
+ * so at a device scale of 2 Chrome's is 7 device pixels; here it is 7 CSS
+ * pixels at any scale, so that a page at 2x is the page at 1x doubled.
+ */
+const MARKER_IMAGE_GAP = 7;
+
 /** An out-of-flow box's static position, as an offset from the box whose
  *  flow it was taken from, which may yet move. */
 export interface StaticPosition {
@@ -544,6 +562,40 @@ export type ReplacedKind =
   /** An inline `<svg>`: a drawing, sized by what it says of its size. */
   | 'svg';
 
+/**
+ * Where a control sits on the line, as Chrome sets it: a field, a select
+ * or an input button on the baseline of the text it shows, its line in its
+ * face centred in its content box — that face's ascent and descent — and a
+ * checkbox, a radio button or a range on its border box's bottom, its
+ * bottom margin under the line. A `<textarea>` is none of these, and sits
+ * on its bottom margin edge as a box that scrolls does.
+ */
+export const CONTROL_BASELINES = new WeakMap<
+  Box,
+  InlineDecoration | 'border'
+>();
+
+function controlBaseline(
+  el: Element,
+  kind: ReplacedKind,
+  style: ComputedStyle,
+  options: BuildOptions,
+): InlineDecoration | 'border' | null {
+  if (kind === 'checkbox' || kind === 'radio') return 'border';
+  if (kind === 'input' && (attr(el, 'type') ?? '').toLowerCase() === 'range') {
+    return 'border';
+  }
+  if (kind !== 'input' && kind !== 'select' && kind !== 'button') return null;
+  // a list box shows rows, and sits on its bottom edge
+  if (kind === 'select' && Number(attr(el, 'size') ?? 1) > 1) return null;
+  return (
+    options.faceExtent?.(style) ?? {
+      ascent: style.fontSize * 0.8,
+      descent: style.fontSize * 0.2,
+    }
+  );
+}
+
 /** A replaced box's intrinsic dimensions, in device pixels. */
 export interface Intrinsic {
   /** Its size — or, on an axis `missing` names, the default object size of
@@ -789,6 +841,11 @@ export interface BoxTree {
    *  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;
+  /** What the drawings of this build share in `Cascade.shapeStyles`: the
+   *  document's elements by their ids, indexed when first asked, where a
+   *  `<use>` finds the icon a sprite has for it; and what the rules matched
+   *  in each copy a `<use>` makes. Null where `shapeStyler` is. */
+  shapeCopies: ShapeCopies | 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. */
@@ -826,6 +883,14 @@ export interface BuildOptions {
   imageSize(el: Element): IntrinsicSize | null;
   /** The same for an image named by url — generated content's. */
   urlSize?(url: string): IntrinsicSize | null;
+  /** How far a style's first face reaches above its baseline, in device
+   *  pixels: what a list marker's image with no size of its own is sized
+   *  by (`_markerImageSize`). Where it is not known, 0.8em. */
+  faceAscent?(style: ComputedStyle): number | undefined;
+  /** How far a style's first face reaches above and below its baseline,
+   *  in device pixels: where a control sets its text, which is where its
+   *  baseline is (`CONTROL_BASELINES`). */
+  faceExtent?(style: ComputedStyle): InlineDecoration | undefined;
   /** The size a real widget wants, so the box in the flow is the size the
    *  control will be drawn at. */
   controlSize(
@@ -847,6 +912,28 @@ export function buildBoxes(
   return builder.run(root as Element);
 }
 
+/** A document's first element with an id: one walk of it, the first time
+ *  an id is asked for (`ShapeCopies`). */
+function idIndex(root: Element): (id: string) => Element | null {
+  let index: Map<string, Element> | null = null;
+  return (id) => {
+    if (!index) {
+      index = new Map();
+      const stack: ChildNode[] = [...root.children].reverse();
+      for (let node = stack.pop(); node; node = stack.pop()) {
+        if (!isElement(node)) continue;
+        const own = node.attribs.id;
+        if (own && !index.has(own)) index.set(own, node);
+        const children = node.children;
+        for (let i = children.length - 1; i >= 0; i -= 1) {
+          stack.push(children[i]);
+        }
+      }
+    }
+    return index.get(id) ?? null;
+  };
+}
+
 /**
  * How deep the box tree may go. Everything downstream of the builder — the
  * fix-up pass, layout, paint, the accessor walks — recurses on box depth, so
@@ -854,8 +941,17 @@ export function buildBoxes(
  * output, a runaway template) from a stack overflow five phases later.
  * Blink's parser flattens at 512 for the same reason; content past the cap
  * is dropped, which beats the alternative of crashing the application.
+ *
  * The parser keeps a document to 256 elements (`dom.ts`), so what reaches
- * this now is the anonymous boxes a table builds round each of them.
+ * this is the anonymous boxes a table builds round them, which the builder
+ * counts as it goes (`wrappersAround`), since the fix-up makes them after
+ * it. Counted as elements, a `display: table-cell` box in another was one
+ * level where it is four boxes — a table, a row group, a row and the cell
+ * — and every pass pays for a box: painting one takes some 800 bytes of
+ * the stack. Two hundred and fifty cells deep, a thousand boxes, layout
+ * and paint each ran out of the 984 KB V8 gives the main thread, and the
+ * document came out blank. 512 boxes paint in under half of it, and are a
+ * cell in a cell 128 deep.
  */
 const MAX_DEPTH = 512;
 
@@ -916,11 +1012,15 @@ class Builder {
   run(root: Element): BoxTree {
     const cascade = this._options.cascade;
     cascade.beginSharing(this._options.kept ?? null);
+    cascade.pageColorScheme = metaColorScheme(root);
     const { style: rootStyle, html: impliedHtml } = cascade.rootStyle(
       hasBody(root),
       hasHtml(root),
     );
     const rootBox = new Box('block', null, rootStyle);
+    // the root standing in for a `<body>` has its background clipped to
+    // the document's text as the body's would be
+    if (rootStyle.backgroundClipText) this._clipText = true;
     // a fragment's root stands in for a `<body>`, counters and all
     this._scopes.open();
     this._counterChanges(rootStyle, {
@@ -938,6 +1038,7 @@ class Builder {
     const anonymous = anonymousStyles(cascade.initial);
     fixUp(rootBox, anonymous);
     assignSubtreeRanges(rootBox);
+    const copies = cascade.stylesShapes ? new ShapeCopies(idIndex(root)) : null;
     return {
       root: rootBox,
       anonymous,
@@ -954,7 +1055,8 @@ class Builder {
       firstLine: this._firstLine,
       firstLineStyler: this._firstLine ? this._firstLineStyler() : null,
       selectionStyler: cascade.hasSelection ? this._selectionStyler() : null,
-      shapeStyler: cascade.stylesShapes ? this._shapeStyler() : null,
+      shapeStyler: copies ? this._shapeStyler(copies) : null,
+      shapeCopies: copies,
       nestedOutOfLine: this._nestedOutOfLine,
       movedInline: this._movedInline,
       clipText: this._clipText,
@@ -989,12 +1091,12 @@ 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 {
+  private _shapeStyler(copies: ShapeCopies): 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;
+        shapes = box.el ? cascade.shapeStyles(box.el, box.style, copies) : null;
         SHAPE_STYLES.set(box, shapes);
       }
       return shapes;
@@ -1190,8 +1292,10 @@ class Builder {
       return;
     }
 
-    if (this._depth >= MAX_DEPTH) return;
     const kind = boxKindFor(style.display);
+    // the box, and the anonymous boxes the fix-up will put round it
+    const depth = 1 + wrappersAround(into.kind, kind, style);
+    if (this._depth + depth > MAX_DEPTH) return;
     const box = new Box(kind, el, style);
     into.append(box);
     if (
@@ -1221,7 +1325,7 @@ class Builder {
     let markerStyle: ComputedStyle | null = null;
     let ownMarker = false;
     let markerImage: { url: string; size: IntrinsicSize } | null = null;
-    let insideImage: string | null = null;
+    let insideImage: NonNullable<Marker['image']> | null = null;
     if (style.display === 'list-item' && style.listStyleImage) {
       // asked for as generated content's images are, and the tree built
       // again when it arrives; until it has, and where it never does, the
@@ -1256,20 +1360,21 @@ class Builder {
         flush = true;
       }
       if (markerImage && !ownMarker) {
-        if (style.listStylePosition === 'inside') insideImage = markerImage.url;
+        const [width, height] = this._markerImageSize(
+          markerImage.size,
+          markerStyle ?? style,
+        );
+        const gap = MARKER_IMAGE_GAP * (this._options.scale ?? 1);
+        const image = { url: markerImage.url, width, height, gap };
+        if (style.listStylePosition === 'inside') insideImage = image;
         else {
-          const scale = this._options.scale ?? 1;
           box.marker = {
             text: '',
             layout: null,
             x: 0,
             y: 0,
             style: markerStyle,
-            image: {
-              url: markerImage.url,
-              width: (markerImage.size.width ?? 0) * scale,
-              height: (markerImage.size.height ?? 0) * scale,
-            },
+            image,
           };
         }
       } else if (text && style.listStylePosition === 'inside') {
@@ -1302,19 +1407,23 @@ class Builder {
       : null;
     const ownLetter = ownRules ? { rules: ownRules, punctuation: [] } : null;
     if (ownLetter) this._firstLetter = ownLetter;
-    this._depth += 1;
+    this._depth += depth;
     if (insideImage) {
       // an inline image at the start of the first line, as a generated
-      // image is, and the space a marker's text ends in
-      this._contentImage(insideImage, box, style, el);
-      this._textNode(' ', box, style, el);
+      // image is, and the room after it Blink gives it rather than a
+      // space: the content's own white space after it is kept, as it is
+      // after an image (`MARKER_IMAGE_GAP`)
+      const { url, gap } = insideImage;
+      const image = this._contentImage(url, box, style, el, insideImage);
+      if (style.direction === 'rtl') image.style.marginLeft = gap;
+      else image.style.marginRight = gap;
     } else if (insideMarker) {
       this._insideMarker(insideMarker, style, markerStyle, box, el);
     }
     this._pseudo(el, 'before', style, box);
     this._children(el, box, style, childInFlex, el, key);
     this._pseudo(el, 'after', style, box);
-    this._depth -= 1;
+    this._depth -= depth;
     this._letterAfter(flow, skipped, outerLetter, ownLetter);
     if (flow !== 'inline') this._endLine();
     this._ws = after(flow, this._ws, around);
@@ -1415,6 +1524,8 @@ class Builder {
       ratio: 0,
     };
     this._controls.push(box);
+    const baseline = controlBaseline(el, replaced, style, this._options);
+    if (baseline) CONTROL_BASELINES.set(box, baseline);
     // A control's value is the widget's, not the document's: putting it in
     // the selection index would make Ctrl+A copy the contents of every text
     // field, which no document viewer does.
@@ -1754,14 +1865,14 @@ class Builder {
             .join(item.separator);
           break;
         case 'open-quote':
-          text += quoteAt(style.quotes, this._quoteDepth, 0);
+          text += quoteAt(style.quotes, this._quoteDepth, 0, languageOf(el));
           this._quoteDepth += 1;
           break;
         case 'close-quote':
           // a close with nothing open writes nothing and closes nothing
           if (this._quoteDepth > 0) {
             this._quoteDepth -= 1;
-            text += quoteAt(style.quotes, this._quoteDepth, 1);
+            text += quoteAt(style.quotes, this._quoteDepth, 1, languageOf(el));
           }
           break;
         case 'no-open-quote':
@@ -1787,7 +1898,10 @@ class Builder {
     into: Box,
     style: ComputedStyle,
     owner: Element,
-  ): void {
+    /** Its size where it is a list marker's, which has one whatever the
+     *  image says (`_markerImageSize`). */
+    marker?: { width: number; height: number },
+  ): Box {
     const box = new Box('replaced', null, {
       ...inherit(style, this._options.cascade.initial),
       display: 'inline',
@@ -1797,11 +1911,40 @@ class Builder {
     CONTENT_IMAGES.set(box, url);
     const size = this._options.urlSize?.(url) ?? null;
     this._contentImages.push({ url, element: owner, sized: !!size });
-    if (size) setIntrinsics(box, size, this._options.scale ?? 1);
+    if (marker) {
+      const { width, height } = marker;
+      const ratio = width > 0 && height > 0 ? width / height : 0;
+      box.intrinsic = { width, height, missing: 0, ratio };
+    } else if (size) setIntrinsics(box, size, this._options.scale ?? 1);
     else box.intrinsic = { width: 0, height: 0, missing: 0, ratio: 0 };
     this._ws = after('atomic', this._ws, this._ws);
     this._lettered = false;
     this._abandonLetter();
+    return box;
+  }
+
+  /**
+   * A list marker image's size, in device pixels: its own where it has one,
+   * and where it lacks some — an SVG with only a `viewBox`, or with no size
+   * and no ratio — CSS Images' default sizing in a square half its face's
+   * ascent across. CSS Lists 3 (3.3) makes the square 1em, which both
+   * engines find too large (w3c/csswg-drafts#4207): Blink's is half the
+   * ascent, rounded to a whole pixel first
+   * (`LayoutListMarkerImage::DefaultSize`), Gecko's 0.4em, and this is
+   * Blink's. A `viewBox` alone came to 0 by 0 and drew no marker at all,
+   * and inside the item to the 300 by 150 a generated image defaults to.
+   */
+  private _markerImageSize(
+    size: IntrinsicSize,
+    style: ComputedStyle,
+  ): [number, number] {
+    let side = 0;
+    // CoreText reads a size of 0 as its default twelve points
+    if ((size.width === null || size.height === null) && style.fontSize > 0) {
+      const ascent = this._options.faceAscent?.(style) ?? style.fontSize * 0.8;
+      side = Math.round(ascent) / 2;
+    }
+    return concreteSize(size, side, side, this._options.scale ?? 1);
   }
 
   /** A text node, whitespace-processed per the inherited `white-space`. */
@@ -2467,6 +2610,47 @@ function after(
   }
 }
 
+/**
+ * How many anonymous boxes the fix-up will put between a box of `kind` and
+ * the box it is appended to, `parent` (`fixUpTable`, `wrapOrphans`,
+ * `wrapTableParts`): a table part outside a table is given what it is
+ * missing of one, and what is in a table and no part of it is given a
+ * cell, a row and a row group. A cell in a block is in a table, a row group
+ * and a row of its own, and a block in a row is in a cell. Counted against
+ * `MAX_DEPTH`, which bounds the boxes and not the elements.
+ */
+function wrappersAround(
+  parent: BoxKind,
+  kind: BoxKind,
+  style: ComputedStyle,
+): number {
+  const column =
+    style.display === 'table-column' || style.display === 'table-column-group';
+  switch (parent) {
+    case 'table':
+      if (kind === 'table-row-group' || kind === 'table-caption' || column) {
+        return 0;
+      }
+      return kind === 'table-row' ? 1 : kind === 'table-cell' ? 2 : 3;
+    case 'table-row-group':
+      return kind === 'table-row' ? 0 : kind === 'table-cell' ? 1 : 2;
+    case 'table-row':
+      return kind === 'table-cell' ? 0 : 1;
+  }
+  // a part out of flow is no part (`isTablePart`)
+  if (
+    style.position === 'absolute' ||
+    style.position === 'fixed' ||
+    style.float !== 'none'
+  ) {
+    return 0;
+  }
+  if (kind === 'table-row-group' || kind === 'table-caption' || column) {
+    return 1;
+  }
+  return kind === 'table-row' ? 2 : kind === 'table-cell' ? 3 : 0;
+}
+
 function boxKindFor(display: ComputedStyle['display']): BoxKind {
   switch (display) {
     case 'inline':

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

@@ -374,18 +374,19 @@ export function layoutGrid(
     } else if (align === 'center') dy = (tall - outerHeight) / 2;
     else if (align === 'flex-end') dy = tall - outerHeight;
     else if (
-      (align === 'stretch' || align === 'baseline') &&
+      (align === 'stretch' || align === 'normal' || align === 'baseline') &&
       child.style.height === AUTO &&
       !child.style.heightKeyword &&
-      (child.style.alignSelf === 'stretch' ||
+      (align === 'stretch' ||
         (child.kind !== 'replaced' && !child.style.aspectRatio))
     ) {
       // a stretched item is its area's height, within its own least and
       // greatest (10.3): taller than what it holds, or shorter where its
       // tracks let it be, what it holds then running past it. An image, a
-      // control or a box with an `aspect-ratio` keeps its own height, as
-      // `normal` has one with a natural size or a ratio — which is what
-      // the grid's `stretch` may be, and the item's own may not.
+      // control or a box with an `aspect-ratio` keeps its own height under
+      // `normal`, which stretches only an item with neither a natural size
+      // nor a ratio, and is stretched by `stretch`, the grid's or its own
+      // (6.2, and CSS Box Alignment 3, 6.1).
       const stretched = tall - child.marginTop - child.marginBottom;
       const height = clampHeight(
         child,
@@ -939,9 +940,9 @@ function percentOwn(box: Box): boolean {
 /**
  * An item's border-box height before the rows are sized, where it has one
  * then: a height of its own — a percentage of the rows it spans where they
- * have a length for a size — or the rows' where it is stretched down them
- * by its own `align-self`. Null where it has none, which is where its
- * height is its content's.
+ * have a length for a size — or the rows' where `stretch` stretches it
+ * down them, its own `align-self` or the grid's `align-items`. Null where
+ * it has none, which is where its height is its content's.
  */
 function heightBeforeRows(box: Box, rows: number): number | null {
   const style = box.style;
@@ -954,10 +955,12 @@ function heightBeforeRows(box: Box, rows: number): number | null {
         : own + box.verticalExtra,
     );
   }
+  const align =
+    style.alignSelf === AUTO ? box.parent?.style.alignItems : style.alignSelf;
   if (
     style.height === AUTO &&
     !style.heightKeyword &&
-    style.alignSelf === 'stretch' &&
+    align === 'stretch' &&
     Number.isFinite(rows) &&
     !autoMargins(box, 'y').some(Boolean)
   ) {