react-x11 2.22.3 → 2.22.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.22.3",
+  "version": "2.22.5",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [

package/src/nodes/animation.js

@@ -491,6 +491,7 @@ export class NodeAnimation {
         this.root.needsLayout = true;
         this.root._floorsDirty = true;
         this.root._floorsSources.add(this);
+        this.root._floorsOtherSources.add(this);
       }
     }
     // A tick writes `this.style` without going through `_retarget`, so it

package/src/nodes/damage.js

@@ -59,6 +59,13 @@ export const layoutDiff = {
   // would have claimed its children — claims its own box instead, since the
   // move claimed nothing for it.
   ride: false,
+
+  // Whether this walk may leave alone a subtree yoga did not reach under a
+  // parent that did not move (`Node._followParent`) — everything in it is
+  // where the last walk put it. False on a frame something scrolled on, or
+  // asked to: a scroll moves boxes without a pass, and the walk is what
+  // carries the offset down to them (`WindowNode._walkWhole`).
+  skipUnreached: false,
 };
 
 // What an invalidate() may name as its reason — a small closed set, so the

package/src/nodes/invalidate.js

@@ -309,6 +309,11 @@ export class WindowInvalidate {
     const windowToo = reach !== PANES_ONLY;
     if (layoutChanged) {
       this.needsLayout = true;
+      // What the next walk may skip (`layoutDiff.skipUnreached`): nothing,
+      // after a scroll or a change that names no node.
+      if (reason === 'scroll' || !source || source === this) {
+        this._walkWhole = true;
+      }
       // The content floors are measured from the tree, so anything that
       // changed it has to give them up — and **scrolling does not**, which is
       // the whole reason this is not just `needsLayout`: a scroll moves an
@@ -325,8 +330,10 @@ export class WindowInvalidate {
         // …and which node changed, so that a change inside a box that sizes
         // itself measures that box and nothing around it (`_floorsScope`).
         // A claim that names no node, or names the window, is the tree's.
-        if (source && source !== this) this._floorsSources.add(source);
-        else this._floorsUnscoped = true;
+        if (source && source !== this) {
+          this._floorsSources.add(source);
+          if (reason !== 'child-list') this._floorsOtherSources.add(source);
+        } else this._floorsUnscoped = true;
       }
       if (reason !== 'scroll' && reason !== 'resize' && reason !== 'position') {
         this._floorsContentDirty = true;

package/src/nodes/layout.js

@@ -5,6 +5,7 @@
 import { Yoga } from '../yoga.js';
 import { callHandler } from '../errors.js';
 import { DAMAGE_SLOP, layoutDiff } from './damage.js';
+import { resolveBorderWidths } from '../styles.js';
 import { insetRect, intersectRects, outerPixels, outside } from './rects.js';
 import { DEV } from './util.js';
 
@@ -228,22 +229,29 @@ export class NodeLayout {
   }
 
   /**
-   * A child of a node that moved this pass, which yoga did not lay out
-   * again: its box and everything under it sit exactly where the last pass
-   * put them relative to their parents, so the whole subtree moves by
-   * however far its parent did (`dx`, `dy`) — `_shiftAbs`, the scroll fast
-   * path's translation (issue #405), instead of the walk. Answers whether
-   * it was handled; false means walk it.
+   * A child yoga did not lay out again: its box and everything under it
+   * sit exactly where the last pass put them relative to their parents, so
+   * the whole subtree moves by however far its parent did (`dx`, `dy`) —
+   * `_shiftAbs`, the scroll fast path's translation (issue #405), instead
+   * of the walk — and where its parent did not move, it has not moved at
+   * all, and there is nothing to do, unless something scrolled since the
+   * last walk (`layoutDiff.skipUnreached`): a scroll moves boxes with no
+   * pass, and it is the walk that carries the new offset down to them.
+   * Answers whether it was handled; false means walk it.
    *
    * The witness is yoga's has-new-layout flag, the one that fast path
    * reads: a pass sets it on every node it lays out and on every child of
    * one, cached or not, so a child it is clear on was not reached, nor was
    * anything under it. Cleared here when it is found set, just before the
    * walk that reads what the pass left — no pass runs in between — so the
-   * next move of the same subtree finds it clear. Nothing else pays for
-   * it: a child of a node that did not move is walked as it always was,
-   * and a scroll pane always is, since its flag is its own (and a scroll
-   * moves its children with no pass at all).
+   * next look at the same subtree finds it clear. A scroll pane is always
+   * walked, since its flag is its own (and a scroll moves its children
+   * with no pass at all).
+   *
+   * Walking a subtree nothing moved was the whole tree for a change in one
+   * place: a block that arrived at the end of a document of 13,000 boxes
+   * was laid out alone, and the walk still read four numbers out of yoga
+   * for every box in the document — 30 ms of a 60 ms frame.
    *
    * Walking such a subtree read four numbers out of yoga per node and wrote
    * them back unchanged: the bodies of a graph's cards, fifty widgets deep,
@@ -255,13 +263,13 @@ export class NodeLayout {
    * walk's claims came to.
    */
   _followParent(dx, dy) {
-    if (dx === 0 && dy === 0) return false;
     const yoga = this.yoga;
     if (!yoga || !this._placed || this.isScroller?.()) return false;
     if (yoga.hasNewLayout()) {
       yoga.markLayoutSeen();
       return false;
     }
+    if (dx === 0 && dy === 0) return layoutDiff.skipUnreached;
     const sink = layoutDiff.sink;
     const shift = layoutDiff.shift;
     if (
@@ -513,12 +521,33 @@ export class NodeLayout {
         ) {
           return;
         }
+        // …and one that rode it and only grew or shrank changed the pixels
+        // along the edges that moved — the column a virtualized document's
+        // blocks sit in, whose spacers re-slice in the scroll's own frame
+        const bands =
+          had && was.x === x && was.y === y && width > 0 && height > 0
+            ? this._edgeBands(was, grow)
+            : null;
+        if (bands) {
+          for (const band of bands) layoutDiff.sink(band, this);
+          return;
+        }
         if (had) layoutDiff.sink(insetRect(was, -grow), this);
         if (width > 0 && height > 0) {
           layoutDiff.sink(insetRect(this.abs, -grow), this);
         }
         return;
       }
+      // A box that stayed where it was and only grew or shrank changed the
+      // pixels along the edges that moved, and no others (`_edgeBands`)
+      const bands =
+        had && old.x === x && old.y === y && width > 0 && height > 0
+          ? this._edgeBands(old, grow)
+          : null;
+      if (bands) {
+        for (const band of bands) layoutDiff.sink(band, this);
+        return;
+      }
       if (had) {
         layoutDiff.sink(insetRect(old, -grow), this);
       }
@@ -528,6 +557,64 @@ export class NodeLayout {
     }
   }
 
+  /**
+   * The pixels a resize changed, for a box whose origin held: a band along
+   * each edge that moved, from where it was to where it is, as deep as the
+   * box's paint reaches in from that edge — a rounded corner, a border, a
+   * shadow's or an outline's reach. Its own paint anywhere else is the same
+   * solid fill it was, and its children claim for themselves when they move.
+   *
+   * A tall box that grows at its far end is the case: a document or a log
+   * or a virtualized list whose column gained a block far below the fold
+   * claimed the column, clipped to its scroll box — the whole viewport — on
+   * every frame it grew, for pixels that were all out of sight.
+   *
+   * Null where the whole box has to be claimed: anything that is not a
+   * plain box, one that scrolls (its bars are sized by it), one whose
+   * gradient is stretched over it, and one drawn through a group surface.
+   */
+  _edgeBands(old, grow) {
+    if (this.kind !== 'box' || this.isScroller?.()) return null;
+    const style = this.style;
+    if (style.backgroundImage) return null;
+    if (style.opacity !== undefined && style.opacity < 1) return null;
+    const bw = resolveBorderWidths(style, this.direction);
+    const reach =
+      Math.max(
+        style.borderRadius ?? 0,
+        bw.top,
+        bw.right,
+        bw.bottom,
+        bw.left,
+        grow,
+      ) + DAMAGE_SLOP;
+    const now = this.abs;
+    const bands = [];
+    const oldBottom = old.y + old.height;
+    const newBottom = now.y + now.height;
+    if (oldBottom !== newBottom) {
+      const top = Math.min(oldBottom, newBottom) - reach;
+      bands.push({
+        x: now.x - reach,
+        y: top,
+        width: Math.max(old.width, now.width) + 2 * reach,
+        height: Math.max(oldBottom, newBottom) + reach - top,
+      });
+    }
+    const oldRight = old.x + old.width;
+    const newRight = now.x + now.width;
+    if (oldRight !== newRight) {
+      const left = Math.min(oldRight, newRight) - reach;
+      bands.push({
+        x: left,
+        y: now.y - reach,
+        width: Math.max(oldRight, newRight) + reach - left,
+        height: Math.max(old.height, now.height) + 2 * reach,
+      });
+    }
+    return bands;
+  }
+
   /**
    * Move an already-laid-out subtree by a constant, without asking yoga
    * anything — the scroll fast path's walk (issue #405).

package/src/nodes/node.js

@@ -384,8 +384,10 @@ export class Node {
     // captured before the child joins, so it covers the arrangement that is
     // about to be replaced (see _childListChanged). A viewport mid-blit has
     // nothing vacating — the child being added had no pixels — and the
-    // layout diff claims where it lands, so it names no region at all.
-    const before = this._blitLedgerOpen() ? null : this._childListBefore();
+    // layout diff claims where it lands, so it names no region at all. A
+    // child already here is a move, and says so (`_childListFine`).
+    const fine = this._childListFine(child.parent !== this);
+    const before = fine ? null : this._childListBefore();
     // a move has to leave the yoga tree too — yoga aborts on insertChild of
     // a node that still has a parent
     if (child.parent === this && this._joinsYoga(child)) {
@@ -414,7 +416,7 @@ export class Node {
     // against the app's, and only now can see the `scale` props above it.
     child._rescaleSubtree(mounting);
     this._textContentChanged();
-    this._childListChanged(before);
+    this._childListChanged(before, fine);
     a11yHooks.attached?.(this, child);
   }
 
@@ -464,7 +466,7 @@ export class Node {
    * through the layout diff in flush(), which is what lets this claim stay
    * bounded without requiring the node's own size to be pinned.
    */
-  _childListChanged(before) {
+  _childListChanged(before, fine = this._childListFine(true)) {
     // belt for a subtree attached imperatively with its rect already laid
     // out — nothing then re-runs _assignAbs to notice the reach grew
     this._clearHitBounds();
@@ -477,7 +479,7 @@ export class Node {
     // and says nothing about the ones that only rode the scroll. Joining
     // `_reflowed` would undo both — its post-layout claim is this node's
     // box, the whole band the blit is about to move.
-    if (this._blitLedgerOpen()) {
+    if (fine) {
       root.invalidate(true, before ?? NO_DAMAGE, 'child-list', this);
       return;
     }
@@ -485,6 +487,39 @@ export class Node {
     root._reflowed.add(this);
   }
 
+  /**
+   * Whether a child-list change here is claimed the fine way — the child
+   * that leaves claims its own rect, and the layout diff names where an
+   * entering child lands and whatever its arrival displaced — rather than
+   * as this node's box before and after the pass.
+   *
+   * Always for a viewport keeping a ledger this frame (issue #398). And,
+   * for a child that enters or leaves (`entersOrLeaves`), for any node
+   * inside a scroll box, scrolling or not: a document's blocks, the rows
+   * of a virtualized list one box down from its scroll box, a log that
+   * grows. Such a node is usually taller than the view, and its box
+   * clipped to the viewport is the whole viewport — so every re-slice of
+   * a list inside a column, all of it below the fold, repainted the view,
+   * and one landing in a scroll's frame poisoned its blit. The diff runs
+   * over every node that pass laid out, however deep, and a node that
+   * only grew claims the edge that moved (`_edgeBands`).
+   *
+   * Not for a move: a child moved within the list keeps its rect when
+   * what changed is only which sibling it is painted over, and no rect
+   * says that. Nor for a scroll box's own children outside a ledger frame:
+   * its box is also the claim that repaints its bars, which its content
+   * sizes.
+   */
+  _childListFine(entersOrLeaves) {
+    if (this._blitLedgerOpen()) return true;
+    if (!entersOrLeaves) return false;
+    for (let n = this.parent; n; n = n.parent) {
+      if (n.isWindow) return false;
+      if (n.isScroller?.()) return true;
+    }
+    return false;
+  }
+
   removeChild(child) {
     const index = this._indexOfChild(child);
     if (index === -1) return;
@@ -494,7 +529,8 @@ export class Node {
     // captured while the child is still attached, so it covers the rect the
     // child is about to stop occupying — the child's own, for a viewport
     // mid-blit, where this node's box is the whole scrolled band
-    const before = this._blitLedgerOpen()
+    const fine = this._childListFine(true);
+    const before = fine
       ? (child._claimBounds() ?? NO_DAMAGE)
       : this._childListBefore();
     this.children.splice(index, 1);
@@ -515,7 +551,7 @@ export class Node {
       child.yoga = null;
     }
     this._textContentChanged();
-    this._childListChanged(before);
+    this._childListChanged(before, fine);
   }
 
   /** Destroy real resources (X windows) in this subtree. Yoga nodes are

package/src/nodes/queries.js

@@ -197,6 +197,7 @@ export class NodeQueries {
         this.root._floorsDirty = true;
         this.root._floorsContentDirty = true;
         this.root._floorsSources.add(this);
+        this.root._floorsOtherSources.add(this);
       }
     }
   }

package/src/nodes/scrollable.js

@@ -30,6 +30,56 @@ import { BLIT_POISONED } from './scrollblit.js';
 
 const clampScroll = (v, max) => Math.min(Math.max(0, v), max);
 
+/**
+ * How far everything under `node` reaches from its origin — the leftmost
+ * edge, the rightmost, the lowest — through every box that does not clip
+ * what it holds: the walk `measureScrollContent` sums a pane's extent from.
+ *
+ * Kept on each box (`_contentReach`) and reused while yoga has laid nothing
+ * under it out again. Its has-new-layout flag is set on every box a pass
+ * lays out and on each child of one, and a change anywhere below dirties
+ * every box above it, so a clear flag is a subtree whose boxes sit where
+ * they did relative to it — the same witness `_followParent` reads, read
+ * here before the walk that clears it. Hiding a box, or clipping one, goes
+ * through yoga too (`display`, `overflow`). A layout host places its
+ * children where yoga cannot see, so neither it nor they keep one.
+ *
+ * Walked whole, a pane's content cost every box in it on every pass that
+ * laid out any of it: a block arriving at the end of a document of 13,000
+ * boxes read three numbers out of yoga for each of them.
+ */
+function contentReach(node, top) {
+  const cached = node._contentReach;
+  if (
+    !top &&
+    cached !== undefined &&
+    node._host === null &&
+    node.parent?._host === null &&
+    !node.yoga.hasNewLayout()
+  ) {
+    return cached;
+  }
+  let left = Infinity;
+  let right = -Infinity;
+  let bottom = -Infinity;
+  for (const child of node.children) {
+    if (child.isWindow || !child.yoga || child.hidden) continue;
+    const offset = offsetInParent(child);
+    left = Math.min(left, offset.x);
+    right = Math.max(right, offset.x + child.yoga.getComputedWidth());
+    bottom = Math.max(bottom, offset.y + child.yoga.getComputedHeight());
+    if (!child.clipsChildren()) {
+      const inner = contentReach(child, false);
+      left = Math.min(left, offset.x + inner.left);
+      right = Math.max(right, offset.x + inner.right);
+      bottom = Math.max(bottom, offset.y + inner.bottom);
+    }
+  }
+  const reach = { left, right, bottom };
+  if (!top) node._contentReach = reach;
+  return reach;
+}
+
 /**
  * One axis of a scroll request held for a pass
  * (`Scrollable._holdScrollTo`): `{ base, steps }`, the request the extent in
@@ -435,21 +485,9 @@ export const Scrollable = (Base) =>
     measureScrollContent() {
       const rtl = this.direction === 'rtl';
       const width = this.yoga.getComputedWidth();
-      let start = 0;
-      let bottom = 0;
-      const walk = (node, dx, dy) => {
-        for (const child of node.children) {
-          if (child.isWindow || !child.yoga || child.hidden) continue;
-          const offset = offsetInParent(child);
-          const x = dx + offset.x;
-          const y = dy + offset.y;
-          const w = child.yoga.getComputedWidth();
-          start = Math.max(start, rtl ? width - x : x + w);
-          bottom = Math.max(bottom, y + child.yoga.getComputedHeight());
-          if (!child.clipsChildren()) walk(child, x, y);
-        }
-      };
-      walk(this, 0, 0);
+      const reach = contentReach(this, true);
+      const start = Math.max(0, rtl ? width - reach.left : reach.right);
+      const bottom = Math.max(0, reach.bottom);
       // the end padding is part of the content box a browser scrolls to, and
       // it is the one part of it yoga has already resolved for us — on the
       // left in RTL, since that is the end there

package/src/nodes/scrollblit.js

@@ -855,7 +855,15 @@ export class WindowScrollBlit {
       ? unionArea([strip, ...repairs]) - rectArea(strip)
       : 0;
     if (repairArea > area * BLIT_MAX_CLAIM_AREA) return;
-    if (!this._scrollBlitSafe(node, vp, target.top)) return;
+    // An ancestor's rounded corners reach into the viewport: a scroll box
+    // filling a rounded card, the commonest place a scroll box is. Their
+    // arcs do not translate, but they live in four small squares and
+    // nowhere else, so they are pinned the way an element blit pins them
+    // (issue #691) and repaired below, where they are and where the copy
+    // dragged their image. Refused instead, a list or a document inside a
+    // rounded frame repainted its whole viewport on every step of a scroll.
+    const corners = this._cornerPins(node, vp, target.top);
+    if (!this._scrollBlitSafe(node, vp, target.top, null, corners)) return;
     // The band the scrolled bar's thumb travels in is repaired on its own.
     // The thumb's rects are thin and run along the viewport's edge, and a
     // rect reaching into the band from inside — a column held down the
@@ -932,10 +940,28 @@ export class WindowScrollBlit {
       if (dragged) add(dragged);
     }
     for (const repair of repairs) add(repair);
-    rects = joinAlongEdges(rects).reduce(
-      (capped, rect) => addDamageRect(capped, rect),
-      [],
-    );
+    // Each pinned corner where it is and where the copy put its image — one
+    // box, since a step moves it a few pixels, and less the strip, which
+    // repaints anyway.
+    for (const pin of corners ?? []) {
+      const image = { ...pin, x: pin.x + dx, y: pin.y + dy };
+      const repair = intersectRects(unionRect(pin, image), vp);
+      if (!repair) continue;
+      for (const piece of outside(repair, strip)) add(piece);
+    }
+    // Capped in one call where corners were pinned: two at each end of the
+    // viewport and the strip at one of them are more pieces than the cap
+    // holds, and squeezed under it one at a time a corner joined whatever
+    // box an earlier merge had grown — scrolling back up merged the bottom
+    // corners with the strip at the top, which is the viewport. Offered
+    // together, neighbours merge first (`addDamageRects`), with the room an
+    // element blit's pins get.
+    rects = corners
+      ? addDamageRects([], joinAlongEdges(rects), CONTENTS_BLIT_MAX_RECTS)
+      : joinAlongEdges(rects).reduce(
+          (capped, rect) => addDamageRect(capped, rect),
+          [],
+        );
     // The last gate, and the only one that has to wait until the rects are
     // assembled: damage rects must not overlap, and the frame carries at
     // most MAX_DAMAGE_RECTS of them, so repairs that meet — a column and a

package/src/nodes/window/exactcopy.js

@@ -0,0 +1,65 @@
+// Measuring a box alone without unsettling the tree around it.
+//
+// The renderer lays everything out in one yoga config, rounded to the pixel
+// grid, and a measurement switches the rounding off (`measuringExactly`,
+// styles.js), which yoga answers by treating every layout it has cached as
+// stale: the pass after any measurement lays the whole tree out again. On a
+// document of 13,000 boxes that pass is 58 ms, where one yoga answers from
+// its cache is 0.05 ms. A measurement over the whole tree pays it anyway,
+// having just laid everything out three times; a box measured alone — a
+// card (`_measureBoundary`), a block on a column spine
+// (`_measureSpineRoot`) — is a few dozen boxes, and made the pass after it
+// cost the whole tree.
+//
+// So a box measured alone is measured on copies: its boxes and everything
+// under them, copied into a config that is never rounded
+// (`exactLayoutConfig`), laid out there, read, and freed. The config the tree
+// is laid out in never changes, and yoga's record of the real boxes — their
+// caches, what is dirty — is not touched.
+
+import { Yoga } from '../../yoga.js';
+import { exactLayoutConfig, measuringInExactConfig } from '../../styles.js';
+
+/**
+ * Run `measure` with `root` and everything under it standing on copies of
+ * their boxes: every node's `yoga` is its copy for the duration, so the
+ * floors code measures, reads and writes extents exactly as it would on the
+ * real boxes.
+ *
+ * What a measurement writes on a node stays — its extents. What it writes on
+ * a box — a floor taken off to measure what is under it, a shrink it
+ * borrows, a width it pins — goes with the copy, so the floors' record of
+ * what each real box holds (`_floorMinW`/`_floorMinH`) is put back, and the
+ * floors written after the measurement are judged against the real box.
+ */
+export function onExactCopy(root, measure) {
+  const swapped = [];
+  const copy = (node) => {
+    const real = node.yoga;
+    const box = Yoga.Node.create(exactLayoutConfig());
+    box.copyStyle(real);
+    if (node._measureFn) box.setMeasureFunc(node._measureFn);
+    swapped.push({ node, real, minW: node._floorMinW, minH: node._floorMinH });
+    let at = 0;
+    // the same children yoga has (`Node._joinsYoga`)
+    if (node._host === null) {
+      for (const child of node.children) {
+        if (!child.yoga || child.isWindow) continue;
+        box.insertChild(copy(child), at++);
+      }
+    }
+    node.yoga = box;
+    return box;
+  };
+  const top = copy(root);
+  try {
+    return measuringInExactConfig(measure);
+  } finally {
+    for (const { node, real, minW, minH } of swapped) {
+      node.yoga = real;
+      node._floorMinW = minW;
+      node._floorMinH = minH;
+    }
+    top.freeRecursive();
+  }
+}

package/src/nodes/window/floors.js

@@ -94,7 +94,7 @@ export function inFlow(node) {
 }
 
 /** Which axis this node lays its children out along. */
-const mainAxisOf = (node) => {
+export const mainAxisOf = (node) => {
   const direction = node.style.flexDirection ?? 'column';
   return direction === 'row' || direction === 'row-reverse'
     ? 'width'
@@ -107,7 +107,7 @@ const mainAxisOf = (node) => {
  * content. The same test `writeFloors` applies, asked ahead of time — it is
  * what decides whether a stale extent is one anybody will read.
  */
-function receivesFloor(child, axis) {
+export function receivesFloor(child, axis) {
   const parent = child.parent;
   if (
     !parent ||
@@ -279,6 +279,80 @@ export function dirtyOutside(node, boundaries, paths) {
   return false;
 }
 
+/**
+ * `contentSpan`'s height for a column, from the extents its children
+ * already carry rather than from a measuring pass — the sum a column spine
+ * (`spine.js`) is recomputed with, bottom up, where a pass would lay the
+ * whole tree out to read it.
+ *
+ * It is the same number. In a measuring pass `contentSpan` places each
+ * child at the sum of the extents before it (its `shift`), so what it reads
+ * back is every in-flow child's extent, the margins *between* them — the
+ * first child's leading margin and the last one's trailing margin fall
+ * outside the span, which runs from the first box to the last — the gap
+ * between each pair, and the column's own padding and border. That holds
+ * for a column whose height is its content's, which is the only kind a
+ * spine sums (`isSummableColumn`): with no height of its own the pass has
+ * no free space to justify into, and nothing in it to squash.
+ *
+ * Undefined where it cannot be summed: a child with no extent on hand, a
+ * negative margin (the boxes would overlap, and the last would not have to
+ * be the lowest), or nothing in flow at all — a leaf's answer, which is
+ * `contentSpan`'s to give.
+ */
+export function columnHeightSpan(node) {
+  const yoga = node.yoga;
+  let span = 0;
+  let count = 0;
+  let trailing = 0;
+  for (const child of node.children) {
+    if (!inFlow(child)) continue;
+    const extent = child._floorH;
+    if (extent === undefined) return undefined;
+    const top = marginDown(child.yoga, Yoga.EDGE_TOP);
+    const bottom = marginDown(child.yoga, Yoga.EDGE_BOTTOM);
+    if (!(top >= 0 && bottom >= 0)) return undefined;
+    span += count === 0 ? extent : trailing + top + extent;
+    trailing = bottom;
+    count += 1;
+  }
+  if (count === 0) return undefined;
+  const gap = columnGap(node);
+  if (gap === undefined) return undefined;
+  return (
+    span +
+    gap * (count - 1) +
+    yoga.getComputedPadding(Yoga.EDGE_TOP) +
+    yoga.getComputedPadding(Yoga.EDGE_BOTTOM) +
+    yoga.getComputedBorder(Yoga.EDGE_TOP) +
+    yoga.getComputedBorder(Yoga.EDGE_BOTTOM)
+  );
+}
+
+/**
+ * A box's margin on one edge down the page, from its style as yoga resolves
+ * it — the edge, else the vertical pair, else all four — rather than from a
+ * pass: a box that has just arrived has never been laid out in the tree, and
+ * its computed margins read 0 until it is. Undefined where it is not a
+ * length (a percentage, `auto`).
+ */
+function marginDown(yoga, edge) {
+  for (const at of [edge, Yoga.EDGE_VERTICAL, Yoga.EDGE_ALL]) {
+    const value = yoga.getMargin(at);
+    if (value.unit === Yoga.UNIT_POINT) return value.value;
+    if (value.unit !== Yoga.UNIT_UNDEFINED) return undefined;
+  }
+  return 0;
+}
+
+/** The gap a column leaves between its rows, as yoga resolves it — the row
+ *  gutter, else the both-ways one — or undefined where it is not a length. */
+function columnGap(node) {
+  const style = node.style;
+  const gap = style.rowGap ?? style.gap ?? 0;
+  return typeof gap === 'number' ? gap : undefined;
+}
+
 /**
  * After a pass that settled the widths: which of the height floors, each a
  * height *for a width*, were measured for a width their node no longer has.

package/src/nodes/window/flush.js

@@ -212,6 +212,9 @@ export class WindowFlush {
       }
       // the moves this walk hands over to be copied are this frame's alone
       this._rigidMoves = null;
+      // a subtree no pass reached and nothing scrolled in is where the last
+      // walk left it (`_followParent`)
+      layoutDiff.skipUnreached = !this._walkWhole;
       try {
         // `_absolutizeChildren`, not the loop it wraps: a `<window
         // style={{overflow: 'scroll'}}>` is a scroll container like any box,
@@ -219,7 +222,9 @@ export class WindowFlush {
         this._absolutizeChildren(0, 0);
       } finally {
         layoutDiff.sink = null;
+        layoutDiff.skipUnreached = false;
       }
+      this._walkWhole = false;
       // …and placed nodes against the arrangement that walk produced: where
       // one goes depends on where its pane and its parent landed
       if (this._placedNodes.size !== 0) this._placeNodes();

package/src/nodes/window/size.js

@@ -8,9 +8,12 @@ import { Yoga } from '../../yoga.js';
 import {
   captureLeafHeights,
   collectFloorStale,
+  columnHeightSpan,
+  declaresOwnMinimum,
   dirtyOutside,
   floorBoundaryOf,
   probeHeightFloors,
+  receivesFloor,
   setMeasuringShrink,
   restoreShrink,
   freezeWidths,
@@ -18,6 +21,8 @@ import {
   contentSpan,
   writeFloors,
 } from './floors.js';
+import { spineScope } from './spine.js';
+import { onExactCopy } from './exactcopy.js';
 import {
   MAX_WINDOW_EXTENT,
   clampExtent,
@@ -36,18 +41,14 @@ import {
 // REACT_X11_NO_SCROLL_BLIT gives.
 const NO_SCOPED_FLOORS = process.env.REACT_X11_NO_SCOPED_FLOORS === '1';
 
-/**
- * Mark a box laid out alone (`_measureBoundary`) for the window's pass to lay
- * out again. It was laid out at the size that pass will give it, so yoga
- * would answer from its cache and keep what the measurement left inside —
- * placed off the pixel grid, with the shrink borrowed. A style set to
- * something else and back is how a box with no measure function says it
- * changed.
- */
-function relayOut(node) {
-  const shrink = node.style.flexShrink ?? 1;
-  node.yoga.setFlexShrink(shrink + 1);
-  node.yoga.setFlexShrink(shrink);
+/** Take a node's extents off, as `collectFloorStale` does a dirty child's:
+ *  both are measured again, and the minimum yoga holds may no longer be
+ *  the one the floors wrote. */
+function forgetExtents(node) {
+  node._floorW = undefined;
+  node._floorH = undefined;
+  node._floorMinW = null;
+  node._floorMinH = null;
 }
 
 /** Content-sized windows, installed onto `WindowNode.prototype` by window.js. */
@@ -132,12 +133,43 @@ export class WindowSize {
     const scope = this._floorsScope();
     this._floorsScopeNow = scope;
     if (scope !== null) {
+      const spine = this._floorsSpineNow;
       for (const boundary of scope) {
-        // its children's floors are written from here; its own extent is
-        // its style's, and stands
+        if (spine?.roots.has(boundary)) {
+          // A spine's root is measured with what is inside it, unlike a box
+          // that sizes itself, and its column writes the floor it gets.
+          forgetExtents(boundary);
+          if (receivesFloor(boundary, 'width')) found.width = true;
+          if (receivesFloor(boundary, 'height')) found.height = true;
+          this._floorsStale.add(boundary.parent);
+        }
+        // its children's floors are written from here; a sized box's own
+        // extent is its style's, and stands
         this._floorsStale.add(boundary);
         collectFloorStale(boundary, this._floorsStale, found, false);
       }
+      if (spine !== null) {
+        // the columns the roots sit in are summed again (`_sumSpine`), and
+        // every one of them writes its children's floors, as the box each
+        // spine stops at does
+        for (const column of spine.spine) {
+          column._floorW = undefined;
+          column._floorH = undefined;
+          this._floorsStale.add(column);
+          if (receivesFloor(column, 'height')) found.height = true;
+        }
+        for (const stop of spine.stops) this._floorsStale.add(stop);
+        // How wide a root is in the width pass is worked out on the way
+        // down from the window (spine.js), and past a row only a pass over
+        // the whole tree knows. A width owed there is the whole tree's.
+        if (found.width) {
+          for (const widths of spine.roots.values()) {
+            if (widths.widthPass !== null) continue;
+            this._floorsUnscoped = true;
+            return this._collectFloorStale();
+          }
+        }
+      }
       return found;
     }
     // the root's own children are written from here too, and its direction
@@ -189,16 +221,37 @@ export class WindowSize {
     ) {
       return null;
     }
+    this._floorsSpineNow = null;
     const boundaries = new Set();
+    // the changes no sized box holds, which a column spine may (spine.js)
+    const loose = [];
     for (const source of sources) {
       // gone, or moved to another window: its old parent's child list is
       // the change that counts, and that parent said so itself
       if (source.destroyed || source.root !== this) continue;
       const boundary = floorBoundaryOf(source, this);
-      if (boundary === null) return null;
-      boundaries.add(boundary);
+      if (boundary === null) loose.push(source);
+      else boundaries.add(boundary);
+    }
+    let spine = null;
+    if (loose.length !== 0) {
+      spine = spineScope(
+        this,
+        loose,
+        (node) => !this._floorsOtherSources.has(node),
+      );
+      if (spine === null) return null;
+      // a sized box inside a root is measured with the root
+      for (const boundary of [...boundaries]) {
+        for (let n = boundary.parent; n && n !== this; n = n.parent) {
+          if (spine.roots.has(n)) {
+            boundaries.delete(boundary);
+            break;
+          }
+        }
+      }
     }
-    if (boundaries.size === 0) return null;
+    if (boundaries.size === 0 && spine === null) return null;
     // the outermost of nested ones: measuring it measures what it holds
     const paths = new Set();
     for (const boundary of [...boundaries]) {
@@ -214,10 +267,94 @@ export class WindowSize {
         paths.add(n);
       }
     }
+    if (spine !== null) {
+      for (const root of spine.roots.keys()) {
+        boundaries.add(root);
+        for (let n = root.parent; n && n !== this; n = n.parent) paths.add(n);
+      }
+      // the columns summed, and the stops with the way down to them: a
+      // child that left one is a change to it, and nothing below it
+      for (const column of spine.spine) paths.add(column);
+      for (const stop of spine.stops) {
+        for (let n = stop; n && n !== this; n = n.parent) paths.add(n);
+      }
+    }
     if (dirtyOutside(this, boundaries, paths)) return null;
+    this._floorsSpineNow = spine;
     return boundaries;
   }
 
+  /**
+   * One spine root's floors, measured with it laid out alone — at the width
+   * it has in each of the passes over the whole tree (`spine.js`), and with
+   * no height on offer in either height pass, because down a column whose
+   * height is its content's the pass over the whole tree has none to offer
+   * it either. Its own extents are written here: unlike a box that sizes
+   * itself, a root's are its content's, and the column it sits in is summed
+   * from them (`_sumSpine`).
+   */
+  _measureSpineRoot(root, widths, axis, probe = false) {
+    onExactCopy(root, () =>
+      this._measureSpineRootOnCopy(root, widths, axis, probe),
+    );
+  }
+
+  _measureSpineRootOnCopy(root, widths, axis, probe) {
+    const yoga = root.yoga;
+    const dir =
+      root.direction === 'rtl' ? Yoga.DIRECTION_RTL : Yoga.DIRECTION_LTR;
+    if (axis === 'width') {
+      const shrunk = [];
+      setMeasuringShrink(root, axis, shrunk);
+      this._scopedFloorPasses += 1;
+      yoga.calculateLayout(widths.widthPass, undefined, dir);
+      const span = contentSpan(root, axis, null, this);
+      root._floorW = declaresOwnMinimum(root, axis)
+        ? yoga.getComputedWidth()
+        : span;
+      restoreShrink(shrunk);
+      return;
+    }
+    this._scopedFloorPasses += 1;
+    yoga.calculateLayout(widths.width, undefined, dir);
+    if (probe) {
+      const hit = { marked: false, owed: false };
+      probeHeightFloors(root, this, hit, root);
+      if (hit.marked) {
+        this._writeFloors('height');
+        this._scopedFloorPasses += 1;
+        yoga.calculateLayout(widths.width, undefined, dir);
+      }
+    }
+    const intrinsic = new Map();
+    captureLeafHeights(root, intrinsic);
+    const frozen = [];
+    freezeWidths(root, frozen);
+    const shrunk = [];
+    setMeasuringShrink(root, axis, shrunk);
+    this._scopedFloorPasses += 1;
+    yoga.calculateLayout(widths.width, undefined, dir);
+    const span = contentSpan(root, axis, intrinsic, this);
+    root._floorH = declaresOwnMinimum(root, axis)
+      ? yoga.getComputedHeight()
+      : span;
+    root._floorAtW = yoga.getComputedWidth();
+    this._floorsMeasured += 1;
+    restoreWidths(frozen);
+    restoreShrink(shrunk);
+  }
+
+  /** The columns of this frame's spines, deepest first, summed from their
+   *  children's extents (`columnHeightSpan`) — their widths are the last
+   *  pass's, which is what a height is for. */
+  _sumSpine(columns) {
+    for (const column of columns) {
+      column._floorH = columnHeightSpan(column);
+      column._floorAtW = column.yoga.getComputedWidth();
+      this._floorsMeasured += 1;
+    }
+  }
+
   /**
    * One boundary's floors, measured with it laid out alone — the passes
    * `_measureContentSpans` runs over the whole tree, run over the box: its
@@ -226,6 +363,15 @@ export class WindowSize {
    * leaves whose width moved, stopped at the box, whose own extent stands.
    */
   _measureBoundary(boundary, axis, probe = false) {
+    // on copies of its boxes (exactcopy.js): the tree's own are left as the
+    // last pass cached them, which is what keeps the pass after this one
+    // from laying the whole tree out again
+    onExactCopy(boundary, () =>
+      this._measureBoundaryOnCopy(boundary, axis, probe),
+    );
+  }
+
+  _measureBoundaryOnCopy(boundary, axis, probe) {
     const yoga = boundary.yoga;
     const dir =
       boundary.direction === 'rtl' ? Yoga.DIRECTION_RTL : Yoga.DIRECTION_LTR;
@@ -236,7 +382,6 @@ export class WindowSize {
       yoga.calculateLayout(undefined, undefined, dir);
       contentSpan(boundary, axis, null, this);
       restoreShrink(shrunk);
-      relayOut(boundary);
       return;
     }
     this._scopedFloorPasses += 1;
@@ -261,7 +406,6 @@ export class WindowSize {
     contentSpan(boundary, axis, intrinsic, this);
     restoreWidths(frozen);
     restoreShrink(shrunk);
-    relayOut(boundary);
   }
 
   /** The floors on the children of every node found stale, from the extents
@@ -386,8 +530,10 @@ export class WindowSize {
     this._floorsSwept = true;
     this._floorsWidth = width;
     this._floorsSources.clear();
+    this._floorsOtherSources.clear();
     this._floorsUnscoped = false;
     this._floorsScopeNow = null;
+    this._floorsSpineNow = null;
   }
 
   /**
@@ -398,16 +544,21 @@ export class WindowSize {
    * everywhere but the boxes and the way down to them.
    */
   _applyScopedFloors(boundaries, found, width, height) {
-    measuringExactly(() => {
-      if (found.width) {
-        this._writeFloors('width');
-        for (const boundary of boundaries) {
-          this._measureBoundary(boundary, 'width');
-        }
-      }
+    const spine = this._floorsSpineNow;
+    const measure = (boundary, axis, probe) => {
+      const widths = spine?.roots.get(boundary);
+      if (widths) this._measureSpineRoot(boundary, widths, axis, probe);
+      else this._measureBoundary(boundary, axis, probe);
+    };
+    // Measured on copies in the exact config (exactcopy.js), so the
+    // renderer's config never leaves the grid, and the pass below answers
+    // from its cache everywhere these boxes and the way down to them are not.
+    if (found.width) {
       this._writeFloors('width');
-      this._writeFloors('height');
-    });
+      for (const boundary of boundaries) measure(boundary, 'width');
+    }
+    this._writeFloors('width');
+    this._writeFloors('height');
     let heights = found.height;
     let probed = false;
     if (!heights) {
@@ -420,13 +571,12 @@ export class WindowSize {
       probed = true;
     }
     if (heights) {
-      measuringExactly(() => {
-        this._writeFloors('height');
-        for (const boundary of boundaries) {
-          this._measureBoundary(boundary, 'height', !probed);
-        }
-        this._writeFloors('height');
-      });
+      this._writeFloors('height');
+      for (const boundary of boundaries) {
+        measure(boundary, 'height', !probed);
+      }
+      if (spine !== null) this._sumSpine(spine.spine);
+      this._writeFloors('height');
       this._layoutRoot(width, height);
     }
   }

package/src/nodes/window/spine.js

@@ -0,0 +1,294 @@
+// Column spines: the scope a change outside every sized box can still be
+// measured in (`WindowNode._floorsScope`), when what stands between it and a
+// box that sizes itself is a run of columns whose height is their content's.
+//
+// A document, a log, a chat transcript, a feed: one scroll pane, one column
+// in it, thousands of blocks in the column. A block that arrives or changes
+// there is confined to nothing `isFloorBoundary` recognises, so it used to
+// be measured with the whole tree — three layout passes over every block,
+// each evicting the one yoga cached for the pass before — to learn the
+// extents of one block and the column it sits in. A spine measures the
+// block alone and sums the column: `columnHeightSpan` over the extents its
+// other children already carry.
+//
+// Three facts make that the same answer the whole tree gives:
+//
+// - Down a column whose height is its content's, the measuring passes have
+//   no free space to squash into, so a block in it is laid out at its
+//   content height in every pass. Laid out alone with no height on offer,
+//   it comes out the same.
+// - Across, a block stretched over its column is as wide as the column's
+//   content box, in every pass: now, at the width the heights are measured
+//   for, and in the width pass, whose width the way down from the root
+//   decides (`widthPassWidth`).
+// - Only heights travel up a spine. A column writes floors down its main
+//   axis, and the box a spine stops at names its own size on both axes
+//   (`isSpineStop`), so no width extent above the block is ever read. They
+//   are left unmeasured, which is what the floors do with every extent
+//   nobody reads (`collectFloorStale`).
+//
+// Anything else — a row on the way, a margin across the block, a width
+// that is not a length — is not a spine, and the tree is measured whole.
+
+import { declaresOwnMinimum, inFlow, mainAxisOf } from './floors.js';
+import { Yoga } from '../../yoga.js';
+
+const LENGTHS_ACROSS = [
+  'margin',
+  'marginHorizontal',
+  'marginLeft',
+  'marginRight',
+  'marginStart',
+  'marginEnd',
+];
+const MARGINS = [
+  ...LENGTHS_ACROSS,
+  'marginVertical',
+  'marginTop',
+  'marginBottom',
+];
+const PADDINGS = [
+  'padding',
+  'paddingTop',
+  'paddingRight',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingHorizontal',
+  'paddingVertical',
+  'paddingStart',
+  'paddingEnd',
+];
+
+/**
+ * A column a spine can sum (`columnHeightSpan`): laid out by flex down its
+ * main axis without wrapping, and with a height that is its content's —
+ * nothing named on the height axis (`declaresOwnMinimum`), so neither a
+ * size, a floor, a ceiling nor a clip stands between its children and its
+ * extent.
+ */
+export function isSummableColumn(node) {
+  const style = node.style;
+  return (
+    node.yoga != null &&
+    !node.isWindow &&
+    node._host === null &&
+    style.display !== 'none' &&
+    mainAxisOf(node) === 'height' &&
+    style.flexDirection !== 'column-reverse' &&
+    (style.flexWrap == null || style.flexWrap === 'nowrap') &&
+    !declaresOwnMinimum(node, 'height')
+  );
+}
+
+/**
+ * Where a change stops mattering on its way up: the window, or a column
+ * whose extent on both axes is its style's — a scroll pane is the common
+ * one — so that what changed inside it moves nothing above it. A column,
+ * because it writes its children's floors down its main axis, and a spine
+ * only works out heights.
+ */
+export function isSpineStop(node) {
+  if (node.isWindow) return true;
+  return (
+    node.yoga != null &&
+    node._host === null &&
+    mainAxisOf(node) === 'height' &&
+    declaresOwnMinimum(node, 'height') &&
+    declaresOwnMinimum(node, 'width')
+  );
+}
+
+/**
+ * The spine scope of this frame's changes, or null when one of them has
+ * none. `sources` are the nodes that changed and are inside no sized box;
+ * `listOnly(node)` says whether all a node did was gain or lose children.
+ *
+ * A change is measured from the highest box on its way up that no column
+ * above it can sum — a text inside a row inside a list is measured with the
+ * row — and everything above that is summed. A column that only gained or
+ * lost children is not measured itself: the children that are new or
+ * changed are, and it is summed with the rest.
+ *
+ * Answers `{ roots, spine, stops }`: the boxes measured alone, with the
+ * widths to measure each at (`rootWidths`); the columns summed, deepest
+ * first; and the boxes each spine ends at, whose children's floors are
+ * written.
+ */
+export function spineScope(root, sources, listOnly) {
+  const roots = new Map();
+  const spine = new Set();
+  const stops = new Set();
+  for (const source of sources) {
+    const list = listOnly(source);
+    // the way up to where the change stops mattering
+    const path = [];
+    let node = source;
+    while (!isSpineStop(node)) {
+      path.push(node);
+      node = node.parent;
+      if (!node) return null;
+    }
+    if (node !== root && node.root !== root) return null;
+    // a stop changed in itself: its padding, its direction — everything it
+    // holds is laid out anew, which is the whole tree's measurement
+    if (path.length === 0 && !list) return null;
+    stops.add(node);
+    // the highest box on the way that a column above it cannot sum
+    let top = -1;
+    for (let i = path.length - 1; i >= 0; i--) {
+      const summed = i > 0 || list;
+      if (!summed || !isSummableColumn(path[i])) {
+        top = i;
+        break;
+      }
+    }
+    for (const column of path.slice(top + 1)) spine.add(column);
+    const changed = top === -1 ? staleChildren(source) : [path[top]];
+    for (const child of changed) {
+      if (!child.yoga || child.isWindow || child.style.display === 'none') {
+        continue;
+      }
+      const widths = rootWidths(child, root);
+      if (widths === null) return null;
+      roots.set(child, widths);
+    }
+  }
+  // A root inside another root is measured with it, and so is a column it
+  // would have been summed through.
+  const within = (node) => {
+    for (let n = node.parent; n; n = n.parent) if (roots.has(n)) return true;
+    return false;
+  };
+  for (const node of [...roots.keys()]) if (within(node)) roots.delete(node);
+  for (const node of [...spine]) {
+    if (roots.has(node) || within(node)) spine.delete(node);
+  }
+  // Every other child of a summed column answers from the extent it carries.
+  for (const column of spine) {
+    for (const child of column.children) {
+      if (!inFlow(child) || roots.has(child) || spine.has(child)) continue;
+      if (child._floorH === undefined) return null;
+      if (MARGINS.some((key) => typeof child.style[key] === 'string')) {
+        return null;
+      }
+    }
+  }
+  const depth = (node) => {
+    let d = 0;
+    for (let n = node; n; n = n.parent) d += 1;
+    return d;
+  };
+  return {
+    roots,
+    spine: [...spine].sort((a, b) => depth(b) - depth(a)),
+    stops,
+  };
+}
+
+/** The children of a node that gained or lost some: the ones yoga has a
+ *  change on record for, and the ones never measured. */
+function staleChildren(node) {
+  const out = [];
+  for (const child of node.children) {
+    if (!child.yoga || child.isWindow) continue;
+    if (child.yoga.isDirty() || child._floorH === undefined) out.push(child);
+  }
+  return out;
+}
+
+/**
+ * The widths a box is measured alone at, or null when it cannot be: in flow
+ * and stretched across its column with no margin, width or ceiling of its
+ * own across it, so that it is exactly as wide as the column's content box.
+ * `width` is that box now — the width its heights are for — and
+ * `widthPass` the one the width pass over the whole tree would give it
+ * (`widthPassWidth`), null where only a pass knows.
+ */
+function rootWidths(node, root) {
+  const style = node.style;
+  const parent = node.parent;
+  if (!parent || !inFlow(node) || node._host !== null) return null;
+  if (style.width !== undefined || style.maxWidth !== undefined) return null;
+  if (typeof style.minWidth === 'string') return null;
+  if (!stretched(node)) return null;
+  if (
+    LENGTHS_ACROSS.some((key) => style[key] !== undefined && style[key] !== 0)
+  ) {
+    return null;
+  }
+  if (MARGINS.some((key) => typeof style[key] === 'string')) return null;
+  if (PADDINGS.some((key) => typeof style[key] === 'string')) return null;
+  return {
+    width: contentWidth(parent),
+    widthPass: widthPassContent(parent, root),
+  };
+}
+
+/** Stretched across its parent's column — `alignSelf`, or the column's
+ *  `alignItems` when the box leaves it to them. */
+function stretched(node) {
+  const parent = node.parent;
+  if (!parent || mainAxisOf(parent) !== 'height') return false;
+  const self = node.style.alignSelf ?? 'auto';
+  if (self === 'stretch') return true;
+  return (
+    self === 'auto' && (parent.style.alignItems ?? 'stretch') === 'stretch'
+  );
+}
+
+/** Padding and border across, as the last pass resolved them. */
+function insetAcross(node) {
+  const yoga = node.yoga;
+  return (
+    yoga.getComputedPadding(Yoga.EDGE_LEFT) +
+    yoga.getComputedPadding(Yoga.EDGE_RIGHT) +
+    yoga.getComputedBorder(Yoga.EDGE_LEFT) +
+    yoga.getComputedBorder(Yoga.EDGE_RIGHT)
+  );
+}
+
+/** A box's content width in the last pass. */
+function contentWidth(node) {
+  return Math.max(0, node.yoga.getComputedWidth() - insetAcross(node));
+}
+
+/**
+ * How wide `node` is in the width pass over the whole tree
+ * (`_measureContentSpans('width')`), worked out on the way down rather than
+ * laid out: the root at nothing, and each box below it either the width its
+ * style names or stretched over its column's content box — clamped as yoga
+ * clamps it, and never narrower than its own padding and border. Null where
+ * the way down is anything else: a row, whose children are as wide as the
+ * pass decides.
+ */
+function widthPassWidth(node, root) {
+  if (node === root) return insetAcross(node);
+  const style = node.style;
+  let width;
+  if (typeof style.width === 'number') width = style.width;
+  else if (style.width !== undefined) return null;
+  else {
+    if (!inFlow(node) || !stretched(node)) return null;
+    if (MARGINS.some((key) => typeof style[key] === 'string')) return null;
+    const inner = widthPassContent(node.parent, root);
+    if (inner === null) return null;
+    const yoga = node.yoga;
+    width =
+      inner -
+      yoga.getComputedMargin(Yoga.EDGE_LEFT) -
+      yoga.getComputedMargin(Yoga.EDGE_RIGHT);
+  }
+  if (typeof style.maxWidth === 'number')
+    width = Math.min(width, style.maxWidth);
+  else if (style.maxWidth !== undefined) return null;
+  if (typeof style.minWidth === 'number')
+    width = Math.max(width, style.minWidth);
+  else if (style.minWidth !== undefined) return null;
+  return Math.max(width, insetAcross(node));
+}
+
+/** …and the content box inside it. */
+function widthPassContent(node, root) {
+  const width = widthPassWidth(node, root);
+  return width === null ? null : Math.max(0, width - insetAcross(node));
+}

package/src/nodes/window/window.js

@@ -277,8 +277,15 @@ export class WindowNode extends Scrollable(Node) {
     // the nodes whose changes the next measurement owes, and whether one
     // came with no node to name (`_floorsScope`)
     this._floorsSources = new Set();
+    // …the ones that changed for any reason but their child list, which
+    // are measured themselves rather than through the children they gained
+    // (spine.js), and the spines this frame's measurement runs on
+    this._floorsOtherSources = new Set();
     this._floorsUnscoped = false;
     this._floorsScopeNow = null;
+    this._floorsSpineNow = null;
+    // whether the next layout walk must visit every box (`invalidate`)
+    this._walkWhole = true;
     this._scopedFloorPasses = 0;
     // whether the first floors pass has run (`collectFloorStale`'s sweep)
     this._floorsSwept = false;

package/src/styles.js

@@ -1950,6 +1950,34 @@ let exactDepth = 0;
  *  here is not the size the same layout comes to on it. */
 export const isMeasuringExactly = () => exactDepth > 0;
 
+/**
+ * A second config, never rounded, for measuring a box on copies of its
+ * boxes (nodes/window/exactcopy.js). Switching the renderer's config off the
+ * grid and back is a change yoga answers by treating every layout it has
+ * cached as stale, so the pass after any `measuringExactly` lays the whole
+ * tree out again; a measurement confined to one box is made in this config
+ * instead, and leaves the renderer's, and its caches, alone.
+ */
+let exactConfig = null;
+export const exactLayoutConfig = () => {
+  if (exactConfig === null) {
+    exactConfig = Yoga.Config.create();
+    exactConfig.setPointScaleFactor(0);
+  }
+  return exactConfig;
+};
+
+/** `measure` for layouts made in the exact config: off the grid as far as
+ *  `isMeasuringExactly` is concerned, with nothing to switch. */
+export function measuringInExactConfig(measure) {
+  exactDepth++;
+  try {
+    return measure();
+  } finally {
+    exactDepth--;
+  }
+}
+
 /**
  * The yoga defaults that are not CSS's, written once per node.
  *