@react-x11/components 0.8.0 → 0.10.0

package/dist/html/layout/block.js

@@ -10,13 +10,16 @@
 // Float coordinates are absolute for the same reason, which is what lets the
 // inline pass ask "how wide is the line at this y" without knowing whose
 // formatting context it is inside.
-import { AUTO, isPct, resolve, resolveOrNull } from '../css/values.js';
-import { Box } from './boxes.js';
+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 { lineOf, spanToName } from './grid-lines.js';
+import { BOX_RAISES, Box, CLAMPED, CUT_BLOCKS, GRID_TRACKS, FIRST_LINE, INLINE_OFFSETS, LINE_BOX_RAISES, SHIFTED_LINES, TEXT_SHIFTS, isBlank, } from './boxes.js';
 import { FloatContext } from './floats.js';
-import { layoutInline } from './inline.js';
+import { faceExtentOf, layoutInline, lineHeightMultiplier, spaceBreaksOnly, strutOf, widestWord, } from './inline.js';
 import { layoutFlex } from './flex.js';
-import { layoutTable } from './table.js';
-import { computePaintBounds } from '../paint.js';
+import { finishCaptions, layoutTable } from './table.js';
+import { collapseEdges } from './collapse.js';
+import { computePaintBounds, hoistNegative, stackLayers } from '../paint.js';
 /** Lay the whole document out at a width. */
 export function layoutDocument(tree, fonts, viewportWidth, viewportHeight) {
     const ctx = {
@@ -25,6 +28,10 @@ export function layoutDocument(tree, fonts, viewportWidth, viewportHeight) {
         viewportHeight,
         positioned: [],
         layoutSubtree: (box, width) => layoutSubtree(box, ctx, width),
+        firstLine: tree.firstLine,
+        firstLineStyler: tree.firstLineStyler,
+        nestedOutOfLine: tree.nestedOutOfLine,
+        clipText: tree.clipText,
     };
     const root = tree.root;
     root.x = 0;
@@ -32,11 +39,15 @@ export function layoutDocument(tree, fonts, viewportWidth, viewportHeight) {
     root.width = viewportWidth;
     // The root box stands in for `<body>` when the document has none (see
     // `Cascade.rootStyle`), so it may carry a margin — and a margin on the
-    // initial containing block has nothing to collapse against and nothing to
-    // sit inside. Folding it into the padding is what a browser's body margin
-    // amounts to, and it keeps `contentX` the one thing layout reads.
+    // initial containing block has nothing to sit inside. Folded into the
+    // padding at the sides and the bottom, which keeps `contentX` the one
+    // thing layout reads. Not at the top: a body's top margin collapses with
+    // its first block's, `<html>` being the formatting context's root and
+    // `<body>` not, so it is handed to the flow as the margin already pending
+    // there — or `<p>hi</p>` would stand 8px lower than the same paragraph in
+    // `<body>`.
     resolveEdges(root, viewportWidth);
-    root.padTop += root.marginTop;
+    const leading = root.marginTop;
     root.padRight += root.marginRight;
     root.padBottom += root.marginBottom;
     root.padLeft += root.marginLeft;
@@ -46,7 +57,23 @@ export function layoutDocument(tree, fonts, viewportWidth, viewportHeight) {
     root.marginLeft = 0;
     const contentWidth = Math.max(0, viewportWidth - root.horizontalExtra);
     const floats = new FloatContext(root.contentX, root.contentX + contentWidth);
-    const flow = layoutChildren(root, ctx, floats, root.contentY, contentWidth);
+    // the initial containing block is the viewport's size, which a percentage
+    // height on the root element resolves against (CSS 2.1 10.1, 10.5); a
+    // fragment has no root element, and the box standing in for its body has
+    // the body's `auto` height to give
+    let readsViewportHeight = false;
+    for (const child of root.children) {
+        if (child.el?.name !== 'html')
+            continue;
+        child.percentHeightBase = viewportHeight;
+        const { height, minHeight, maxHeight } = child.style;
+        if (isPct(height) ||
+            isPct(minHeight) ||
+            (maxHeight !== 'none' && isPct(maxHeight))) {
+            readsViewportHeight = true;
+        }
+    }
+    const flow = layoutChildren(root, ctx, floats, root.contentY, contentWidth, leading);
     const floatBottom = floats.bottom === -Infinity ? 0 : floats.bottom - root.contentY;
     root.height = Math.max(flow.height, floatBottom) + root.verticalExtra;
     // Positioned boxes last, and in the order they were found, so a later one
@@ -59,42 +86,474 @@ export function layoutDocument(tree, fonts, viewportWidth, viewportHeight) {
     // against where it *was* — which is the whole of what makes it relative —
     // and the ink bounds are computed after that, so culling sees where boxes
     // ended up rather than where they were laid out.
-    applyRelativeOffsets(root);
-    computePaintBounds(root);
-    let bottom = root.height;
+    if (tree.relative)
+        applyRelativeOffsets(root);
+    const reach = computePaintBounds(root, tree.movedInline);
+    if (tree.negative)
+        hoistNegative(root);
+    stackLayers(root);
+    // The document is as tall as what overflows the root, not the root: an
+    // `html, body { height: 100% }` a window tall holds a message longer than
+    // the window, and the element sizes to all of it.
+    let bottom = Math.max(root.height, reach);
     for (const { box } of ctx.positioned) {
         if (box.style.position !== 'fixed')
             bottom = Math.max(bottom, box.y + box.height);
     }
-    return { width: viewportWidth, height: bottom };
+    return {
+        width: viewportWidth,
+        height: bottom,
+        readsViewportHeight: readsViewportHeight || ctx.readViewportHeight === true,
+    };
+}
+/** No margin at all, shared: most joins leave a strut as it was. */
+const NO_MARGIN = Object.freeze({ pos: 0, neg: 0 });
+/** One margin, as a strut to collapse others with. */
+function marginStrut(margin) {
+    if (margin > 0)
+        return { pos: margin, neg: 0 };
+    if (margin < 0)
+        return { pos: 0, neg: margin };
+    return NO_MARGIN;
+}
+/**
+ * A strut with one more margin collapsed into it: the largest positive
+ * and the most negative stay apart, and add up only where the margin is
+ * read (`marginOf`) — CSS 8.3.1's rule, whole. A `-8px` pull still works
+ * against a `40px` push and comes out at `32`, and a third margin after
+ * them collapses with the two, not with their sum.
+ */
+function join(strut, margin) {
+    if (margin > strut.pos)
+        return { pos: margin, neg: strut.neg };
+    if (margin < strut.neg)
+        return { pos: strut.pos, neg: margin };
+    return strut;
+}
+/** Two sets of adjoining margins collapsed into one. */
+function joinStruts(a, b) {
+    if (b.pos <= a.pos && b.neg >= a.neg)
+        return a;
+    if (a.pos <= b.pos && a.neg >= b.neg)
+        return b;
+    return { pos: Math.max(a.pos, b.pos), neg: Math.min(a.neg, b.neg) };
+}
+/** The margin a strut comes to. */
+function marginOf(strut) {
+    return strut.pos + strut.neg;
+}
+/** A box's bottom margin as the next sibling's collapses with it, with
+ *  what came out through its bottom edge where anything did. */
+function bottomOf(box) {
+    return box.bottomStrut ?? marginStrut(box.marginBottom);
 }
 /**
- * The collapsed value of two adjoining margins: the largest positive plus
- * the most negative — CSS 8.3.1's rule, whole. Both-positive takes the max,
- * both-negative the min, and a mixed pair genuinely adds, which is what
- * makes a `-8px` pull work against a `40px` push and come out at `32`.
+ * A block's top margin as its placement uses it: its own, collapsed with
+ * every margin that adjoins it (CSS 2.1 8.3.1). That is its first in-flow
+ * child's while nothing parts them — no top border, no top padding, no
+ * formatting context of its own, no line of text first — and that child's
+ * first child's, down the chain; and past a child that is empty, its bottom
+ * margin and the next child's top, because an empty block's two margins
+ * adjoin each other. The children the chain went through are marked, so
+ * their own layout does not apply the margin a second time. Without it
+ * `<div><p>` stood a paragraph's margin lower than `<p>`, and a `<div>`
+ * holding only an absolute image stood the rest of a document a body's
+ * margin lower than a browser does.
  */
-function collapseMargins(a, b) {
-    return Math.max(0, Math.max(a, b)) + Math.min(0, Math.min(a, b));
+function collapsedTopMargin(box, containingWidth, floats = null, y = 0, pending = NO_MARGIN) {
+    floatsPassed = false;
+    floatsLeft = 0;
+    floatsRight = 0;
+    passedLeft = false;
+    passedRight = false;
+    walkFloats = floats;
+    walkY = y;
+    walkPending = pending;
+    return absorbChildren(box, containingWidth, marginStrut(box.marginTop));
+}
+/** Whether the last `absorbChildren` went through every child in flow of
+ *  its box, each empty and absorbed whole — which is what lets the caller
+ *  take that box's bottom margin too. Read straight after the call. */
+let throughAll = false;
+/** Whether the walk has passed a float, and how wide the floats it passed
+ *  on each side are, their margin boxes as their styles state them — NaN
+ *  once one does not. Such a float is placed where the margin ends, so it
+ *  moves with the margin, and a new formatting context the margin reaches
+ *  next has to be able to sit beside it. */
+let floatsPassed = false;
+let floatsLeft = 0;
+let floatsRight = 0;
+/** Which sides the floats the walk passed are on. */
+let passedLeft = false;
+let passedRight = false;
+/** Where the margin the walk collapses starts, and the floats placed before
+ *  it: what says whether a cleared child in it has clearance. */
+let walkFloats = null;
+let walkY = 0;
+let walkPending = NO_MARGIN;
+/**
+ * Collapse into `margin` the margins of `at`'s children that adjoin its top
+ * edge, marking each child it takes, and return it. The walk stops at the
+ * first child something parts from the margin — a line, a clearance, a
+ * border, padding or height, a formatting context of its own — and counts
+ * a child empty only where its layout is sure to agree, since this runs
+ * before anything is laid out and the parent is placed by what it answers:
+ * an inline box with an edge, or a percentage, stops it where it might have
+ * gone on.
+ */
+function absorbChildren(at, width, margin) {
+    let whole = true;
+    /** `at`'s content width, worked out when a child first needs it: most
+     *  blocks start with text, and never do. */
+    let inner = -1;
+    for (const child of at.children) {
+        if (child.outOfFlow)
+            continue;
+        if (child.kind === 'text') {
+            if (makesNoLine(child))
+                continue;
+            // a line box stops a margin
+            whole = false;
+            break;
+        }
+        const floated = child.isFloat;
+        const inLine = !floated &&
+            (child.kind === 'inline' ||
+                child.kind === 'break' ||
+                isInlineLevel(child));
+        if (inLine) {
+            const made = phantom(child);
+            if (made === 0) {
+                whole = false;
+                break;
+            }
+            if (made === 1)
+                continue;
+        }
+        if (inner < 0) {
+            if (!topOpen(at)) {
+                whole = false;
+                break;
+            }
+            inner = Math.max(0, blockWidth(at, width) - at.horizontalExtra);
+        }
+        if (floated) {
+            passFloat(child, inner);
+            continue;
+        }
+        if (inLine) {
+            passFloatsIn(child, inner);
+            continue;
+        }
+        resolveEdges(child, inner);
+        /** The margin that collapses up through the child's top edge, where
+         *  it had to be worked out before the child was taken. */
+        let through = null;
+        if (child.style.clear !== 'none') {
+            // Where it would be with `clear: none` is where its top margin and
+            // every one that comes up through its top edge put it: a large
+            // margin inside it takes it past the floats as surely as its own
+            // (CSS 2.1 9.5.2). The walk into it is undone where it has
+            // clearance, which it passes no float for.
+            const passed = passedFloats(child.style.clear);
+            const walked = passed ? null : saveWalk();
+            if (!passed) {
+                through = absorbChildren(child, inner, join(margin, child.marginTop));
+            }
+            if (passed || hasClearance(child, through)) {
+                if (walked)
+                    restoreWalk(walked);
+                child.topAbsorbed = 0;
+                whole = false;
+                break;
+            }
+        }
+        if (floatsPassed &&
+            (child.kind === 'replaced' || establishesBFC(child)) &&
+            !fitsBeside(child, inner)) {
+            // it would be pushed below the floats the margin carries, so it
+            // separates from them as clearance does: the margin stops above it,
+            // and it sits under the floats rather than a margin under them
+            child.topAbsorbed = 3;
+            whole = false;
+            break;
+        }
+        margin =
+            through ?? absorbChildren(child, inner, join(margin, child.marginTop));
+        if (!throughAll || !bottomOpen(child)) {
+            child.topAbsorbed = 1;
+            whole = false;
+            break;
+        }
+        child.topAbsorbed = 2;
+        margin = join(margin, child.marginBottom);
+    }
+    throughAll = whole && (inner >= 0 || topOpen(at));
+    return margin;
+}
+/** Whether a box's top margin adjoins its first child's: a block, with no
+ *  border or padding at the top and no formatting context of its own. */
+function topOpen(box) {
+    return (box.kind === 'block' &&
+        box.borderTop === 0 &&
+        box.padTop === 0 &&
+        !establishesBFC(box));
+}
+/** Whether nothing at an empty block's bottom holds its margins apart: no
+ *  border, padding or height there — nor a height its ratio gives it from
+ *  its width — and no marker to stand a line tall. A percentage says no,
+ *  whatever it resolves to. */
+function bottomOpen(box) {
+    const { height, minHeight, aspectRatio } = box.style;
+    return (box.borderBottom === 0 &&
+        box.padBottom === 0 &&
+        !box.marker &&
+        (height === 0 ||
+            (height === AUTO &&
+                !aspectRatio &&
+                box.style.heightKeyword !== 'stretch')) &&
+        (minHeight === AUTO || minHeight === 0) &&
+        box.style.minHeightKeyword !== 'stretch');
+}
+/** Whether a text makes no line of its own: white space that collapses
+ *  away. A no-break space is not white space to CSS, though `\s` says it
+ *  is, and white space that is kept makes a line. */
+function makesNoLine(text) {
+    const ws = text.style.whiteSpace;
+    return (ws === 'normal' || ws === 'nowrap') && COLLAPSIBLE.test(text.text);
+}
+const COLLAPSIBLE = /^[ \t\n\r\f]*$/;
+/** Whether an inline box makes no line either — nothing in it that does,
+ *  and no margin, border or padding on any side: the phantom line of CSS
+ *  2.1 9.4.2, which a margin collapses through. `0` where it makes one,
+ *  `1` where it does not, and `2` where it does not and holds a float, which
+ *  the walk has to pass. The children go first: most inline boxes hold text,
+ *  and that answers without a look at their edges. */
+function phantom(box) {
+    if (box.kind !== 'inline' || box.style.display !== 'inline')
+        return 0;
+    let made = 1;
+    for (const child of box.children) {
+        if (child.outOfFlow)
+            continue;
+        if (child.isFloat) {
+            made = 2;
+            continue;
+        }
+        if (child.kind === 'text') {
+            if (makesNoLine(child))
+                continue;
+            return 0;
+        }
+        const inner = phantom(child);
+        if (inner === 0)
+            return 0;
+        if (inner === 2)
+            made = 2;
+    }
+    const style = box.style;
+    return noLength(style.marginLeft) &&
+        noLength(style.marginRight) &&
+        noLength(style.marginTop) &&
+        noLength(style.marginBottom) &&
+        noLength(style.paddingLeft) &&
+        noLength(style.paddingRight) &&
+        noLength(style.paddingTop) &&
+        noLength(style.paddingBottom) &&
+        !hasBorder(style.borderLeftStyle, style.borderLeftWidth) &&
+        !hasBorder(style.borderRightStyle, style.borderRightWidth) &&
+        !hasBorder(style.borderTopStyle, style.borderTopWidth) &&
+        !hasBorder(style.borderBottomStyle, style.borderBottomWidth)
+        ? made
+        : 0;
+}
+/** Pass the floats in a phantom inline box, at any depth. */
+function passFloatsIn(box, width) {
+    for (const child of box.children) {
+        if (child.isFloat)
+            passFloat(child, width);
+        else if (child.kind === 'inline')
+            passFloatsIn(child, width);
+    }
+}
+function noLength(len) {
+    return len === 0 || len === AUTO;
+}
+function hasBorder(style, width) {
+    return style !== 'none' && style !== 'hidden' && width !== 0;
+}
+/** Count a float the walk passes toward the room a new formatting context
+ *  after it would have beside it. */
+function passFloat(float, width) {
+    resolveEdges(float, width);
+    floatsPassed = true;
+    if (float.style.float === 'right') {
+        floatsRight += statedOuterWidth(float, width);
+        passedRight = true;
+    }
+    else {
+        floatsLeft += statedOuterWidth(float, width);
+        passedLeft = true;
+    }
+}
+/** Whether the walk passed a float that a `clear` clears, which the margin
+ *  carries down with it: a child that clears one has clearance whatever
+ *  its margin is. */
+function passedFloats(clear) {
+    return (((clear === 'left' || clear === 'both') && passedLeft) ||
+        ((clear === 'right' || clear === 'both') && passedRight));
+}
+/**
+ * Whether a cleared child in the margin the walk collapses has clearance
+ * from a float placed before the walk, which parts it from that margin
+ * (CSS 2.1 9.5.2): where `through`, the margin that collapses up through
+ * its top edge, does not take it below the float already. A child with none
+ * is like any other, and the margin goes on up through it: stopped there, a
+ * large margin under a float was spent inside its parent, whose background
+ * showed above it.
+ */
+function hasClearance(child, through) {
+    if (!walkFloats)
+        return true;
+    const floor = walkFloats.clearance(child.style.clear);
+    if (floor === -Infinity)
+        return false;
+    return walkY + marginOf(joinStruts(walkPending, through)) < floor;
+}
+/** What the walk has passed, to be put back where a look ahead into a
+ *  child is undone. */
+function saveWalk() {
+    return [floatsPassed, floatsLeft, floatsRight, passedLeft, passedRight];
+}
+function restoreWalk([passed, left, right, onLeft, onRight]) {
+    floatsPassed = passed;
+    floatsLeft = left;
+    floatsRight = right;
+    passedLeft = onLeft;
+    passedRight = onRight;
+}
+/** Whether a new formatting context fits beside the floats the walk passed
+ *  (CSS 2.1 9.5), as `layoutBesideFloats` places it: where its width and
+ *  theirs are stated, whether its border box, set in from its margins or
+ *  the floats, ends before them or the room does; where the floats' are
+ *  not, yes, and a box of `width: auto` there shrinks to the room it has. */
+function fitsBeside(box, width) {
+    const stated = statedOuterWidth(box, width) - box.marginLeft - box.marginRight;
+    const lo = floatsLeft ? floatsLeft : -Infinity;
+    const hi = floatsRight ? width - floatsRight : Infinity;
+    const [start, end] = besideFloats(box, 0, width, lo, hi);
+    const across = Number.isNaN(stated)
+        ? Math.max(box.horizontalExtra, end - start)
+        : stated;
+    return box.parent?.style.direction === 'rtl'
+        ? !(end - across < Math.max(Math.min(0, box.marginLeft), lo) - 0.01)
+        : !(start + across >
+            Math.min(width - Math.min(0, box.marginRight), hi) + 0.01);
+}
+/** A box's margin-box width as its style states it, before it is laid out:
+ *  NaN for `width: auto`, which only layout can answer. */
+function statedOuterWidth(box, containingWidth) {
+    const { width, boxSizing } = box.style;
+    if (width === AUTO)
+        return NaN;
+    const set = resolve(width, containingWidth, NaN);
+    const border = boxSizing === 'border-box'
+        ? Math.max(set, box.horizontalExtra)
+        : set + box.horizontalExtra;
+    return border + box.marginLeft + box.marginRight;
+}
+/**
+ * Whether a box's top and bottom margins collapse through it: a block with
+ * no height, no border or padding, no line in it and no formatting context
+ * of its own, whose blocks are all the same (CSS 2.1 8.3.1). An empty
+ * `<div>` between two paragraphs is the case: its margins and theirs are
+ * one margin, where they were stacked.
+ */
+function collapsesThrough(box) {
+    if (box.kind !== 'block' || box.height !== 0)
+        return false;
+    if (box.lines?.length || establishesBFC(box))
+        return false;
+    const min = resolveOrNull(box.style.minHeight, box.percentHeightBase);
+    if (min !== null && min > 0)
+        return false;
+    for (const child of box.children) {
+        if (child.outOfFlow || child.isFloat)
+            continue;
+        // what is in line made a line or did not, and the lines said which
+        if (child.kind === 'text' ||
+            child.kind === 'inline' ||
+            child.kind === 'break' ||
+            isInlineLevel(child)) {
+            continue;
+        }
+        if (!collapsesThrough(child))
+            return false;
+    }
+    return true;
 }
 /**
  * Lay out a box's children as a block formatting context's contents, or as
  * one inline formatting context when they are all inline-level.
  */
-function layoutChildren(box, ctx, floats, contentTop, contentWidth) {
+function layoutChildren(box, ctx, floats, contentTop, contentWidth, leading = 0) {
     const contentLeft = box.contentX;
     if (establishesInlineContext(box)) {
-        const height = layoutInlineContent(box, ctx, floats, contentTop, contentWidth, contentLeft);
-        return { height, hanging: 0 };
+        // a line box stops a margin: the leading one is spent above the lines
+        const height = layoutInlineContent(box, ctx, floats, contentTop + leading, contentWidth, contentLeft);
+        return { height: height + leading, hanging: NO_MARGIN };
     }
     let y = contentTop;
-    /** The margin left hanging by the previous sibling, for collapsing. */
-    let pendingMargin = 0;
+    /** The margin left hanging by the previous sibling — or, before the first
+     *  child, the one `leading` hands down — for collapsing. */
+    let pendingMargin = marginStrut(leading);
+    /** How many floats were placed before this box's content began, while
+     *  nothing has yet fixed where the content is: a margin that collapses
+     *  up through its top edge would take the ones placed since down with
+     *  it (`clearanceSince`). Infinity once a child in flow has fixed it,
+     *  and from the start where a border, padding or a formatting context
+     *  of its own does. */
+    let openFloats = topOpen(box) ? floats.count : Infinity;
     let first = true;
+    /** Whether every child in flow so far was absorbed whole into this box's
+     *  top margin: the walk that marked the next child reached it only
+     *  through them, so past any other its mark is an earlier pass's. Asked
+     *  of the box only once a child carries a mark, which few do. */
+    let open = null;
+    /** Whether the margin still hanging collapsed with a top margin that has
+     *  clearance, an empty block cleared past a float's, and the margin that
+     *  makes: the block's own two and what the empty blocks after it add to
+     *  them. It stays in this box rather than escape its bottom (CSS 2.1
+     *  8.3.1, 10.6.3). */
+    let cleared = false;
+    let afterClear = NO_MARGIN;
+    /** The cleared block's own top margin: its top border edge is that far
+     *  inside the margin its margins and the ones after it collapse to. */
+    let clearTop = 0;
+    // this box's first formatted line is its first child's in flow (CSS 2.1
+    // 5.12.1), which its `::first-line` is handed to
+    let firstLine = ctx.firstLine ? firstLineOf(box) : null;
+    const clamp = ctx.clamp ?? null;
     for (const child of box.children) {
-        if (child.kind === 'text' && !child.text.trim())
+        if (child.kind === 'text' && isBlank(child.text))
             continue;
+        // Past a line-clamp container's clamp point, a box in flow or floating
+        // is invisible and takes no room (CSS Overflow 4, 5.3.1); a positioned
+        // box keeps its place, invisible only where its containing block is.
+        if (clamp !== null && !child.outOfFlow) {
+            if (clamp.done) {
+                hideClamped(child);
+                continue;
+            }
+            CLAMPED.delete(child);
+        }
+        if (firstLine && !child.outOfFlow && !child.isFloat) {
+            if (!FIRST_LINE.has(child))
+                HANDED.set(child, firstLine);
+            firstLine = null;
+        }
         if (child.outOfFlow) {
+            placeStatic(child, box, contentLeft, contentWidth, y + marginOf(pendingMargin));
             ctx.positioned.push({
                 box: child,
                 containing: containingBlockFor(child) ?? box,
@@ -102,20 +561,100 @@ function layoutChildren(box, ctx, floats, contentTop, contentWidth) {
             continue;
         }
         if (child.isFloat) {
-            layoutFloat(child, ctx, floats, y + pendingMargin, contentWidth);
+            layoutFloat(child, ctx, floats, y + marginOf(pendingMargin), contentLeft, contentWidth);
             continue;
         }
         resolveEdges(child, contentWidth);
-        const top = child.marginTop;
-        const collapsed = first ? top : collapseMargins(pendingMargin, top);
-        let childY = y + collapsed;
-        const clearance = floats.clearance(child.style.clear);
-        if (clearance > -Infinity && clearance > childY)
-            childY = clearance;
-        layoutBlockLevel(child, ctx, floats, contentLeft, childY, contentWidth);
-        y = child.y + child.height;
-        pendingMargin = child.marginBottom;
+        // A child whose margin this box already spent — collapsed through its
+        // top edge — sits at the content top; any other brings its own margin,
+        // collapsed with its first descendants' where nothing parts them.
+        let absorbed = child.topAbsorbed;
+        if (absorbed !== 0 && !(open ??= topOpen(box)))
+            absorbed = 0;
+        const top = absorbed
+            ? NO_MARGIN
+            : collapsedTopMargin(child, contentWidth, floats, y, pendingMargin);
+        const collapsed = joinStruts(pendingMargin, top);
+        // After an empty block cleared past a float, what collapses with its
+        // margins is placed from its top border edge, less its own top
+        // margin, which is above that edge: the depth the margin they make
+        // reaches below it (CSS 2.1 8.3.1), as the box's bottom is below it
+        // where the block is the last in it
+        const at = cleared
+            ? y + Math.max(0, marginOf(joinStruts(afterClear, top)) - clearTop)
+            : y + marginOf(collapsed);
+        let childY = at;
+        const clear = child.style.clear;
+        const clearance = floats.clearance(clear);
+        if (clearance > -Infinity) {
+            // A float placed before anything fixed where this box's content is
+            // goes down with the margin where `clear` is none, so the child is
+            // never below it there: it has clearance, and its border edge goes
+            // under the floats whatever its margin is, which may take it back
+            // up (CSS 2.1 9.5.2, as the browsers read it). A margin under a
+            // float in an empty block put a block that cleared it the margin
+            // below the float, and its parent's background showed between.
+            // And one the walk that placed this box reached through every child
+            // before it, and stopped at for its clearance, has it too: where
+            // it would have been with `clear: none`, its margin collapsed up
+            // through this box's top, is above the floats, so its border edge
+            // goes under them, and its own margin, held apart there, may not
+            // take it lower. The clearance is negative then.
+            if ((openFloats !== Infinity &&
+                floats.clearanceSince(clear, openFloats) > -Infinity) ||
+                (child.topAbsorbed === 0 && (open ?? topOpen(box)))) {
+                childY = clearance;
+            }
+            else if (clearance > childY)
+                childY = clearance;
+        }
+        const counted = clamp?.fit?.lines ?? 0;
+        if (!floats.isEmpty &&
+            (child.kind === 'replaced' || establishesBFC(child))) {
+            layoutBesideFloats(child, ctx, floats, contentLeft, childY, contentWidth);
+        }
+        else {
+            layoutBlockLevel(child, ctx, floats, contentLeft, childY, contentWidth);
+        }
+        // a block with none of the flow's lines in it — an image, a box of a
+        // formatting context of its own — puts the clamp point of an `auto`
+        // clamp before it where it ends below the room
+        const fit = clamp?.fit;
+        if (fit && !fit.over && fit.lines === counted) {
+            const bottom = child.y +
+                child.height -
+                child.padBottom -
+                child.borderBottom +
+                closingBelow(child, clamp.box);
+            if (bottom > fit.floor)
+                fit.over = true;
+        }
         first = false;
+        const moved = childY !== at;
+        if (!moved && collapsesThrough(child)) {
+            // nothing in it parts its margins: they and the ones either side of
+            // it are one (CSS 2.1 8.3.1), still hanging for what comes next —
+            // or, where the walk took them all into this box's top margin, spent
+            if (absorbed === 2) {
+                pendingMargin = collapsed;
+                continue;
+            }
+            open = false;
+            pendingMargin = joinStruts(collapsed, bottomOf(child));
+            if (cleared) {
+                afterClear = joinStruts(joinStruts(afterClear, top), bottomOf(child));
+            }
+            continue;
+        }
+        open = false;
+        y = child.y + child.height;
+        pendingMargin = bottomOf(child);
+        openFloats = Infinity;
+        // cleared, and empty: its margins collapse together, and what follows
+        // collapses with them, a top margin that has clearance (CSS 2.1 8.3.1)
+        cleared = moved && collapsesThrough(child);
+        afterClear = cleared ? joinStruts(top, bottomOf(child)) : NO_MARGIN;
+        clearTop = cleared ? marginOf(top) : 0;
     }
     // The last child's bottom margin collapses through the parent's bottom
     // edge unless a border, padding, a specified height or a formatting
@@ -125,37 +664,214 @@ function layoutChildren(box, ctx, floats, contentTop, contentWidth) {
     // the next sibling still sees it. Dropping it here was the bug that made
     // `<div><p>…</p></div><p>…</p>` set the two paragraphs solid.
     if (!first &&
+        !cleared &&
         !box.borderBottom &&
         !box.padBottom &&
         box.style.height === AUTO &&
         !establishesBFC(box)) {
-        return { height: y - contentTop, hanging: pendingMargin };
+        const height = y - contentTop;
+        // A minimum height that makes the box taller parts the margin from its
+        // bottom, and spends it: the margin neither escapes nor makes the box
+        // taller still. 8.3.1 has it collapse only through a box of no
+        // `min-height`; browsers part it only where the minimum is what sets
+        // the height, and the suite has it so. A maximum leaves it to collapse
+        // through, as 8.3.1 has it, where the suite has a test either way
+        const parted = box.style.minHeight !== AUTO &&
+            clampHeight(box, height + box.verticalExtra) > height + box.verticalExtra;
+        return { height, hanging: parted ? NO_MARGIN : pendingMargin };
+    }
+    // The cleared block's top border edge is where it would be with a border
+    // at its bottom, its top margin's depth inside the margin they all make:
+    // the box ends where that margin does, below the edge by what exceeds
+    // the top margin (8.3.1, 10.6.3)
+    if (cleared) {
+        return {
+            height: y + Math.max(0, marginOf(afterClear) - clearTop) - contentTop,
+            hanging: NO_MARGIN,
+        };
     }
-    return { height: y + pendingMargin - contentTop, hanging: 0 };
+    return {
+        height: y + marginOf(pendingMargin) - contentTop,
+        hanging: NO_MARGIN,
+    };
 }
-function layoutInlineContent(box, ctx, floats, contentTop, contentWidth, contentLeft) {
-    // Floats inside an inline context are placed before the lines are built,
-    // so the lines already know to avoid them.
-    for (const child of box.children) {
-        if (child.outOfFlow) {
-            ctx.positioned.push({
-                box: child,
-                containing: containingBlockFor(child) ?? box,
-            });
-        }
-        else if (child.isFloat) {
-            layoutFloat(child, ctx, floats, contentTop, contentWidth);
+/**
+ * A block that makes its own formatting context — a table, a box that
+ * clips its overflow — or a block-level image does not flow round the
+ * floats beside it: it is a rectangle beside them (CSS 2.1 9.5), in the
+ * room they leave at its top, or lower down where it does not fit there.
+ * An image floated left with an `overflow: hidden` block of text beside it
+ * is the layout this is for; the block ran under the image.
+ */
+function layoutBesideFloats(box, ctx, floats, contentLeft, y, contentWidth) {
+    const right = contentLeft + contentWidth;
+    const style = box.style;
+    // auto margins, and HTML's alignment, place the box in the room the
+    // floats leave, as browsers do
+    const inRoom = style.marginLeft === AUTO ||
+        style.marginRight === AUTO ||
+        !!box.parent?.style.alignBlocks;
+    const rtl = box.parent?.style.direction === 'rtl';
+    // Otherwise its margins are its containing block's, and may overlap a
+    // float on their own side; its border box may not. So a column beside a
+    // 200px sidebar with a margin of 220px starts 220px in, not 420px. A
+    // float is looked for as far out as a negative margin takes the box
+    resolveEdges(box, contentWidth);
+    const reachLeft = inRoom
+        ? contentLeft
+        : Math.min(contentLeft, contentLeft + box.marginLeft);
+    const reachRight = inRoom ? right : Math.max(right, right - box.marginRight);
+    let at = y;
+    for (let tries = 0; tries < 64; tries += 1) {
+        let band = floats.bandAt(at, 1, reachLeft, reachRight, !inRoom);
+        let fits = false;
+        // The room is what the floats leave over the box's whole height, not at
+        // its top: a float that starts lower down, beside the box, narrows it
+        // too (CSS 2.1 9.5). Known only once the box is laid out, so a box
+        // that runs into one is laid out again in what is left.
+        for (let settle = 0; settle < 8; settle += 1) {
+            const room = band.right - band.left;
+            const lo = band.left > reachLeft ? band.left : -Infinity;
+            const hi = band.right < reachRight ? band.right : Infinity;
+            if (inRoom)
+                layoutBlockLevel(box, ctx, floats, band.left, at, room);
+            else {
+                const [start, end] = besideFloats(box, contentLeft, right, lo, hi);
+                layoutBlockLevel(box, ctx, floats, start - box.marginLeft, at, end - start + box.marginLeft + box.marginRight, contentWidth);
+            }
+            // its border box, from its top: its margins may overlap a float, and
+            // a negative top margin takes the box up past one it then meets
+            const over = floats.bandAt(at, box.height, reachLeft, reachRight, !inRoom);
+            if (over.left > band.left + 0.5 || over.right < band.right - 0.5) {
+                band = over;
+                continue;
+            }
+            // What is too wide overflows at the end of the line, as far as a
+            // negative margin there takes it, but no further into a float or
+            // past the room; at the start it would run into the floats, and
+            // waits below them (the suite's floats-wrap-bfc-with-margin tests)
+            if (inRoom) {
+                fits = box.marginLeft + box.width + box.marginRight <= room + 0.5;
+            }
+            else if (rtl) {
+                const limit = Math.max(contentLeft + Math.min(0, box.marginLeft), lo);
+                fits = box.x >= limit - 0.5;
+            }
+            else {
+                const limit = Math.min(right - Math.min(0, box.marginRight), hi);
+                fits = box.x + box.width <= limit + 0.5;
+            }
+            break;
         }
+        if (fits)
+            return;
+        // under the float it meets, which may start below its top
+        const below = floats.nextEdgeBelow(at, Math.max(1, box.height));
+        if (below === null || below <= at)
+            break;
+        at = below;
+    }
+    layoutBlockLevel(box, ctx, floats, contentLeft, at, contentWidth);
+}
+/**
+ * The left and right edges a block with a formatting context of its own
+ * has for its border box beside floats that reach `lo` from the left and
+ * `hi` from the right (infinite where none does): each margin set in from
+ * its containing block's edge, or the float's where that is further in.
+ */
+function besideFloats(box, left, right, lo, hi) {
+    // Where a float narrows the containing block's room on either side, a
+    // negative margin takes the box no further out than the containing
+    // block's edge, as every engine has it; where none does, the margins
+    // are the containing block's in full. The suite's
+    // floats-wrap-bfc-with-margin-006 to -009 propose otherwise, and pass in
+    // no browser.
+    const beside = lo > left || hi < right;
+    const ml = beside ? Math.max(0, box.marginLeft) : box.marginLeft;
+    const mr = beside ? Math.max(0, box.marginRight) : box.marginRight;
+    return [Math.max(left + ml, lo), Math.min(right - mr, hi)];
+}
+function layoutInlineContent(box, ctx, floats, contentTop, contentWidth, contentLeft) {
+    // a line-clamp container whose clamp point is at its start shows none of
+    // its own lines
+    const clamp = ctx.clamp ?? null;
+    if (clamp !== null && (clamp.done || clamp.left <= 0)) {
+        box.lines = [];
+        box.floatRow = 0;
+        return 0;
     }
+    // An absolute box's static position is the block's; a float is placed
+    // on the line it is on, as the lines reach it (`floatBoxes`).
+    const floated = placeOutOfLine(box, box, ctx, contentTop, contentWidth, contentLeft);
     // Atomics have to be sized before the line breaker can place them.
     sizeAtomics(box, ctx, contentWidth);
-    const result = layoutInline(box, {
+    const options = {
         fonts: ctx.fonts,
         width: contentWidth,
         startY: contentTop,
         floats,
         originX: contentLeft,
-    });
+        clipText: ctx.clipText,
+        floatBoxes: floated
+            ? {
+                size: (child) => sizeFloat(child, ctx, contentWidth),
+                place: (child, y) => placeFloat(child, floats, y, contentLeft, contentWidth),
+            }
+            : undefined,
+        // the lines the clamp leaves, where it cuts rather than counts
+        clamp: clamp !== null && clamp.fit === null && clamp.left !== Infinity
+            ? {
+                lines: clamp.left,
+                ellipsis: box.style.blockEllipsis,
+                follows: followsInFlow(box, clamp.box),
+            }
+            : undefined,
+    };
+    const firstLine = ctx.firstLine ? firstLineOf(box) : null;
+    // A `::first-line` that sets the line's fonts moves where it breaks, so
+    // the line is found in them (`InlineOptions.firstLineStyle`); its text
+    // takes the pseudo-element's colour there too
+    const restyled = firstLine && ctx.firstLineStyler && setsFonts(firstLine, box.style)
+        ? { style: firstLine, styler: ctx.firstLineStyler }
+        : undefined;
+    let result = layoutInline(box, restyled ? { ...options, firstLineStyle: restyled } : options);
+    if (firstLine &&
+        !restyled &&
+        firstLine.color !== box.style.color &&
+        result.lines.length) {
+        // the first line's text in its `::first-line` colour, laid out again
+        // with its runs cut where the line ends (CSS 2.1 5.12.1), beside the
+        // floats the first pass placed — and measured with them
+        const placed = result;
+        result = layoutInline(box, {
+            ...options,
+            floatBoxes: undefined,
+            firstLine: {
+                color: firstLine.color,
+                from: box.style.color,
+                end: result.lines[0].textEnd,
+            },
+        });
+        if (placed.lines.length === result.lines.length) {
+            placed.lines.forEach((line, i) => {
+                if (line.floats)
+                    result.lines[i].floats = line.floats;
+            });
+        }
+        result.floatRow = placed.floatRow;
+    }
+    box.floatRow = result.floatRow ?? 0;
+    if (clamp !== null)
+        countLines(clamp, box, result, contentTop, options.clamp);
+    if (firstLine &&
+        ctx.fonts &&
+        result.lines.length &&
+        !isTransparent(firstLine.backgroundColor)) {
+        result.lines[0].background = {
+            style: firstLine,
+            ...faceExtentOf(ctx.fonts, firstLine),
+        };
+    }
     // The inline pass works in content-box coordinates; move the result into
     // document space now, so nothing below this line has to know the
     // difference.
@@ -171,10 +887,140 @@ function layoutInlineContent(box, ctx, floats, contentTop, contentWidth, content
             text.drawX += contentLeft;
             text.drawY += contentTop;
         }
+        for (const edge of line.edges ?? [])
+            edge.x += contentLeft;
     }
     box.lines = result.lines;
     return result.height;
 }
+/**
+ * A block's lines, counted against the clamp: the ones left, or for an
+ * `auto` clamp's first pass, the ones that end above its floor. The clamp
+ * point is passed where they were cut, or where they were all the lines
+ * left and more of the container follows them.
+ */
+function countLines(clamp, box, result, contentTop, cut) {
+    const fit = clamp.fit;
+    if (fit !== null) {
+        if (fit.over)
+            return;
+        const below = closingBelow(box, clamp.box);
+        for (const line of result.lines) {
+            if (contentTop + line.y + line.height + below > fit.floor) {
+                fit.over = true;
+                return;
+            }
+            fit.lines += 1;
+        }
+        return;
+    }
+    clamp.left -= result.lines.length;
+    if (result.cut || (clamp.left <= 0 && cut?.follows))
+        clamp.done = true;
+}
+/** Mark a box past a clamp point, and take from everything in it the lines
+ *  a layout before gave it: a hidden box is not laid out, and nothing —
+ *  a selection, a caret — may find text in it where it stood. */
+function hideClamped(box) {
+    CLAMPED.add(box);
+    const stack = [box];
+    while (stack.length) {
+        const at = stack.pop();
+        at.lines = null;
+        for (const child of at.children)
+            stack.push(child);
+    }
+}
+/**
+ * How far below a box's content a line-clamp container's content ends,
+ * where the clamp point is just after it: the bottom padding, border and
+ * margin of the box and of each block around it in the container, the
+ * margins collapsed where nothing parts them.
+ */
+function closingBelow(box, container) {
+    let below = 0;
+    let margin = 0;
+    for (let at = box; at && at !== container; at = at.parent) {
+        const edge = at.padBottom + at.borderBottom;
+        if (edge) {
+            below += margin + edge;
+            margin = 0;
+        }
+        margin = Math.max(margin, at.marginBottom);
+    }
+    return below + margin;
+}
+/**
+ * Whether anything in flow follows a block in a line-clamp container — a
+ * block after it, or after a block around it. Then a clamp point is just
+ * after its last line, which ends in an ellipsis (CSS Overflow 4, 4.2);
+ * where nothing does, the lines end where the content does.
+ */
+function followsInFlow(box, container) {
+    for (let at = box; at !== container && at.parent; at = at.parent) {
+        const siblings = at.parent.children;
+        for (let i = siblings.indexOf(at) + 1; i < siblings.length; i += 1) {
+            const next = siblings[i];
+            if (next.outOfFlow || next.isFloat || makesNothing(next))
+                continue;
+            return true;
+        }
+    }
+    return false;
+}
+/** Whether a box in flow makes neither a line nor a height of its own: a
+ *  block of phantom lines — the rest of an inline box a block broke — with
+ *  no edge or height to part it, which puts no clamp point after the line
+ *  before it. */
+function makesNothing(box) {
+    if (box.kind === 'text')
+        return makesNoLine(box);
+    if (box.kind === 'inline')
+        return phantom(box) !== 0;
+    if (box.kind !== 'block' || establishesBFC(box))
+        return false;
+    const style = box.style;
+    if (style.height !== AUTO ||
+        style.minHeight !== AUTO ||
+        !noLength(style.paddingTop) ||
+        !noLength(style.paddingBottom) ||
+        hasBorder(style.borderTopStyle, style.borderTopWidth) ||
+        hasBorder(style.borderBottomStyle, style.borderBottomWidth)) {
+        return false;
+    }
+    for (const child of box.children) {
+        if (child.outOfFlow || child.isFloat)
+            continue;
+        if (!makesNothing(child))
+            return false;
+    }
+    return true;
+}
+/** Whether a `::first-line` style sets its line's text otherwise than its
+ *  block's: in another face, size or line height, or spaced apart. */
+function setsFonts(line, block) {
+    return (line.fontFamily !== block.fontFamily ||
+        line.fontSize !== block.fontSize ||
+        line.fontWeight !== block.fontWeight ||
+        line.fontStyle !== block.fontStyle ||
+        line.lineHeight !== block.lineHeight ||
+        line.lineHeightIsLength !== block.lineHeightIsLength ||
+        line.letterSpacing !== block.letterSpacing ||
+        line.fontVariantCaps !== block.fontVariantCaps ||
+        line.fontVariantNumeric !== block.fontVariantNumeric ||
+        line.fontVariantLigatures !== block.fontVariantLigatures ||
+        line.fontVariantPosition !== block.fontVariantPosition ||
+        line.fontKerning !== block.fontKerning ||
+        line.fontFeatureSettings !== block.fontFeatureSettings);
+}
+/** `::first-line` styles handed down to the first child in flow of a box
+ *  that has one, whose first line is the box's (`layoutChildren`). */
+const HANDED = new WeakMap();
+/** The `::first-line` style a box's first line takes: its own, or one an
+ *  ancestor handed it. */
+function firstLineOf(box) {
+    return FIRST_LINE.get(box) ?? HANDED.get(box) ?? null;
+}
 /** Size every atomic in an inline context. */
 function sizeAtomics(box, ctx, contentWidth) {
     for (const child of box.children) {
@@ -198,20 +1044,171 @@ function layoutAtomic(box, ctx, availableWidth) {
         return;
     }
     const width = shrinkToFitWidth(box, ctx, availableWidth);
+    layoutOwn(box, ctx, width);
+}
+/**
+ * Lay out a box that sizes itself — a float, an inline-block, an absolute
+ * box — at its own width, where nothing outside it reaches in: or, where
+ * this pass has already laid it out at that width with the same edges,
+ * leave it as it was and move it back to where a layout puts it.
+ *
+ * Measuring a box's content lays its content out, and so a float in a
+ * float was laid out twice a level — as its parent measured, and as its
+ * parent was laid out at the width it measured — and a hundred of them,
+ * the markup of a broken page, never finished. What a caller does to the
+ * box after its layout is move it, and stretch its height, which is put
+ * back; its own, and its content's, are the layout's.
+ */
+function layoutOwn(box, ctx, width) {
+    const laid = LAID_OWN.get(box);
+    if (laid !== undefined &&
+        laid.ctx === ctx &&
+        // and nothing, a probe of its content, has laid it out since
+        laid.serial === box.layoutSerial &&
+        laid.width === width &&
+        // NaN where no height is a base, which `===` would never find again
+        Object.is(laid.base, box.percentHeightBase) &&
+        laid.padTop === box.padTop &&
+        laid.padRight === box.padRight &&
+        laid.padBottom === box.padBottom &&
+        laid.padLeft === box.padLeft &&
+        // and was put somewhere it can be moved back from: a right float in a
+        // content measured at no width limit stands at an infinite x, and
+        // moved back by it, came out at NaN
+        Number.isFinite(box.x) &&
+        Number.isFinite(box.y)) {
+        box.height = laid.height;
+        moveTo(box, 0, 0);
+        return;
+    }
     layoutInternals(box, ctx, width, 0, 0);
+    LAID_OWN.set(box, {
+        ctx,
+        serial: box.layoutSerial,
+        width,
+        base: box.percentHeightBase,
+        padTop: box.padTop,
+        padRight: box.padRight,
+        padBottom: box.padBottom,
+        padLeft: box.padLeft,
+        height: box.height,
+    });
 }
-function layoutBlockLevel(box, ctx, outerFloats, contentLeft, y, containingWidth) {
-    resolveEdges(box, containingWidth);
+/** Every box's layout counted, for `Box.layoutSerial`. */
+let layoutSerial = 0;
+/**
+ * Whether a box's layout is one this pass made at `width`, with the same
+ * edges and the same height to take percentages of, and nothing has laid
+ * it out since (`keep`): what a table in a table in a table is asked for
+ * again at every level, and at the same width each time. Its height is put
+ * back, where a caller may have stretched it; where it stands is the
+ * caller's to move it to.
+ */
+function kept(box, ctx, width) {
+    const laid = LAID_OWN.get(box);
+    if (laid === undefined ||
+        laid.ctx !== ctx ||
+        laid.serial !== box.layoutSerial ||
+        laid.width !== width ||
+        !Object.is(laid.base, box.percentHeightBase) ||
+        laid.padTop !== box.padTop ||
+        laid.padRight !== box.padRight ||
+        laid.padBottom !== box.padBottom ||
+        laid.padLeft !== box.padLeft ||
+        !Number.isFinite(box.x) ||
+        !Number.isFinite(box.y)) {
+        return false;
+    }
+    box.height = laid.height;
+    return true;
+}
+/** Note the layout a box was just given, at `width`, for `kept`. */
+function keep(box, ctx, width) {
+    LAID_OWN.set(box, {
+        ctx,
+        serial: box.layoutSerial,
+        width,
+        base: box.percentHeightBase,
+        padTop: box.padTop,
+        padRight: box.padRight,
+        padBottom: box.padBottom,
+        padLeft: box.padLeft,
+        height: box.height,
+    });
+}
+/** What `layoutOwn` laid each box out at, and in which pass. */
+const LAID_OWN = new WeakMap();
+function layoutBlockLevel(box, ctx, outerFloats, contentLeft, y, containingWidth, 
+/** What percentages are of: the containing block's width, where the
+ *  room is narrower than it beside floats */
+percentBase = containingWidth) {
+    resolveEdges(box, percentBase);
     if (box.kind === 'replaced') {
-        sizeReplaced(box, containingWidth);
+        sizeReplaced(box, percentBase, containingWidth);
         placeBlock(box, contentLeft, y, containingWidth);
         return;
     }
-    const width = blockWidth(box, containingWidth);
+    const width = blockWidth(box, containingWidth, percentBase, ctx);
+    if (box.kind === 'table' && kept(box, ctx, width)) {
+        // laid out at this width earlier in the pass, and not since: put where
+        // a layout would put it, and moved there whole
+        const laid = box.width;
+        const x = box.x;
+        const top = box.y;
+        box.width = width;
+        placeBlock(box, contentLeft, y, containingWidth);
+        if (laid !== width && Number.isFinite(containingWidth)) {
+            box.width = laid;
+            placeBlock(box, contentLeft, y, containingWidth);
+        }
+        box.width = laid;
+        const to = { x: box.x, y: box.y };
+        box.x = x;
+        box.y = top;
+        moveTo(box, to.x, to.y);
+        return;
+    }
     box.width = width;
     placeBlock(box, contentLeft, y, containingWidth);
     layoutInternals(box, ctx, width, box.x, box.y, outerFloats);
+    if (box.kind === 'table' &&
+        box.width !== width &&
+        Number.isFinite(containingWidth)) {
+        // a table shrinks to its columns once it is laid out, where it was
+        // placed as wide as its room: placed again, its auto margins centre it
+        // — in a room that has a width, and not in the unbounded one a
+        // shrink-to-fit probe lays it out in
+        const x = box.x;
+        placeBlock(box, contentLeft, y, containingWidth);
+        const dx = box.x - x;
+        box.x = x;
+        translate(box, dx, 0);
+    }
+    if (box.kind === 'table')
+        keep(box, ctx, width);
 }
+/**
+ * Lay a block-level box out as a block in a containing block of a width,
+ * at its own `width` or at the room its margins leave, with the offset its
+ * margins give it; the caller moves it into place. What a table's caption
+ * is, in the box around the table.
+ */
+export function layoutBlockIn(box, ctx, containingWidth) {
+    resolveEdges(box, containingWidth);
+    const width = blockWidth(box, containingWidth, containingWidth, ctx);
+    box.width = width;
+    placeBlock(box, 0, 0, containingWidth);
+    layoutInternals(box, ctx, width, box.x, 0);
+}
+/**
+ * The width a min-content probe lays a box out at: none at all. Every line
+ * breaks at every opportunity there, and the widest is the longest word —
+ * which is what both text engines answer at zero; react-x11's CoreText
+ * engine answers it at zero only, and at a pixel breaks inside words, so a
+ * probe a pixel wide gave every table cell on macOS a min-content a
+ * character or two wide.
+ */
+export const MIN_CONTENT_PROBE = 0;
 /**
  * Lay a box out at a width and report the widest thing it drew.
  *
@@ -221,12 +1218,19 @@ function layoutBlockLevel(box, ctx, outerFloats, contentLeft, y, containingWidth
  * *is* unbounded: it fills its containing block, and its containing block was
  * `Infinity`. The answer has to come from what the content came to, which is
  * exactly what `intrinsicWidth` walks.
+ *
+ * A box with a width of its own answers with it, as its contribution to
+ * whatever is sizing it — unless `content` asks for what the content
+ * alone came to, which is how a table cell's is taken: its `width` is
+ * weighed apart, and answered with the width the probe laid it out at,
+ * a cell set to 10% measured no wider than its padding.
  */
-export function measureIntrinsicWidth(box, ctx, available) {
+export function measureIntrinsicWidth(box, ctx, available, content = false) {
     ctx.layoutSubtree(box, available);
     const specified = box.style.width;
-    if (specified !== AUTO && Number.isFinite(box.width))
+    if (!content && specified !== AUTO && Number.isFinite(box.width)) {
         return box.width;
+    }
     return intrinsicWidth(box) + box.horizontalExtra;
 }
 /**
@@ -253,12 +1257,73 @@ function layoutSubtree(box, ctx, width) {
  * float context, passed only when this box does *not* establish one of its
  * own — which is the difference between text flowing beside a float that
  * started in an earlier sibling and text that starts below it.
+ *
+ * A line-clamp container's clamp is carried through its formatting context
+ * (`Clamp`), and a box that makes one of its own is laid out outside it.
  */
 function layoutInternals(box, ctx, borderBoxWidth, x, y, outerFloats) {
+    const outer = ctx.clamp ?? null;
+    const lines = box.style.lineClamp;
+    if (lines === null && (outer === null || !establishesBFC(box))) {
+        layoutBox(box, ctx, borderBoxWidth, x, y, outerFloats);
+        return;
+    }
+    if (lines === null) {
+        ctx.clamp = null;
+        layoutBox(box, ctx, borderBoxWidth, x, y, outerFloats);
+    }
+    else {
+        layoutClamped(box, ctx, lines, borderBoxWidth, x, y, outerFloats);
+    }
+    ctx.clamp = outer;
+}
+/**
+ * A line-clamp container, laid out with its clamp. `line-clamp: auto`'s
+ * clamp point is after the lines its height holds, where it has a height
+ * of its own (CSS Overflow 4, 5.3.1): the content is laid out whole to
+ * count them, and again cut after them, where they are not all of it.
+ */
+function layoutClamped(box, ctx, lines, borderBoxWidth, x, y, outerFloats) {
+    const floor = lines === Infinity ? autoFloor(box, y) : Infinity;
+    if (floor === Infinity) {
+        // counted against the number, or where `auto` has no height to fill,
+        // against none: the boxes a clamp hid before show again
+        ctx.clamp = { box, left: lines, done: false, fit: null };
+        layoutBox(box, ctx, borderBoxWidth, x, y, outerFloats);
+        return;
+    }
+    const fit = { floor, lines: 0, over: false };
+    ctx.clamp = { box, left: Infinity, done: false, fit };
+    const positioned = ctx.positioned.length;
+    layoutBox(box, ctx, borderBoxWidth, x, y, outerFloats);
+    if (!fit.over)
+        return;
+    ctx.positioned.length = positioned;
+    ctx.clamp = { box, left: fit.lines, done: fit.lines === 0, fit: null };
+    layoutBox(box, ctx, borderBoxWidth, x, y, outerFloats);
+}
+/** Where an `auto` clamp's lines have to end by, in document coordinates:
+ *  the content bottom of a box as tall as its `height`, or `max-height`,
+ *  lets it be — Infinity where neither is set. */
+function autoFloor(box, y) {
+    const set = resolveOrNull(box.style.height, box.percentHeightBase);
+    const outer = set === null
+        ? Infinity
+        : box.style.boxSizing === 'border-box'
+            ? Math.max(set, box.verticalExtra)
+            : set + box.verticalExtra;
+    const height = clampHeight(box, outer);
+    return Number.isFinite(height)
+        ? y + height - box.padBottom - box.borderBottom
+        : Infinity;
+}
+function layoutBox(box, ctx, borderBoxWidth, x, y, outerFloats) {
+    box.layoutSerial = ++layoutSerial;
     box.x = x;
     box.y = y;
     box.width = borderBoxWidth;
     const contentWidth = box.contentWidth;
+    givePercentBase(box, percentBaseInside(box));
     if (box.kind === 'flex') {
         const height = layoutFlex(box, ctx, contentWidth);
         finishHeight(box, height);
@@ -267,28 +1332,63 @@ function layoutInternals(box, ctx, borderBoxWidth, x, y, outerFloats) {
     if (box.kind === 'table') {
         const height = layoutTable(box, ctx, contentWidth);
         finishHeight(box, height);
+        finishCaptions(box);
         return;
     }
     const ownFloats = establishesBFC(box) || !outerFloats;
     const floats = ownFloats
         ? new FloatContext(box.contentX, box.contentX + contentWidth)
         : outerFloats;
+    // the line a pass before gave a marker, which this one may not
+    if (box.marker)
+        box.lines = null;
     const flow = layoutChildren(box, ctx, floats, box.contentY, contentWidth);
+    // A list item with a marker and no line holds one, the marker's, a line
+    // of its own face tall: an empty `<li>` is a line tall in a browser, and
+    // an inline-block around one sits on its marker's baseline.
+    let height = flow.height;
+    if (box.marker && ctx.fonts && !firstLineIn(box)) {
+        const strut = strutOf(ctx.fonts, box.style);
+        const line = strut.ascent + strut.descent;
+        box.lines = [
+            {
+                x: box.contentX,
+                y: box.contentY,
+                width: 0,
+                height: line,
+                baseline: strut.ascent,
+                texts: [],
+                textStart: box.subtreeTextStart,
+                textEnd: box.subtreeTextStart,
+                atomics: [],
+            },
+        ];
+        height = Math.max(height, line);
+    }
     // A box that establishes a formatting context contains its own floats, so
     // it has to be at least as tall as they are. One that does not, does not —
     // that is the classic "collapsed parent" every author has met.
-    const withFloats = ownFloats
-        ? Math.max(flow.height, floats.bottom === -Infinity ? 0 : floats.bottom - box.contentY)
-        : flow.height;
+    // Past a clamp point, a line-clamp container clips its floats rather
+    // than holding them (CSS Overflow 4, 5.3.1).
+    const clamped = ctx.clamp?.box === box && ctx.clamp.done;
+    const withFloats = ownFloats && !clamped
+        ? Math.max(height, floats.bottom === -Infinity ? 0 : floats.bottom - box.contentY)
+        : height;
     finishHeight(box, withFloats);
     // The margin that escaped through this box's bottom edge becomes part of
     // its own: the parent's flow loop reads `child.marginBottom` for the next
     // sibling's collapse, which is exactly where an escaped margin goes.
-    if (flow.hanging) {
-        box.marginBottom = collapseMargins(box.marginBottom, flow.hanging);
+    // Kept as a strut too, for the next sibling's margins to collapse with
+    // all of the ones it came to rather than with their sum.
+    if (flow.hanging.pos || flow.hanging.neg) {
+        const bottom = join(flow.hanging, box.marginBottom);
+        box.bottomStrut = bottom;
+        box.marginBottom = marginOf(bottom);
     }
-    if (box.markerText)
-        layoutMarker(box, ctx);
+    else
+        box.bottomStrut = null;
+    if (box.marker)
+        layoutMarker(box, box.marker, ctx);
 }
 /** The first line box anywhere under a box, in layout order. */
 function firstLineIn(box) {
@@ -315,49 +1415,448 @@ function firstLineIn(box) {
  * content: it must not join the selection, or copying a list would paste a
  * bullet before every line.
  */
-function layoutMarker(box, ctx) {
+const MARKER_GAPS = new WeakMap();
+/**
+ * The gap after a marker, a space's width in its face: kept per face and
+ * fonts, since a list is a column of markers set alike, and laying the
+ * space out for each of them was most of what a long document's markers
+ * cost.
+ */
+function markerGap(fonts, face) {
+    let gaps = MARKER_GAPS.get(fonts);
+    if (!gaps)
+        MARKER_GAPS.set(fonts, (gaps = new Map()));
+    const key = `${face.family}\u0001${face.size}\u0001${String(face.weight ?? '')}\u0001${String(face.style ?? '')}`;
+    let gap = gaps.get(key);
+    if (gap === undefined) {
+        gap = fonts.layout([{ text: '\u00a0', ...face }], face, {}).width;
+        gaps.set(key, gap);
+    }
+    return gap;
+}
+function layoutMarker(box, marker, ctx) {
     const fonts = ctx.fonts;
     if (!fonts)
         return;
     const style = box.style;
-    const layout = fonts.layout([
-        {
-            text: box.markerText,
-            family: style.fontFamily,
-            size: style.fontSize,
-            color: style.color,
-        },
-    ], { family: style.fontFamily, size: style.fontSize, color: style.color }, {});
-    box.markerLayout = layout;
-    const gap = Math.round(style.fontSize * 0.4);
+    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
+        const first = firstLineIn(box);
+        marker.y = first
+            ? first.y + first.baseline - marker.image.height
+            : box.contentY;
+        const gap = Math.round(style.fontSize * 0.4);
+        // at the start of the line, which is its right in a right-to-left item
+        marker.x =
+            style.direction === 'rtl'
+                ? box.contentX + box.contentWidth + gap
+                : box.contentX - gap - marker.image.width;
+        return;
+    }
+    // in its own style where a `::marker` rule gives it one — the colour and
+    // the face a bullet or a number is set in — and the item's where not
+    const set = marker.style ?? style;
+    const face = {
+        family: set.fontFamily,
+        size: set.fontSize,
+        color: set.color,
+        ...(marker.style
+            ? {
+                weight: set.fontWeight,
+                style: set.fontStyle === 'normal'
+                    ? 'normal'
+                    : 'italic',
+            }
+            : null),
+    };
+    // set in a line of the item's own height, so that where the item has no
+    // line of its own the marker stands where its first would have been
+    // in the item's direction, which puts a number's full stop on its left
+    // in a right-to-left list, as the bidi algorithm has it
+    const layout = fonts.layout([{ text: marker.text, ...face }], face, {
+        lineHeight: lineHeightMultiplier(fonts, style),
+        direction: style.direction,
+    });
+    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);
     // 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
     // only at `box.lines` puts the marker of every such item at the content
-    // top, which reads as a missing bullet rather than a misplaced one.
+    // top, which reads as a missing bullet rather than a misplaced one. An
+    // empty item is still a list item, and its marker a line at its top.
     const first = firstLineIn(box);
-    const baselineY = first ? first.y + first.baseline : box.contentY;
     const own = layout.lines[0];
-    box.markerY = baselineY - (own ? own.baseline : style.fontSize);
-    box.markerX =
+    marker.y = first
+        ? first.y + first.baseline - (own ? own.baseline : style.fontSize)
+        : box.contentY;
+    marker.x =
         style.listStylePosition === 'inside'
             ? box.contentX
-            : box.contentX - gap - layout.width;
+            : style.direction === 'rtl'
+                ? box.contentX + box.contentWidth + gap
+                : box.contentX - gap - layout.width;
+}
+/**
+ * The height a percentage `height` inside a box resolves against: its own
+ * content height, where that is set rather than grown from its content —
+ * a length, or a percentage that itself resolved (CSS 2.1 10.5). NaN, and
+ * so `auto`, where it is not. An anonymous box is no containing block for
+ * this (9.2.1.1) and hands on its parent's.
+ *
+ * The root element's is the viewport's height, so `html, body { height:
+ * 100% }` — which mail sets as often as not — is a window tall, as in a
+ * browser; the document is as tall as what overflows it, so a message
+ * longer than the window is not cut off (`layoutDocument`).
+ */
+export function percentBaseInside(box) {
+    const flexed = FLEXED_HEIGHT.get(box);
+    if (flexed !== undefined)
+        return flexed;
+    if (!box.el && !box.pseudo)
+        return box.percentHeightBase;
+    const resolved = specifiedHeight(box);
+    if (resolved === null) {
+        // a height `aspect-ratio` gives from a width is as definite as the width
+        const ratio = ratioHeight(box);
+        if (ratio === null)
+            return NaN;
+        return Math.max(0, clampHeight(box, ratio + box.verticalExtra) - box.verticalExtra);
+    }
+    const set = Math.max(0, resolved);
+    const borderBox = box.style.boxSizing === 'border-box'
+        ? Math.max(set, box.verticalExtra)
+        : set + box.verticalExtra;
+    return Math.max(0, clampHeight(box, borderBox) - box.verticalExtra);
+}
+/** Whether anything in a box takes a percentage of a height: what a height
+ *  a flex or grid layout makes definite changes. Kept for the tree's life. */
+export function percentHeightsIn(box) {
+    let found = PERCENT_HEIGHTS.get(box);
+    if (found === undefined) {
+        found = false;
+        // a column's basis is a height too
+        const column = box.kind === 'flex' &&
+            !box.style.grid &&
+            box.style.flexDirection.startsWith('column');
+        for (const child of box.children) {
+            const style = child.style;
+            if (isPct(style.height) ||
+                isPct(style.minHeight) ||
+                (style.maxHeight !== 'none' && isPct(style.maxHeight)) ||
+                (column && style.flexBasis !== 'content' && isPct(style.flexBasis)) ||
+                percentHeightsIn(child)) {
+                found = true;
+                break;
+            }
+        }
+        PERCENT_HEIGHTS.set(box, found);
+    }
+    return found;
+}
+const PERCENT_HEIGHTS = new WeakMap();
+/**
+ * A box's own height, where it has one, as `box-sizing` measures it: a
+ * length, a percentage of a height that resolves, or `stretch`'s, and else
+ * none, which is `auto`.
+ */
+function specifiedHeight(box) {
+    const style = box.style;
+    if (style.heightKeyword === 'stretch') {
+        const outer = stretchHeight(box);
+        if (outer === null)
+            return null;
+        return style.boxSizing === 'border-box'
+            ? outer
+            : Math.max(0, outer - box.verticalExtra);
+    }
+    return resolveOrNull(style.height, box.percentHeightBase);
+}
+/** Where an absolutely positioned box's `stretch` height starts in its
+ *  containing block: its `top`, or its static position where it has
+ *  neither offset (`layoutPositioned`). */
+const STRETCH_TOP = new WeakMap();
+/**
+ * A replaced box's `stretch` sizes, which `sizeReplaced` knows nothing of:
+ * the width it was given for one across, the height its offsets leave for
+ * one down, and through its ratio, the other where that is `auto`.
+ */
+function stretchReplaced(box, across, containingWidth) {
+    const style = box.style;
+    const down = style.heightKeyword === 'stretch' ? stretchHeight(box) : null;
+    if (across === null && down === null)
+        return;
+    if (across !== null)
+        box.width = across;
+    if (down !== null)
+        box.height = clampHeight(box, down);
+    if (across !== null && down === null && style.height === AUTO) {
+        const tall = heightThroughRatio(box, across);
+        if (tall !== null)
+            box.height = clampHeight(box, tall);
+    }
+    else if (down !== null && across === null && style.width === AUTO) {
+        const wide = widthThroughRatio(box, box.height);
+        if (wide !== null)
+            box.width = clampWidth(box, wide, containingWidth);
+    }
+}
+/**
+ * The border-box height `stretch` makes of a box (CSS Sizing 3, 4.2): what
+ * its margins leave of the height its percentages are of, where that is
+ * definite, and else none. A margin of an in-flow block that its parent's
+ * border or padding does not part from the parent's edge, in a parent that
+ * is no formatting context of its own, counts as none, as the margin would
+ * collapse with the parent's.
+ */
+function stretchHeight(box) {
+    const base = box.percentHeightBase;
+    if (!Number.isFinite(base))
+        return null;
+    const style = box.style;
+    if (style.position === 'absolute' || style.position === 'fixed') {
+        // what its offsets leave of its containing block, an `auto` one none
+        // — or its static position, where both are (`layoutPositioned`)
+        const top = STRETCH_TOP.get(box) ?? resolveOrNull(style.top, base) ?? 0;
+        const bottom = resolveOrNull(style.bottom, base) ?? 0;
+        return Math.max(box.verticalExtra, base - top - bottom - box.marginTop - box.marginBottom);
+    }
+    const parent = box.parent;
+    const inFlow = parent !== null &&
+        !box.outOfFlow &&
+        !box.isFloat &&
+        box.kind !== 'replaced' &&
+        !isInlineLevel(box) &&
+        !establishesBFC(parent);
+    const top = inFlow && !parent.borderTop && !parent.padTop ? 0 : box.marginTop;
+    const bottom = inFlow && !parent.borderBottom && !parent.padBottom ? 0 : box.marginBottom;
+    return Math.max(box.verticalExtra, base - top - bottom);
+}
+/**
+ * The content height a flex layout made definite for an item — a stretched
+ * item's, a flexed one's in a container of a definite height (CSS Flexbox
+ * 9.8) — which what is in it takes its percentages of. Set by `flex.ts`
+ * for the item's own layout alone.
+ */
+export const FLEXED_HEIGHT = new WeakMap();
+/**
+ * Hand a box's children the height their percentages resolve against —
+ * through inline boxes, which are no containing block, to the inline-block
+ * or image in them. Nearly every box has none to give, and its children
+ * hold NaN until it has, so it visits them only when there is a height, or
+ * was one on the last pass: visiting every child of every block on every
+ * pass cost more than laying out a table.
+ */
+function givePercentBase(box, base) {
+    const given = !Number.isNaN(base);
+    if (!given && !box.gavePercentBase)
+        return;
+    box.gavePercentBase = given;
+    handPercentBase(box, base);
 }
+function handPercentBase(box, base) {
+    for (const child of box.children) {
+        child.percentHeightBase = base;
+        if (child.kind === 'inline')
+            handPercentBase(child, base);
+    }
+}
+/**
+ * The content height `aspect-ratio` gives a box whose height is `auto`, from
+ * its width (CSS Sizing 4, 5.1): the ratio is of the box its `box-sizing`
+ * names, which is the border box in everything Tailwind writes. Null where
+ * it has none, or a height of its own; a replaced box is sized apart.
+ */
+export function ratioHeight(box) {
+    const ratio = boxRatio(box);
+    if (!ratio)
+        return null;
+    if (resolveOrNull(box.style.height, box.percentHeightBase) !== null) {
+        return null;
+    }
+    return ratio.border
+        ? Math.max(0, box.width / ratio.ratio - box.verticalExtra)
+        : Math.max(0, box.contentWidth / ratio.ratio);
+}
+/**
+ * A box's `aspect-ratio` where it is not replaced, and whether it is of its
+ * border box — a ratio written alone under `box-sizing: border-box` — or
+ * of its content box, as one written `auto` with it is whatever the
+ * `box-sizing` (CSS Sizing 4, 5.1).
+ */
+export function boxRatio(box) {
+    const aspect = box.style.aspectRatio;
+    if (!aspect || box.kind === 'replaced' || !(aspect.ratio > 0))
+        return null;
+    return {
+        ratio: aspect.ratio,
+        border: box.style.boxSizing === 'border-box' && !aspect.auto,
+    };
+}
+/** A border-box height through a box's ratio into its border-box width,
+ *  or null where the box has no ratio of its own. */
+export function widthFromHeight(box, height) {
+    const ratio = boxRatio(box);
+    return ratio ? acrossRatio(box, ratio, height) : null;
+}
+/** A replaced element's ratio: its `aspect-ratio`, unless that says `auto`
+ *  and it has one of its own, as `sizeReplaced` takes it. */
+export function replacedRatio(box) {
+    const own = box.intrinsic;
+    const aspect = box.style.aspectRatio;
+    const natural = own ? own.ratio : 0;
+    return aspect && !(aspect.auto && natural > 0) ? aspect.ratio : natural;
+}
+/** A border-box height through any box's ratio into its border-box width
+ *  — a replaced element's is of its content box — or null where it has
+ *  none. */
+export function widthThroughRatio(box, height) {
+    if (box.kind !== 'replaced')
+        return widthFromHeight(box, height);
+    const ratio = replacedRatio(box);
+    return ratio > 0
+        ? Math.max(0, height - box.verticalExtra) * ratio + box.horizontalExtra
+        : null;
+}
+/** A border-box width through any box's ratio into its border-box height,
+ *  or null where it has none. */
+export function heightThroughRatio(box, width) {
+    if (box.kind !== 'replaced')
+        return heightFromWidth(box, width);
+    const ratio = replacedRatio(box);
+    return ratio > 0
+        ? Math.max(0, width - box.horizontalExtra) / ratio + box.verticalExtra
+        : null;
+}
+/** A border-box width through a box's ratio into its border-box height,
+ *  or null where the box has no ratio of its own. */
+export function heightFromWidth(box, width) {
+    const ratio = boxRatio(box);
+    if (!ratio)
+        return null;
+    return ratio.border
+        ? width / ratio.ratio
+        : Math.max(0, width - box.horizontalExtra) / ratio.ratio +
+            box.verticalExtra;
+}
+/** A border-box height through a box's ratio into its border-box width. */
+function acrossRatio(box, ratio, height) {
+    return ratio.border
+        ? height * ratio.ratio
+        : Math.max(0, height - box.verticalExtra) * ratio.ratio +
+            box.horizontalExtra;
+}
+/**
+ * The border-box width `aspect-ratio` gives a box whose width is `auto`
+ * from a height of its own, within its least and greatest heights (CSS
+ * Sizing 4, 5.1): a block is that wide, not as wide as its room — and so
+ * is one whose width is its content's, `min-content` or `fit-content`, as
+ * its content is that height through its ratio (5.3). Null where it has
+ * no ratio, no height or a length for a width.
+ */
+export function ratioWidth(box) {
+    const ratio = boxRatio(box);
+    const style = box.style;
+    if (!ratio || style.width !== AUTO)
+        return null;
+    const set = resolveOrNull(style.height, box.percentHeightBase);
+    if (set === null)
+        return null;
+    const outer = clampHeight(box, style.boxSizing === 'border-box'
+        ? Math.max(set, box.verticalExtra)
+        : set + box.verticalExtra);
+    return acrossRatio(box, ratio, outer);
+}
+/**
+ * A width its ratio gave a box, no narrower than its content at its
+ * narrowest where its least width is `auto` and it shows what overflows
+ * it — the automatic minimum of a box with a ratio (5.2) — though no
+ * wider for that than its greatest width.
+ */
+function ratioMinimum(box, width, containingWidth, ctx) {
+    const style = box.style;
+    if (!ctx ||
+        style.minWidth !== AUTO ||
+        style.minWidthKeyword ||
+        scrolls(style)) {
+        return width;
+    }
+    if (box.intrinsicMinContent < 0) {
+        const saved = box.lines;
+        box.intrinsicMinContent = measureIntrinsicWidth(box, ctx, MIN_CONTENT_PROBE);
+        box.lines = saved;
+        resolveEdges(box, containingWidth);
+    }
+    const max = style.maxWidth === 'none'
+        ? Infinity
+        : (resolveOrNull(style.maxWidth, containingWidth) ?? Infinity) +
+            (style.boxSizing === 'border-box' ? 0 : box.horizontalExtra);
+    return Math.max(width, Math.min(box.intrinsicMinContent, max));
+}
+/** A table cell's height as its content came to, border box, apart from a
+ *  height it sets: what `vertical-align` moves in the cell (`table.ts`). */
+export const CELL_CONTENT = new WeakMap();
 function finishHeight(box, contentHeight) {
-    const specified = resolveOrNull(box.style.height, NaN);
+    // as though it held nothing, under size containment
+    if (contained(box, CONTAIN_SIZE)) {
+        contentHeight = box.style.containIntrinsicHeight ?? 0;
+    }
+    if (box.kind === 'table-cell') {
+        CELL_CONTENT.set(box, contentHeight + box.verticalExtra);
+    }
+    const set = specifiedHeight(box);
+    // at least zero: a `calc()` may come to less
+    const specified = set === null ? null : Math.max(0, set);
+    if (specified !== null && box.kind === 'table') {
+        // A table's height is a least one, which `layoutTable` has shared out
+        // to its rows: one set shorter than they are leaves them their height
+        // (CSS 2.1 17.5.3). Taken as the table's, it ended its background
+        // over its rows, and a float after it went up beside them.
+        const outer = box.style.boxSizing === 'border-box'
+            ? specified
+            : specified + box.verticalExtra;
+        box.height = Math.max(clampHeight(box, outer), contentHeight + box.verticalExtra);
+        return;
+    }
+    if (specified === null && box.style.aspectRatio) {
+        const ratio = ratioHeight(box);
+        if (ratio !== null) {
+            // the ratio's height, grown to what the box holds unless it clips it
+            // or has a least height of its own (5.2: the automatic minimum of a
+            // box with a ratio is its content, and `min-height: 0` is none)
+            const automatic = box.style.minHeight === AUTO &&
+                box.style.minHeightKeyword === null &&
+                !scrolls(box.style);
+            contentHeight = automatic ? Math.max(ratio, contentHeight) : ratio;
+        }
+    }
     const height = specified ?? contentHeight;
     const borderBox = box.style.boxSizing === 'border-box' && specified !== null
         ? Math.max(height, box.verticalExtra)
         : height + box.verticalExtra;
     box.height = clampHeight(box, borderBox);
 }
-function clampHeight(box, height) {
+export function clampHeight(box, height) {
     let out = height;
-    const min = resolveOrNull(box.style.minHeight, NaN);
+    const base = box.percentHeightBase;
+    // a percentage of a height nothing sets is zero for a minimum (CSS 2.1
+    // 10.7), which leaves a `calc()` its pixels; so is `stretch`, which is a
+    // border-box height where it is one
+    if (box.style.maxHeightKeyword === 'stretch') {
+        out = Math.min(out, stretchHeight(box) ?? Infinity);
+    }
+    if (box.style.minHeightKeyword === 'stretch') {
+        out = Math.max(out, stretchHeight(box) ?? 0);
+    }
+    const min = box.style.minHeight === AUTO
+        ? 0
+        : resolve(box.style.minHeight, Number.isFinite(base) ? base : 0);
     const max = box.style.maxHeight === 'none'
         ? null
-        : resolveOrNull(box.style.maxHeight, NaN);
+        : resolveOrNull(box.style.maxHeight, base);
     if (max !== null)
         out = Math.min(out, max + (box.style.boxSizing === 'border-box' ? 0 : box.verticalExtra));
     if (min !== null)
@@ -370,30 +1869,131 @@ function placeBlock(box, contentLeft, y, containingWidth) {
     const leftAuto = style.marginLeft === AUTO;
     const rightAuto = style.marginRight === AUTO;
     const slack = containingWidth - box.width - box.marginLeft - box.marginRight;
+    // what the width and the margins do not add up to goes to the margin at
+    // the end: the right one, or in a right-to-left containing block the
+    // left one, and a box too wide overflows there (CSS 2.1 10.3.3)
+    const rtl = box.parent?.style.direction === 'rtl';
+    // an alignment around it places a box its margins do not (HTML's
+    // `<center>` and `align`)
+    const aligned = leftAuto || rightAuto ? null : box.parent?.style.alignBlocks;
     let left = contentLeft + box.marginLeft;
+    // In the unbounded room a shrink-to-fit probe lays a box out in, there is
+    // no slack to share: half of an infinite one put an auto-margined box at
+    // x = Infinity, and the pass after moved it from there by a finite amount
+    // — NaN, which went up every ink bound above it and left a whole article
+    // unpainted.
+    if (!Number.isFinite(slack)) {
+        box.x = left;
+        box.y = y;
+        return;
+    }
     if (slack > 0) {
         if (leftAuto && rightAuto)
             left = contentLeft + slack / 2 + box.marginLeft;
-        else if (leftAuto)
+        else if (aligned) {
+            if (aligned === 'center')
+                left += slack / 2;
+            else if (aligned === 'right')
+                left += slack;
+        }
+        else if (leftAuto || (rtl && !rightAuto)) {
             left = contentLeft + slack + box.marginLeft;
+        }
+    }
+    else if (rtl) {
+        left = contentLeft + slack + box.marginLeft;
     }
     box.x = left;
     box.y = y;
 }
-/** The border-box width of an in-flow block-level box. */
-function blockWidth(box, containingWidth) {
+/** The border-box width of an in-flow block-level box: the room its
+ *  margins leave, a length, or an intrinsic size where `ctx` is there to
+ *  measure it with. */
+function blockWidth(box, containingWidth, percentBase = containingWidth, ctx) {
     const style = box.style;
     const available = containingWidth - box.marginLeft - box.marginRight;
     if (style.width === AUTO) {
-        return clampWidth(box, Math.max(0, available), containingWidth);
+        // a width its height gives it through its ratio
+        const fromRatio = ratioWidth(box);
+        if (fromRatio !== null) {
+            const clamped = clampWidth(box, fromRatio, percentBase, ctx);
+            return ratioMinimum(box, clamped, percentBase, ctx);
+        }
+        const room = Math.max(0, available);
+        const width = style.widthKeyword && ctx
+            ? contentSizedWidth(box, ctx, style.widthKeyword, room, percentBase)
+            : room;
+        return clampWidth(box, transferredWidth(box, width), percentBase, ctx, containingWidth);
     }
-    const specified = resolve(style.width, containingWidth, 0);
+    // at least zero: a `calc()` may come to less
+    const specified = Math.max(0, resolve(style.width, percentBase, 0));
     const borderBox = style.boxSizing === 'border-box'
         ? Math.max(specified, box.horizontalExtra)
         : specified + box.horizontalExtra;
-    return clampWidth(box, borderBox, containingWidth);
+    return clampWidth(box, borderBox, percentBase, ctx, containingWidth);
+}
+/**
+ * A width a box with a ratio and no height of its own works out for itself
+ * within the least and greatest widths its least and greatest heights make
+ * through its ratio (CSS Sizing 4, 5.2) — those of its own winning where
+ * the two disagree, as `clampWidth` after this makes them. A block the
+ * room would stretch is no wider than its greatest height lets it be. A
+ * width a flex box or a grid gives an item is not, which is theirs.
+ */
+export function transferredWidth(box, width) {
+    const style = box.style;
+    const ratio = boxRatio(box);
+    if (!ratio || resolveOrNull(style.height, box.percentHeightBase) !== null) {
+        return width;
+    }
+    const heightOf = (len) => {
+        const px = resolveOrNull(len, box.percentHeightBase);
+        if (px === null || !Number.isFinite(px))
+            return null;
+        return style.boxSizing === 'border-box'
+            ? Math.max(px, box.verticalExtra)
+            : px + box.verticalExtra;
+    };
+    const maxH = style.maxHeight === 'none' ? null : heightOf(style.maxHeight);
+    const minH = style.minHeight === AUTO ? null : heightOf(style.minHeight);
+    let out = width;
+    if (maxH !== null)
+        out = Math.min(out, acrossRatio(box, ratio, maxH));
+    if (minH !== null)
+        out = Math.max(out, acrossRatio(box, ratio, minH));
+    return out;
+}
+/**
+ * A border-box height within what a box's ratio makes of its least and
+ * greatest widths: how a flex item's content size suggestion down a
+ * column is held (CSS Flexbox 4.5). Unchanged where it has no ratio.
+ */
+export function transferredHeight(box, height, containingWidth) {
+    const ratio = boxRatio(box);
+    if (!ratio)
+        return height;
+    const style = box.style;
+    const extra = style.boxSizing === 'border-box' ? 0 : box.horizontalExtra;
+    const down = (width) => heightFromWidth(box, width + extra);
+    let out = height;
+    if (style.maxWidth !== 'none') {
+        const most = resolveOrNull(style.maxWidth, containingWidth);
+        if (most !== null)
+            out = Math.min(out, down(most));
+    }
+    const least = style.minWidth === AUTO
+        ? null
+        : resolveOrNull(style.minWidth, containingWidth);
+    if (least !== null && least > 0)
+        out = Math.max(out, down(least));
+    return out;
 }
-function clampWidth(box, width, containingWidth) {
+/** A width within `min-width` and `max-width` — the minimum winning — the
+ *  intrinsic ones among them where `ctx` is there to measure them. */
+export function clampWidth(box, width, containingWidth, ctx, 
+/** The room a `stretch` limit fills, where it is less than the
+ *  containing block beside floats. */
+room = containingWidth) {
     const style = box.style;
     const extra = style.boxSizing === 'border-box' ? 0 : box.horizontalExtra;
     let out = width;
@@ -402,11 +2002,79 @@ function clampWidth(box, width, containingWidth) {
         : resolveOrNull(style.maxWidth, containingWidth);
     if (max !== null)
         out = Math.min(out, max + extra);
-    const min = resolveOrNull(style.minWidth, containingWidth);
+    if (style.maxWidthKeyword && ctx) {
+        out = Math.min(out, keywordWidth(box, ctx, style.maxWidthKeyword, containingWidth, room));
+    }
+    // `auto` is 0 but for a flex item, which `flex.ts` answers
+    const min = style.minWidth === AUTO
+        ? 0
+        : resolveOrNull(style.minWidth, containingWidth);
     if (min !== null)
         out = Math.max(out, min + extra);
+    if (style.minWidthKeyword && ctx) {
+        out = Math.max(out, keywordWidth(box, ctx, style.minWidthKeyword, containingWidth, room));
+    }
     return Math.max(0, 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,
+ *  so that it makes nothing for the ones that have none. */
+function keywordWidth(box, ctx, keyword, containingWidth, stretchRoom = containingWidth) {
+    const of = keyword === 'stretch' ? stretchRoom : containingWidth;
+    const room = Math.max(0, of - box.marginLeft - box.marginRight);
+    return contentSizedWidth(box, ctx, keyword, room, containingWidth);
+}
+/**
+ * A box's border-box width from an intrinsic size (CSS Sizing 3, 3.1): its
+ * max-content width, its min-content width, or `fit-content` — the
+ * max-content width where `available` holds it, and `available` where it
+ * does not, but never less than the min-content width. Each is measured
+ * once a box, as a table cell's are, and by laying the box out on its own,
+ * which resolves its edges against nothing: they are resolved again
+ * against `percentBase`, as its caller had them.
+ */
+export function contentSizedWidth(box, ctx, size, available, percentBase) {
+    // `stretch` is the room, whatever the content (CSS Sizing 4)
+    if (size === 'stretch')
+        return Math.max(0, available);
+    // a height of its own through a ratio is its content's width at any size
+    const fromRatio = ratioWidth(box);
+    if (fromRatio !== null)
+        return fromRatio;
+    // 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;
+    if (size === 'max-content')
+        return max;
+    const min = box.intrinsicMinContent;
+    if (size === 'min-content')
+        return min;
+    return Math.min(max, Math.max(min, fitRoom(box, size, available, percentBase)));
+}
+/** The room `fit-content` fits a box's content in: what its margins leave,
+ *  or `fit-content()`'s argument as a width of its own, of `percentBase`
+ *  where it is a percentage — an indefinite one leaving the content its
+ *  widest. */
+function fitRoom(box, size, available, percentBase) {
+    if (typeof size !== 'object')
+        return available;
+    const fit = Math.max(0, resolve(size.fit, percentBase, 0));
+    return box.style.boxSizing === 'border-box'
+        ? Math.max(fit, box.horizontalExtra)
+        : fit + box.horizontalExtra;
+}
 /**
  * Shrink-to-fit: the width a float, an inline-block or a positioned box with
  * `width: auto` takes.
@@ -419,21 +2087,219 @@ function clampWidth(box, width, containingWidth) {
  * overflows either way. The measured pass is thrown away; the caller lays the
  * box out again at the width this returns.
  */
-function shrinkToFitWidth(box, ctx, available) {
+function shrinkToFitWidth(box, ctx, available, 
+/** How far into the containing block the box's room starts: an
+ *  absolute box's offset, or its static position. */
+offset = 0) {
     const style = box.style;
     if (style.width !== AUTO) {
-        const specified = resolve(style.width, available, 0);
+        const specified = Math.max(0, resolve(style.width, available, 0));
         const borderBox = style.boxSizing === 'border-box'
             ? Math.max(specified, box.horizontalExtra)
             : specified + box.horizontalExtra;
-        return clampWidth(box, borderBox, available);
+        return clampWidth(box, borderBox, available, ctx);
+    }
+    // `stretch` fills the room its margins leave, as a block's `auto` does
+    if (style.widthKeyword === 'stretch') {
+        const room = available - offset - box.marginLeft - box.marginRight;
+        return clampWidth(box, Math.max(0, room), available, ctx);
+    }
+    // a width its height gives it through its ratio, as a block's
+    const fromRatio = ratioWidth(box);
+    if (fromRatio !== null) {
+        const clamped = clampWidth(box, fromRatio, available, ctx);
+        return ratioMinimum(box, clamped, available, ctx);
+    }
+    // `fit-content` is what shrink-to-fit is; the other two are not bounded
+    // by the room, or not by the longest line, and `fit-content()` by a room
+    // of its own
+    const keyword = style.widthKeyword;
+    if (keyword !== null && keyword !== 'fit-content') {
+        const width = contentSizedWidth(box, ctx, keyword, available, available);
+        return clampWidth(box, transferredWidth(box, width), available, ctx);
     }
     const probe = new FloatContext(0, Infinity);
     const saved = box.lines;
-    layoutInternals(box, ctx, Infinity, 0, 0, probe);
-    const preferred = intrinsicWidth(box) + box.horizontalExtra;
+    // Its content's width with no limit on it is the same at every width, so
+    // it is probed once in the box's life, as a cell's is. Probed every time
+    // it was asked, a float in a float was probed as often as there were
+    // floats around it, and each probe laid out all of the floats inside.
+    let content = PREFERRED.get(box);
+    let probed = false;
+    if (content === undefined) {
+        layoutInternals(box, ctx, Infinity, 0, 0, probe);
+        content = intrinsicWidth(box);
+        PREFERRED.set(box, content);
+        probed = true;
+    }
+    const preferred = content + box.horizontalExtra;
+    // the room is the containing block's, less the box's margins and where
+    // it starts (CSS 2.1 10.3.5, 10.3.7, 10.3.9): a float with side margins
+    // was as wide as its containing block, and stood out of it by them
+    const room = Math.max(0, available - offset - box.marginLeft - box.marginRight);
+    let width = Math.max(preferred, 0);
+    if (width > room &&
+        box.intrinsicMinContent < 0 &&
+        ctx.fonts !== null &&
+        !probed) {
+        // the words the floor is read from are the probe's
+        layoutInternals(box, ctx, Infinity, 0, 0, probe);
+    }
+    // and where its content does not fit the room, its longest word is the
+    // least it comes to: `min(max(min-content, room), max-content)`. That
+    // matters only for a word wider than the room, which the widest word
+    // between spaces bounds, from the probe just laid out; only past the
+    // room is the min-content width measured — a second probe, at a width
+    // every line breaks at — and it is kept on the box, as a cell's is
+    const fonts = ctx.fonts;
+    const floored = width > room &&
+        box.intrinsicMinContent < 0 &&
+        fonts !== null &&
+        wordBound(box, fonts, false) + box.horizontalExtra > room &&
+        wordBound(box, fonts, true) + box.horizontalExtra > room;
     box.lines = saved;
-    return clampWidth(box, Math.min(Math.max(preferred, 0), available), available);
+    if (floored) {
+        box.intrinsicMinContent = measureIntrinsicWidth(box, ctx, MIN_CONTENT_PROBE);
+        box.lines = saved;
+        // the probe resolved the box's edges against the width it was given
+        resolveEdges(box, available);
+    }
+    if (width > room)
+        width = Math.min(width, Math.max(box.intrinsicMinContent, room));
+    return clampWidth(box, transferredWidth(box, width), available, ctx);
+}
+/** A shrink-to-fit box's content width at no width limit, the once
+ *  (`shrinkToFitWidth`); a box's lifetime is the cache's, as for
+ *  `Box.intrinsicMaxContent`. */
+const PREFERRED = new WeakMap();
+/**
+ * A box's min-content width as its words give it, laid out at no width
+ * limit, and null where they may not: blocks and plain text that breaks
+ * only at its spaces (`spaceBreaksOnly`) are as narrow as their widest
+ * word (`widestWord`) with the edges of the blocks between, which is what
+ * the probe finds (`MIN_CONTENT_PROBE`) — for a fifteenth of the cost on
+ * ntk, which searches every word of that probe for a place to cut it, as
+ * none fits in no width at all. Anything else
+ * is left to the probe: another kind of break, an inline box's edges, a
+ * box on a line, a float, a table or a flex box, text that does not wrap
+ * or is indented, a block with widths of its own.
+ */
+export function exactMinContent(box, fonts) {
+    if (hasWidths(box.style) || contained(box, CONTAIN_WIDTH))
+        return null;
+    const inner = exactWords(box, fonts);
+    return inner === null ? null : inner + box.horizontalExtra;
+}
+/** Whether a style sets its box's width, or its least or greatest width. */
+function hasWidths(style) {
+    return (style.width !== AUTO ||
+        style.widthKeyword !== null ||
+        (style.minWidth !== 0 && style.minWidth !== AUTO) ||
+        style.minWidthKeyword !== null ||
+        style.maxWidth !== 'none' ||
+        style.maxWidthKeyword !== null);
+}
+function exactWords(box, fonts) {
+    const style = box.style;
+    if (style.whiteSpace !== 'normal' || style.textIndent !== 0)
+        return null;
+    let widest = 0;
+    if (box.lines) {
+        let last = null;
+        for (const line of box.lines) {
+            if (line.atomics.length || line.edges?.length)
+                return null;
+            for (const text of line.texts) {
+                if (text.layout === last)
+                    continue;
+                last = text.layout;
+                if (!spaceBreaksOnly(text.layout))
+                    return null;
+                widest = Math.max(widest, widestWord(fonts, text.layout));
+            }
+        }
+    }
+    for (const child of box.children) {
+        if (child.kind === 'text' || child.kind === 'break')
+            continue;
+        if (child.kind === 'inline') {
+            if (!plainInline(child))
+                return null;
+            continue;
+        }
+        if (child.kind !== 'block' || child.isFloat)
+            return null;
+        if (child.outOfFlow)
+            continue;
+        if (hasWidths(child.style))
+            return null;
+        const inner = exactWords(child, fonts);
+        if (inner === null)
+            return null;
+        widest = Math.max(widest, inner + child.horizontalExtra + child.marginLeft + child.marginRight);
+    }
+    return widest;
+}
+/** Whether an inline box and what is in it are text that wraps. */
+function plainInline(box) {
+    if (box.style.whiteSpace !== 'normal')
+        return false;
+    for (const child of box.children) {
+        if (child.kind === 'text' || child.kind === 'break')
+            continue;
+        if (child.kind !== 'inline' || !plainInline(child))
+            return false;
+    }
+    return true;
+}
+/**
+ * An upper bound of a laid-out block's min-content width inside its edges:
+ * the widest word of its lines (`widestWord`, measured or estimated from
+ * its characters), the widest box on them, and the same of each block in
+ * it with that block's edges. A table, a flex
+ * box and anything else not laid out as blocks and lines is as wide as the
+ * probe made it, which is more than it has to be; a box that is itself one
+ * has no bound.
+ */
+function wordBound(box, fonts, measured) {
+    if (box.kind !== 'block')
+        return Infinity;
+    let widest = 0;
+    // a line that does not wrap is one word: a `nowrap` tooltip in a narrow
+    // containing block was cut to its width, the rest of the line out of it
+    const unbroken = box.style.whiteSpace === 'nowrap' || box.style.whiteSpace === 'pre';
+    if (box.lines) {
+        let last = null;
+        for (const line of box.lines) {
+            if (unbroken)
+                widest = Math.max(widest, line.width);
+            for (const text of line.texts) {
+                if (text.layout === last)
+                    continue;
+                last = text.layout;
+                widest = Math.max(widest, widestWord(fonts, text.layout, measured));
+            }
+            for (const placed of line.atomics) {
+                const b = placed.box;
+                widest = Math.max(widest, b.width + b.marginLeft + b.marginRight);
+            }
+        }
+    }
+    for (const child of box.children) {
+        if (child.outOfFlow)
+            continue;
+        if (child.kind !== 'block' &&
+            child.kind !== 'flex' &&
+            child.kind !== 'table' &&
+            child.kind !== 'replaced')
+            continue;
+        const edges = child.marginLeft + child.marginRight;
+        const inner = child.kind === 'block' && child.style.width === AUTO
+            ? wordBound(child, fonts, measured) + child.horizontalExtra
+            : child.width;
+        widest = Math.max(widest, inner + edges);
+    }
+    return widest;
 }
 /**
  * The widest thing a laid-out box drew — its max-content width.
@@ -444,77 +2310,330 @@ function shrinkToFitWidth(box, ctx, available) {
  * Skipping the non-finite ones is what stops the probe from answering
  * `Infinity` for every box that contains a paragraph.
  */
-function intrinsicWidth(box) {
+export function intrinsicWidth(box) {
+    // 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 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
+    if (box.style.grid) {
+        const cols = GRID_TRACKS.get(box)?.cols;
+        if (cols?.length)
+            return cols[cols.length - 1][1] - cols[0][0];
+        let right = 0;
+        for (const child of box.children) {
+            if (child.outOfFlow || child.kind === 'text')
+                continue;
+            right = Math.max(right, child.x - box.contentX + child.width + child.marginRight);
+        }
+        return right;
+    }
     let widest = 0;
-    if (box.lines) {
-        for (const line of box.lines)
-            widest = Math.max(widest, line.width);
+    // 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
+    const display = box.style.display;
+    const row = (display === 'flex' || display === 'inline-flex') &&
+        box.style.flexDirection.startsWith('row');
+    let total = 0;
+    let items = 0;
+    const lines = box.lines;
+    if (lines) {
+        // a float met in a line stands beside what the line holds, at its
+        // width, as does a row of them beside no line
+        for (const line of lines) {
+            widest = Math.max(widest, line.width + (line.floats ?? 0));
+        }
+        widest = Math.max(widest, box.floatRow);
     }
+    // Floats among blocks stand side by side too, as many as come together,
+    // where each block in flow is a line of its own; one with a formatting
+    // context of its own stands beside them (as Blink measures them). Taken
+    // for the widest of them, a floated menu's items were one under another.
+    // That is at the box's widest, laid out at no width limit; at its
+    // narrowest each is as narrow as it can be, and one under another.
+    const sideBySide = !Number.isFinite(box.width);
+    let left = 0;
+    let right = 0;
     for (const child of box.children) {
         if (child.kind === 'text' || child.kind === 'break')
             continue;
         if (child.outOfFlow)
             continue;
+        // what sits in the lines is measured with them, indent and all: an
+        // inline-block after a negative `text-indent` ends where its line does
+        if (lines && (isInlineLevel(child) || child.isFloat))
+            continue;
         const margins = child.marginLeft + child.marginRight;
-        const inner = intrinsicWidth(child) + child.horizontalExtra + margins;
         const own = Number.isFinite(child.width) ? child.width + margins : 0;
-        widest = Math.max(widest, inner, own);
+        const style = child.style;
+        // a minimum's percentage is of zero here (CSS Sizing 3 5.2.1), which
+        // leaves a `calc()` its pixels
+        const min = style.minWidth === 0 || style.minWidth === AUTO
+            ? 0
+            : resolve(style.minWidth, 0) + contentExtra(child);
+        let contribution;
+        // A width of its own is what a child contributes, whatever its content
+        // does past it (CSS Sizing 3 5.1); a percentage one is cyclic here and
+        // counts as `auto`, so its content decides.
+        if (typeof style.width === 'number') {
+            contribution = Math.max(own, min + margins);
+        }
+        else {
+            let inner = intrinsicWidth(child) + child.horizontalExtra;
+            if (typeof style.maxWidth === 'number') {
+                inner = Math.min(inner, style.maxWidth + contentExtra(child));
+            }
+            if (min > inner)
+                inner = min;
+            contribution = Math.max(inner + margins, own);
+        }
+        if (row) {
+            total += contribution;
+            items += 1;
+        }
+        else if (!sideBySide)
+            widest = Math.max(widest, contribution);
+        else if (child.isFloat) {
+            const clear = style.clear;
+            if (clear !== 'none') {
+                widest = Math.max(widest, left + right);
+                if (clear !== 'right')
+                    left = 0;
+                if (clear !== 'left')
+                    right = 0;
+            }
+            if (style.float === 'right')
+                right += contribution;
+            else
+                left += contribution;
+        }
+        else {
+            const beside = establishesBFC(child) ? left + right : 0;
+            widest = Math.max(widest, beside + contribution, left + right);
+            left = 0;
+            right = 0;
+        }
+    }
+    widest = Math.max(widest, left + right);
+    if (row && items) {
+        const gap = gapOf(box.style.columnGap, NaN);
+        widest = Math.max(widest, total + gap * (items - 1));
     }
     return widest;
 }
-/** A replaced box's size: the style wins, then the attributes, then the
- *  intrinsic size, and an aspect ratio is kept when only one axis is given. */
-function sizeReplaced(box, containingWidth) {
+/** What a box's own width leaves out of its border box: its padding and
+ *  border, unless `box-sizing` puts them in. */
+function contentExtra(box) {
+    return box.style.boxSizing === 'border-box' ? 0 : box.horizontalExtra;
+}
+/**
+ * A replaced box's size, from its style and what it has of an intrinsic
+ * width, height and ratio (CSS 2.1 10.3.2 and 10.6.2), within its minimum
+ * and maximum (10.4, 10.7).
+ *
+ * An image has all three, a frame and a control their default size and no
+ * ratio — so the axis the style does not set keeps its own, and a text field
+ * `width: 100%` is not stretched to twice its height. An SVG may have any of
+ * them: a height and nothing else is 300 pixels wide, a ratio and nothing
+ * else fills its containing block, and nothing at all is 300 by 150 — the
+ * default object size, which the builder leaves in `Intrinsic` for an axis
+ * its `missing` names.
+ *
+ * A limit applied to one axis carries to the other through the ratio: an
+ * image `max-width: 100%` narrower than itself keeps its proportions, where
+ * clamping each axis alone squashed it — the `<img width="600">` of every
+ * mail template, in a narrow column.
+ */
+function sizeReplaced(box, containingWidth, 
+/** The room `stretch` fills: the containing block's width, or less of
+ *  it beside floats (CSS Sizing 3, 4.2). */
+stretchRoom = containingWidth) {
     const style = box.style;
-    const intrinsicW = box.intrinsicWidth || 0;
-    const intrinsicH = box.intrinsicHeight || 0;
-    const ratio = intrinsicW > 0 && intrinsicH > 0 ? intrinsicH / intrinsicW : 0;
-    let width = resolveOrNull(style.width, containingWidth);
-    let height = resolveOrNull(style.height, NaN);
-    if (width === null && height === null) {
-        width = intrinsicW;
-        height = intrinsicH;
-    }
-    else if (width === null) {
-        width = ratio ? height / ratio : intrinsicW;
-    }
-    else if (height === null) {
-        height = ratio ? width * ratio : intrinsicH;
-    }
-    const contentW = Math.max(0, width ?? 0);
-    const contentH = Math.max(0, height ?? 0);
-    const borderBoxW = style.boxSizing === 'border-box'
-        ? Math.max(contentW, box.horizontalExtra)
-        : contentW + box.horizontalExtra;
-    const borderBoxH = style.boxSizing === 'border-box'
-        ? Math.max(contentH, box.verticalExtra)
-        : contentH + box.verticalExtra;
-    box.width = clampWidth(box, borderBoxW, containingWidth);
-    box.height = clampHeight(box, borderBoxH);
-    // `hr` has no intrinsic size and its whole appearance is its border, so a
-    // zero content height is the right answer rather than a missing one.
-    if (box.replaced === 'hr' && box.style.height === AUTO) {
-        box.height = box.verticalExtra;
-    }
-}
-/** Place and size a float, and register it with the formatting context. */
-function layoutFloat(box, ctx, floats, y, containingWidth) {
+    const base = box.percentHeightBase;
+    // everything below is the content box's; a `border-box` length is not
+    const hx = style.boxSizing === 'border-box' ? box.horizontalExtra : 0;
+    const vx = style.boxSizing === 'border-box' ? box.verticalExtra : 0;
+    const across = (len) => {
+        const v = resolveOrNull(len, containingWidth);
+        return v === null ? null : Math.max(0, v - hx);
+    };
+    const down = (len) => {
+        const v = resolveOrNull(len, base);
+        return v === null ? null : Math.max(0, v - vx);
+    };
+    // `stretch` is what the margins leave of the containing block, as a
+    // content box, and of its height where that is definite
+    const stretchedHeight = style.heightKeyword === 'stretch' ? stretchHeight(box) : null;
+    const stretchedWidth = Number.isFinite(stretchRoom)
+        ? Math.max(0, stretchRoom - box.marginLeft - box.marginRight - box.horizontalExtra)
+        : null;
+    const width = style.widthKeyword === 'stretch' && stretchedWidth !== null
+        ? stretchedWidth
+        : across(style.width);
+    const height = stretchedHeight !== null
+        ? Math.max(0, stretchedHeight - box.verticalExtra)
+        : down(style.height);
+    const minW = (style.minWidthKeyword === 'stretch' ? stretchedWidth : null) ??
+        across(style.minWidth) ??
+        0;
+    const minH = down(style.minHeight) ?? 0;
+    // a maximum below the minimum is the minimum (10.4)
+    const maxW = Math.max(minW, style.maxWidthKeyword === 'stretch' && stretchedWidth !== null
+        ? stretchedWidth
+        : style.maxWidth === 'none'
+            ? Infinity
+            : (across(style.maxWidth) ?? Infinity));
+    const maxH = Math.max(minH, style.maxHeight === 'none' ? Infinity : (down(style.maxHeight) ?? Infinity));
+    // under size containment, as though it had no size or ratio of its own
+    // but the one `contain-intrinsic-size` gives it (CSS Containment 2, 3.2)
+    const own = contained(box, CONTAIN_SIZE)
+        ? {
+            width: style.containIntrinsicWidth ?? 0,
+            height: style.containIntrinsicHeight ?? 0,
+            ratio: 0,
+            missing: 0,
+        }
+        : (box.intrinsic ?? NO_INTRINSIC);
+    const iw = own.missing & 1 ? null : own.width;
+    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;
+    // 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 = () => {
+        const w = containingWidth - box.marginLeft - box.marginRight - box.horizontalExtra;
+        return Number.isFinite(w) ? Math.max(0, w) : 0;
+    };
+    let w;
+    let h;
+    if (width === null && height === null && ratio > 0) {
+        // both auto, with a ratio: the size it asks for, then the table in 10.4,
+        // which moves both axes together
+        if (iw !== null) {
+            w = iw;
+            h = ih ?? iw / ratio;
+        }
+        else if (ih !== null) {
+            h = ih;
+            w = ih * ratio;
+        }
+        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;
+        }
+        [w, h] = constrained(w, h, minW, maxW, minH, maxH);
+    }
+    else {
+        // one axis set, or no ratio: the width, clamped, and then the height
+        // from the width that was used (10.3.2's "the rules above are applied
+        // 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 (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
+            h = clamp(own.height, minH, maxH);
+    }
+    box.width = w + box.horizontalExtra;
+    box.height = h + box.verticalExtra;
+}
+/** What a replaced box with nothing to say about its size has: `hr`. */
+const NO_INTRINSIC = { width: 0, height: 0, missing: 0, ratio: 0 };
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(value, max));
+}
+/**
+ * CSS 2.1 10.4's table, for a replaced box sized by its ratio alone: a
+ * limit on either axis is met by scaling both, and where the two axes' limits
+ * disagree, the one that asks for more change wins.
+ */
+function constrained(w, h, minW, maxW, minH, maxH) {
+    if (!(w > 0 && h > 0))
+        return [clamp(w, minW, maxW), clamp(h, minH, maxH)];
+    if (w > maxW && h > maxH) {
+        return maxW / w <= maxH / h
+            ? [maxW, Math.max(minH, (maxW * h) / w)]
+            : [Math.max(minW, (maxH * w) / h), maxH];
+    }
+    if (w < minW && h < minH) {
+        return minW / w <= minH / h
+            ? [Math.min(maxW, (minH * w) / h), minH]
+            : [minW, Math.min(maxH, (minW * h) / w)];
+    }
+    if (w < minW && h > maxH)
+        return [minW, maxH];
+    if (w > maxW && h < minH)
+        return [maxW, minH];
+    if (w > maxW)
+        return [maxW, Math.max((maxW * h) / w, minH)];
+    if (w < minW)
+        return [minW, Math.min((minW * h) / w, maxH)];
+    if (h > maxH)
+        return [Math.max((maxH * w) / h, minW), maxH];
+    if (h < minH)
+        return [Math.min((minH * w) / h, maxW), minH];
+    return [w, h];
+}
+/**
+ * Place and size a float, and register it with the formatting context.
+ *
+ * The formatting context holds every float in it, and its band is as wide
+ * as its root; a float is placed within its own containing block's content
+ * box, which may be narrower (CSS 2.1 9.5.1, rules 1 and 7). Floats placed
+ * earlier still push it over wherever they reach into that box. Placed in
+ * the formatting context's band, a float in a nested block sat at the
+ * root's edge — outside its parent's padding and the body's margin.
+ */
+function layoutFloat(box, ctx, floats, y, containingLeft, containingWidth) {
+    sizeFloat(box, ctx, containingWidth);
+    placeFloat(box, floats, y, containingLeft, containingWidth);
+}
+/** Lay a float out at its own width, and answer its outer width. */
+function sizeFloat(box, ctx, containingWidth) {
     resolveEdges(box, containingWidth);
     if (box.kind === 'replaced')
         sizeReplaced(box, containingWidth);
-    else {
-        const width = shrinkToFitWidth(box, ctx, containingWidth);
-        layoutInternals(box, ctx, width, 0, 0);
-    }
+    else
+        layoutOwn(box, ctx, shrinkToFitWidth(box, ctx, containingWidth));
+    return box.width + box.marginLeft + box.marginRight;
+}
+/** Put a float that is laid out as high as it goes from `y`, and to its
+ *  side, and note it in the float context. */
+function placeFloat(box, floats, y, containingLeft, containingWidth) {
     const outerWidth = box.width + box.marginLeft + box.marginRight;
     const clearance = floats.clearance(box.style.clear);
     const from = Math.max(y, clearance === -Infinity ? y : clearance);
-    const top = floats.placeAt(from, outerWidth, box.style.float === 'right' ? 'right' : 'left');
-    const band = floats.bandAt(top, 1);
+    const left = containingLeft;
+    const right = containingLeft + containingWidth;
+    const top = floats.placeAt(from, outerWidth, box.style.float === 'right' ? 'right' : 'left', left, right);
+    const band = floats.bandAt(top, 1, left, right);
     const x = box.style.float === 'right'
         ? band.right - outerWidth + box.marginLeft
         : band.left + box.marginLeft;
-    moveTo(box, x, top + box.marginTop);
+    // A right float in content measured at no width limit stands at an
+    // infinite x, where its box is not put: a box at infinity cannot be moved
+    // back, so everything in it was laid out again at its next layout — at
+    // every level of a nest of such floats, the innermost as many times as
+    // there were levels. What a measure reads of it is its width, and the
+    // float context keeps where it stands.
+    moveTo(box, Number.isFinite(x) ? x : band.left + box.marginLeft, top + box.marginTop);
     floats.add({
         left: x - box.marginLeft,
         right: x - box.marginLeft + outerWidth,
@@ -524,74 +2643,578 @@ function layoutFloat(box, ctx, floats, y, containingWidth) {
     });
 }
 /**
- * An absolutely positioned box, against its containing block.
- *
- * The static position — where the box would have been in flow — is not
- * tracked: a box with neither `top` nor `bottom` is placed at its containing
- * block's content top rather than where its markup sat. That is the one
- * deliberate simplification in positioning, and it is invisible for the
- * overwhelmingly common `position: absolute` with an explicit offset, which
- * is how a badge, a tooltip and an overlay are all written.
+ * An absolutely positioned box, against its containing block: a box's
+ * padding box, or an inline box's fragments (`inlineContainingBlock`). An
+ * axis with neither offset takes the static position, where the box would
+ * have been in flow (`placeStatic`, and `staticPositions` in a line).
  */
 function layoutPositioned(box, containing, ctx) {
-    const cbWidth = containing.contentWidth;
-    const cbHeight = containing.contentHeight;
-    const cbX = containing.contentX;
-    const cbY = containing.contentY;
+    // a grid's is the box's grid area (CSS Grid 1, 9.1), whether the box is
+    // the grid's child or deeper in it
+    const area = containing.kind === 'inline' ? null : gridArea(box, containing, ctx);
+    const { x: cbX, y: cbY, width: cbWidth, height: cbHeight, } = containing.kind === 'inline'
+        ? inlineContainingBlock(containing, box, ctx)
+        : (area ?? containingRect(containing, ctx));
     resolveEdges(box, cbWidth);
+    box.percentHeightBase = cbHeight;
     const style = box.style;
     const left = resolveOrNull(style.left, cbWidth);
     const right = resolveOrNull(style.right, cbWidth);
     const top = resolveOrNull(style.top, cbHeight);
     const bottom = resolveOrNull(style.bottom, cbHeight);
+    // with neither offset on an axis, the box is where the flow would have
+    // put it (CSS 2.1 10.3.7, 10.6.4): against its start edge, which is the
+    // right one in a right-to-left flow. A grid's own child is aligned in its
+    // grid area instead, where that is its containing block; a box deeper in
+    // the grid is where its own flow put it.
+    const inArea = area !== null &&
+        box.staticPosition?.inside !== undefined &&
+        box.staticPosition.from === containing;
+    const at = inArea ? null : box.staticPosition;
+    const rtl = (at?.from ?? containing).style.direction === 'rtl';
+    // where the box is as a flex box's or a grid's one item, aligned in it —
+    // or in its grid area
+    const room = inArea
+        ? {
+            x: cbX,
+            y: cbY,
+            width: cbWidth,
+            height: cbHeight,
+            ...staticAlignment(box, containing, false),
+        }
+        : at?.inside
+            ? { ...insideRect(at.from, at.inside.box), ...at.inside }
+            : null;
+    // and a shrink-to-fit box's room starts at the offset on the side it has
+    // one, or at its static position: `left: 50%` leaves it half the width
+    const offset = left ??
+        right ??
+        (!at
+            ? 0
+            : rtl
+                ? cbX + cbWidth - (at.from.x + at.right)
+                : at.from.x + at.x - cbX);
     let width;
+    let stretched = NaN;
     if (style.width !== AUTO) {
-        width = blockWidth(box, cbWidth);
+        width = blockWidth(box, cbWidth, cbWidth, ctx);
+    }
+    else if (style.widthKeyword === 'stretch') {
+        // what its offsets and margins leave of its containing block — an
+        // `auto` offset leaving all it has, but where both are, the start is
+        // its static position (CSS Position 3, 4.1)
+        const start = left ?? (right === null ? offset : 0);
+        const room = cbWidth - start - (right ?? 0) - box.marginLeft - box.marginRight;
+        width = clampWidth(box, Math.max(0, room), cbWidth, ctx);
+    }
+    else if (style.widthKeyword || ratioWidth(box) !== null) {
+        // an intrinsic size, which both offsets do not stretch, or a height of
+        // its own through its ratio
+        width = shrinkToFitWidth(box, ctx, cbWidth, offset);
+    }
+    else if (boxRatio(box) &&
+        (left === null || right === null) &&
+        top !== null &&
+        bottom !== null) {
+        // the height its offsets leave it through its ratio, where its width
+        // has no pair of them to stretch it (CSS Sizing 4, 5.1)
+        const fill = clampHeight(box, Math.max(0, cbHeight - top - bottom - box.marginTop - box.marginBottom));
+        width = ratioMinimum(box, clampWidth(box, widthFromHeight(box, fill), cbWidth, ctx), cbWidth, ctx);
     }
     else if (left !== null && right !== null) {
-        width = Math.max(0, cbWidth - left - right - box.marginLeft - box.marginRight);
+        stretched = Math.max(0, cbWidth - left - right - box.marginLeft - box.marginRight);
+        // within its least and greatest width, which make it a width as one
+        // set would, and the margins' rules run again with it (CSS 2.1 10.4) —
+        // and those of its height, through a ratio (CSS Sizing 4, 5.1)
+        width = clampWidth(box, transferredWidth(box, stretched), cbWidth, ctx);
     }
     else {
-        width = shrinkToFitWidth(box, ctx, cbWidth);
+        width = shrinkToFitWidth(box, ctx, cbWidth, offset);
     }
-    if (box.kind === 'replaced')
+    // `stretch` down: what its offsets leave, from its static position where
+    // it has neither
+    if (style.heightKeyword === 'stretch' ||
+        style.minHeightKeyword === 'stretch') {
+        STRETCH_TOP.set(box, top ?? (bottom === null && at ? at.from.y + at.y - cbY : 0));
+    }
+    if (box.kind === 'replaced') {
         sizeReplaced(box, cbWidth);
+        stretchReplaced(box, style.widthKeyword === 'stretch' ? width : null, cbWidth);
+    }
     else
-        layoutInternals(box, ctx, width, 0, 0);
-    const x = left !== null
-        ? cbX + left + box.marginLeft
-        : right !== null
-            ? cbX + cbWidth - right - box.width - box.marginRight
-            : cbX;
-    const y = top !== null
-        ? cbY + top + box.marginTop
-        : bottom !== null
-            ? cbY + cbHeight - bottom - box.height - box.marginBottom
-            : cbY;
+        layoutOwn(box, ctx, width);
+    let x;
+    if (left !== null &&
+        right !== null &&
+        (style.width !== AUTO ||
+            style.widthKeyword !== null ||
+            box.kind === 'replaced' ||
+            width !== stretched)) {
+        // Both offsets and a width: what is left over goes to the margins that
+        // are `auto`, shared where both are, and where none is, the end offset
+        // gives way (10.3.7, 10.3.8).
+        const rest = cbWidth - left - right - box.width;
+        const autoLeft = style.marginLeft === AUTO;
+        const autoRight = style.marginRight === AUTO;
+        const endRtl = containing.style.direction === 'rtl';
+        if (autoLeft && autoRight) {
+            if (rest >= 0) {
+                box.marginLeft = rest / 2;
+                box.marginRight = rest / 2;
+            }
+            else if (endRtl) {
+                box.marginRight = 0;
+                box.marginLeft = rest;
+            }
+            else {
+                box.marginLeft = 0;
+                box.marginRight = rest;
+            }
+        }
+        else if (autoLeft) {
+            box.marginLeft = rest - box.marginRight;
+        }
+        else if (autoRight) {
+            box.marginRight = rest - box.marginLeft;
+        }
+        x =
+            endRtl && !autoLeft && !autoRight
+                ? cbX + cbWidth - right - box.width - box.marginRight
+                : cbX + left + box.marginLeft;
+    }
+    else {
+        x =
+            left !== null
+                ? cbX + left + box.marginLeft
+                : right !== null
+                    ? cbX + cbWidth - right - box.width - box.marginRight
+                    : room
+                        ? alignedIn(room.x, room.width, room.across, box.width + box.marginLeft + box.marginRight, rtl) + box.marginLeft
+                        : rtl
+                            ? (at ? at.from.x + at.right : cbX + cbWidth) -
+                                box.width -
+                                box.marginRight
+                            : (at ? at.from.x + at.x : cbX) + box.marginLeft;
+    }
+    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
+        const stretches = style.height === AUTO && box.kind !== 'replaced' && !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
+        // `max-height` moves that, which makes it a height like one set, and
+        // the rules run again with it (10.7)
+        if (stretches)
+            box.height = clampHeight(box, fill);
+        if (!stretches || box.height !== fill) {
+            // and a height: the `auto` margins share the rest, and where none
+            // is `auto`, `bottom` gives way (10.6.4, 10.6.5)
+            const rest = cbHeight - top - bottom - box.height;
+            const autoTop = style.marginTop === AUTO;
+            const autoBottom = style.marginBottom === AUTO;
+            if (autoTop && autoBottom) {
+                box.marginTop = rest / 2;
+                box.marginBottom = rest / 2;
+            }
+            else if (autoTop) {
+                box.marginTop = rest - box.marginBottom;
+            }
+            else if (autoBottom) {
+                box.marginBottom = rest - box.marginTop;
+            }
+        }
+        y = cbY + top + box.marginTop;
+    }
+    else {
+        y =
+            top !== null
+                ? cbY + top + box.marginTop
+                : bottom !== null
+                    ? cbY + cbHeight - bottom - box.height - box.marginBottom
+                    : room
+                        ? alignedIn(room.y, room.height, room.down, box.height + box.marginTop + box.marginBottom, false) + box.marginTop
+                        : (at ? at.from.y + at.y : cbY) + box.marginTop;
+    }
     moveTo(box, x, y);
 }
+/** A box's content box or its padding box, as its layout left them. */
+function insideRect(box, which) {
+    if (which === 'content') {
+        return {
+            x: box.contentX,
+            y: box.contentY,
+            width: box.contentWidth,
+            height: Math.max(0, box.height - box.verticalExtra),
+        };
+    }
+    return {
+        x: box.x + box.borderLeft,
+        y: box.y + box.borderTop,
+        width: Math.max(0, box.width - box.borderLeft - box.borderRight),
+        height: Math.max(0, box.height - box.borderTop - box.borderBottom),
+    };
+}
+/** Where a margin box of a size starts in a room, `along` of the free room
+ *  before it from the room's start — its right end where `rtl`. */
+function alignedIn(start, size, along, outer, rtl) {
+    const free = size - outer;
+    return rtl ? start + size - outer - along * free : start + along * free;
+}
+/**
+ * The grid area a box positioned in a grid takes for its containing block
+ * (CSS Grid 1, 9.1): between the lines its placement names, where the grid
+ * has them, and the grid's padding edge where a line is `auto`, is no line
+ * of the grid, or is only a `span`. Null for a box whose containing block
+ * is no grid.
+ */
+function gridArea(box, containing, ctx) {
+    const tracks = GRID_TRACKS.get(containing);
+    if (!tracks)
+        return null;
+    const style = box.style;
+    const pad = containingRect(containing, ctx);
+    const [x, width] = areaSpan(style.gridColumnStart, style.gridColumnEnd, tracks.cols, tracks.colLines, containing.contentX, pad.x, pad.width);
+    const [y, height] = areaSpan(style.gridRowStart, style.gridRowEnd, tracks.rows, tracks.rowLines, containing.contentY, pad.y, pad.height);
+    return { x, y, width, height };
+}
+/** One axis of a grid area: its start and its size in document
+ *  coordinates. A line is a track's start where it starts one and a
+ *  track's end where it ends one, so a gap is in neither; a line by name
+ *  is the one the placement would take. */
+function areaSpan(start, end, tracks, lines, origin, edge, size) {
+    const count = tracks.length;
+    // a line the grid has, or null for auto, a span and one it has not
+    const at = (line, side) => {
+        const index = lineOf(lines, line, side);
+        return index !== null && count > 0 && index >= 0 && index <= count
+            ? index
+            : null;
+    };
+    const spanOf = (line) => (line && 'span' in line ? line : null);
+    let from = at(start, 'start');
+    let to = at(end, 'end');
+    const startSpan = spanOf(start);
+    const endSpan = spanOf(end);
+    if (from === null && to !== null && startSpan) {
+        const f = startSpan.name !== undefined
+            ? spanToName(lines, startSpan.name, startSpan.span, to, false)
+            : to - startSpan.span;
+        from = f >= 0 ? f : null;
+    }
+    if (to === null && from !== null && endSpan) {
+        const t = endSpan.name !== undefined
+            ? spanToName(lines, endSpan.name, endSpan.span, from, true)
+            : from + endSpan.span;
+        to = t <= count ? t : null;
+    }
+    if (from !== null && to !== null && to < from)
+        [from, to] = [to, from];
+    const a = from === null
+        ? edge
+        : origin + (from < count ? tracks[from][0] : tracks[from - 1][1]);
+    const b = to === null || to === from
+        ? edge + size
+        : origin + (to >= 1 ? tracks[to - 1][1] : tracks[0][0]);
+    return [a, Math.max(0, b - a)];
+}
+/**
+ * The containing block a box that lays itself out gives: its padding box
+ * (CSS 2.1 10.1), not its content box — `left: 0` in a padded box is at
+ * its padding edge — and with nothing positioned around it the initial
+ * one, as tall as the viewport rather than as the document, which a fixed
+ * box's is too.
+ */
+function containingRect(containing, ctx) {
+    // a layout that reads the viewport's height lays out differently in
+    // another (`LayoutResult.readsViewportHeight`)
+    if (!containing.parent)
+        ctx.readViewportHeight = true;
+    return {
+        x: containing.x + containing.borderLeft,
+        y: containing.y + containing.captionTop + containing.borderTop,
+        width: Math.max(0, containing.width - containing.borderLeft - containing.borderRight),
+        height: !containing.parent
+            ? ctx.viewportHeight
+            : Math.max(0, containing.height -
+                containing.captionTop -
+                containing.captionBottom -
+                containing.borderTop -
+                containing.borderBottom),
+    };
+}
+/**
+ * The containing block a `position: relative` inline box gives (CSS 2.1
+ * 10.1, item 4): from the padding edge its first fragment starts at to the
+ * one its last ends at, over the top of the first and the bottom of the
+ * last. The box lays nothing out of its own — its fragments are on its
+ * block's lines — so read as a box that does, it was a rectangle of no size
+ * at the page's corner, and a tooltip under a positioned link came up
+ * there. A box with no fragment at all stands where the box inside it
+ * would have been in flow.
+ */
+function inlineContainingBlock(inline, box, ctx) {
+    let block = inline.parent;
+    while (block && block.kind === 'inline')
+        block = block.parent;
+    const face = ctx.fonts ? faceExtentOf(ctx.fonts, inline.style) : null;
+    let first = null;
+    let last = null;
+    for (const line of block?.lines ?? []) {
+        const span = spanOn(line, inline);
+        if (!span)
+            continue;
+        let top = line.y;
+        let bottom = line.y + line.height;
+        if (face) {
+            const baseline = line.y +
+                line.baseline -
+                (LINE_BOX_RAISES.get(line)?.get(inline) ?? BOX_RAISES.get(inline) ?? 0);
+            top = baseline - face.ascent - inline.padTop;
+            bottom = baseline + face.descent + inline.padBottom;
+        }
+        const rect = {
+            x: span[0],
+            y: top,
+            width: span[1] - span[0],
+            height: bottom - top,
+        };
+        first ??= rect;
+        last = rect;
+    }
+    if (!first || !last) {
+        const at = box.staticPosition;
+        const x = at ? at.from.x + at.x : 0;
+        const y = at ? at.from.y + at.y : 0;
+        const height = face ? face.ascent + face.descent : 0;
+        return { x, y, width: 0, height };
+    }
+    const rtl = inline.style.direction === 'rtl';
+    const start = rtl ? first.x + first.width : first.x;
+    const end = rtl ? last.x : last.x + last.width;
+    let x = Math.min(start, end);
+    let width = Math.abs(end - start);
+    if (rtl ? end > start : end < start) {
+        // the last fragment ends before the first begins, which CSS 2.1 leaves
+        // undefined: both, then, as a browser takes them
+        x = Math.min(first.x, last.x);
+        width = Math.max(first.x + first.width, last.x + last.width) - x;
+    }
+    return { x, y: first.y, width, height: last.y + last.height - first.y };
+}
+/** How far an inline box's padding box reaches across a line, left and
+ *  right; null where nothing of it is on the line. */
+function spanOn(line, inline) {
+    let left = Infinity;
+    let right = -Infinity;
+    for (const text of line.texts) {
+        const natural = text.layout.lines[text.layoutLine];
+        const boxAt = text.spans.boxAt;
+        if (!natural || !boxAt)
+            continue;
+        const x = text.drawX + natural.x;
+        for (const run of natural.runs) {
+            const owner = boxAt.call(text.spans, run.start);
+            if (!owner || !holds(inline, owner))
+                continue;
+            left = Math.min(left, x + run.x);
+            right = Math.max(right, x + run.x + run.width);
+        }
+    }
+    for (const placed of line.atomics) {
+        if (!holds(inline, placed.box))
+            continue;
+        left = Math.min(left, placed.x - placed.box.marginLeft);
+        right = Math.max(right, placed.x + placed.box.width + placed.box.marginRight);
+    }
+    for (const edge of line.edges ?? []) {
+        if (edge.box !== inline) {
+            if (!holds(inline, edge.box))
+                continue;
+            left = Math.min(left, edge.x);
+            right = Math.max(right, edge.x + edge.width);
+            continue;
+        }
+        // its own: the padding edge, inside the margin and the border
+        const onLeft = (edge.side === 'start') !== (inline.style.direction === 'rtl');
+        if (onLeft) {
+            const at = edge.x + inline.marginLeft + inline.borderLeft;
+            left = Math.min(left, at);
+            right = Math.max(right, at);
+        }
+        else {
+            const at = edge.x + edge.width - inline.marginRight - inline.borderRight;
+            left = Math.min(left, at);
+            right = Math.max(right, at);
+        }
+    }
+    return left <= right ? [left, right] : null;
+}
+/**
+ * Lay out the floats in a block's inline content and give its positioned
+ * boxes their static positions — at any depth of inline box, which lays
+ * nothing out of its own: a float or an absolute box inside a `<span>` is
+ * the paragraph's as much as one beside it. Met only among the block's own
+ * children, one in an inline box was never laid out at all, and stood at
+ * the page's corner with no size.
+ */
+/** Give the absolute boxes in a block's inline content their static
+ *  position, and answer whether the content holds a float. */
+function placeOutOfLine(parent, block, ctx, contentTop, contentWidth, contentLeft) {
+    let floated = false;
+    for (const child of parent.children) {
+        if (child.outOfFlow) {
+            placeStatic(child, block, contentLeft, contentWidth, contentTop);
+            ctx.positioned.push({
+                box: child,
+                containing: containingBlockFor(child) ?? block,
+            });
+        }
+        else if (child.isFloat) {
+            floated = true;
+        }
+        else if (child.kind === 'inline' && ctx.nestedOutOfLine) {
+            const inner = placeOutOfLine(child, block, ctx, contentTop, contentWidth, contentLeft);
+            floated ||= inner;
+        }
+    }
+    return floated;
+}
+/** Where an out-of-flow box would have gone in its parent's flow: its
+ *  margin edge's, at either side, kept from the parent's corner, which may
+ *  yet move. */
+function placeStatic(box, parent, x, width, y) {
+    box.staticPosition = {
+        from: parent,
+        x: x - parent.x,
+        right: x + width - parent.x,
+        y: y - parent.y,
+    };
+}
+/**
+ * An absolutely positioned child of a flex box or a grid, laid out once the
+ * flow is: against its own containing block, which the box is only where
+ * it is positioned, from where it is as the box's one item — at the start
+ * of a flex box's content box (CSS Flexbox 4.1), of a grid's padding box
+ * (CSS Grid 1, 9.1). Pushed against the box whatever it was, one in a
+ * static flex box was placed from the box's corner, and `fixed` one from
+ * a grid.
+ */
+export function positionOutOfFlow(child, container, ctx, flex) {
+    if (flex) {
+        placeStatic(child, container, container.contentX, container.contentWidth, container.contentY);
+    }
+    else {
+        placeStatic(child, container, container.x + container.borderLeft, container.width - container.borderLeft - container.borderRight, container.y + container.borderTop);
+    }
+    child.staticPosition.inside = {
+        box: flex ? 'content' : 'padding',
+        ...staticAlignment(child, container, flex),
+    };
+    ctx.positioned.push({
+        box: child,
+        containing: containingBlockFor(child) ?? container,
+    });
+}
+/** How far along its free room a flex box's or a grid's one item is set:
+ *  0 at the start, ½ in the middle, 1 at the end, across (from the inline
+ *  start) and down. A flex box's main axis by `justify-content`, and the
+ *  cross by `align-self`; a grid's by `justify-self` and `align-self`,
+ *  each falling back to the container's `-items`. */
+function staticAlignment(child, container, flex) {
+    const own = child.style;
+    const style = container.style;
+    const factor = (align) => align === 'flex-end' ? 1 : align === 'center' ? 0.5 : 0;
+    const cross = factor(own.alignSelf === AUTO ? style.alignItems : own.alignSelf);
+    if (!flex) {
+        const justify = own.justifySelf === 'auto' ? style.justifyItems : own.justifySelf;
+        return { across: factor(justify), down: cross };
+    }
+    const justify = style.justifyContent;
+    let main = justify === 'flex-end' || justify === 'end' || justify === 'right'
+        ? 1
+        : justify === 'center' ||
+            justify === 'space-around' ||
+            justify === 'space-evenly'
+            ? 0.5
+            : 0;
+    if (style.flexDirection.endsWith('-reverse'))
+        main = 1 - main;
+    return style.flexDirection.startsWith('row')
+        ? { across: main, down: cross }
+        : { across: cross, down: main };
+}
 /** The nearest positioned ancestor, or null for the initial containing
  *  block. Walks the box tree rather than the DOM, so an anonymous box in
  *  between is transparent — which is what the spec means by "the nearest
  *  positioned ancestor". */
 function containingBlockFor(box) {
+    // a fixed box's is the viewport, whatever is positioned around it — but
+    // a transformed box is one for it too, and one with layout or paint
+    // containment (CSS Containment 2, 3.3)
+    const fixed = box.style.position === 'fixed';
     let node = box.parent;
     while (node) {
-        if (node.style.position !== 'static' || node.parent === null)
+        if ((!fixed && node.style.position !== 'static') ||
+            transformed(node.style) ||
+            contained(node, CONTAIN_LAYOUT | CONTAIN_PAINT) ||
+            node.parent === null) {
             return node;
+        }
         node = node.parent;
     }
     return null;
 }
+/** The size containments that hold a box's width: `size` and
+ *  `inline-size`. */
+const CONTAIN_WIDTH = CONTAIN_SIZE | CONTAIN_INLINE_SIZE;
+/**
+ * Whether a box has any of the containments `bits` names, as they apply
+ * to it (CSS Containment 2, 3): none to an inline box that is no atomic
+ * one, and none to a table's inner parts but a cell — nor size
+ * containment to a table or a cell.
+ */
+export function contained(box, bits) {
+    if (!(box.style.contain & bits))
+        return false;
+    switch (box.kind) {
+        case 'block':
+        case 'flex':
+        case 'replaced':
+            return true;
+        case 'table':
+        case 'table-cell':
+            return !!(box.style.contain & bits & ~CONTAIN_WIDTH);
+        default:
+            return false;
+    }
+}
 /** Move a box and everything under it, keeping the subtree's shape. */
 export function moveTo(box, x, y) {
+    // A position only a probe of an unbounded width comes to — a column after
+    // an infinitely wide one — is no place to move a box to: it stays where
+    // it is, since the probe only wants its size, and the pass after moves it
+    // from somewhere finite (see `placeBlock`).
+    if (!Number.isFinite(x) || !Number.isFinite(y))
+        return;
     translate(box, x - box.x, y - box.y);
 }
+/** Move what a box holds down, and not the box: a table cell's content
+ *  sits where its `vertical-align` puts it, in a box that fills the row. */
+export function moveContent(box, dy) {
+    translate(box, 0, dy);
+    box.y -= dy;
+}
 function translate(box, dx, dy) {
     if (!dx && !dy)
         return;
     box.x += dx;
     box.y += dy;
+    // a list item's marker is placed in the same coordinates as its lines
+    if (box.marker) {
+        box.marker.x += dx;
+        box.marker.y += dy;
+    }
     if (box.lines) {
         for (const line of box.lines) {
             line.x += dx;
@@ -604,6 +3227,8 @@ function translate(box, dx, dy) {
                 placed.x += dx;
                 placed.y += dy;
             }
+            for (const edge of line.edges ?? [])
+                edge.x += dx;
         }
     }
     for (const child of box.children)
@@ -630,23 +3255,41 @@ export function resolveEdges(box, containingWidth) {
         style.borderLeftStyle === 'none' || style.borderLeftStyle === 'hidden'
             ? 0
             : style.borderLeftWidth;
-    box.padTop = edge(style.paddingTop, containingWidth);
-    box.padRight = edge(style.paddingRight, containingWidth);
-    box.padBottom = edge(style.paddingBottom, containingWidth);
-    box.padLeft = edge(style.paddingLeft, containingWidth);
+    // at least zero: a `calc()` may come to less
+    box.padTop = Math.max(0, edge(style.paddingTop, containingWidth));
+    box.padRight = Math.max(0, edge(style.paddingRight, containingWidth));
+    box.padBottom = Math.max(0, edge(style.paddingBottom, containingWidth));
+    box.padLeft = Math.max(0, edge(style.paddingLeft, containingWidth));
     box.marginTop = edge(style.marginTop, containingWidth);
     box.marginRight = edge(style.marginRight, containingWidth);
     box.marginBottom = edge(style.marginBottom, containingWidth);
     box.marginLeft = edge(style.marginLeft, containingWidth);
+    box.bottomStrut = null;
+    // A table's parts but its caption have no margins, and its rows and row
+    // groups no padding either (CSS 2.1 8.3, 8.4): a cell set `margin: 50px`
+    // left a gap in its table that no browser draws. The values stay theirs,
+    // for a cell to inherit (`padding: inherit`); they only do nothing here.
+    if (box.kind === 'table-cell' ||
+        box.kind === 'table-row' ||
+        box.kind === 'table-row-group') {
+        box.marginTop = 0;
+        box.marginRight = 0;
+        box.marginBottom = 0;
+        box.marginLeft = 0;
+        if (box.kind !== 'table-cell') {
+            box.padTop = 0;
+            box.padRight = 0;
+            box.padBottom = 0;
+            box.padLeft = 0;
+        }
+    }
+    if (box.kind === 'table' || box.kind === 'table-cell')
+        collapseEdges(box);
 }
 function edge(len, containingWidth) {
     if (len === AUTO)
         return 0;
-    if (isPct(len))
-        return Number.isFinite(containingWidth)
-            ? (len.pct / 100) * containingWidth
-            : 0;
-    return len;
+    return resolve(len, containingWidth, 0);
 }
 /** Whether every in-flow child is inline-level, which is what makes this box
  *  an inline formatting context rather than a block one. */
@@ -663,9 +3306,6 @@ function establishesInlineContext(box) {
             case 'break':
                 sawInline = true;
                 break;
-            case 'replaced':
-                sawInline = true;
-                break;
             default:
                 if (isInlineLevel(child))
                     sawInline = true;
@@ -681,13 +3321,24 @@ function isInlineLevel(box) {
     return (d === 'inline' ||
         d === 'inline-block' ||
         d === 'inline-flex' ||
-        d === 'inline-table');
+        d === 'inline-table' ||
+        // an image told to be a table's part is inline (CSS Display 3, 2.4)
+        (box.kind === 'replaced' && d.startsWith('table-')));
 }
 /** Whether a box establishes a block formatting context — contains its own
  *  floats, and does not collapse margins through its edges. */
 export function establishesBFC(box) {
     const style = box.style;
-    if (style.overflowX !== 'visible' || style.overflowY !== 'visible')
+    if (scrolls(style))
+        return true;
+    if (style.flowRoot)
+        return true;
+    // layout and paint containment make an independent formatting context
+    if (contained(box, CONTAIN_LAYOUT | CONTAIN_PAINT))
+        return true;
+    // `continue: collapse` makes a block container a formatting context of
+    // its own (CSS Overflow 4, 5.3)
+    if (style.lineClamp !== null)
         return true;
     if (style.float !== 'none')
         return true;
@@ -698,27 +3349,116 @@ export function establishesBFC(box) {
         style.display === 'inline-flex') {
         return true;
     }
-    if (box.kind === 'table-cell' || box.kind === 'table')
+    if (box.kind === 'table-cell' ||
+        box.kind === 'table-caption' ||
+        box.kind === 'table') {
+        return true;
+    }
+    // The root element establishes the document's formatting context. Here it
+    // is a box below the synthetic initial containing block, so it is named:
+    // without it, <html>'s own margin collapsed with <body>'s first block's.
+    if (box.el?.name === 'html')
         return true;
     return box.parent === null;
 }
 /** What a box's `position: relative` offset moves it by, applied after
  *  layout so it does not affect anything else's position — which is the
- *  whole of what makes it *relative*. */
+ *  whole of what makes it *relative* — and its translation with it. */
 export function applyRelativeOffsets(box) {
     for (const child of box.children)
         applyRelativeOffsets(child);
     const style = box.style;
+    if (transformed(style) && box.kind !== 'inline') {
+        // a transform moves the box it is on, and an inline box is none
+        const [dx, dy] = translationOf(box);
+        if (dx || dy)
+            translate(box, dx, dy);
+    }
     if (style.position !== 'relative' && style.position !== 'sticky')
         return;
+    const [dx, dy] = relativeOffset(box);
+    translate(box, dx, dy);
+    if (box.kind !== 'inline' || !(dx || dy))
+        return;
+    offsetInline(box, dx, dy);
+    // the blocks it was broken around move with it (9.2.1.1)
+    const blocks = box.cut ? CUT_BLOCKS.get(box) : undefined;
+    if (blocks)
+        for (const block of blocks)
+            translate(block, dx, dy);
+}
+/** Whether a box is transformed, which is what makes it a containing
+ *  block and a layer as a positioned box is (CSS Transforms 1, 2). */
+export function transformed(style) {
+    return style.translate !== null || style.transformTranslate !== null;
+}
+/** How far `translate` and a `transform` move a box: a percentage is of
+ *  its own border box (CSS Transforms 1, 7). */
+function translationOf(box) {
+    let dx = 0;
+    let dy = 0;
+    for (const moved of [box.style.translate, box.style.transformTranslate]) {
+        if (!moved)
+            continue;
+        dx += resolve(moved[0], box.width, 0);
+        dy += resolve(moved[1], box.height, 0);
+    }
+    return [dx, dy];
+}
+/** How far `position: relative` moves a box. */
+function relativeOffset(box) {
+    const style = box.style;
     const parentWidth = box.parent ? box.parent.contentWidth : 0;
-    const parentHeight = box.parent ? box.parent.contentHeight : 0;
     const left = resolveOrNull(style.left, parentWidth);
     const right = resolveOrNull(style.right, parentWidth);
-    const top = resolveOrNull(style.top, parentHeight);
-    const bottom = resolveOrNull(style.bottom, parentHeight);
-    const dx = left ?? (right !== null ? -right : 0);
+    // a percentage down is of a height the containing block sets, as a
+    // percentage height is, and `auto` where its content decides it
+    const top = resolveOrNull(style.top, box.percentHeightBase);
+    const bottom = resolveOrNull(style.bottom, box.percentHeightBase);
+    // both set is over-constrained, and the containing block's direction
+    // says which wins: `left` left to right, `right` right to left (9.4.3)
+    const rtl = box.parent?.style.direction === 'rtl';
+    const dx = right !== null && (left === null || rtl) ? -right : (left ?? 0);
     const dy = top ?? (bottom !== null ? -bottom : 0);
-    translate(box, dx, dy);
+    return [dx, dy];
+}
+/**
+ * Move an inline box's text where `position: relative` puts the box. Its
+ * text is on its block's lines, laid out apart from the text around it
+ * (`collect`), and those fragments are what move; the lines stay where
+ * they are (CSS 2.1 9.4.3). A box inside it has moved its own already, so
+ * a text in both moves by the two together.
+ */
+function offsetInline(box, dx, dy) {
+    let block = box.parent;
+    while (block && block.kind === 'inline')
+        block = block.parent;
+    const lines = block?.lines;
+    if (!lines)
+        return;
+    INLINE_OFFSETS.set(box, { x: dx, y: dy });
+    for (const line of lines) {
+        for (const text of line.texts) {
+            const owner = text.spans.boxAt?.(text.layoutStart);
+            if (!owner || !holds(box, owner))
+                continue;
+            text.drawX += dx;
+            text.drawY += dy;
+            const was = TEXT_SHIFTS.get(text);
+            TEXT_SHIFTS.set(text, {
+                x: (was?.x ?? 0) + dx,
+                y: (was?.y ?? 0) + dy,
+            });
+            SHIFTED_LINES.add(line);
+        }
+    }
+}
+/** Whether `inner` is `outer` or inside it. */
+function holds(outer, inner) {
+    for (let at = inner; at; at = at.parent) {
+        if (at === outer)
+            return true;
+    }
+    return false;
 }
 //# sourceMappingURL=block.js.map