react-x11 2.18.5 → 2.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.18.5",
+  "version": "2.19.0",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -103,14 +103,14 @@
   "dependencies": {
     "ical.js": "^2.2.1",
     "linebreak": "^1.1.0",
-    "ntk": "^8.9.0",
+    "ntk": "^8.10.0",
     "react-reconciler": "^0.34.0",
     "yoga-layout": "^3.2.1"
   },
   "optionalDependencies": {
     "@windowkit/appkit": "^0.12.0",
     "@windowkit/wayland": "^3.1.1",
-    "@windowkit/win32": "^0.0.1",
+    "@windowkit/win32": "^0.0.3",
     "dbus-native": "^0.15.1",
     "x11-dri": "^0.9.0"
   },

package/src/Reconciler.js

@@ -7,7 +7,6 @@
 import { createRequire } from 'node:module';
 import React from 'react';
 import ReactReconciler from 'react-reconciler';
-import { createClient } from 'ntk';
 
 import {
   ConcurrentRoot,
@@ -22,6 +21,7 @@ import {
   flushWindowMaps,
   flushWindowRestacks,
 } from './nodes/window/window.js';
+import { loadNtk } from './ntkroot.js';
 import { PopupNode } from './nodes/window/popup.js';
 import { BoxNode } from './nodes/box.js';
 import { THEME_SCOPE } from './nodes/kinds.js';
@@ -629,6 +629,8 @@ function loadIntegrations() {
  * anyone hits and the least self-explanatory failure in the library.
  */
 async function connect(options) {
+  // ntk's root is the X11 backend's, and loads with it (src/ntkroot.js)
+  const { createClient } = await loadNtk();
   try {
     return await createClient(options);
   } catch (err) {
@@ -822,7 +824,12 @@ export async function createRoot(options = {}) {
   const win32Asked =
     rest.backend === 'win32' || process.env.REACT_X11_BACKEND === 'win32';
   const connecting = !owned
-    ? Promise.resolve(borrowed)
+    ? // an ntk app could only have come from ntk's own createClient: the
+      // root is imported already, and this hands it to the code that reads
+      // it synchronously (src/ntkroot.js)
+      isNtkApp(borrowed)
+      ? loadNtk().then(() => borrowed)
+      : Promise.resolve(borrowed)
     : backend === 'wayland'
       ? // Opt-in only, never through 'auto': X11 stays the default on Linux
         // because the remote case (docs/remote.md) is the flagship reason

package/src/backend/context2d.js

@@ -23,7 +23,7 @@
 // class keeps the JS-visible state (fillStyle strings, gradient objects,
 // dash arrays) and re-syncs it when the backing surface is replaced after a
 // resize — `_gen` is that generation.
-import { cssColorStraight } from 'ntk';
+import { cssColorStraight } from 'ntk/color';
 
 const BLACK = [0, 0, 0, 1];
 
@@ -558,13 +558,50 @@ export class BackendContext2D {
 
   setLineDash(segments) {
     this._state.dash = Array.isArray(segments) ? segments : [];
-    this._native.ctxSetLineDash(this._s(), this._state.dash, 0);
+    // the offset is state of its own, and a new pattern keeps it
+    this._native.ctxSetLineDash(
+      this._s(),
+      this._state.dash,
+      this._state.dashOffset,
+    );
   }
 
   getLineDash() {
     return [...this._state.dash];
   }
 
+  /**
+   * Where along the pattern a stroke starts — the phase a marching dash
+   * moves. Missing here, a caller that asks `'lineDashOffset' in ctx` found
+   * no such thing and every stroke started its pattern at nought: the
+   * dashes of an animated edge were repainted sixteen times a second and
+   * never moved.
+   */
+  /**
+   * Text drawn under a transform that scales is drawn scaled, glyphs and
+   * all: both bridges lay a text layout out once and draw its outlines
+   * through the context's matrix (Direct2D's `DrawTextLayout`, CoreText's
+   * `CTFrameDraw`). ntk's context on X11 cannot — its glyphs come out of a
+   * cache rasterized at the size they were shaped at, and a transform
+   * moves where each lands, not how big it is — and says nothing, which is
+   * the same answer. So an element that would rather draw a layout it has
+   * than shape a new one at every step of a zoom asks this first.
+   */
+  get scalesText() {
+    return true;
+  }
+
+  get lineDashOffset() {
+    return this._state.dashOffset;
+  }
+
+  set lineDashOffset(value) {
+    // canvas ignores anything that is not a finite number
+    if (typeof value !== 'number' || !Number.isFinite(value)) return;
+    this._state.dashOffset = value;
+    this._native.ctxSetLineDash(this._s(), this._state.dash, value);
+  }
+
   save() {
     // Sync before pushing: a fresh surface empties the stack on its way in,
     // and a state pushed ahead of that sync was lost to it — the first

package/src/cocoa/app.js

@@ -16,7 +16,7 @@
 // (`_routeBatch`) with no pump at all (docs/macos.md §"JS on a worker").
 import { isMainThread } from 'node:worker_threads';
 
-import { cssColorStraight } from 'ntk';
+import { cssColorStraight } from 'ntk/color';
 
 import { deliverActivate, deliverOpen } from '../application.js';
 import { flushPendingFrames } from '../frames.js';

package/src/cocoa/fonts.js

@@ -26,7 +26,8 @@ import { readFileSync } from 'node:fs';
 import { inflateSync } from 'node:zlib';
 
 import LineBreaker from 'linebreak';
-import { cssColorStraight, Font } from 'ntk';
+import { cssColorStraight } from 'ntk/color';
+import Font from 'ntk/font';
 
 import { loadNative } from './native.js';
 

package/src/cocoa/presenter.js

@@ -24,7 +24,7 @@
 // named repaints everything" rule the X11 damage model has), and geometry
 // is re-diffed every frame because comparing four numbers is cheaper than
 // knowing.
-import { cssColorStraight } from 'ntk';
+import { cssColorStraight } from 'ntk/color';
 
 import { Node } from '../nodes/node.js';
 import { addDamageRect, damageToPaint } from '../nodes/damage.js';

package/src/decorations.js

@@ -34,7 +34,7 @@
 // derives is the padding a coverage surface has to carry. Both are pure
 // functions — no connection, nothing drawn — so this module stays testable
 // without a server.
-import { shadowReach, shadowSigma } from 'ntk';
+import { shadowReach, shadowSigma } from 'ntk/shadow-math';
 
 /** A number, with or without the `px` CSS wants and this vocabulary does not. */
 const LENGTH = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:px)?$/i;

package/src/fonts.js

@@ -37,7 +37,7 @@
 
 import { basename, extname } from 'node:path';
 
-import { Font } from 'ntk';
+import Font from 'ntk/font';
 
 /**
  * Per-app bookkeeping. Keyed on the app rather than stored on it, like

package/src/foreignnodes.js

@@ -30,7 +30,7 @@
 // save set, **never destroyed**. Destroying somebody else's window because a
 // React tree changed is the failure mode this element is most able to cause,
 // and `test/foreign.test.js` asserts against it first.
-import { XEMBED, XEmbedSocket } from 'ntk';
+import { x11Ntk } from './ntkroot.js';
 
 import { isFocusable } from './a11y.js';
 import { canEmbed } from './embedding.js';
@@ -161,6 +161,8 @@ export class ForeignNode extends Node {
     if (!canEmbed(this.app)) return this._refuse();
     const rect = this._geometry();
     this.rect = rect;
+    // `<foreign>` embeds on an X connection only, where ntk's root is loaded
+    const { XEmbedSocket } = x11Ntk('<foreign>');
     const socket = new XEmbedSocket(parent, {
       ...rect,
       // react-x11 has a focus manager; a socket that answered
@@ -318,6 +320,8 @@ export class ForeignNode extends Node {
   defaultFocus(info) {
     const socket = this.socket;
     if (!socket || !this.client) return;
+    // a socket is an X connection's, so ntk's root is loaded (src/ntkroot.js)
+    const { XEMBED } = x11Ntk('<foreign>');
     const time = lastInputTime(this.app);
     socket.activate(true, { time });
     const detail =
@@ -338,6 +342,7 @@ export class ForeignNode extends Node {
     if (!socket) return;
     const time = lastInputTime(this.app);
     if (this._focusSent) {
+      const { XEMBED } = x11Ntk('<foreign>');
       socket.send(XEMBED.FOCUS_OUT, 0, 0, 0, { time });
       this._focusSent = false;
     }

package/src/glbackend.js

@@ -19,7 +19,7 @@
 // `appcontext.js` (for `useSupports('shaders')`) and the node layer can use
 // it without the two importing each other.
 
-import { GLError } from 'ntk';
+import { GLError } from 'ntk/gl';
 
 /** Does this connection's policy ever choose the direct backend? */
 const wantsDirect = (app) => {

package/src/glnodes.js

@@ -5,7 +5,7 @@
 // (NEXT_STEPS §4), sized and positioned by the parent's yoga layout like any
 // other drawn node. Everything about the surface is here; the scene graph
 // that draws into it comes later (docs/glx-plan.md).
-import { cssColorStraight } from 'ntk';
+import { cssColorStraight } from 'ntk/color';
 
 // re-exported so the GL element layer stays one import for consumers
 export { directGLFailure, hasDirectGL } from './glbackend.js';

package/src/gloverlay.js

@@ -60,7 +60,7 @@
 // A leaf module, like src/embedding.js: `appcontext.js` asks `canOverlay`
 // for `useSupports('glOverlay')`, and it imports nothing of ours but the
 // damage model's arithmetic, which imports nothing at all.
-import { cssColorStraight } from 'ntk';
+import { cssColorStraight } from 'ntk/color';
 
 import { FULL_DAMAGE, addDamageRect } from './nodes/damage.js';
 import {

package/src/imagesource.js

@@ -6,7 +6,9 @@
 // and the `cacheKey` cache live here, where a test needs no server; the node
 // half in nodes/image.js is only lifecycle — when to resolve, when to claim
 // damage, when to let go.
-import { Image, Picture, decodeImage } from 'ntk';
+import { Image, decodeImage } from 'ntk/image';
+
+import { x11Ntk } from './ntkroot.js';
 
 /**
  * A client-side object the 2d context composites as-is: an ntk `Image` or
@@ -429,6 +431,7 @@ export class DrawableSource {
   picture() {
     if (!this._picture) {
       const Render = this.app.display.Render;
+      const { Picture } = x11Ntk('<image> on a server-side picture');
       this._picture = new Picture(this.app, {
         drawable: { id: this.id },
         format: Render[DEPTH_FORMATS[this.depth]],

package/src/node.d.ts

@@ -100,6 +100,9 @@ export interface Context2D {
   };
   setLineDash(segments: number[]): void;
   getLineDash(): number[];
+  /** Where along the dash pattern a stroke starts, in the same units as the
+   * pattern — the phase a marching dash moves. */
+  lineDashOffset: number;
   beginPath(): void;
   closePath(): void;
   moveTo(x: number, y: number): void;
@@ -139,6 +142,15 @@ export interface Context2D {
   strokeRect(x: number, y: number, width: number, height: number): void;
   clearRect(x: number, y: number, width: number, height: number): void;
   fillText(text: string, x: number, y: number): void;
+  /**
+   * `true` where text drawn under a transform that scales is drawn scaled,
+   * glyphs and all — the Windows and macOS contexts. Absent on X11, where
+   * ntk rasterizes glyphs at the size the text was shaped at and a
+   * transform moves only where each one lands. An element that would draw
+   * a layout it already has at another size, rather than shape a new one,
+   * asks this first.
+   */
+  readonly scalesText?: boolean;
   measureText(text: string): { width: number; [key: string]: unknown };
   /**
    * Composite an offscreen `Surface` (`react-x11/ntk`) — whole at a point,

package/src/nodes/animation.js

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

package/src/nodes/boxpaint.js

@@ -18,7 +18,7 @@ import {
 // `paintcache.js`: a named import of something an older ntk does not export
 // is a *load-time* SyntaxError, which would take the renderer down rather
 // than the one feature that needs it.
-import * as ntk from 'ntk';
+import { ntkRoot, x11Ntk } from '../ntkroot.js';
 import { isFocusable as a11yFocusable } from '../a11y.js';
 import { DEV } from './util.js';
 
@@ -320,7 +320,7 @@ export class NodeBoxPaint {
         );
         sctx.fill();
       },
-      after: (surface) => ntk.blurCoverage(surface, sigma),
+      after: (surface) => x11Ntk('a baked shadow').blurCoverage(surface, sigma),
       live: () => this._paintShadowLive(ctx, plan),
     };
     const cache = this.root?._paintCache;
@@ -338,7 +338,9 @@ export class NodeBoxPaint {
    * a k x k kernel, by the ratio of 2k to k squared.
    */
   _paintShadowLive(ctx, plan) {
-    if (typeof ntk.Surface !== 'function' || !this.app?.display?.Render) return;
+    const ntk = ntkRoot();
+    if (typeof ntk?.Surface !== 'function' || !this.app?.display?.Render)
+      return;
     let surface = null;
     try {
       surface = new ntk.Surface(this.app, {

package/src/nodes/image.js

@@ -20,7 +20,7 @@ import {
 // `paintcache.js`: a named import of something an older ntk does not export
 // is a *load-time* SyntaxError, which would take the renderer down rather
 // than the one feature that needs it.
-import * as ntk from 'ntk';
+import { loadImage } from 'ntk/image';
 import { symbolWeight, symbolsFor, warnOnce } from '../symbols.js';
 import { intrinsicSize } from './layout.js';
 import { Node } from './node.js';
@@ -164,7 +164,7 @@ export class ImageNode extends Node {
   _loadEntry(src) {
     if (isPathImageSource(src)) {
       return {
-        promise: ntk.loadImage(toLoadablePath(src)).then(
+        promise: loadImage(toLoadablePath(src)).then(
           (image) => image,
           (err) => {
             console.error(
@@ -196,7 +196,7 @@ export class ImageNode extends Node {
   async _loadFile(src) {
     const token = ++this._loadToken;
     try {
-      const image = await ntk.loadImage(toLoadablePath(src));
+      const image = await loadImage(toLoadablePath(src));
       if (token !== this._loadToken || this.destroyed) return;
       this._ownedImage = image;
       this._setImage(image);

package/src/nodes/invalidate.js

@@ -322,6 +322,11 @@ export class WindowInvalidate {
       // panned — was a full measurement of the content floors a step.
       if (reason !== 'scroll' && reason !== 'position') {
         this._floorsDirty = true;
+        // …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 (reason !== 'scroll' && reason !== 'resize' && reason !== 'position') {
         this._floorsContentDirty = true;
@@ -477,6 +482,27 @@ export class WindowInvalidate {
     return WINDOW_ONLY;
   }
 
+  /**
+   * One rect the layout diff says a node moved through (`layoutDiff.sink`,
+   * nodes/window/flush.js), to the lists that paint that node — the same
+   * reach a claim of it has (`_paneReach`). A node inside a surface is the
+   * panes' alone: the window's pass under the surface would repaint pixels
+   * no child of it ever had, and it went to both, so a card dragged across
+   * a graph drawn through GL was a window pass under the surface on every
+   * step. Answers whether the window's list took it.
+   */
+  _claimLayoutMove(rect, node, cap) {
+    const reach =
+      this._overlaid.size !== 0 ? this._paneReach(node ?? null) : WINDOW_ONLY;
+    let windowTook = false;
+    if (reach !== PANES_ONLY && this._damage !== FULL_DAMAGE) {
+      this._damage = addDamageRect(this._damage, rect, cap);
+      windowTook = true;
+    }
+    if (reach !== WINDOW_ONLY) this._addPaneDamage(rect);
+    return windowTook;
+  }
+
   /** One rect more for the panes, unless they repaint whole already. */
   _addPaneDamage(rect) {
     if (this._paneDamage === FULL_DAMAGE) return;

package/src/nodes/layout.js

@@ -313,17 +313,17 @@ export class NodeLayout {
         ) {
           return;
         }
-        if (had) layoutDiff.sink(insetRect(was, -grow));
+        if (had) layoutDiff.sink(insetRect(was, -grow), this);
         if (width > 0 && height > 0) {
-          layoutDiff.sink(insetRect(this.abs, -grow));
+          layoutDiff.sink(insetRect(this.abs, -grow), this);
         }
         return;
       }
       if (had) {
-        layoutDiff.sink(insetRect(old, -grow));
+        layoutDiff.sink(insetRect(old, -grow), this);
       }
       if (width > 0 && height > 0) {
-        layoutDiff.sink(insetRect(this.abs, -grow));
+        layoutDiff.sink(insetRect(this.abs, -grow), this);
       }
     }
   }

package/src/nodes/layouthost.js

@@ -415,6 +415,7 @@ export class NodeLayoutHost {
       // content floors were measured from, as any style change is
       root._floorsDirty = true;
       root._floorsContentDirty = true;
+      root._floorsUnscoped = true;
     }
   }
 
@@ -944,6 +945,7 @@ export class WindowLayoutHost {
     this._failedHosts.clear();
     this._floorsDirty = true;
     this._floorsContentDirty = true;
+    this._floorsUnscoped = true;
     return true;
   }
 }

package/src/nodes/paint.js

@@ -3,7 +3,7 @@
 // window, background first.
 
 import { isPlaced } from '../layouts.js';
-import { Surface } from '../ntk.js';
+import { Surface } from '../offscreen.js';
 import { isPaintedColor } from './boxpaint.js';
 import { DAMAGE_SLOP } from './damage.js';
 import { DRAWN_KINDS } from './kinds.js';

package/src/nodes/queries.js

@@ -196,6 +196,7 @@ export class NodeQueries {
       if (applyLayoutStyle(this.yoga, this.style, before) && this.root) {
         this.root._floorsDirty = true;
         this.root._floorsContentDirty = true;
+        this.root._floorsSources.add(this);
       }
     }
   }
@@ -233,6 +234,7 @@ export class WindowQueries {
     // a query block may carry layout properties, so the floors measured from
     // the styles it is replacing are not the answer any more
     this._floorsDirty = true;
+    this._floorsUnscoped = true;
     for (const node of [...this._sizeQueryNodes]) {
       if (node.destroyed) this._sizeQueryNodes.delete(node);
       else node._sizeQueriesChanged();
@@ -324,7 +326,10 @@ export class WindowQueries {
     // a block may carry layout properties, so the floors measured from the
     // styles it is replacing are not the answer any more — the same debt a
     // window query leaves (`_resolveSizeQueries`)
-    if (changed) this._floorsDirty = true;
+    if (changed) {
+      this._floorsDirty = true;
+      this._floorsUnscoped = true;
+    }
     return changed;
   }
 }

package/src/nodes/scrollable.js

@@ -301,11 +301,11 @@ export const Scrollable = (Base) =>
             // for a `<glarea>` child's move that this pane rides (issue
             // #644): its box claimed nothing, and a pane laid out again may
             // have moved rows the move's copy carries where they were.
-            if (clamped || layoutDiff.ride) outer(vp);
+            if (clamped || layoutDiff.ride) outer(vp, this);
           } else {
-            layoutDiff.sink = (rect) => {
+            layoutDiff.sink = (rect, node) => {
               const clipped = intersectRects(rect, vp);
-              if (clipped) outer(clipped);
+              if (clipped) outer(clipped, node);
             };
           }
           this._claimThumbs(thumbsWere, outer);
@@ -863,8 +863,8 @@ export const Scrollable = (Base) =>
         if (sameThumb(before, after)) continue;
         // a pixel of slop for the rounded corners' antialiasing, as the
         // blit's own thumb repair takes
-        if (before) sink(insetRect(before, -1));
-        if (after) sink(insetRect(after, -1));
+        if (before) sink(insetRect(before, -1), this);
+        if (after) sink(insetRect(after, -1), this);
       }
     }
 

package/src/nodes/text.js

@@ -2,7 +2,7 @@
 // selection paints, and the glyph strip.
 
 import { localTextStyleChanged, TEXT_REMEASURE } from '../styles.js';
-import { cssColorStraight } from 'ntk';
+import { cssColorStraight } from 'ntk/color';
 import { hooks as a11yHooks } from '../a11y.js';
 import { codePointAtOffset, codeUnitOffsets } from '../textrange.js';
 import { NO_DAMAGE } from './damage.js';

package/src/nodes/window/capabilities.js

@@ -1,7 +1,7 @@
 // What a window can paint: compositing and ARGB transparency, the window
 // background, and the capabilities `@supports` blocks read.
 
-import { cssColorStraight } from 'ntk';
+import { cssColorStraight } from 'ntk/color';
 import {
   argbVisual,
   compositingActive,

package/src/nodes/window/floors.js

@@ -197,6 +197,88 @@ export function collectFloorStale(node, stale, found, sweep) {
   }
 }
 
+/**
+ * Whether `node` is a box its content cannot size and its surroundings cannot
+ * size either — an edge a floor measurement may stop at
+ * (`WindowNode._floorsScope`).
+ *
+ * Absolutely positioned, with a width and a height its style names as
+ * numbers: it is out of its parent's flow, so nothing measured inside it
+ * reaches anything above it (`contentSpan` skips it, and no floor is written
+ * on it), and every pass lays it out at those numbers wherever it sits, so
+ * what is inside it is measured the same in a pass over the window and in a
+ * pass over it alone. Nothing in its own box resolves against its parent —
+ * a percentage of padding would — and neither it nor its parent is a layout
+ * host, whose children are measured tree by tree.
+ *
+ * A card on a graph, a popover laid out inside the window, a sized overlay:
+ * the boxes a change inside is most often confined to. An in-flow box with a
+ * size of its own would do as well along its cross axis, but on its main
+ * axis a flex line can grow it past its width or shrink it under a minimum
+ * the author named, and that is a question about its siblings.
+ */
+export function isFloorBoundary(node) {
+  const style = node.style;
+  return (
+    node.yoga != null &&
+    !node.isWindow &&
+    style.position === 'absolute' &&
+    style.display !== 'none' &&
+    typeof style.width === 'number' &&
+    typeof style.height === 'number' &&
+    typeof style.minWidth !== 'string' &&
+    typeof style.minHeight !== 'string' &&
+    typeof style.maxWidth !== 'string' &&
+    typeof style.maxHeight !== 'string' &&
+    !PADDINGS.some((key) => typeof style[key] === 'string') &&
+    node._host === null &&
+    (node.parent?._host ?? null) === null
+  );
+}
+
+const PADDINGS = [
+  'padding',
+  'paddingTop',
+  'paddingRight',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingHorizontal',
+  'paddingVertical',
+  'paddingStart',
+  'paddingEnd',
+];
+
+/**
+ * The box that holds a change to `node` in (`isFloorBoundary`), or null when
+ * none does below `root`. Looked for from the parent up: a node that changed
+ * may have changed its own size, and it is what is *around* the change that
+ * has to hold still.
+ */
+export function floorBoundaryOf(node, root) {
+  for (let n = node.parent; n && n !== root; n = n.parent) {
+    if (n.isWindow) return null;
+    if (isFloorBoundary(n)) return n;
+  }
+  return null;
+}
+
+/**
+ * Whether yoga has a change on record anywhere but inside `boundaries` and on
+ * the way down to them (`paths`) — something that changed with no node
+ * saying so, which a measurement confined to the boundaries would miss. A
+ * dirty node's ancestors are dirty too, so the walk goes down dirty nodes
+ * only, and a clean one has nothing under it to find.
+ */
+export function dirtyOutside(node, boundaries, paths) {
+  for (const child of node.children) {
+    if (!child.yoga || child.isWindow || !child.yoga.isDirty()) continue;
+    if (boundaries.has(child)) continue;
+    if (!paths.has(child)) return true;
+    if (dirtyOutside(child, boundaries, paths)) return true;
+  }
+  return false;
+}
+
 /**
  * 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.
@@ -216,7 +298,7 @@ export function collectFloorStale(node, stale, found, sweep) {
  * the pixel grid off and the real one with it on, so the same layout reads
  * a fraction apart between them.
  */
-export function probeHeightFloors(node, root, hit) {
+export function probeHeightFloors(node, root, hit, stop = root) {
   for (const child of node.children) {
     if (!child.yoga || child.isWindow) continue;
     if (child.style.display === 'none') continue;
@@ -230,10 +312,10 @@ export function probeHeightFloors(node, root, hit) {
         at !== undefined &&
         child._heightForWidth(width) !== child._heightForWidth(at)
       ) {
-        markHeightStale(child, root, hit);
+        markHeightStale(child, root, hit, stop);
       }
     } else {
-      probeHeightFloors(child, root, hit);
+      probeHeightFloors(child, root, hit, stop);
     }
     // whatever the extent is, it is the extent for this width now — a
     // stale one is about to be measured here, a clean one was just checked
@@ -241,10 +323,12 @@ export function probeHeightFloors(node, root, hit) {
   }
 }
 
-/** A leaf whose height moved takes every extent above it with it. */
-function markHeightStale(node, root, hit) {
+/** A leaf whose height moved takes every extent above it with it — up to
+ *  `stop`, a box that sizes itself (`isFloorBoundary`), whose extent is its
+ *  style's whatever moved inside it. */
+function markHeightStale(node, root, hit, stop = root) {
   hit.marked = true;
-  for (let n = node; n && n !== root; n = n.parent) {
+  for (let n = node; n && n !== stop; n = n.parent) {
     if (n._floorH === undefined) continue;
     n._floorH = undefined;
     root._floorsStale.add(n);