@react-x11/components 0.10.0 → 0.12.0

package/src/html/layout/boxes.ts

@@ -36,6 +36,7 @@ import type { ContentItem } from '../css/content.js';
 import {
   CONTAIN_STYLE,
   FIRST_LINE_INHERITED,
+  NO_MASK,
   copyStyle,
   firstLineParent,
   inherit,
@@ -187,6 +188,15 @@ export interface LineText {
    *  spacer: a unit of the layout that is no text of the document's
    *  (`documentOffsetOf`, `layoutOffsetOf`). */
   gaps?: number[];
+  /**
+   * The spaces `pre-wrap` keeps that this fragment's line ends on, which an
+   * engine strips from a line's end as though CSS removed them there: each
+   * one's offset in the layout's text and where it is, from the layout's
+   * origin, beside the line's end in logical order (`hangPreserved`). They
+   * are their inline box's, whose background and border cover them, and
+   * the ones before a forced break that fit take room on the line.
+   */
+  hung?: { at: number; x: number; width: number }[];
   /** 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
@@ -233,6 +243,10 @@ export interface TextLayoutLike {
     height: number;
     baseline: number;
     width: number;
+    /** Its width with the white space it ends on kept, in the item it
+     *  ends: how far it moves the pen where text goes on after it on the
+     *  same line. ntk's, from 8.17.0; an engine without it leaves it out. */
+    advance?: number;
     ascent: number;
     descent: number;
     start: number;
@@ -556,6 +570,14 @@ export const INLINE_OFFSETS = new WeakMap<Box, { x: number; y: number }>();
 export const TEXT_SHIFTS = new WeakMap<LineText, { x: number; y: number }>();
 export const SHIFTED_LINES = new WeakSet<LineBox>();
 
+/** Of a block's lines, by the array they are, those `position: relative`
+ *  or a translation moved something off — a text in a moved inline box, or
+ *  an inline-block or an image on it — which is drawn where it went while
+ *  the line stays where it was: what the paint's cull of a block's lines
+ *  has to look at past the lines the damage meets (`paintLines`). By the
+ *  array, so that a layout that makes new lines leaves none of the old. */
+export const MOVED_OFF_LINES = new WeakMap<LineBox[], Set<LineBox>>();
+
 /** How far `vertical-align` raised a text above its line's baseline, and an
  *  inline box's own baseline, where it did: beside the lines and the boxes
  *  for the reason the offsets above are. A line holding a raised text is
@@ -573,6 +595,12 @@ export const BOX_RAISES = new WeakMap<Box, number>();
  *  background, drawn from its baseline, is put there by line. */
 export const LINE_BOX_RAISES = new WeakMap<LineBox, Map<Box, number>>();
 
+/** The face of an inline box with padding above or below its text and
+ *  nothing to paint behind it, which has no `decoration`: its fragments
+ *  still reach past its lines by the padding, and count in the scrollable
+ *  overflow of the block they are in (`computePaintBounds`). */
+export const PADDED_FACES = new WeakMap<Box, InlineDecoration>();
+
 /** The table cells wholly in columns `visibility: collapse` took out of
  *  their table (CSS 2.1 17.5.5), which the paint pass leaves out: a cell is
  *  no descendant of its column and inherits nothing from it, so its own
@@ -607,11 +635,17 @@ export const GRID_TRACKS = new WeakMap<Box, GridTracks>();
  *  `order` moves any: an absolutely positioned child's is 0. */
 export const PAINT_ORDER = new WeakMap<Box, Box[]>();
 
-/** The blocks that broke a relatively positioned inline box in pieces,
- *  under its first piece: its offset moves them too (CSS 2.1 9.2.1.1),
- *  though they stand outside it (`breakAround`). */
+/** The blocks that broke an inline box in pieces, under its first piece
+ *  (`breakAround`): a relative offset of the box moves them too (CSS 2.1
+ *  9.2.1.1), though they stand outside it, and its rect takes them in, as
+ *  a browser's does (`elementRect`). */
 export const CUT_BLOCKS = new WeakMap<Box, Box[]>();
 
+/** 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. */
+export const GENERATED_FROM = new WeakMap<Box, Element>();
+
 /** The blocks that broke an inline box under full opacity in pieces, and
  *  the opacity they take from it — from each such inline box around them,
  *  multiplied. They stand outside it (CSS 2.1 9.2.1.1) and are still its
@@ -639,9 +673,10 @@ export interface BoxTree {
   controls: Box[];
   /** Every box carrying an `href`, for click and hover. */
   links: Box[];
-  /** Every element's box with a `background-image` or a border image,
-   *  for the host to be asked for: a document has a handful, and finding
-   *  them was a walk over every box after every build. */
+  /** 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
+   *  after every build. */
   backgrounds: Box[];
   /** Every image generated content names, the element whose
    *  pseudo-element names it, for the host to be asked for, and whether its
@@ -670,6 +705,11 @@ export interface BoxTree {
   /** Whether any box paints its background through its text
    *  (`background-clip: text`): where none does, no paragraph looks. */
   clipText: boolean;
+  /** The style of the `<html>` a document with neither an `<html>` nor a
+   *  `<body>` implies around the body the root box stands in for
+   *  (`Cascade.rootStyle`), whose background is the canvas's; null where
+   *  the document has either. */
+  impliedHtml: ComputedStyle | null;
 }
 
 export interface BuildOptions {
@@ -774,7 +814,10 @@ class Builder {
   run(root: Element): BoxTree {
     const cascade = this._options.cascade;
     cascade.beginSharing();
-    const rootStyle = cascade.rootStyle(hasBody(root), hasHtml(root));
+    const { style: rootStyle, html: impliedHtml } = cascade.rootStyle(
+      hasBody(root),
+      hasHtml(root),
+    );
     const rootBox = new Box('block', null, rootStyle);
     // a fragment's root stands in for a `<body>`, counters and all
     this._scopes.open();
@@ -808,6 +851,7 @@ class Builder {
       nestedOutOfLine: this._nestedOutOfLine,
       movedInline: this._movedInline,
       clipText: this._clipText,
+      impliedHtml,
     };
   }
 
@@ -1008,13 +1052,7 @@ class Builder {
         this._firstLine = true;
       }
     }
-    if (
-      style.backgroundImage ||
-      style.backgroundImages ||
-      typeof style.borderImage.source === 'string'
-    ) {
-      this._backgrounds.push(box);
-    }
+    if (namesImages(style)) this._backgrounds.push(box);
     if (style.position === 'absolute' || style.position === 'fixed')
       box.outOfFlow = true;
     else if (style.float !== 'none') box.isFloat = true;
@@ -1141,13 +1179,7 @@ class Builder {
     const box = new Box('replaced', el, style);
     box.replaced = replaced;
     into.append(box);
-    if (
-      style.backgroundImage ||
-      style.backgroundImages ||
-      typeof style.borderImage.source === 'string'
-    ) {
-      this._backgrounds.push(box);
-    }
+    if (namesImages(style)) this._backgrounds.push(box);
     if (style.position === 'absolute' || style.position === 'fixed')
       box.outOfFlow = true;
     else if (style.float !== 'none') box.isFloat = true;
@@ -1278,6 +1310,10 @@ class Builder {
     const box = new Box(boxKindFor(style.display), null, style);
     box.pseudo = which;
     into.append(box);
+    // its images are its element's to ask for: a `::after` with no content
+    // but a background, which designs hang a picture on, drew nothing
+    GENERATED_FROM.set(box, el);
+    if (namesImages(style)) this._backgrounds.push(box);
     // a list item it generates has a marker as an element's has, of the
     // `list-item` counter it has just counted (CSS 2.1 12.5): outside it,
     // or at the start of its content
@@ -1697,6 +1733,10 @@ class Builder {
     const letterStyle = cascade.firstLetterStyle(search.rules, style);
     const box = new Box(boxKindFor(letterStyle.display), null, letterStyle);
     box.pseudo = 'first-letter';
+    if (owner) {
+      GENERATED_FROM.set(box, owner);
+      if (namesImages(letterStyle)) this._backgrounds.push(box);
+    }
     if (letterStyle.float !== 'none') {
       box.isFloat = true;
       if (into.kind === 'inline') this._nestedOutOfLine = true;
@@ -2017,6 +2057,30 @@ function transformText(
   }
 }
 
+/**
+ * `text` transformed as `transform` says, where it stands for text laid out
+ * already — a first line's, whose `::first-line` transforms it (CSS 2.1
+ * 5.12.1): a character at a time where the transform would change its
+ * length, which moves every offset after it — `ß` is `SS` in capitals —
+ * and that character kept as it is.
+ */
+export function transformInPlace(
+  text: string,
+  transform: ComputedStyle['textTransform'],
+  lettered = false,
+): string {
+  const whole = transformText(text, transform, lettered);
+  if (whole.length === text.length) return whole;
+  let out = '';
+  let state = lettered;
+  for (const ch of text) {
+    const one = transformText(ch, transform, state);
+    out += one.length === ch.length ? one : ch;
+    state = letteredAfter(ch, state);
+  }
+  return out;
+}
+
 /** A letter or a number: what a word's first typographic letter unit is
  *  (CSS Text 3, 2.1). */
 const LETTER_UNIT = /[\p{L}\p{N}]/u;
@@ -2089,7 +2153,7 @@ function titleCase(ch: string): string {
  * nothing but joining punctuation leaves it as it was. Asked of every text,
  * from the end, where it is almost always decided by the last character.
  */
-function letteredAfter(text: string, lettered: boolean): boolean {
+export function letteredAfter(text: string, lettered: boolean): boolean {
   for (let i = text.length - 1; i >= 0; i -= 1) {
     const c = text.charCodeAt(i);
     if (c < 0x80) {
@@ -2567,7 +2631,7 @@ function breakAround(inline: Box): Box[] | null {
   for (let i = 0; i < pieces.length; i += 1) {
     pieces[i].cut = (i > 0 ? 1 : 0) | (i < pieces.length - 1 ? 2 : 0);
   }
-  if (isRelative(inline.style)) CUT_BLOCKS.set(pieces[0], blocks);
+  CUT_BLOCKS.set(pieces[0], blocks);
   const fade = inline.style.opacity;
   if (fade < 1) {
     for (const block of blocks) {
@@ -2577,6 +2641,17 @@ function breakAround(inline: Box): Box[] | null {
   return out;
 }
 
+/** Whether a style names an image for its box to be drawn with: a
+ *  background's, a border's, or a mask's. */
+function namesImages(style: ComputedStyle): boolean {
+  return (
+    !!style.backgroundImage ||
+    !!style.backgroundImages ||
+    typeof style.borderImage.source === 'string' ||
+    style.mask !== NO_MASK
+  );
+}
+
 /**
  * The style of an anonymous box inside a parent: what the parent passes on
  * by inheritance, and every other property at its initial value, as CSS 2.1

package/src/html/layout/cache.ts

@@ -190,6 +190,7 @@ export const RUN_FIELDS = [
   'features',
   'nowrap',
   'shapeApart',
+  'kernAcross',
 ] as const satisfies readonly (keyof TextRun)[];
 
 /** A field of `TextRun` missing from `RUN_FIELDS` names itself here. */
@@ -223,7 +224,8 @@ function sameRun(a: TextRun, b: TextRun): boolean {
     a.href === b.href &&
     a.features === b.features &&
     a.nowrap === b.nowrap &&
-    a.shapeApart === b.shapeApart
+    a.shapeApart === b.shapeApart &&
+    a.kernAcross === b.kernAcross
   );
 }
 
@@ -250,7 +252,8 @@ function sameStyle(
     a.href === b.href &&
     a.features === b.features &&
     a.nowrap === b.nowrap &&
-    a.shapeApart === b.shapeApart
+    a.shapeApart === b.shapeApart &&
+    a.kernAcross === b.kernAcross
   );
 }
 
@@ -265,6 +268,7 @@ export const OPTION_FIELDS = [
   'overflow',
   'overflowWrap',
   'wrap',
+  'fit',
 ] as const satisfies readonly (keyof Options)[];
 
 /** An option missing from `OPTION_FIELDS` names itself here. */
@@ -284,6 +288,7 @@ function sameOptions(a: Options, b: Options): boolean {
     a.maxLines === b.maxLines &&
     a.overflow === b.overflow &&
     a.overflowWrap === b.overflowWrap &&
-    a.wrap === b.wrap
+    a.wrap === b.wrap &&
+    a.fit === b.fit
   );
 }

package/src/html/layout/floats.ts

@@ -153,6 +153,30 @@ export class FloatContext {
     return lowest;
   }
 
+  /** Move the floats placed since `mark` down by `dy`, with the block they
+   *  were placed in: a list item's first block goes lower to make room
+   *  for its marker once it is laid out (`layoutChildren`). */
+  moveSince(mark: number, dy: number): void {
+    if (!dy || mark >= this._boxes.length) return;
+    for (let i = mark; i < this._boxes.length; i += 1) {
+      const float = this._boxes[i];
+      this._boxes[i] = {
+        ...float,
+        top: float.top + dy,
+        bottom: float.bottom + dy,
+      };
+    }
+    this._lowestLeft = -Infinity;
+    this._lowestRight = -Infinity;
+    this._lastTop = -Infinity;
+    for (const float of this._boxes) {
+      if (float.top > this._lastTop) this._lastTop = float.top;
+      if (float.side === 'left')
+        this._lowestLeft = Math.max(this._lowestLeft, float.bottom);
+      else this._lowestRight = Math.max(this._lowestRight, float.bottom);
+    }
+  }
+
   /** How far down the floats reach — what a container that establishes a
    *  BFC has to grow to, so it does not end above its own floats. */
   get bottom(): number {