@react-x11/components 0.10.0 → 0.11.0

package/src/html/layout/boxes.ts

@@ -556,6 +556,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
@@ -670,6 +678,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 +787,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 +824,7 @@ class Builder {
       nestedOutOfLine: this._nestedOutOfLine,
       movedInline: this._movedInline,
       clipText: this._clipText,
+      impliedHtml,
     };
   }
 
@@ -2017,6 +2034,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 +2130,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) {

package/src/html/layout/inline.ts

@@ -43,9 +43,11 @@ import {
   BOX_RAISES,
   LINE_BOX_RAISES,
   isOffset,
+  letteredAfter,
   SHADOWED_TEXT,
   SHIFTED_LINES,
   TEXT_RAISES,
+  transformInPlace,
 } from './boxes.js';
 import type {
   AtomicPlacement,
@@ -300,6 +302,9 @@ export interface InlineOptions {
    * — which the line is found in, a piece at a time (CSS 2.1 5.12.1).
    */
   firstLineStyle?: { style: ComputedStyle; styler: FirstLineStyler };
+  /** Room the first line has to hold about its baseline besides the
+   *  strut's: a list item's marker (`MARKER_ROOM`). */
+  firstStrut?: InlineDecoration;
   /** Whether any box in the document paints its background through its
    *  text (`BoxTree.clipText`). */
   clipText?: boolean;
@@ -431,6 +436,8 @@ function linesOf(
     CLIPPED_TEXT.add(block);
     fonts = recording(fonts);
   }
+  // small capitals the face does not have, made of its capitals
+  synthesizeSmallCaps(items, fonts);
   if (wraps(block.style)) holdNoWrap(items, block);
   // one walk for what few paragraphs have: text that casts a shadow, and a
   // tab, which only a `white-space` that keeps it leaves — so no text is
@@ -537,6 +544,13 @@ function linesOf(
     hasEdges && !hasAtomics && !hasOffset && spacersHold(style, items);
   // a first line in fonts of its own is found a piece at a time, in them
   const restyled = options.firstLineStyle !== undefined;
+  // and where one layout makes a line shorter than the strut, its text all
+  // smaller than the block's, the lines are made a piece at a time too,
+  // where every line holds it (`shortOfStrut`)
+  const strut = fonts ? strutOf(fonts, style) : null;
+  // and the first line holds what it is handed besides: a marker's room
+  const firstStrut = withRoom(strut, options.firstStrut);
+  let strutted = false;
 
   // Inline boxes' edges as spacers in one layout, where the engine left
   // every edge on the line of the content it belongs to (`layoutSpaced`);
@@ -551,19 +565,21 @@ function linesOf(
       align,
       fonts,
     );
-    if (laid) return laid;
+    if (laid && !shortOfStrut(laid.lines, strut, firstStrut)) return laid;
+    if (laid) strutted = true;
   }
 
   // The text-only, float-free, unindented case: one call, every line — or
   // one call per *chunk*, when the text is long and carries hard breaks.
-  if (
+  fast: if (
     !hasAtomics &&
     !hasEdges &&
     !raised &&
     !floated &&
     !indent &&
     !alignedApart &&
-    !restyled
+    !restyled &&
+    !strutted
   ) {
     // no atomics and no edges, so everything is text
     const textItems = items as Extract<Item, { kind: 'text' }>[];
@@ -596,7 +612,7 @@ function linesOf(
     }
     if (perLine) cut = null;
     if (total > CHUNK_TRIGGER_CHARS && hasNewline && !hasControls(items)) {
-      return layoutChunked(
+      const chunked = layoutChunked(
         textItems,
         base,
         style,
@@ -605,6 +621,9 @@ function linesOf(
         align,
         fonts,
       );
+      if (!shortOfStrut(chunked.lines, strut, firstStrut)) return chunked;
+      strutted = true;
+      break fast;
     }
     let runs: TextRun[] = [];
     let spans = new SpanMap();
@@ -705,6 +724,11 @@ function linesOf(
           ? unwrappedPlacer(style, options.width, false)
           : null,
     );
+    // a clamp and a cut are the one layout's to make
+    if (!clamp && !cut && shortOfStrut(lines, strut, firstStrut)) {
+      strutted = true;
+      break fast;
+    }
     return clampCut
       ? { lines, height: layout.height, width: widest, cut: true }
       : { lines, height: layout.height, width: widest };
@@ -751,7 +775,6 @@ function linesOf(
     deferred = [];
   };
 
-  const strut = fonts ? strutOf(fonts, style) : null;
   // How tall a line is taken to be before it is made, for its room beside
   // the floats: the paragraph's strut, a line of its text. An item taller
   // asks over its own height, and the line made over its whole (`close`).
@@ -799,7 +822,9 @@ function linesOf(
       (height) => bandAt(options, y, Math.max(height, guess)),
       last || !wraps(style) ? lastShift : restShift,
       rtl,
-      onFirst ? lineOne.strut : strut,
+      lines.length
+        ? strut
+        : withRoom(onFirst ? lineOne.strut : strut, options.firstStrut),
       onFirst ? lineOne.lifts : lifts,
       (last || !wraps(style) ? justify.last : justify.rest)
         ? onFirst
@@ -970,6 +995,7 @@ function linesOf(
     const tailIsPlain =
       !alignedApart &&
       !onFirst &&
+      !strutted &&
       segment.nextIndex >= items.length &&
       open.x === 0 &&
       !open.atomics.length &&
@@ -998,6 +1024,7 @@ function linesOf(
         Math.max(1, available),
         justify,
       ).layout;
+      const tail: LineBox[] = [];
       for (let i = 0; i < layout.lines.length; i += 1) {
         const natural = layout.lines[i];
         const text: LineText = {
@@ -1011,7 +1038,7 @@ function linesOf(
           spans: segment.spans,
         };
         segment.spans.giveGaps(text, natural.start, natural.end);
-        lines.push({
+        tail.push({
           x: band.left + natural.x,
           y: y + natural.y,
           width: natural.width,
@@ -1022,12 +1049,19 @@ function linesOf(
           textEnd: text.textEnd,
           atomics: [],
         });
-        widest = Math.max(widest, natural.width);
       }
-      y += layout.height;
-      index = segment.nextIndex;
-      offset = 0;
-      continue;
+      // or a line at a time, where one of them is shorter than the strut
+      if (!shortOfStrut(tail, strut, lines.length ? null : firstStrut)) {
+        for (const line of tail) {
+          lines.push(line);
+          widest = Math.max(widest, line.width);
+        }
+        y += layout.height;
+        index = segment.nextIndex;
+        offset = 0;
+        continue;
+      }
+      strutted = true;
     }
 
     // One line: `maxLines: 1` cuts the layout at the first break and its
@@ -2848,8 +2882,13 @@ export function inlineDecoration(
   box: Box,
   s: ComputedStyle,
 ): InlineDecoration | null {
+  // a background is a colour, a gradient or an image: a span a gradient
+  // underlines, a highlighter's, was painted only where it had a border
   const decorated =
     !isTransparent(s.backgroundColor) ||
+    s.backgroundGradient !== null ||
+    s.backgroundImage !== null ||
+    s.backgroundImages !== null ||
     box.borderTop + box.borderRight + box.borderBottom + box.borderLeft > 0 ||
     s.outlineStyle !== 'none';
   return !decorated ? null : fonts ? faceExtent(fonts, s) : NO_EXTENT;
@@ -2952,9 +2991,26 @@ function firstLineSetting(
     box === block || !box.parent
       ? style
       : styleOnFirstLine(box, of(box.parent), how.styler);
+  // and in its `text-transform` where the line has one of its own, which
+  // the boxes' text was not made with: a word carried from one run into
+  // the next, as the box builder carries it (`letteredAfter`)
+  let lettered = false;
   const restyled = items.map((item): Item => {
+    if (item.kind === 'atomic') lettered = false;
     if (item.kind !== 'text') return item;
-    const run = restyledRun(item.run, item.box.style, of(item.box));
+    const own = item.box.style;
+    const on = of(item.box);
+    let run = restyledRun(item.run, own, on);
+    const transform = on.textTransform;
+    if (
+      !item.control &&
+      transform !== own.textTransform &&
+      transform !== 'none'
+    ) {
+      const text = transformInPlace(run.text, transform, lettered);
+      if (text !== run.text) run = { ...run, text };
+    }
+    lettered = letteredAfter(run.text, lettered);
     return run === item.run ? item : { ...item, run };
   });
   const lineHeight = lineHeightMultiplier(fonts, style);
@@ -3307,6 +3363,194 @@ function heldText(box: Box): string {
 
 const HELD = new WeakMap<Box, string>();
 
+/**
+ * Whether a line one layout made is shorter about its baseline than the
+ * block's strut. Every line box starts with the strut, the block's font at
+ * its line height (CSS 2.1 10.8.1), and a layout has none: it makes a line
+ * as tall as the text on it, at the block's line height as a multiple of
+ * each face's natural one. So a line of `<small>` text alone came out as
+ * short as the small text, and overlapped what followed. A paragraph with
+ * such a line is made a line at a time instead, where `finishLine` puts
+ * the strut on every line; one whose lines all hold text of the block's
+ * own face is kept as it was laid out.
+ */
+function shortOfStrut(
+  lines: readonly LineBox[],
+  strut: InlineDecoration | null,
+  /** The first line's, where it holds more: a marker's room. */
+  first: InlineDecoration | null = null,
+): boolean {
+  for (let i = 0; i < lines.length; i += 1) {
+    const line = lines[i];
+    const holds = i === 0 && first ? first : strut;
+    if (!holds) continue;
+    if (
+      line.baseline < holds.ascent - 0.5 ||
+      line.height - line.baseline < holds.descent - 0.5
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/** A strut with room besides it about the same baseline, or the strut
+ *  where there is none. */
+function withRoom(
+  strut: InlineDecoration | null,
+  room: InlineDecoration | undefined,
+): InlineDecoration | null {
+  if (!room) return strut;
+  if (!strut) return room;
+  return {
+    ascent: Math.max(strut.ascent, room.ascent),
+    descent: Math.max(strut.descent, room.descent),
+  };
+}
+
+/** The share of the size a synthesized small capital is set at, rounded to
+ *  a whole pixel as Blink rounds it (`SimpleFontData`'s scaled font data):
+ *  CSS Fonts 4 (6.2) leaves the size to the user agent. */
+const SMALL_CAPS_SCALE = 0.7;
+
+/**
+ * Small capitals a face does not have, made of its capitals set smaller
+ * (CSS Fonts 4, 6.2): where `font-variant-caps` asks for `smcp` — or
+ * `c2sc` too, for `all-small-caps` — and the face does not answer it,
+ * each letter that would be a small capital is its capital at 70% of the
+ * size, in a run of its own: a lower-case letter, and for `all-small-caps`
+ * the rest of the text too. Under `small-caps` what has no case — a space,
+ * a digit, a mark of punctuation — keeps its size, as Blink keeps it. Only
+ * a letter whose capital is one character is made one, so every offset
+ * holds.
+ */
+function synthesizeSmallCaps(items: Item[], fonts: FontsLike): void {
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (item.kind !== 'text' || item.control) continue;
+    // `font-variant-caps`'s, which is synthesized where the face has none;
+    // not `font-feature-settings`', which asks for the feature as it is
+    const caps = item.box.style.fontVariantCaps;
+    const features = item.run.features;
+    if (!caps.includes('smcp') || !features?.smcp) continue;
+    const all = caps.includes('c2sc');
+    if (hasSmallCaps(fonts, item.run, all)) continue;
+    const pieces = smallCapsPieces(item, all, withoutCaps(features));
+    if (!pieces) continue;
+    items.splice(i, 1, ...pieces);
+    i += pieces.length - 1;
+  }
+}
+
+/** A text item cut where its letters turn to synthesized small capitals
+ *  and back, or null where none does. */
+function smallCapsPieces(
+  item: Extract<Item, { kind: 'text' }>,
+  all: boolean,
+  features: Readonly<Record<string, number>> | null,
+): Extract<Item, { kind: 'text' }>[] | null {
+  const text = item.run.text;
+  const pieces: Extract<Item, { kind: 'text' }>[] = [];
+  let from = 0;
+  let small = false;
+  let capitals = '';
+  const cut = (to: number): void => {
+    if (to === from) return;
+    const run: TextRun = small
+      ? {
+          ...item.run,
+          text: capitals,
+          size: Math.round((item.run.size ?? 16) * SMALL_CAPS_SCALE),
+        }
+      : { ...item.run, text: text.slice(from, to) };
+    if (small) {
+      if (features) run.features = features;
+      else delete run.features;
+    }
+    pieces.push({ ...item, run, start: item.start + from, length: to - from });
+    from = to;
+    capitals = '';
+  };
+  let any = false;
+  for (let at = 0; at < text.length;) {
+    const ch = String.fromCodePoint(text.codePointAt(at)!);
+    const upper = ch.toUpperCase();
+    // everything, for `all-small-caps`: its spaces are small too
+    const becomes = (all || upper !== ch) && upper.length === ch.length;
+    if (becomes !== small) {
+      cut(at);
+      small = becomes;
+    }
+    if (becomes) {
+      capitals += upper;
+      any = true;
+    }
+    at += ch.length;
+  }
+  cut(text.length);
+  return any ? pieces : null;
+}
+
+/** Features without the small capitals a synthesis stands in for, one
+ *  object for each set, as `featuresOf` keeps them. */
+function withoutCaps(
+  features: Readonly<Record<string, number>>,
+): Readonly<Record<string, number>> | null {
+  let kept = WITHOUT_CAPS.get(features);
+  if (kept === undefined) {
+    const out: Record<string, number> = {};
+    for (const [tag, value] of Object.entries(features)) {
+      if (tag !== 'smcp' && tag !== 'c2sc') out[tag] = value;
+    }
+    kept = Object.keys(out).length ? out : null;
+    WITHOUT_CAPS.set(features, kept);
+  }
+  return kept;
+}
+
+const WITHOUT_CAPS = new WeakMap<
+  Readonly<Record<string, number>>,
+  Readonly<Record<string, number>> | null
+>();
+
+/**
+ * Whether a run's face has small capitals of its own — and capitals to
+ * small capitals, for `all-small-caps`: the alphabet set with the feature
+ * and without it comes out another width where it does. Asked of the
+ * engine's layout rather than of the font's tables, which a CoreText face
+ * does not hand over. Kept per face.
+ */
+function hasSmallCaps(fonts: FontsLike, run: TextRun, all: boolean): boolean {
+  let known = SMALL_CAPS.get(fonts);
+  if (!known) SMALL_CAPS.set(fonts, (known = new Map()));
+  const key = `${run.family}|${run.weight}|${run.style}|${all}`;
+  let has = known.get(key);
+  if (has === undefined) {
+    const face = {
+      family: run.family,
+      weight: run.weight,
+      style: run.style,
+      size: 16,
+    };
+    const width = (text: string, features: Record<string, number> | null) =>
+      fonts.layout(
+        [{ text, ...face, ...(features ? { features } : null) }],
+        face,
+        {},
+      ).width;
+    const lower = 'abcdefghijklmnopqrstuvwxyz';
+    has = Math.abs(width(lower, { smcp: 1 }) - width(lower, null)) > 0.01;
+    if (has && all) {
+      const upper = lower.toUpperCase();
+      has = Math.abs(width(upper, { c2sc: 1 }) - width(upper, null)) > 0.01;
+    }
+    known.set(key, has);
+  }
+  return has;
+}
+
+const SMALL_CAPS = new WeakMap<FontsLike, Map<string, boolean>>();
+
 /**
  * The OpenType features a style's text is shaped with: the `font-variant`
  * longhands' and `font-kerning`'s, then `font-feature-settings`, which has