@react-x11/components 0.14.0 → 0.16.0

package/dist/html/layout/block.js

@@ -11,15 +11,15 @@
 // inline pass ask "how wide is the line at this y" without knowing whose
 // formatting context it is inside.
 import { AUTO, gapOf, isPct, isTransparent, resolve, resolveOrNull, } from '../css/values.js';
-import { CONTAIN_INLINE_SIZE, CONTAIN_LAYOUT, CONTAIN_PAINT, CONTAIN_SIZE, scrolls, } from '../css/style.js';
+import { CONTAIN_INLINE_SIZE, CONTAIN_LAYOUT, CONTAIN_PAINT, CONTAIN_SIZE, INLINE_BEFORE_ABSOLUTE, scrolls, } from '../css/style.js';
 import { about, linearOf, matrixOf, transformed } from '../css/transform.js';
 import { lineOf, spanToName } from './grid-lines.js';
 import { columnsOf, forgetColumns, layoutColumns, spansColumns, } from './multicol.js';
 import { BOX_RAISES, Box, CLAMPED, CLEARED_FROM, COLUMN_PIECES, CUT_BLOCKS, GRID_TRACKS, FIRST_LINE, INLINE_OFFSETS, MOVED_OFF_LINES, LINE_BOX_RAISES, SHIFTED_LINES, TEXT_SHIFTS, columned, isBlank, } from './boxes.js';
 import { FloatContext } from './floats.js';
-import { faceExtentOf, isButton, joinsBefore, layoutInline, lineHeightMultiplier, spaceBreaksOnly, strutOf, widestWord, } from './inline.js';
+import { emptyLinePoint, faceExtentOf, isButton, joinsBefore, layoutInline, lineHeightMultiplier, spaceBreaksOnly, strutOf, widestWord, } from './inline.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, computePaintBounds, FIXED_BOXES, fixedToViewport, hoistNegative, OUT_OF_FLOW_REACH, stackLayers, } from '../paint.js';
 /** Lay the whole document out at a width. */
@@ -622,7 +622,16 @@ function layoutChildren(box, ctx, floats, contentTop, contentWidth, leading = 0)
             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,
@@ -1327,38 +1336,61 @@ export const MIN_CONTENT_PROBE = 0;
  * a cell set to 10% measured no wider than its padding.
  */
 export function measureIntrinsicWidth(box, ctx, available, content = false) {
-    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(box, ctx, width, 
+export function layoutSubtree(box, ctx, width, 
 /** Its containing block's width, where `width` is the box's own. */
-containing = width) {
-    resolveEdges(box, Number.isFinite(containing) ? containing : 0);
+containing, 
+/** Whether this lays it out to measure it (`measureIntrinsicWidth`). */
+measuring = false) {
+    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);
 }
 /**
@@ -1704,12 +1736,12 @@ function layoutMarker(box, marker, ctx) {
     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'
@@ -1743,8 +1775,13 @@ function layoutMarker(box, marker, ctx) {
     });
     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
@@ -1903,19 +1940,33 @@ function stretchHeight(box) {
  * stretched item's, a flexed one's in a container of a definite height (CSS
  * Flexbox 9.8), a grid item's stretched down its area (CSS Grid 1, 11.1) —
  * which what is in it takes its percentages of, and which an item that is
- * a flex or grid container itself lays its own items out in. Set by
- * `flex.ts` and `css-grid.ts` for the item's own layout alone.
+ * a flex or grid container itself lays its own items out in, and a table
+ * shares out among its rows. Set by `flex.ts` and `css-grid.ts` for the
+ * item's own layout alone.
  */
 export const FLEXED_HEIGHT = new WeakMap();
 /**
  * The content height a flex layout gave an item without making it definite:
  * flexed along a column that has no height of its own, which 9.8 leaves
  * indefinite. An item that is a flex or grid container lays its own items
- * out in it all the same — it is its used size (9.7) — and nothing in it
- * takes a percentage of it. Set by `flex.ts` for the item's own layout
- * alone.
+ * out in it all the same — it is its used size (9.7) — as a table shares
+ * it among its rows, and nothing in it takes a percentage of it. Set by
+ * `flex.ts` for the item's own layout alone.
  */
 export const USED_HEIGHT = new WeakMap();
+/**
+ * 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();
 /**
  * Hand a box's children the height their percentages resolve against —
  * through inline boxes, which are no containing block, to the inline-block
@@ -2081,6 +2132,14 @@ function finishHeight(box, contentHeight) {
     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);
@@ -2135,7 +2194,9 @@ export function clampHeight(box, height) {
         out = Math.min(out, max + (box.style.boxSizing === 'border-box' ? 0 : box.verticalExtra));
     if (min !== null)
         out = Math.max(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`. */
 function placeBlock(box, contentLeft, y, containingWidth) {
@@ -2324,7 +2385,10 @@ room = containingWidth) {
     if (style.minWidthKeyword && ctx) {
         out = Math.max(out, 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
  *  leave it. Apart from `clampWidth`, which every block is sized through,
@@ -2354,21 +2418,25 @@ export function contentSizedWidth(box, ctx, size, available, percentBase) {
     // 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(box, ctx, 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, Math.max(min, fitRoom(box, size, available, percentBase)));
@@ -2495,6 +2563,11 @@ const PREFERRED = new WeakMap();
  * or is indented, a block with widths of its own.
  */
 export function exactMinContent(box, fonts) {
+    // 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);
@@ -2632,13 +2705,28 @@ function wordBound(box, fonts, measured) {
  * `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, seen) {
+export function intrinsicWidth(box, seen, narrowest = false) {
     // 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)) {
         return box.style.containIntrinsicWidth ?? 0;
     }
+    // a table is as wide as its layout made it: its columns, the spacing
+    // either side of them and between, and its captions' least (`layoutTable`)
+    // — at no width limit its widest, and at none its narrowest. What it
+    // holds says less: its rows run from the first column to the last, the
+    // spacing either side outside them, and measured by them a table in a
+    // flex row, a grid, a float or an `inline-table` came to that much too
+    // narrow, and its columns gave it up
+    if (box.kind === 'table' && Number.isFinite(box.width)) {
+        return Math.max(0, box.width - box.horizontalExtra);
+    }
     // a grid laid out at no width limit has its columns at their widest, and
     // is as wide as they are — an item that runs past its column makes it no
     // wider — or, where it has none, as where its items end
@@ -2656,10 +2744,16 @@ export function intrinsicWidth(box, seen) {
     }
     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;
@@ -2728,7 +2822,7 @@ export function intrinsicWidth(box, seen) {
             }
         }
         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));
             }
@@ -2741,11 +2835,11 @@ export function intrinsicWidth(box, seen) {
             across = Math.max(across, contribution);
             continue;
         }
-        if (row) {
+        if (row && !wraps) {
             total += contribution;
             items += 1;
         }
-        else if (!sideBySide)
+        else if (wraps || !sideBySide)
             widest = Math.max(widest, contribution);
         else if (child.isFloat) {
             const clear = style.clear;
@@ -2865,7 +2959,17 @@ stretchRoom = containingWidth) {
     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) => Math.max(0, (h + oy) * ratio - ox);
+    const heightOf = (w) => 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 = () => {
@@ -2879,18 +2983,18 @@ stretchRoom = containingWidth) {
         // 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);
     }
@@ -2902,7 +3006,7 @@ stretchRoom = containingWidth) {
         if (width !== null)
             w = width;
         else if (usedHeight !== null && ratio > 0)
-            w = usedHeight * ratio;
+            w = widthOf(usedHeight);
         else if (box.replaced === 'hr')
             w = room();
         else
@@ -2911,7 +3015,7 @@ stretchRoom = containingWidth) {
         if (usedHeight !== null)
             h = usedHeight;
         else if (ratio > 0)
-            h = clamp(w / ratio, minH, maxH);
+            h = clamp(heightOf(w), minH, maxH);
         else
             h = clamp(own.height, minH, maxH);
     }
@@ -3192,9 +3296,15 @@ function layoutPositioned(box, containing, ctx) {
     let y;
     if (top !== null && bottom !== null) {
         const fill = Math.max(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