react-x11 2.22.5 → 2.22.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.22.5",
+  "version": "2.22.7",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -108,7 +108,7 @@
     "yoga-layout": "^3.2.1"
   },
   "optionalDependencies": {
-    "@windowkit/appkit": "^0.13.0",
+    "@windowkit/appkit": "^0.14.0",
     "@windowkit/wayland": "^3.1.1",
     "@windowkit/win32": "^0.0.5",
     "dbus-native": "^0.15.1",

package/src/cocoa/fonts.js

@@ -102,11 +102,53 @@ function parseColor(color) {
 }
 
 /** UTF-16 offset of each code point boundary, plus the end. */
+/** Where each code point of `text` starts, in code units — or null when
+ *  the two are the same index, which is all text with no surrogate pair in
+ *  it. A table per paragraph was a walk of every character of a document,
+ *  every time it was laid out. */
 function codeUnitOffsets(text) {
+  if (!SURROGATE.test(text)) return null;
   const offsets = [0];
   for (const ch of text) offsets.push(offsets[offsets.length - 1] + ch.length);
   return offsets;
 }
+const SURROGATE = /[\uD800-\uDFFF]/;
+const NO_GEOMETRY = new Float64Array(0);
+
+/**
+ * A layout's lines from the bridge's packed geometry (`createLayout`'s
+ * `packed`): ten numbers a line, five a run, into the objects the
+ * unpacked form has, key for key. A bridge that answered neither form
+ * laid out no lines.
+ */
+function unpackLines(lineData = NO_GEOMETRY, runData = NO_GEOMETRY) {
+  const lines = new Array(lineData.length / 10);
+  for (let i = 0, l = 0, r = 0; i < lineData.length; i += 10, l++) {
+    const runs = new Array(lineData[i + 9]);
+    for (let k = 0; k < runs.length; k++, r += 5) {
+      runs[k] = {
+        x: runData[r],
+        width: runData[r + 1],
+        start: runData[r + 2],
+        end: runData[r + 3],
+        rtl: runData[r + 4] === 1,
+      };
+    }
+    lines[l] = {
+      x: lineData[i],
+      y: lineData[i + 1],
+      width: lineData[i + 2],
+      height: lineData[i + 3],
+      baseline: lineData[i + 4],
+      ascent: lineData[i + 5],
+      descent: lineData[i + 6],
+      start: lineData[i + 7],
+      end: lineData[i + 8],
+      runs,
+    };
+  }
+  return lines;
+}
 
 class CocoaTextLayout {
   constructor(native, raw, text) {
@@ -116,16 +158,20 @@ class CocoaTextLayout {
     this._cpToCu = codeUnitOffsets(text);
     this.width = raw.width;
     this.height = raw.height;
-    this.lines = raw.lines;
+    this.lines = raw.lines ?? unpackLines(raw.lineData, raw.runData);
   }
 
   _cuOf(cp) {
     const t = this._cpToCu;
+    if (t === null) return Math.max(0, Math.min(cp, this._text.length));
     return t[Math.max(0, Math.min(cp, t.length - 1))];
   }
 
   _cpOf(cu) {
     const t = this._cpToCu;
+    if (t === null) {
+      return cu <= 0 ? 0 : Math.min(Math.ceil(cu), this._text.length);
+    }
     // t is sorted; layouts are short, a linear walk is fine
     for (let i = 0; i < t.length; i++) if (t[i] >= cu) return i;
     return t.length - 1;
@@ -500,6 +546,10 @@ function spacedFeatures(features, spacing) {
     : OPTIONAL_LIGATURES_OFF;
 }
 
+/** The text the kept typesetters may hold, in UTF-16 units: a document of
+ *  about a megabyte, at 25 bytes a unit in CoreText. */
+const KEPT_TYPESETTER_UNITS = 1 << 20;
+
 export class CocoaFontManager {
   /** @param native the @windowkit/appkit module; the tests hand in a fake */
   constructor(native = loadNative()) {
@@ -513,6 +563,50 @@ export class CocoaFontManager {
     this._sized = new Map(); // face key|size|variations -> CTFont handle
     this._layouts = new Map(); // layout signature -> CocoaTextLayout (LRU)
     this._faceByPs = new Map(); // PostScript name -> face CoreText chose itself
+    // paragraph -> its typesetter, kept to lay it out at another width
+    // (`_keptTypesetter`); LRU, bounded by the UTF-16 units they hold. Only
+    // a bridge that keeps them (`@windowkit/appkit` 0.14) has the verb.
+    this._keeps = typeof native.releaseTypesetter === 'function';
+    this._typesetters = new Map();
+    this._typesetterUnits = 0;
+  }
+
+  /**
+   * A paragraph's typesetter, kept from a layout of the same text at any
+   * width. Two thirds of a layout is the text becoming glyphs — the
+   * attributed string, then CoreText's shaping — and a paragraph laid out
+   * at another width breaks the same glyphs into other lines: a window
+   * resize lays a document out at every width it passes through, and a
+   * paragraph's max-content and wrapped measurements are two layouts of
+   * one text. The cache holds `KEPT_TYPESETTER_UNITS` of text, about
+   * 25 MB, which is a long document; past that the paragraph laid out
+   * least recently is let go.
+   */
+  _keptTypesetter(key) {
+    const kept = this._typesetters.get(key);
+    if (kept === undefined) return null;
+    this._typesetters.delete(key);
+    this._typesetters.set(key, kept);
+    return kept.handle;
+  }
+
+  _keepTypesetter(key, handle, units) {
+    this._typesetters.set(key, { handle, units });
+    this._typesetterUnits += units;
+    while (this._typesetterUnits > KEPT_TYPESETTER_UNITS) {
+      const [oldest, entry] = this._typesetters.entries().next().value;
+      this._typesetters.delete(oldest);
+      this._typesetterUnits -= entry.units;
+      this._native.releaseTypesetter(entry.handle);
+    }
+  }
+
+  _forgetTypesetters() {
+    for (const { handle } of this._typesetters.values()) {
+      this._native.releaseTypesetter(handle);
+    }
+    this._typesetters.clear();
+    this._typesetterUnits = 0;
   }
 
   /** A face the app loaded joins every fallback chain: what the faces that
@@ -941,6 +1035,7 @@ export class CocoaFontManager {
     this._faces.clear();
     this._sized.clear();
     this._layouts.clear();
+    if (this._keeps) this._forgetTypesetters();
     this._forgetCovers();
     // `null` on purpose: src/fonts.js keeps the fontkit face it already
     // opened as the handle, which is the one whose metrics apps can read;
@@ -957,8 +1052,10 @@ export class CocoaFontManager {
     // Memoized: an immediate-mode caller (the fonts app's specimen canvas,
     // a hover pass) lays the same paragraph out every repaint, and a
     // CTFramesetter per pointer move is what sluggish feels like. The key
-    // is everything shaping reads; ~64 entries covers a screenful.
-    const signature = JSON.stringify([
+    // is everything shaping reads — the paragraph, `shape`, which is also
+    // what its kept typesetter is found by — and then everything breaking
+    // it into lines reads; ~64 entries covers a screenful.
+    const shape = JSON.stringify([
       spans.map((sp) => [
         sp.text,
         sp.family ?? base.family,
@@ -971,13 +1068,17 @@ export class CocoaFontManager {
         sp.features ?? base.features ?? null,
         sp.letterSpacing ?? base.letterSpacing ?? 0,
       ]),
-      options.maxWidth,
-      options.align,
-      options.lineHeight,
-      options.maxLines,
-      options.overflow,
       options.direction,
     ]);
+    const signature =
+      shape +
+      JSON.stringify([
+        options.maxWidth,
+        options.align,
+        options.lineHeight,
+        options.maxLines,
+        options.overflow,
+      ]);
     const hit = this._layouts.get(signature);
     if (hit) {
       // refresh LRU position
@@ -1054,8 +1155,17 @@ export class CocoaFontManager {
       : minContent
         ? brokenAtEveryOpportunity(nativeSpans)
         : nativeSpans;
+    // The paragraph's kept typesetter, where it has one. A min-content
+    // measurement lays out other text — the paragraph broken at every
+    // opportunity, and capped for an eliding one — and keeps its own.
+    const shapeKey = probe
+      ? `${shape}|${maxLines}`
+      : minContent
+        ? `${shape}|min`
+        : shape;
+    const typesetter = this._keeps ? this._keptTypesetter(shapeKey) : null;
     const raw = this._native.createLayout({
-      spans: laid,
+      ...(typesetter ? { typesetter } : { spans: laid }),
       maxWidth:
         Number.isFinite(maxWidth) && maxWidth > 0 ? maxWidth : undefined,
       align: flushFor(align, direction),
@@ -1063,7 +1173,15 @@ export class CocoaFontManager {
       maxLines: probe || !Number.isFinite(maxLines) ? undefined : maxLines,
       ellipsis: !probe && overflow === 'ellipsis',
       rtl: direction === 'rtl',
+      // the geometry as two arrays rather than an object a line and a run:
+      // a tenth of the calls across the bridge (`unpackLines`)
+      ...(this._keeps ? { keep: typesetter === null, packed: true } : null),
     });
+    if (raw.typesetter) {
+      let units = 0;
+      for (const span of laid) units += span.text.length;
+      this._keepTypesetter(shapeKey, raw.typesetter, units);
+    }
     // the text the native actually laid out: a min-content measurement's
     // line and run ranges are indices into the broken text, and the two have
     // to agree for `indexAt`/`caretPosition` to mean anything at all

package/src/cocoa/window.js

@@ -50,6 +50,50 @@ function owe(owed, damage) {
   return rects.length > OWED_RECTS_MAX ? 'full' : rects;
 }
 
+/** The band `scrollSurface` would write for a shift of `scroll` inside a
+ * `width` x `height` bitmap, clamped the way the native clamps the rect:
+ * rect ∩ (rect + delta), or null when nothing survives the shift. */
+function survivingBand(scroll, width, height) {
+  const { x, y, dx, dy } = scroll;
+  if (!dx && !dy) return null;
+  const clamp = (v, hi) => (v < 0 ? 0 : v > hi ? hi : v);
+  const x0 = clamp(x, width);
+  const y0 = clamp(y, height);
+  const x1 = clamp(x + scroll.width, width);
+  const y1 = clamp(y + scroll.height, height);
+  const left = Math.max(x0, x0 + dx);
+  const top = Math.max(y0, y0 + dy);
+  const right = Math.min(x1, x1 + dx);
+  const bottom = Math.min(y1, y1 + dy);
+  if (right <= left || bottom <= top) return null;
+  return { x: left, y: top, width: right - left, height: bottom - top };
+}
+
+/** Flat `[x, y, w, h, …]` rects less the `[x, y, w, h]` hole: the rows above
+ * and below it full width, the pieces beside it its rows only. */
+function aroundHole(rects, [hx, hy, hw, hh]) {
+  const out = [];
+  for (let i = 0; i + 3 < rects.length; i += 4) {
+    const x = rects[i];
+    const y = rects[i + 1];
+    const right = x + rects[i + 2];
+    const bottom = y + rects[i + 3];
+    const top = Math.max(y, hy);
+    const under = Math.min(bottom, hy + hh);
+    const left = Math.max(x, hx);
+    const beside = Math.min(right, hx + hw);
+    if (beside <= left || under <= top) {
+      out.push(x, y, right - x, bottom - y);
+      continue;
+    }
+    if (top > y) out.push(x, y, right - x, top - y);
+    if (bottom > under) out.push(x, under, right - x, bottom - under);
+    if (left > x) out.push(x, top, left - x, under - top);
+    if (right > beside) out.push(beside, top, right - beside, under - top);
+  }
+  return out;
+}
+
 export class CocoaWindow {
   constructor(app, attributes = {}) {
     this.app = app;
@@ -599,8 +643,18 @@ export class CocoaWindow {
    * always drew into.
    *
    * Then what it missed, copied across from the frame on glass.
+   *
+   * When the frame's first draw is a scroll blit (`scrollRegion`), the band
+   * it moves comes across already moved: one copy from the frame on glass
+   * at the shift, where catching up and then shifting in place wrote the
+   * band twice — the catch-up owes it, since the frame before blitted too.
+   * The catch-up copies the rest. Every pixel ends as the two passes left
+   * it, the strips the shift exposes included, so what the frame repaints
+   * does not change. Answers whether the band moved, or undefined when
+   * there was no scroll to take or it has to move in place: a chain of
+   * one, a buffer that owes nothing, a bridge without `blitSurface`.
    */
-  _takeBack() {
+  _takeBack(scroll = null) {
     const chain = this._chain;
     let free = null;
     let oldest = null;
@@ -639,10 +693,9 @@ export class CocoaWindow {
     // re-syncs its sticky state off the generation
     this._surfaceGen++;
     this._native.surfaceLock(back.handle);
+    let moved;
     if (back.owed && back !== chain.front) {
-      this._native.copySurfaceRegion(
-        chain.front.handle,
-        back.handle,
+      let owed =
         back.owed === 'full'
           ? null
           : back.owed.flatMap((r) => [
@@ -650,10 +703,39 @@ export class CocoaWindow {
               Math.floor(r.y),
               Math.ceil(r.width) + 1,
               Math.ceil(r.height) + 1,
-            ]),
-      );
+            ]);
+      if (scroll && typeof this._native.blitSurface === 'function') {
+        const { width, height } = this._surfaceSize;
+        const band = survivingBand(scroll, width, height);
+        // the band and where it comes from are both inside the bitmap, so
+        // the copy is the whole band — anything else is a bridge that did
+        // not copy, and the band moves in place after the plain catch-up
+        const copied =
+          band &&
+          this._native.blitSurface(
+            chain.front.handle,
+            band.x - scroll.dx,
+            band.y - scroll.dy,
+            band.width,
+            band.height,
+            back.handle,
+            band.x,
+            band.y,
+          );
+        if (!band) {
+          moved = false;
+        } else if (Array.isArray(copied)) {
+          moved = true;
+          owed = aroundHole(owed ?? [0, 0, width, height], copied);
+        }
+      }
+      // (an empty list is the whole bitmap to the native, not nothing)
+      if (owed === null || owed.length > 0) {
+        this._native.copySurfaceRegion(chain.front.handle, back.handle, owed);
+      }
     }
     back.owed = null;
+    return moved;
   }
 
   /**
@@ -832,18 +914,30 @@ export class CocoaWindow {
       return false;
     }
     if (!Number.isInteger(dx) || !Number.isInteger(dy)) return false;
-    // The band moves in the buffer this frame draws into — taken, and
-    // caught up to the frame on glass, before anything moves in it.
-    const surface = this._ensureSurface();
-    const moved = this._native.scrollSurface(
-      surface,
-      Math.round(rect.x),
-      Math.round(rect.y),
-      Math.round(rect.width),
-      Math.round(rect.height),
-      dx,
-      dy,
-    );
+    const x = Math.round(rect.x);
+    const y = Math.round(rect.y);
+    const width = Math.round(rect.width);
+    const height = Math.round(rect.height);
+    // The band moves in the buffer this frame draws into. When this is the
+    // frame's first draw, taking that buffer moves it (`_takeBack`);
+    // otherwise, or where that cannot, it is taken and caught up to the
+    // frame on glass first, and the band moves in place.
+    const chain = this._chain;
+    let moved =
+      chain && !chain.back
+        ? this._takeBack({ x, y, width, height, dx, dy })
+        : undefined;
+    if (moved === undefined) {
+      moved = this._native.scrollSurface(
+        this._ensureSurface(),
+        x,
+        y,
+        width,
+        height,
+        dx,
+        dy,
+      );
+    }
     if (moved) {
       this._dirty = true;
       // The band moved inside the BACK buffer only. After the flip every
@@ -851,14 +945,7 @@ export class CocoaWindow {
       // is owed only covers what the flush painted — the strips the shift
       // exposed — so the next frame would blit a band one frame stale.
       // Record the shifted rect as painted, and the catch-up carries it.
-      this.noteFrameDamage([
-        {
-          x: Math.round(rect.x),
-          y: Math.round(rect.y),
-          width: Math.round(rect.width),
-          height: Math.round(rect.height),
-        },
-      ]);
+      this.noteFrameDamage([{ x, y, width, height }]);
     }
     return Boolean(moved);
   }

package/src/nodes/layout.js

@@ -83,6 +83,9 @@ export function offsetInParent(node) {
   };
 }
 
+/** What a leaf a width pass reads nothing from answers with. */
+const UNREAD_SIZE = Object.freeze({ width: 0, height: 0 });
+
 /** Layout, installed onto `Node.prototype` by node.js. */
 export class NodeLayout {
   /**
@@ -141,6 +144,10 @@ export class NodeLayout {
       if (heightMode === Yoga.MEASURE_MODE_UNDEFINED) {
         this._floorMeasureMode = MEASURE_MODES[widthMode];
       }
+      // A leaf a pass over the whole tree reads nothing from
+      // (`markUnreadLeaves`): its width there is one yoga replaces and its
+      // height one the pass does not read, so it is not shaped to find them.
+      if (this._widthUnread) return UNREAD_SIZE;
       const size = this.measureContent({
         width: measureOffer(width, widthMode),
         height: measureOffer(height, heightMode),

package/src/nodes/node.js

@@ -111,6 +111,9 @@ export class Node {
     // the width mode yoga last measured this leaf in with no height on
     // offer — the question `_heightForWidth` repeats
     this._floorMeasureMode = null;
+    // set only for the length of a width pass that reads nothing from this
+    // leaf (`markUnreadLeaves`)
+    this._widthUnread = false;
     this.root = null; // owning WindowNode once attached
     this.hidden = false;
     // Composited on a layer of its own above the window's bitmap, by a

package/src/nodes/window/floors.js

@@ -445,6 +445,142 @@ export function setMeasuringShrink(node, axis, out) {
   }
 }
 
+/**
+ * Mark the leaves whose min-content width the pass over the whole tree has
+ * no use for (`_widthUnread`), listing them in `out`: their measure
+ * function answers without shaping them (`NodeLayout._useMeasureContent`)
+ * until `_measureContentSpans` takes the marks off.
+ *
+ * The pass lays every box out with no room on offer, and for a document that
+ * is every paragraph set a word to a line — 1 s of CoreText for 600 KB of
+ * Markdown, and more than half of the first frame — to read extents that
+ * almost nobody reads. An extent is read where a floor is written from it,
+ * which is a flex item on a `row`'s main axis (`receivesFloor`); by the
+ * extent of a node that is read, which adds up the ones of its children in
+ * flow (`contentSpan`); and at the root, when the window's own size hint is
+ * what is being measured. Down a column from a root nobody reads, none of
+ * that happens: a paragraph in a document is laid out, and nothing reads
+ * what it says.
+ *
+ * It is still laid out, though, and a leaf's answer could reach something
+ * that is read through its size. So it is marked only where it cannot:
+ *
+ * - every box from the root down to it is as wide as something other than
+ *   its content — the root offered no room, a width it names, a column
+ *   stretching it — so the width the leaf answers is one yoga replaces, and
+ *   nothing above it is sized from it;
+ * - no box is handed a share of space the leaf's height changed, which is
+ *   how a height could become somebody's width — an aspect ratio, a column
+ *   that wraps, an image sized to the height it is given. Every column from
+ *   the root down to it is either as tall as its content, and then holds no
+ *   box out of flow whose height it sets, or has a height of its own, and
+ *   then holds nothing that grows or gives way in the pass;
+ * - none of those columns wraps. (One may keep an aspect ratio: a box as
+ *   wide as something other than its content is as tall as that makes it.)
+ *
+ * What is left of its answer is a height, which a pass measuring widths
+ * never reads, and the layouts after the pass run in another config version
+ * (`measuringExactly`), which yoga answers by measuring every leaf again.
+ */
+export function markUnreadLeaves(node, out) {
+  const yoga = node.yoga;
+  const direction = yoga.getFlexDirection();
+  if (
+    (direction !== Yoga.FLEX_DIRECTION_COLUMN &&
+      direction !== Yoga.FLEX_DIRECTION_COLUMN_REVERSE) ||
+    yoga.getFlexWrap() !== Yoga.WRAP_NO_WRAP
+  ) {
+    // a row's items are read, and a column that wraps is as wide as its lines
+    return;
+  }
+  const height = heightOf(yoga);
+  if (height === 'unknown') return;
+  for (const child of node.children) {
+    if (!child.yoga || child.isWindow || child.style.display === 'none') {
+      continue;
+    }
+    if (child.style.position === 'absolute') {
+      // a height that follows this column's follows what is in it
+      if (height === 'content' && heightFollowsParent(child.yoga)) return;
+    } else if (
+      height === 'own' &&
+      // what the pass lets grow or give way (`setMeasuringShrink`)
+      (child.yoga.getFlexGrow() > 0 || namesOwnFloor(child, 'width'))
+    ) {
+      return;
+    }
+  }
+  const items = yoga.getAlignItems();
+  for (const child of node.children) {
+    if (!inFlow(child) || child._host !== null) continue;
+    if (!widthNotItsOwn(child.yoga, items)) continue;
+    if (child._measureFn) {
+      child._widthUnread = true;
+      out.push(child);
+    } else if (child.children.length !== 0) {
+      markUnreadLeaves(child, out);
+    }
+  }
+}
+
+/** The edges a horizontal margin can be set through. */
+const ACROSS_EDGES = [
+  Yoga.EDGE_LEFT,
+  Yoga.EDGE_RIGHT,
+  Yoga.EDGE_START,
+  Yoga.EDGE_END,
+  Yoga.EDGE_HORIZONTAL,
+  Yoga.EDGE_ALL,
+];
+
+/** Whether an in-flow child of a column is as wide as something other than
+ *  its content: a width it names, or the column's, which it stretches to
+ *  unless an alignment or an `auto` margin says otherwise. */
+function widthNotItsOwn(yoga, items) {
+  const width = yoga.getWidth().unit;
+  if (width === Yoga.UNIT_POINT || width === Yoga.UNIT_PERCENT) return true;
+  const self = yoga.getAlignSelf();
+  if ((self === Yoga.ALIGN_AUTO ? items : self) !== Yoga.ALIGN_STRETCH) {
+    return false;
+  }
+  for (const edge of ACROSS_EDGES) {
+    if (yoga.getMargin(edge).unit === Yoga.UNIT_AUTO) return false;
+  }
+  return true;
+}
+
+/**
+ * Where a column's height comes from, down a pass with none on offer: its
+ * `'content'`, when it names nothing that bounds it; its `'own'`, when all it
+ * names are numbers — a height, a basis (a height, down a column), a floor or
+ * a ceiling; and `'unknown'` for a share of something (a percentage), which
+ * a pass with no height on offer resolves as it likes.
+ */
+function heightOf(yoga) {
+  let own = false;
+  for (const value of [
+    yoga.getHeight(),
+    yoga.getFlexBasis(),
+    yoga.getMinHeight(),
+    yoga.getMaxHeight(),
+  ]) {
+    if (value.unit === Yoga.UNIT_PERCENT) return 'unknown';
+    if (value.unit === Yoga.UNIT_POINT) own = true;
+  }
+  return own ? 'own' : 'content';
+}
+
+/** Whether a box out of flow takes its height from its parent's: pinned to
+ *  both edges, or a share of it. */
+function heightFollowsParent(yoga) {
+  const pinned = (edge) => yoga.getPosition(edge).unit !== Yoga.UNIT_UNDEFINED;
+  const both = pinned(Yoga.EDGE_VERTICAL) || pinned(Yoga.EDGE_ALL);
+  if (both || (pinned(Yoga.EDGE_TOP) && pinned(Yoga.EDGE_BOTTOM))) return true;
+  return [yoga.getHeight(), yoga.getMinHeight(), yoga.getMaxHeight()].some(
+    (value) => value.unit === Yoga.UNIT_PERCENT,
+  );
+}
+
 /** …and back to the layout everything else is run from. */
 export function restoreShrink(shrunk) {
   for (const child of shrunk) {
@@ -540,8 +676,15 @@ export function restoreWidths(frozen) {
  * one's: a scroll pane contributes nothing to the floor above it and still
  * needs floors written *inside* it, or the column of rows it holds would
  * shrink to the viewport and there would be nothing left to scroll.
+ *
+ * `read` false is a node whose own extent nobody reads (`markUnreadLeaves`
+ * says which those are), so neither are those of its children in flow: the
+ * walk goes on through them to the rows inside, whose items' floors are
+ * written, and measures nothing on the way. An extent left unmeasured is
+ * asked for when it starts to count — its parent turned into a row, which
+ * leaves the parent dirty (`collectFloorStale`).
  */
-export function contentSpan(node, axis, intrinsic, root) {
+export function contentSpan(node, axis, intrinsic, root, read = true) {
   const yoga = node.yoga;
   const horizontal = axis === 'width';
   const own = horizontal ? yoga.getComputedWidth() : yoga.getComputedHeight();
@@ -564,6 +707,11 @@ export function contentSpan(node, axis, intrinsic, root) {
     // by itself, and a <text> span has no box of its own
     if (!child.yoga || child.isWindow) continue;
     if (child.style.display === 'none') continue;
+    if (!read && !receivesFloor(child, axis)) {
+      if (child._host === null)
+        contentSpan(child, axis, intrinsic, root, false);
+      continue;
+    }
     const laidOut = horizontal
       ? child.yoga.getComputedWidth()
       : child.yoga.getComputedHeight();
@@ -600,6 +748,8 @@ export function contentSpan(node, axis, intrinsic, root) {
     start = Math.min(start, at);
     end = Math.max(end, at + extent);
   }
+  // a span nobody reads, and — for a leaf — a measurement nobody needs
+  if (!read) return 0;
   if (start === Infinity) {
     // A leaf: nothing inside to look at, and what the pass did to it may
     // have been a stretch rather than a measurement. So it is asked again.

package/src/nodes/window/size.js

@@ -9,6 +9,7 @@ import {
   captureLeafHeights,
   collectFloorStale,
   columnHeightSpan,
+  markUnreadLeaves,
   declaresOwnMinimum,
   dirtyOutside,
   floorBoundaryOf,
@@ -41,6 +42,10 @@ import {
 // REACT_X11_NO_SCROLL_BLIT gives.
 const NO_SCOPED_FLOORS = process.env.REACT_X11_NO_SCOPED_FLOORS === '1';
 
+// …and for the width pass reading only the extents a floor is written from
+// (`markUnreadLeaves`): with it set, every leaf is shaped at no width again.
+const NO_UNREAD_WIDTHS = process.env.REACT_X11_NO_UNREAD_WIDTHS === '1';
+
 /** 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. */
@@ -64,8 +69,13 @@ export class WindowSize {
    * they are when nothing has looked yet this frame, and a leaf the probe
    * finds moved has its floor taken off and the pass run again, since a
    * floor still on a node being measured would be read back as content.
+   *
+   * `wantRoot` is whether the root's own width is wanted — a window whose
+   * minimum is its content's (`_measureMinimum`). Otherwise the width pass
+   * reads only the extents a floor is written from, and the leaves nothing
+   * reads are not shaped (`markUnreadLeaves`).
    */
-  _measureContentSpans(axis, forWidth, probe = false) {
+  _measureContentSpans(axis, forWidth, probe = false, wantRoot = false) {
     this._sweepLayoutHosts();
     const yoga = this.yoga;
     const dir = this._rootDirection;
@@ -79,9 +89,24 @@ export class WindowSize {
       if (this._layoutHosts.size !== 0) this._measureHostChildWidths();
       const shrunk = [];
       setMeasuringShrink(this, axis, shrunk);
+      // A layout host reads its own extent and its children's, and a root
+      // with a ceiling is as wide as its content up to it: both read what
+      // nothing else here does, so both are measured whole.
+      const read =
+        wantRoot ||
+        NO_UNREAD_WIDTHS ||
+        this._readEveryWidth ||
+        this._layoutHosts.size !== 0 ||
+        yoga.getMaxWidth().unit !== Yoga.UNIT_UNDEFINED;
+      const unread = [];
+      if (!read) markUnreadLeaves(this, unread);
       this._layoutPasses += 1;
-      yoga.calculateLayout(0, undefined, dir);
-      const span = contentSpan(this, axis, null, this);
+      try {
+        yoga.calculateLayout(0, undefined, dir);
+      } finally {
+        for (const leaf of unread) leaf._widthUnread = false;
+      }
+      const span = contentSpan(this, axis, null, this, read);
       restoreShrink(shrunk);
       return span;
     }
@@ -429,9 +454,9 @@ export class WindowSize {
    * (a stale extent writes the style's own minimum), which is what keeps a
    * floor from ratcheting: read back as content, it could only ever grow.
    */
-  _measureWidthFloors() {
+  _measureWidthFloors(wantRoot = false) {
     this._writeFloors('width');
-    const span = this._measureContentSpans('width');
+    const span = this._measureContentSpans('width', undefined, false, wantRoot);
     this._writeFloors('width');
     return span;
   }
@@ -452,7 +477,7 @@ export class WindowSize {
     return measuringExactly(() =>
       Math.ceil(
         axis === 'width'
-          ? this._measureWidthFloors()
+          ? this._measureWidthFloors(true)
           : this._measureHeightFloors(forWidth, true),
       ),
     );

package/src/nodes/window/window.js

@@ -282,6 +282,9 @@ export class WindowNode extends Scrollable(Node) {
     // (spine.js), and the spines this frame's measurement runs on
     this._floorsOtherSources = new Set();
     this._floorsUnscoped = false;
+    // every width extent measured, read or not (`REACT_X11_NO_UNREAD_WIDTHS`,
+    // per window): what a test holds the width pass that skips them to
+    this._readEveryWidth = false;
     this._floorsScopeNow = null;
     this._floorsSpineNow = null;
     // whether the next layout walk must visit every box (`invalidate`)