@react-x11/components 0.14.1 → 0.16.1

package/src/html/layout/block.ts

@@ -30,6 +30,7 @@ import {
   CONTAIN_LAYOUT,
   CONTAIN_PAINT,
   CONTAIN_SIZE,
+  INLINE_BEFORE_ABSOLUTE,
   scrolls,
 } from '../css/style.js';
 import { about, linearOf, matrixOf, transformed } from '../css/transform.js';
@@ -71,6 +72,7 @@ import type {
 } from './boxes.js';
 import { FloatContext } from './floats.js';
 import {
+  emptyLinePoint,
   faceExtentOf,
   isButton,
   joinsBefore,
@@ -83,7 +85,7 @@ import {
 import type { FontsLike, InlineOptions, InlineResult } from './inline.js';
 import type { TextRun } from '../../richtext/index.js';
 import { layoutFlex } from './flex.js';
-import { finishCaptions, layoutTable } from './table.js';
+import { finishCaptions, givenHeight, layoutTable } from './table.js';
 import { collapseEdges } from './collapse.js';
 import {
   clipsFor,
@@ -132,7 +134,8 @@ export interface LayoutContext {
    * its padding, its margins and its width limits are of (CSS 2.1 8.3,
    * 8.4, 10.4). Left out, `width` is both — a box probed at the room there
    * is for it. For a table cell it is the width of its row, which its
-   * padding's percentages are of.
+   * padding's percentages are of, and it says the cell is laid out in its
+   * columns: at `width`, whatever its limits say.
    */
   layoutSubtree(box: Box, width: number, containing?: number): void;
   /** How many flex boxes' Yoga passes are running, one inside the last's
@@ -843,13 +846,19 @@ function layoutChildren(
       marked = null;
     }
     if (child.outOfFlow) {
-      placeStatic(
-        child,
-        box,
-        contentLeft,
-        contentWidth,
-        y + marginOf(pendingMargin),
-      );
+      const top = y + marginOf(pendingMargin);
+      if (INLINE_BEFORE_ABSOLUTE.has(child.style)) {
+        // one that was inline-level is on a line of its own, beside the
+        // floats there, where the line's alignment puts what it holds
+        const band = floats.bandAt(
+          top,
+          1,
+          contentLeft,
+          contentLeft + contentWidth,
+        );
+        const at = emptyLinePoint(box.style, band.left, band.right);
+        placeStatic(child, box, at, 0, top);
+      } else placeStatic(child, box, contentLeft, contentWidth, top);
       ctx.positioned.push({
         box: child,
         containing: containingBlockFor(child) ?? box,
@@ -1670,43 +1679,65 @@ export function measureIntrinsicWidth(
   available: number,
   content = false,
 ): number {
-  ctx.layoutSubtree(box, available);
+  // not through `ctx.layoutSubtree`, which is this and one frame more on
+  // the stack for every level of a document that measures what it holds
+  // (`layoutTable`)
+  layoutSubtree(box, ctx, available, undefined, true);
   const specified = box.style.width;
   if (!content && specified !== AUTO && Number.isFinite(box.width)) {
     return box.width;
   }
-  return intrinsicWidth(box) + box.horizontalExtra;
+  return (
+    intrinsicWidth(box, undefined, available === MIN_CONTENT_PROBE) +
+    box.horizontalExtra
+  );
 }
 
 /**
  * Lay a box and everything under it out at a width, at the origin — what
- * `LayoutContext.layoutSubtree` hands to `flex.ts` and `table.ts`, and what
- * the shrink-to-fit probe uses. A replaced box is sized rather than laid out,
- * because there is nothing inside it to lay out.
+ * `LayoutContext.layoutSubtree` hands to `flex.ts` and `css-grid.ts`, and
+ * what the shrink-to-fit probe and a table's cells use. A replaced box is
+ * sized rather than laid out, because there is nothing inside it to lay out.
  */
-function layoutSubtree(
+export function layoutSubtree(
   box: Box,
   ctx: LayoutContext,
   width: number,
   /** Its containing block's width, where `width` is the box's own. */
-  containing = width,
+  containing?: number,
+  /** Whether this lays it out to measure it (`measureIntrinsicWidth`). */
+  measuring = false,
 ): void {
-  resolveEdges(box, Number.isFinite(containing) ? containing : 0);
+  const base = containing ?? width;
+  resolveEdges(box, Number.isFinite(base) ? base : 0);
   if (box.kind === 'replaced') {
     sizeReplaced(box, width);
     box.x = 0;
     box.y = 0;
     return;
   }
-  // within its limits, a percentage among them of its containing block's
+  // Within its limits, a percentage among them of its containing block's
   // width and not of its own: a flex item `max-width: 50%` that the flex
-  // layout made half its row was laid out at a quarter of it. A table
-  // cell's is of nothing, and ignored: what a percentage limit does to a
-  // cell it does where its column is sized (CSS Tables 3, 3.8.2), and a
-  // cell is laid out in the width its columns came to.
-  const borderBox = Number.isFinite(width)
-    ? clampWidth(box, width, box.kind === 'table-cell' ? NaN : containing)
-    : Infinity;
+  // layout made half its row was laid out at a quarter of it. An
+  // intrinsic limit is among them, as it is in a block's flow: without it,
+  // a flex or grid item `min-width: max-content` that its layout made as
+  // wide as its content was laid out at a smaller `max-width`, where the
+  // minimum wins (CSS Sizing 3, 3.1). Not where the box is laid out to be
+  // measured, since that is what an intrinsic limit is measured from.
+  //
+  // A table cell laid out in its columns, which hand it its row's width,
+  // is as wide as they are (CSS Tables 3, 3.10.2): its limits are theirs
+  // to weigh (3.8.2), and have been. Clamped again, `td { max-width:
+  // 50px }` in a column 200 wide set its text in 50 of it. Probed for
+  // what it asks of them, at none, it keeps within its length limits as
+  // any box does; a percentage one is of nothing and does not hold it.
+  let borderBox = Infinity;
+  if (Number.isFinite(width)) {
+    if (box.kind !== 'table-cell') {
+      borderBox = clampWidth(box, width, base, measuring ? undefined : ctx);
+    } else if (containing !== undefined) borderBox = width;
+    else borderBox = clampWidth(box, width, NaN);
+  }
   layoutInternals(box, ctx, borderBox, 0, 0);
 }
 
@@ -2110,12 +2141,12 @@ function layoutMarker(box: Box, marker: Marker, ctx: LayoutContext): void {
   const style = box.style;
   if (marker.image) {
     // an image: its bottom on the first line's baseline, as an inline
-    // image's is, and the gap a bullet has before the content
+    // image's is, and its own gap before the content (`MARKER_IMAGE_GAP`)
     const first = firstLineIn(box);
     marker.y = first
       ? first.y + first.baseline - marker.image.height
       : box.contentY;
-    const gap = Math.round(style.fontSize * 0.4);
+    const { gap } = marker.image;
     // at the start of the line, which is its right in a right-to-left item
     marker.x =
       style.direction === 'rtl'
@@ -2150,9 +2181,13 @@ function layoutMarker(box: Box, marker: Marker, ctx: LayoutContext): void {
   });
   marker.layout = layout;
   // a space between it and the content — the one its style's suffix ends
-  // in, or its own text's — in its own face: a line measures without it
-  const gap =
-    marker.flush && !/\s$/.test(marker.text) ? 0 : markerGap(fonts, face);
+  // in, or its own text's — in its own face: a line measures without the
+  // spaces it ends in, and with a no-break space, which `content: "1.\a0"`
+  // writes and which was a second gap on top of its own
+  const trailing = marker.flush
+    ? (/[ \t\n\r\f]*$/.exec(marker.text)?.[0].length ?? 0)
+    : 1;
+  const gap = trailing ? trailing * markerGap(fonts, face) : 0;
   // The marker sits on the first line of the item's *content*, which is not
   // always the item's own: an `<li>` holding a paragraph, or one holding text
   // and a nested list, has its inline content in an anonymous block. Looking
@@ -2341,13 +2376,16 @@ export const FLEXED_HEIGHT = new WeakMap<Box, number>();
 export const USED_HEIGHT = new WeakMap<Box, number>();
 
 /**
- * A table a grid stretches across its area, whose `auto` width is then the
- * one it is laid out at. `normal` stretches any grid item but a replaced
- * one (CSS Grid 1, 6.2), a table among them, where in a block's flow a
- * table's `auto` width is its columns' (CSS 2.1 17.5.2; Blink leaves tables
- * out of the boxes a block stretches, `space_utils.cc`, and stretches them
- * in a grid, `grid_item.cc`). Set by `css-grid.ts` for the item's own
- * layout alone, and never while its widths are measured.
+ * A table a grid or a flex layout gives its width, whose `auto` width is
+ * then the one it is laid out at. `normal` stretches any grid item but a
+ * replaced one across its area (CSS Grid 1, 6.2), and a flex item across a
+ * column's line (CSS Flexbox 9.4, step 11), a table among them; and a flex
+ * item along a row is the size the line flexed it to (9.7) — where in a
+ * block's flow a table's `auto` width is its columns' (CSS 2.1 17.5.2;
+ * Blink leaves tables out of the boxes a block stretches, `space_utils.cc`,
+ * and stretches them in a grid, `grid_item.cc`, and a flex box). Set by
+ * `css-grid.ts` and `flex.ts` for the item's own layout alone, and never
+ * while its widths are measured.
  */
 export const STRETCHED_ACROSS = new WeakSet<Box>();
 
@@ -2539,6 +2577,14 @@ function finishHeight(box: Box, contentHeight: number): void {
   if (box.kind === 'table-cell') {
     CELL_CONTENT.set(box, contentHeight + box.verticalExtra);
   }
+  // A table a flex or grid layout gave a height is as tall as that, or as
+  // its rows where they need more, which `layoutTable` has shared it out
+  // among — whatever height it has of its own, which the flex layout
+  // started from (`layoutTable`)
+  if (box.kind === 'table' && Number.isFinite(givenHeight(box))) {
+    box.height = contentHeight + box.verticalExtra;
+    return;
+  }
   const set = specifiedHeight(box);
   // at least zero: a `calc()` may come to less
   const specified = set === null ? null : Math.max(0, set);
@@ -2608,7 +2654,9 @@ export function clampHeight(box: Box, height: number): number {
       out,
       min + (box.style.boxSizing === 'border-box' ? 0 : box.verticalExtra),
     );
-  return Math.max(0, out);
+  // no shorter than its padding and borders, as `clampWidth` is no
+  // narrower
+  return Math.max(box.verticalExtra, out);
 }
 
 /** Place a block-level box horizontally, honouring `margin: auto`. */
@@ -2828,7 +2876,10 @@ export function clampWidth(
       keywordWidth(box, ctx, style.minWidthKeyword, containingWidth, room),
     );
   }
-  return Math.max(0, out);
+  // and no narrower than its padding and borders: a `border-box` length
+  // less than them leaves its content box none wide, and not less (CSS
+  // Sizing 3, 3.3)
+  return Math.max(box.horizontalExtra, out);
 }
 
 /** An intrinsic `min-width` or `max-width` in the room a box's margins
@@ -2870,10 +2921,8 @@ export function contentSizedWidth(
   // the content's sizes, whatever width the box has of its own: a
   // `min-width: max-content` beside a `width` is its content's widest,
   // and a probe of the box at no width answered the probe's width
-  let probed = false;
   if (box.intrinsicMaxContent < 0) {
     box.intrinsicMaxContent = measureIntrinsicWidth(box, ctx, Infinity, true);
-    probed = true;
   }
   if (size !== 'max-content' && box.intrinsicMinContent < 0) {
     box.intrinsicMinContent = measureIntrinsicWidth(
@@ -2882,12 +2931,19 @@ export function contentSizedWidth(
       MIN_CONTENT_PROBE,
       true,
     );
-    probed = true;
   }
-  if (probed) resolveEdges(box, percentBase);
-  const max = box.intrinsicMaxContent;
+  // The probes resolved a percentage of the box's padding or border
+  // against nothing, which is how the sizes are kept, whatever the width
+  // around the box: what one comes to against `percentBase` goes on top.
+  // Left out, `width: max-content; padding-left: 10%` was as wide as its
+  // content, the padding inside it.
+  resolveEdges(box, 0);
+  const bare = box.horizontalExtra;
+  resolveEdges(box, Number.isFinite(percentBase) ? percentBase : 0);
+  const extra = box.horizontalExtra - bare;
+  const max = box.intrinsicMaxContent + extra;
   if (size === 'max-content') return max;
-  const min = box.intrinsicMinContent;
+  const min = box.intrinsicMinContent + extra;
   if (size === 'min-content') return min;
   return Math.min(
     max,
@@ -3039,6 +3095,10 @@ const PREFERRED = new WeakMap<Box, number>();
  * or is indented, a block with widths of its own.
  */
 export function exactMinContent(box: Box, fonts: FontsLike): number | null {
+  // a flex row's is its items' side by side, a grid's its columns', and a
+  // replaced element has no words: read as its widest word, a row of two
+  // in a flex column's item was as narrow as the wider of them
+  if (box.kind !== 'block' && box.kind !== 'table-cell') return null;
   if (hasWidths(box.style) || contained(box, CONTAIN_WIDTH)) return null;
   const inner = exactWords(box, fonts);
   return inner === null ? null : inner + box.horizontalExtra;
@@ -3172,8 +3232,17 @@ function wordBound(box: Box, fonts: FontsLike, measured: boolean): number {
  * `seen.cut` is set where a line it measured was cut short by
  * `text-overflow`, in a box with a width to cut it at: the line is wider
  * than it was drawn, and the answer is of what was drawn.
+ *
+ * `narrowest` says the box was laid out by the min-content probe
+ * (`MIN_CONTENT_PROBE`), and the answer is its min-content width: the
+ * probe lays a box out at no width, but one with a least width of its own
+ * at that, and nothing in the layout tells the two apart.
  */
-export function intrinsicWidth(box: Box, seen?: { cut: boolean }): number {
+export function intrinsicWidth(
+  box: Box,
+  seen?: { cut: boolean },
+  narrowest = false,
+): number {
   // under size containment, as though it held nothing: the size
   // `contain-intrinsic-size` gives it, or none (CSS Containment 2, 3.2)
   if (contained(box, CONTAIN_WIDTH)) {
@@ -3207,11 +3276,17 @@ export function intrinsicWidth(box: Box, seen?: { cut: boolean }): number {
   }
   let widest = 0;
   // A row of flex items is as wide as all of them side by side, and gaps
-  // between them; any other box is as wide as the widest thing in it
+  // between them; any other box is as wide as the widest thing in it. So
+  // is a row that wraps, at its narrowest: each of its items may be a line
+  // of its own, and it is as wide as the widest of them (CSS Flexbox
+  // 9.9.1). Summed, a wrapping row of three 30px items made a
+  // `width: min-content` box around it 90 wide, the items side by side,
+  // where Chrome has 30, one under another
   const display = box.style.display;
   const row =
     (display === 'flex' || display === 'inline-flex') &&
     box.style.flexDirection.startsWith('row');
+  const wraps = row && narrowest && box.style.flexWrap !== 'nowrap';
   let total = 0;
   let items = 0;
   const lines = box.lines;
@@ -3279,7 +3354,8 @@ export function intrinsicWidth(box: Box, seen?: { cut: boolean }): number {
         contribution = Math.max(contribution, stated + margins);
       }
     } else {
-      let inner = intrinsicWidth(child, seen) + child.horizontalExtra;
+      let inner =
+        intrinsicWidth(child, seen, narrowest) + child.horizontalExtra;
       if (typeof style.maxWidth === 'number') {
         inner = Math.min(inner, style.maxWidth + contentExtra(child));
       }
@@ -3291,10 +3367,10 @@ export function intrinsicWidth(box: Box, seen?: { cut: boolean }): number {
       across = Math.max(across, contribution);
       continue;
     }
-    if (row) {
+    if (row && !wraps) {
       total += contribution;
       items += 1;
-    } else if (!sideBySide) widest = Math.max(widest, contribution);
+    } else if (wraps || !sideBySide) widest = Math.max(widest, contribution);
     else if (child.isFloat) {
       const clear = style.clear;
       if (clear !== 'none') {
@@ -3426,8 +3502,17 @@ function sizeReplaced(
   const ih = own.missing & 2 ? null : own.height;
   // `aspect-ratio` over its own, unless written `auto` and it has one
   const aspect = style.aspectRatio;
-  const ratio =
-    aspect && !(aspect.auto && own.ratio > 0) ? aspect.ratio : own.ratio;
+  const pages = aspect !== null && !(aspect.auto && own.ratio > 0);
+  const ratio = pages ? aspect.ratio : own.ratio;
+  // A ratio of the page's is of the box `box-sizing` names (CSS Sizing 4,
+  // 5.1): one axis's content size to the other's goes through the border
+  // box there. Written with `auto`, it is of the content box, as the
+  // replaced element's own is, whichever it is.
+  const outer = pages && !aspect.auto && style.boxSizing === 'border-box';
+  const ox = outer ? box.horizontalExtra : 0;
+  const oy = outer ? box.verticalExtra : 0;
+  const widthOf = (h: number): number => Math.max(0, (h + oy) * ratio - ox);
+  const heightOf = (w: number): number => Math.max(0, (w + ox) / ratio - oy);
   // the width a block would have here: what a ratio with no size fills, and
   // an `hr`, whose whole appearance is its border across the line
   const room = (): number => {
@@ -3443,16 +3528,16 @@ function sizeReplaced(
     // which moves both axes together
     if (iw !== null) {
       w = iw;
-      h = ih ?? iw / ratio;
+      h = ih ?? heightOf(iw);
     } else if (ih !== null) {
       h = ih;
-      w = ih * ratio;
+      w = widthOf(ih);
     } else {
       // a ratio and no size: CSS 2.1 leaves it undefined and suggests the
       // width a block would have, which is what browsers do — or, where the
       // containing block waits on this box, the default object size
       w = Number.isFinite(containingWidth) ? room() : own.width;
-      h = w / ratio;
+      h = heightOf(w);
     }
     [w, h] = constrained(w, h, minW, maxW, minH, maxH);
   } else {
@@ -3461,12 +3546,12 @@ function sizeReplaced(
     // again" for a limit)
     const usedHeight = height === null ? null : clamp(height, minH, maxH);
     if (width !== null) w = width;
-    else if (usedHeight !== null && ratio > 0) w = usedHeight * ratio;
+    else if (usedHeight !== null && ratio > 0) w = widthOf(usedHeight);
     else if (box.replaced === 'hr') w = room();
     else w = own.width;
     w = clamp(w, minW, maxW);
     if (usedHeight !== null) h = usedHeight;
-    else if (ratio > 0) h = clamp(w / ratio, minH, maxH);
+    else if (ratio > 0) h = clamp(heightOf(w), minH, maxH);
     else h = clamp(own.height, minH, maxH);
   }
   box.width = w + box.horizontalExtra;
@@ -3815,10 +3900,16 @@ function layoutPositioned(box: Box, containing: Box, ctx: LayoutContext): void {
       0,
       cbHeight - top - bottom - box.marginTop - box.marginBottom,
     );
-    // — a box with a ratio has its height from its width
+    // — a box with a ratio has its height from its width, and a table is
+    // as tall as its rows, as it is as wide as its columns between two
+    // offsets: `normal` stretches neither (Blink: "Replaced/tables don't
+    // stretch in abspos", `out_of_flow_layout_part.cc`), and a table taken
+    // to the height its offsets leave was that tall around rows that were
+    // not
     const stretches =
       style.height === AUTO &&
       (box.kind !== 'replaced' || control) &&
+      box.kind !== 'table' &&
       !boxRatio(box);
     // both offsets and no height: the box fills what they leave, its
     // `auto` margins nothing (10.6.4, rule 5) — unless `min-height` or