@react-x11/components 0.12.0 → 0.14.0

package/src/html/layout/block.ts

@@ -32,12 +32,23 @@ import {
   CONTAIN_SIZE,
   scrolls,
 } from '../css/style.js';
+import { about, linearOf, matrixOf, transformed } from '../css/transform.js';
+import type { Matrix } from '../css/transform.js';
 import { lineOf, spanToName } from './grid-lines.js';
 import type { GridLines } from './grid-lines.js';
+import {
+  columnsOf,
+  forgetColumns,
+  layoutColumns,
+  spansColumns,
+} from './multicol.js';
+import type { Columns } from './multicol.js';
 import {
   BOX_RAISES,
   Box,
   CLAMPED,
+  CLEARED_FROM,
+  COLUMN_PIECES,
   CUT_BLOCKS,
   GRID_TRACKS,
   FIRST_LINE,
@@ -46,6 +57,7 @@ import {
   LINE_BOX_RAISES,
   SHIFTED_LINES,
   TEXT_SHIFTS,
+  columned,
   isBlank,
 } from './boxes.js';
 import type {
@@ -60,6 +72,7 @@ import type {
 import { FloatContext } from './floats.js';
 import {
   faceExtentOf,
+  isButton,
   joinsBefore,
   layoutInline,
   lineHeightMultiplier,
@@ -113,8 +126,15 @@ export interface LayoutContext {
    * package's tree-shaking contract forbids exactly that (AGENTS.md, "no side
    * effects at import time anywhere else"), and a field is cheaper than the
    * exception would be.
+   *
+   * `containing` is the width of the box's containing block where `width`
+   * is the box's own, as a flex layout sized it: what the percentages in
+   * its padding, its margins and its width limits are of (CSS 2.1 8.3,
+   * 8.4, 10.4). Left out, `width` is both — a box probed at the room there
+   * is for it. For a table cell it is the width of its row, which its
+   * padding's percentages are of.
    */
-  layoutSubtree(box: Box, width: number): void;
+  layoutSubtree(box: Box, width: number, containing?: number): void;
   /** How many flex boxes' Yoga passes are running, one inside the last's
    *  measure (`layoutFlex`). */
   flexDepth?: number;
@@ -171,7 +191,8 @@ export function layoutDocument(
     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,
@@ -927,6 +948,8 @@ function layoutChildren(
     }
     first = false;
     const moved = childY !== at;
+    if (moved) CLEARED_FROM.set(child, at);
+    else CLEARED_FROM.delete(child);
     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 —
@@ -1661,16 +1684,28 @@ export function measureIntrinsicWidth(
  * 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: Box, ctx: LayoutContext, width: number): void {
-  resolveEdges(box, Number.isFinite(width) ? width : 0);
+function layoutSubtree(
+  box: Box,
+  ctx: LayoutContext,
+  width: number,
+  /** Its containing block's width, where `width` is the box's own. */
+  containing = width,
+): void {
+  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);
 }
@@ -1784,9 +1819,13 @@ function layoutBox(
     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) box.lines = null;
@@ -1797,7 +1836,19 @@ function layoutBox(
     if (box.style.listStylePosition === 'inside') MARKER_ASCENT.delete(box);
     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.
@@ -1841,7 +1892,16 @@ function layoutBox(
           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.
@@ -1853,6 +1913,103 @@ function layoutBox(
     box.marginBottom = marginOf(bottom);
   } else 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: Box,
+  ctx: LayoutContext,
+  columns: Columns,
+  contentWidth: number,
+  borderBoxWidth: number,
+): number {
+  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: number | null = 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: Box): number {
+  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);
 }
 
 /**
@@ -2163,13 +2320,25 @@ function stretchHeight(box: Box): number | null {
 }
 
 /**
- * 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<Box, number>();
 
+/**
+ * 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<Box, number>();
+
 /**
  * Hand a box's children the height their percentages resolve against —
  * through inline boxes, which are no containing block, to the inline-block
@@ -2485,7 +2654,7 @@ function blockWidth(
 ): number {
   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) {
@@ -2493,9 +2662,11 @@ function blockWidth(
       return ratioMinimum(box, clamped, percentBase, ctx);
     }
     const room = Math.max(0, available);
+    const keyword =
+      style.widthKeyword ?? (fitsContent(box) ? 'fit-content' : null);
     const width =
-      style.widthKeyword && ctx
-        ? contentSizedWidth(box, ctx, style.widthKeyword, room, percentBase)
+      keyword && ctx
+        ? contentSizedWidth(box, ctx, keyword, room, percentBase)
         : room;
     return clampWidth(
       box,
@@ -2514,6 +2685,43 @@ function blockWidth(
   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: Box): boolean {
+  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: ComputedStyle, base: number): boolean {
+  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
@@ -2713,7 +2921,7 @@ function shrinkToFitWidth(
   offset = 0,
 ): number {
   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'
@@ -2948,8 +3156,12 @@ function wordBound(box: Box, fonts: FontsLike, measured: boolean): number {
  * 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: Box): number {
+export function intrinsicWidth(box: Box, seen?: { cut: boolean }): number {
   // under size containment, as though it held nothing: the size
   // `contain-intrinsic-size` gives it, or none (CSS Containment 2, 3.2)
   if (contained(box, CONTAIN_WIDTH)) {
@@ -2988,6 +3200,12 @@ export function intrinsicWidth(box: Box): number {
       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
@@ -2998,6 +3216,9 @@ export function intrinsicWidth(box: Box): number {
   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;
     if (child.outOfFlow) continue;
@@ -3019,14 +3240,35 @@ export function intrinsicWidth(box: Box): number {
     // 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));
       }
       if (min > inner) 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;
@@ -3052,6 +3294,19 @@ export function intrinsicWidth(box: Box): number {
     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;
 }
 
@@ -3316,6 +3571,22 @@ function placeFloat(
   });
 }
 
+/** 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: Box): boolean {
+  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
@@ -3437,11 +3708,25 @@ function layoutPositioned(box: Box, containing: Box, ctx: LayoutContext): void {
       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,
+      style.widthKeyword === 'stretch' ||
+        (control &&
+          style.width === AUTO &&
+          style.widthKeyword === null &&
+          left !== null &&
+          right !== null)
+        ? width
+        : null,
       cbWidth,
     );
   } else layoutOwn(box, ctx, width);
@@ -3510,12 +3795,17 @@ function layoutPositioned(box: Box, containing: Box, ctx: LayoutContext): void {
     );
     // — a box with a ratio has its height from its width
     const stretches =
-      style.height === AUTO && box.kind !== 'replaced' && !boxRatio(box);
+      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) box.height = clampHeight(box, fill);
+    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)
@@ -4023,11 +4313,84 @@ export function moveTo(box: Box, x: number, y: number): void {
   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: Box, dy: number): void {
+  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: Box): boolean {
+  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<Box, { height: number; down: number }>();
+
+/**
+ * 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: Box): void {
+  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: Box, block: Box, dy: number): void {
+  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: Box, dx: number, dy: number): void {
@@ -4039,6 +4402,17 @@ function translate(box: Box, dx: number, dy: number): void {
     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;
@@ -4163,6 +4537,10 @@ export function establishesBFC(box: Box): boolean {
   if (style.lineClamp !== null) return true;
   if (style.float !== 'none') 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' ||
@@ -4177,10 +4555,17 @@ export function establishesBFC(box: Box): boolean {
   ) {
     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;
 }
 
@@ -4221,23 +4606,48 @@ export function applyRelativeOffsets(
   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: ComputedStyle): boolean {
-  return style.translate !== null || style.transformTranslate !== null;
-}
+// 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 `translate` and a `transform` move a box: a percentage is of
- *  its own border box (CSS Transforms 1, 7). */
+/** 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: Box, style = box.style): [number, number] {
-  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: Box): Matrix | null {
+  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),
+  );
 }
 
 /**