@react-x11/components 0.13.0 → 0.14.0

package/dist/html/layout/block.js

@@ -12,10 +12,12 @@
 // formatting context it is inside.
 import { AUTO, gapOf, isPct, isTransparent, resolve, resolveOrNull, } from '../css/values.js';
 import { CONTAIN_INLINE_SIZE, CONTAIN_LAYOUT, CONTAIN_PAINT, CONTAIN_SIZE, scrolls, } from '../css/style.js';
+import { about, linearOf, matrixOf, transformed } from '../css/transform.js';
 import { lineOf, spanToName } from './grid-lines.js';
-import { BOX_RAISES, Box, CLAMPED, CLEARED_FROM, CUT_BLOCKS, GRID_TRACKS, FIRST_LINE, INLINE_OFFSETS, MOVED_OFF_LINES, LINE_BOX_RAISES, SHIFTED_LINES, TEXT_SHIFTS, isBlank, } from './boxes.js';
+import { columnsOf, forgetColumns, layoutColumns, spansColumns, } from './multicol.js';
+import { BOX_RAISES, Box, CLAMPED, CLEARED_FROM, COLUMN_PIECES, CUT_BLOCKS, GRID_TRACKS, FIRST_LINE, INLINE_OFFSETS, MOVED_OFF_LINES, LINE_BOX_RAISES, SHIFTED_LINES, TEXT_SHIFTS, columned, isBlank, } from './boxes.js';
 import { FloatContext } from './floats.js';
-import { faceExtentOf, joinsBefore, layoutInline, lineHeightMultiplier, spaceBreaksOnly, strutOf, widestWord, } from './inline.js';
+import { faceExtentOf, isButton, joinsBefore, layoutInline, lineHeightMultiplier, spaceBreaksOnly, strutOf, widestWord, } from './inline.js';
 import { layoutFlex } from './flex.js';
 import { finishCaptions, layoutTable } from './table.js';
 import { collapseEdges } from './collapse.js';
@@ -27,7 +29,7 @@ export function layoutDocument(tree, fonts, viewportWidth, viewportHeight) {
         viewportWidth,
         viewportHeight,
         positioned: [],
-        layoutSubtree: (box, width) => layoutSubtree(box, ctx, width),
+        layoutSubtree: (box, width, containing) => layoutSubtree(box, ctx, width, containing),
         firstLine: tree.firstLine,
         firstLineStyler: tree.firstLineStyler,
         nestedOutOfLine: tree.nestedOutOfLine,
@@ -1338,16 +1340,24 @@ export function measureIntrinsicWidth(box, ctx, available, content = false) {
  * the shrink-to-fit probe uses. A replaced box is sized rather than laid out,
  * because there is nothing inside it to lay out.
  */
-function layoutSubtree(box, ctx, width) {
-    resolveEdges(box, Number.isFinite(width) ? width : 0);
+function layoutSubtree(box, ctx, width, 
+/** Its containing block's width, where `width` is the box's own. */
+containing = width) {
+    resolveEdges(box, Number.isFinite(containing) ? containing : 0);
     if (box.kind === 'replaced') {
         sizeReplaced(box, width);
         box.x = 0;
         box.y = 0;
         return;
     }
+    // within its limits, a percentage among them of its containing block's
+    // width and not of its own: a flex item `max-width: 50%` that the flex
+    // layout made half its row was laid out at a quarter of it. A table
+    // cell's is of nothing, and ignored: what a percentage limit does to a
+    // cell it does where its column is sized (CSS Tables 3, 3.8.2), and a
+    // cell is laid out in the width its columns came to.
     const borderBox = Number.isFinite(width)
-        ? clampWidth(box, width, width)
+        ? clampWidth(box, width, box.kind === 'table-cell' ? NaN : containing)
         : Infinity;
     layoutInternals(box, ctx, borderBox, 0, 0);
 }
@@ -1434,9 +1444,13 @@ function layoutBox(box, ctx, borderBoxWidth, x, y, outerFloats) {
         finishCaptions(box);
         return;
     }
+    // A multicol container's content is laid out as one column, all of it,
+    // and then set in the columns there are (`layoutColumns`)
+    const columns = columnsOf(box, contentWidth);
+    const flowWidth = columns ? columns.width : contentWidth;
     const ownFloats = establishesBFC(box) || !outerFloats;
     const floats = ownFloats
-        ? new FloatContext(box.contentX, box.contentX + contentWidth)
+        ? new FloatContext(box.contentX, box.contentX + flowWidth)
         : outerFloats;
     // the line a pass before gave a marker, which this one may not
     if (box.marker)
@@ -1452,7 +1466,18 @@ function layoutBox(box, ctx, borderBoxWidth, x, y, outerFloats) {
         else
             MARKER_ASCENT.set(box, markerAscent(box, box.marker, ctx.fonts));
     }
-    const flow = layoutChildren(box, ctx, floats, box.contentY, contentWidth);
+    // a column wide while its content is laid out, for what reads the box
+    // it is in rather than the width it is handed
+    // and about a box that spans them, in rows of columns (`layoutRows`)
+    const rows = columns && columns.count > 1 && box.children.some(spansColumns)
+        ? layoutRows(box, ctx, columns, contentWidth, borderBoxWidth)
+        : null;
+    if (columns)
+        box.width = columns.width + box.horizontalExtra;
+    const flow = rows === null
+        ? layoutChildren(box, ctx, floats, box.contentY, flowWidth)
+        : { height: rows, hanging: NO_MARGIN };
+    box.width = borderBoxWidth;
     // 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.
@@ -1492,7 +1517,16 @@ function layoutBox(box, ctx, borderBoxWidth, x, y, outerFloats) {
     const withFloats = ownFloats && !clamped
         ? Math.max(height, floats.bottom === -Infinity ? 0 : floats.bottom - box.contentY)
         : height;
-    finishHeight(box, withFloats);
+    if (rows !== null)
+        finishHeight(box, rows);
+    else if (columns) {
+        finishHeight(box, layoutColumns(box, columns, withFloats, columnLimit(box)));
+    }
+    else {
+        if (box.style.columns)
+            forgetColumns(box);
+        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.
@@ -1507,6 +1541,76 @@ function layoutBox(box, ctx, borderBoxWidth, x, y, outerFloats) {
         box.bottomStrut = null;
     if (box.marker)
         layoutMarker(box, box.marker, ctx);
+    if (isButtonBlock(box)) {
+        BUTTON_CONTENT.set(box, { height: withFloats, down: 0 });
+        centreButton(box);
+    }
+}
+/**
+ * A multicol container's content about the boxes that span its columns
+ * (`column-span: all`, CSS Multi-column 1, 6): what comes before one is set
+ * in columns of its own, balanced, the spanner under them across the whole
+ * container, and what comes after in columns under that. A spanner is a
+ * formatting context of its own and its margins collapse with no column
+ * content's, only with the spanner's next to it. Answers the content's
+ * height.
+ */
+function layoutRows(box, ctx, columns, contentWidth, borderBoxWidth) {
+    const all = box.children;
+    const limit = columnLimit(box);
+    const top = box.contentY;
+    let y = top;
+    /** The bottom margin of the spanner just before, which the next thing
+     *  comes under: all of it, or what the next spanner's does not cover. */
+    let margin = null;
+    let from = 0;
+    try {
+        for (let i = 0; i <= all.length; i += 1) {
+            const child = all[i];
+            if (child && !spansColumns(child))
+                continue;
+            const row = all.slice(from, i);
+            from = i + 1;
+            if (row.length) {
+                const set = row.some((in_) => in_.kind !== 'text' && in_.kind !== 'break' && !in_.outOfFlow);
+                if (set && margin !== null) {
+                    y += margin;
+                    margin = null;
+                }
+                // the row's content as a strip a column wide, and then in columns,
+                // no taller than the container has left
+                box.children = row;
+                box.width = columns.width + box.horizontalExtra;
+                const floats = new FloatContext(box.contentX, box.contentX + columns.width);
+                const flow = layoutChildren(box, ctx, floats, y, columns.width);
+                box.width = borderBoxWidth;
+                const strip = Math.max(flow.height, floats.bottom === -Infinity ? 0 : floats.bottom - y);
+                y += layoutColumns(box, columns, strip, Math.max(0, limit - (y - top)), y);
+            }
+            if (!child)
+                break;
+            resolveEdges(child, contentWidth);
+            y +=
+                margin === null ? child.marginTop : Math.max(margin, child.marginTop);
+            layoutBlockLevel(child, ctx, new FloatContext(box.contentX, box.contentX + contentWidth), box.contentX, y, contentWidth);
+            y = child.y + child.height;
+            margin = child.marginBottom;
+        }
+    }
+    finally {
+        box.children = all;
+        box.width = borderBoxWidth;
+    }
+    return y + (margin ?? 0) - top;
+}
+/** The tallest a multicol container's columns may be: its own height where
+ *  it has one, and its `max-height`; no limit where it has neither. */
+function columnLimit(box) {
+    const height = box.height;
+    finishHeight(box, specifiedHeight(box) === null ? Infinity : 0);
+    const limit = box.height - box.verticalExtra;
+    box.height = height;
+    return Math.max(0, limit);
 }
 /**
  * The room a list item's marker takes about its first line's baseline,
@@ -1795,12 +1899,23 @@ function stretchHeight(box) {
     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.
+ * The content height a flex or grid 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), a grid item's stretched down its area (CSS Grid 1, 11.1) —
+ * which what is in it takes its percentages of, and which an item that is
+ * a flex or grid container itself lays its own items out in. Set by
+ * `flex.ts` and `css-grid.ts` for the item's own layout alone.
  */
 export const FLEXED_HEIGHT = new WeakMap();
+/**
+ * The content height a flex layout gave an item without making it definite:
+ * flexed along a column that has no height of its own, which 9.8 leaves
+ * indefinite. An item that is a flex or grid container lays its own items
+ * out in it all the same — it is its used size (9.7) — and nothing in it
+ * takes a percentage of it. Set by `flex.ts` for the item's own layout
+ * alone.
+ */
+export const USED_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
@@ -2071,7 +2186,7 @@ function placeBlock(box, contentLeft, y, containingWidth) {
 function blockWidth(box, containingWidth, percentBase = containingWidth, ctx) {
     const style = box.style;
     const available = containingWidth - box.marginLeft - box.marginRight;
-    if (style.width === AUTO) {
+    if (style.width === AUTO || cyclicWidth(style, percentBase)) {
         // a width its height gives it through its ratio
         const fromRatio = ratioWidth(box);
         if (fromRatio !== null) {
@@ -2079,8 +2194,9 @@ function blockWidth(box, containingWidth, percentBase = containingWidth, 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)
+        const keyword = style.widthKeyword ?? (fitsContent(box) ? 'fit-content' : null);
+        const width = keyword && ctx
+            ? contentSizedWidth(box, ctx, keyword, room, percentBase)
             : room;
         return clampWidth(box, transferredWidth(box, width), percentBase, ctx, containingWidth);
     }
@@ -2091,6 +2207,41 @@ function blockWidth(box, containingWidth, percentBase = containingWidth, ctx) {
         : specified + box.horizontalExtra;
     return clampWidth(box, borderBox, percentBase, ctx, containingWidth);
 }
+/**
+ * Whether a block-level box's `width: auto` is `fit-content` and not the
+ * room its margins leave: a `<button>`'s, of which HTML's rendering section
+ * says "If the computed value of 'inline-size' is 'auto', then the used
+ * value is the fit-content inline size" (button layout, 15.5.3) — whatever
+ * it is laid out as inside, a block, a flex box or a grid, as Blink leaves
+ * it out of the boxes whose `auto` stretches
+ * (`ShouldBlockContainerChildStretchAutoInlineSize`). Set `display: block`
+ * to stand on a line of its own, a button was as wide as the line, where it
+ * is as wide as its label. Not one a flex box, a grid or a pair of offsets
+ * sizes, which stretch it still.
+ *
+ * Asked of every block: most are told from a button by the length of their
+ * name.
+ */
+function fitsContent(box) {
+    return box.el !== null && box.el.name.length === 6 && isButton(box);
+}
+/**
+ * Whether a box's `width` is a percentage of a width that is not there to
+ * take it of: its containing block's, while that is being found from what
+ * it holds — a float's, an inline-block's, a flex item's or a table cell's
+ * content measured at its widest. The percentage is cyclic, and the box is
+ * measured as though its width were `auto` (CSS Sizing 3, 5.2.1); it is a
+ * share of the width that comes to once there is one.
+ *
+ * Taken as a share of nothing, the box was no width at all, and its content
+ * wrapped at every word in it: a float around a `width: 100%` block was as
+ * wide as the block's longest word, and one around a `width: 100%` flex box
+ * of a label that clips — the branch button of a GitHub repository — as
+ * wide as nothing, its label gone.
+ */
+export function cyclicWidth(style, base) {
+    return isPct(style.width) && !Number.isFinite(base);
+}
 /**
  * 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
@@ -2251,7 +2402,7 @@ function shrinkToFitWidth(box, ctx, available,
  *  absolute box's offset, or its static position. */
 offset = 0) {
     const style = box.style;
-    if (style.width !== AUTO) {
+    if (style.width !== AUTO && !cyclicWidth(style, available)) {
         const specified = Math.max(0, resolve(style.width, available, 0));
         const borderBox = style.boxSizing === 'border-box'
             ? Math.max(specified, box.horizontalExtra)
@@ -2477,8 +2628,12 @@ function wordBound(box, fonts, measured) {
  * was `Infinity`), so its own width says nothing and only what it drew does.
  * Skipping the non-finite ones is what stops the probe from answering
  * `Infinity` for every box that contains a paragraph.
+ *
+ * `seen.cut` is set where a line it measured was cut short by
+ * `text-overflow`, in a box with a width to cut it at: the line is wider
+ * than it was drawn, and the answer is of what was drawn.
  */
-export function intrinsicWidth(box) {
+export function intrinsicWidth(box, seen) {
     // 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)) {
@@ -2515,6 +2670,10 @@ export function intrinsicWidth(box) {
             widest = Math.max(widest, line.width + (line.floats ?? 0));
         }
         widest = Math.max(widest, box.floatRow);
+        // a line `text-overflow` cut short is wider than this finds it
+        if (seen && !seen.cut && box.style.textOverflow === 'ellipsis') {
+            seen.cut = lines.some((line) => line.texts.some((text) => text.layout.truncated));
+        }
     }
     // 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
@@ -2525,6 +2684,9 @@ export function intrinsicWidth(box) {
     const sideBySide = !Number.isFinite(box.width);
     let left = 0;
     let right = 0;
+    /** In a multicol container, the widest box that spans its columns. */
+    const spanning = box.style.columns !== 0 && box.kind === 'block';
+    let across = 0;
     for (const child of box.children) {
         if (child.kind === 'text' || child.kind === 'break')
             continue;
@@ -2548,9 +2710,25 @@ export function intrinsicWidth(box) {
         // counts as `auto`, so its content decides.
         if (typeof style.width === 'number') {
             contribution = Math.max(own, min + margins);
+            // And it is that width where the box was laid out at less. In a row
+            // of flex items it was shrunk to fit the width this is measured at,
+            // and what an item gives its flex box's own size is its width (CSS
+            // Flexbox 9.9.3); under a percentage `max-width` it was cut short,
+            // by a percentage of the size being worked out, which is none to
+            // what a box contributes (5.2.1). But a replaced box's is of nothing
+            // at its least and none at its most: as it was laid out.
+            const cyclic = typeof style.maxWidth === 'object';
+            if (cyclic ? child.kind !== 'replaced' : row) {
+                let stated = style.width + contentExtra(child);
+                if (typeof style.maxWidth === 'number') {
+                    stated = Math.min(stated, style.maxWidth + contentExtra(child));
+                }
+                stated = Math.max(stated, child.horizontalExtra, min);
+                contribution = Math.max(contribution, stated + margins);
+            }
         }
         else {
-            let inner = intrinsicWidth(child) + child.horizontalExtra;
+            let inner = intrinsicWidth(child, seen) + child.horizontalExtra;
             if (typeof style.maxWidth === 'number') {
                 inner = Math.min(inner, style.maxWidth + contentExtra(child));
             }
@@ -2558,6 +2736,11 @@ export function intrinsicWidth(box) {
                 inner = min;
             contribution = Math.max(inner + margins, own);
         }
+        if (spanning && spansColumns(child)) {
+            // across the columns, and no part of what a column is as wide as
+            across = Math.max(across, contribution);
+            continue;
+        }
         if (row) {
             total += contribution;
             items += 1;
@@ -2590,6 +2773,19 @@ export function intrinsicWidth(box) {
         const gap = gapOf(box.style.columnGap, NaN);
         widest = Math.max(widest, total + gap * (items - 1));
     }
+    // A multicol container is as wide as its columns side by side, each as
+    // wide as its content or as `column-width` where that is wider, and the
+    // gaps between them (as Blink measures one,
+    // `NGColumnLayoutAlgorithm::ComputeMinMaxSizes`)
+    if (box.style.columns && box.kind === 'block') {
+        const count = box.style.columnCount ?? 1;
+        const gap = box.style.columnGapNormal
+            ? box.style.fontSize
+            : gapOf(box.style.columnGap, NaN);
+        widest = Math.max(widest, box.style.columnWidth ?? 0);
+        // and no narrower than a box that spans them
+        widest = Math.max(widest * count + gap * (count - 1), across);
+    }
     return widest;
 }
 /** What a box's own width leaves out of its border box: its padding and
@@ -2810,6 +3006,21 @@ function placeFloat(box, floats, y, containingLeft, containingWidth) {
         side: box.style.float === 'right' ? 'right' : 'left',
     });
 }
+/** Whether a box is a form control's: a replaced box for what draws it,
+ *  a widget, and an inline block for how it is sized. */
+function isControl(box) {
+    switch (box.replaced) {
+        case 'input':
+        case 'textarea':
+        case 'select':
+        case 'button':
+        case 'checkbox':
+        case 'radio':
+            return true;
+        default:
+            return false;
+    }
+}
 /**
  * An absolutely positioned box, against its containing block: a box's
  * padding box, or an inline box's fragments (`inlineContainingBlock`). An
@@ -2905,9 +3116,23 @@ function layoutPositioned(box, containing, ctx) {
         style.minHeightKeyword === 'stretch') {
         STRETCH_TOP.set(box, top ?? (bottom === null && at ? at.from.y + at.y - cbY : 0));
     }
+    // A form control is an inline block to CSS and no replaced element,
+    // whatever draws it (HTML's rendering section): with both offsets and no
+    // size of its own it fills what they leave, as any box does, where an
+    // image keeps its own (10.3.8, 10.6.5). A page lays an invisible
+    // `<select>` over a picker it draws, `position: absolute; inset: 0`, to
+    // take the press, and it has to cover it.
+    const control = isControl(box);
     if (box.kind === 'replaced') {
         sizeReplaced(box, cbWidth);
-        stretchReplaced(box, style.widthKeyword === 'stretch' ? width : null, cbWidth);
+        stretchReplaced(box, style.widthKeyword === 'stretch' ||
+            (control &&
+                style.width === AUTO &&
+                style.widthKeyword === null &&
+                left !== null &&
+                right !== null)
+            ? width
+            : null, cbWidth);
     }
     else
         layoutOwn(box, ctx, width);
@@ -2968,13 +3193,17 @@ function layoutPositioned(box, containing, ctx) {
     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);
+        const stretches = style.height === AUTO &&
+            (box.kind !== 'replaced' || control) &&
+            !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)
+        if (stretches) {
             box.height = clampHeight(box, fill);
+            centreButton(box);
+        }
         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)
@@ -3367,11 +3596,87 @@ export function moveTo(box, x, 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. */
+/**
+ * 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, and
+ * a button's in the middle of its own (`centreButton`).
+ *
+ * The static positions the box gave the absolutely positioned boxes in its
+ * flow go down with the content: each is where its box "would have been in
+ * the normal flow" (CSS 2.1 10.6.4), and the flow is what moved. They are
+ * kept from the box's own corner, which stays, so that moving the boxes
+ * alone left them behind: a badge with no offsets in a `vertical-align:
+ * middle` cell stood at the cell's top, over an icon 22px further down.
+ *
+ * It adds to where the content stands, so it is asked for once for each
+ * layout of the box, which puts the content and the static positions back
+ * at the top. A table lays a cell out and moves its content in one pass
+ * over its cells, however many times a pass lays the table out, and one
+ * whose layout is kept (`kept`) is moved whole, the cell with it; a button
+ * counts how far down its content stands (`centreButton`).
+ */
 export function moveContent(box, dy) {
+    if (!dy)
+        return;
     translate(box, 0, dy);
     box.y -= dy;
+    moveStatics(box, box, dy);
+}
+/** Whether a box is a `<button>`'s own, laid out as a block container: the
+ *  one HTML's button layout sets an anonymous button content box in. Not
+ *  the text in it, whose element is the button too; not a button that is a
+ *  flex box or a grid, which has no such box; nor an `<input type=button>`,
+ *  which is a widget of its label's size. */
+function isButtonBlock(box) {
+    return box.kind === 'block' && box.el !== null && box.el.name === 'button';
+}
+/** How tall a `<button>`'s content came to, and how far down its content
+ *  box it stands for being centred in it (`centreButton`). */
+const BUTTON_CONTENT = new WeakMap();
+/**
+ * Centre a `<button>`'s content down its content box, where the box is the
+ * taller: a button's content is in an anonymous box of its own that is
+ * "centered vertically" where it "does not overflow in the vertical axis"
+ * (HTML 15.5.5, button layout), and is at the top where it does. Blink
+ * moves a button's children down by half the room left, clamped at none
+ * (`AlignBlockContent`); set at the top as any block's is, the two lines of
+ * a 60px sidebar picker on nextjs.org sat 4px high in it.
+ *
+ * Asked for when the button is laid out, and again wherever its height is
+ * given to it afterwards — a flex or a grid item stretched to its line, or
+ * put back to the height it was measured at, and an absolute box between
+ * two offsets: the content moves by the difference from where it was last
+ * put. A button that is a flex box or a grid has no such box, and its
+ * content is where its own alignment puts it.
+ */
+export function centreButton(box) {
+    if (!isButtonBlock(box))
+        return;
+    const content = BUTTON_CONTENT.get(box);
+    if (content === undefined)
+        return;
+    const down = Math.max(0, (box.contentHeight - content.height) / 2);
+    const by = down - content.down;
+    if (by === 0 || !Number.isFinite(by))
+        return;
+    content.down = down;
+    // and the static positions kept from its corner with it: a menu under a
+    // button's label opens under the label, where the label went
+    moveContent(box, by);
+}
+/** Move the static positions a block gave the absolutely positioned boxes
+ *  in its flow, at any depth of inline box, which are kept from its own
+ *  corner and not from its content's (`moveContent`). One from a box
+ *  inside it is kept from that box's corner, which moved with the rest. */
+function moveStatics(parent, block, dy) {
+    for (const child of parent.children) {
+        if (child.outOfFlow) {
+            if (child.staticPosition?.from === block)
+                child.staticPosition.y += dy;
+        }
+        else if (child.kind === 'inline')
+            moveStatics(child, block, dy);
+    }
 }
 function translate(box, dx, dy) {
     if (!dx && !dy)
@@ -3383,6 +3688,17 @@ function translate(box, dx, dy) {
         box.marker.x += dx;
         box.marker.y += dy;
     }
+    // the pieces columns broke it in, which are kept beside it
+    if (columned.any) {
+        const pieces = COLUMN_PIECES.get(box);
+        if (pieces) {
+            for (const piece of pieces) {
+                piece.x += dx;
+                piece.y += dy;
+                piece.wholeY += dy;
+            }
+        }
+    }
     if (box.lines) {
         for (const line of box.lines) {
             line.x += dx;
@@ -3512,6 +3828,12 @@ export function establishesBFC(box) {
         return true;
     if (style.position === 'absolute' || style.position === 'fixed')
         return true;
+    // a multicol container (CSS Multi-column 1, 2), and a box that spans
+    // one's columns (6)
+    if (style.columns && box.kind === 'block')
+        return true;
+    if (style.columnSpan && box.parent?.style.columns)
+        return true;
     if (style.display === 'inline-block' ||
         style.display === 'flex' ||
         style.display === 'inline-flex') {
@@ -3522,11 +3844,20 @@ export function establishesBFC(box) {
         box.kind === 'table') {
         return true;
     }
+    // a flex item, and a grid's: each an independent formatting context, which
+    // the margins of what it holds stay inside (CSS Flexbox 1, 4; CSS Grid 1,
+    // 6.1)
+    if (box.parent?.kind === 'flex' && !box.outOfFlow)
+        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;
+    // a button's content is in a formatting context of its own, the
+    // anonymous button content box's (HTML 15.5.5), whatever its `display`
+    if (isButtonBlock(box))
+        return true;
     return box.parent === null;
 }
 /** What a box's `position: relative` offset moves it by, applied after
@@ -3564,23 +3895,42 @@ export function applyRelativeOffsets(box, viewportWidth, viewportHeight) {
         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). */
+// what makes a box a containing block and a layer, as a positioned box is,
+// is asked here by the layouts beside this one
+export { transformed };
+/** How far a box's transform moves it — `translate`, and the translation
+ *  its `transform` comes to with its turns and scales: a percentage is of
+ *  its own border box (CSS Transforms 1, 7). The rest of the transform is
+ *  paint's (`placedMatrix`). */
 function translationOf(box, style = box.style) {
-    let dx = 0;
-    let dy = 0;
-    for (const moved of [style.translate, style.transformTranslate]) {
-        if (!moved)
-            continue;
-        dx += resolve(moved[0], box.width, 0);
-        dy += resolve(moved[1], box.height, 0);
+    if (!transformed(style))
+        return [0, 0];
+    const m = matrixOf(style, box.width, box.height);
+    return [m[4], m[5]];
+}
+/**
+ * The matrix a box is painted through, in the document's coordinates: what
+ * its transform does besides move it — a turn, a scale, a skew — about its
+ * `transform-origin`, where layout has put it (`applyRelativeOffsets`). Null
+ * for a box that only moves, which is every box but a few, and for an
+ * inline box, which no transform applies to (CSS Transforms 1, 2: a
+ * transformable element is no inline box).
+ */
+export function placedMatrix(box) {
+    const style = box.style;
+    if (style.transform === null &&
+        style.rotate === null &&
+        style.scale === null) {
+        return null;
     }
-    return [dx, dy];
+    if (box.kind === 'inline' || box.kind === 'text' || box.kind === 'break') {
+        return null;
+    }
+    const linear = linearOf(style);
+    if (!linear)
+        return null;
+    const origin = style.transformOrigin;
+    return about(linear, box.x + resolve(origin[0], box.width, 0), box.y + resolve(origin[1], box.height, 0));
 }
 /**
  * Move a laid-out box, and everything in it, by how far its translation