react-x11 2.23.2 → 2.24.1

package/package.json

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

package/src/compositing.js

@@ -40,6 +40,9 @@ class CompositingSession {
     this.stopped = false;
     this._window = null;
     this._selection = null;
+    /** What `stop` takes off the connection: the listener and the XFixes
+     *  address window `watchSelection` put on it. */
+    this._teardown = [];
   }
 
   _set(supported) {
@@ -64,6 +67,16 @@ class CompositingSession {
   stop() {
     this.stopped = true;
     this.listeners.clear();
+    // Taken off, not just ignored — the same as XSETTINGS's session: an app
+    // that mounts one root after another on one connection gained a
+    // listener and a window a root.
+    for (const undo of this._teardown.splice(0)) {
+      try {
+        undo();
+      } catch {
+        // a connection already gone takes all of it with it
+      }
+    }
   }
 }
 
@@ -144,13 +157,20 @@ async function watchSelection(app, session, atom) {
     fixes.SelectionEventMask.SetSelectionOwner |
     fixes.SelectionEventMask.SelectionWindowDestroy |
     fixes.SelectionEventMask.SelectionClientClose;
-  X.on('event', (ev) => {
+  const onOwner = (ev) => {
     if (session.stopped) return;
     // XFixes events carry a server-assigned type above the core range, so
     // this cannot be confused with core SelectionNotify (31)
     if (ev.type !== fixes.firstEvent) return;
     if (ev.selection !== atom) return;
     session._set(Boolean(ev.owner));
+  };
+  X.on('event', onOwner);
+  session._teardown.push(() => {
+    X.removeListener('event', onOwner);
+    // the selection input goes with the window it was addressed to
+    X.DestroyWindow(id);
+    session._window = null;
   });
   fixes.SelectSelectionInput(id, atom, mask);
 }

package/src/node.d.ts

@@ -515,6 +515,16 @@ export declare class Node {
    * paint, whatever the props. A translucent element answers `null`.
    */
   opaqueRect(): Rect | null;
+  /**
+   * How far this element's own drawing reaches past its box, in device
+   * pixels on every side — 0, the default, for an element that stays inside
+   * it. Core claims and culls the element by its box grown by this, as it
+   * does for an outline or a shadow; an element that paints past its box
+   * without saying so leaves the old ink's edge behind when it changes. Read
+   * when the cached paint bounds are rebuilt: answer a bound for anything
+   * the element may draw, not for what it drew last.
+   */
+  paintOverhang(): number;
   /**
    * The rect this paint pass is repainting, or null when it is repainting
    * the whole window — and null outside a paint, which means the same

package/src/nodes/invalidate.js

@@ -114,6 +114,26 @@ export class NodeInvalidate {
     return null;
   }
 
+  /**
+   * How far this element's own drawing reaches past its box — device
+   * pixels, on every side — or 0, the default, for one that stays inside
+   * it. Core claims and culls the element, and sizes a fade's surface, by
+   * the box grown by it, as it does for an outline or a shadow. Drawing
+   * past the box without saying so, an element was claimed by its box
+   * alone: an edit left the old ink's edge behind and drew the new one's
+   * without it, and a row scrolled just out of view lost the ink it still
+   * put in. A code chip padded past the run it sits behind is the case —
+   * at the start of a line the pad is outside the box.
+   *
+   * Read whenever the cached paint bounds are rebuilt, which a claim of the
+   * node does: answer a bound that holds for anything the element may
+   * draw, not for what it drew last, or the claim after a change stops
+   * covering what the frame before put down.
+   */
+  paintOverhang() {
+    return 0;
+  }
+
   /**
    * A layout-affecting change confined to this node: claim the subtree as
    * it stands now, and queue it for a second claim once layout has run —
@@ -206,7 +226,8 @@ export class NodeInvalidate {
 
   /**
    * This node's own rect, grown by anything it draws outside it — the
-   * outline and the shadow, the only two. Per node rather than once at the
+   * outline and the shadow, and whatever an element says it draws past its
+   * box (`paintOverhang`). Per node rather than once at the
    * top, because either can belong to any node and the bound has to cover it
    * wherever it is; and the outline is counted even when the ring is
    * currently *off*, because the frame that erases it is claimed after the
@@ -219,7 +240,11 @@ export class NodeInvalidate {
    * instead, where both the old style and the new one are in hand.
    */
   _ownPaintBounds() {
-    const extent = Math.max(this._outlineExtent(), this._shadowExtent());
+    const extent = Math.max(
+      this._outlineExtent(),
+      this._shadowExtent(),
+      this.paintOverhang() || 0,
+    );
     if (extent <= 0) return this.abs;
     return {
       x: this.abs.x - extent,
@@ -549,15 +574,6 @@ export class WindowInvalidate {
     return damageToPaint(rects);
   }
 
-  /**
-   * The rects this frame will repaint, or null for the whole window.
-   *
-   * Clamped to the window: damage is recorded when a node invalidates, and
-   * the window may have been resized since. A region that no longer
-   * intersects the window means there is nothing to do, but the frame still
-   * has to clear the flag, so it degrades to a full repaint rather than
-   * painting nothing.
-   */
   /**
    * How many rects a frame's damage may hold before `addDamageRect` merges
    * the closest pair. Four on X11 (`MAX_DAMAGE_RECTS`), where every pass
@@ -571,6 +587,17 @@ export class WindowInvalidate {
     return Number.isInteger(cap) && cap > 0 ? cap : MAX_DAMAGE_RECTS;
   }
 
+  /**
+   * The rects this frame will repaint, or null for the whole window.
+   *
+   * Clamped to the window: damage is recorded when a node invalidates, and
+   * the window may have been resized since — or the node drew past its
+   * edge, where a claim lands whole. A frame whose every claim lies outside
+   * the window has nothing to repaint and paints nothing, as a frame whose
+   * claims were all answered on layers does; it used to repaint the whole
+   * window, so a card dragged past the edge of a graph, or a pan that
+   * claimed only its far side, cost a full frame.
+   */
   _takeDamage(width, height) {
     const damage = this._damage;
     this._damage = null;
@@ -608,7 +635,11 @@ export class WindowInvalidate {
       if (clamped === FULL_DAMAGE) return null;
       if (clamped) rects.push(clamped);
     }
-    if (!rects.length) return null;
+    if (!rects.length) {
+      this._lastDamageRects = [];
+      this._lastDamage = { x: 0, y: 0, width: 0, height: 0 };
+      return [];
+    }
     this._lastDamageRects = damageToPaint(rects);
     this._lastDamage = rectsBounds(this._lastDamageRects);
     return this._lastDamageRects;

package/src/nodes/paint.js

@@ -135,9 +135,9 @@ export class NodePaint {
    * wherever nothing inside it overlaps.
    */
   _paintGroup(ctx, opacity) {
-    const rect = this._groupRect();
+    let rect = this._groupRect();
     if (!rect) return;
-    const surface = this._groupSurfaceFor(rect.width, rect.height);
+    let surface = this._groupSurfaceFor(rect.width, rect.height);
     const alpha = ctx.globalAlpha ?? 1;
     if (!surface) {
       ctx.globalAlpha = alpha * opacity;
@@ -148,17 +148,32 @@ export class NodePaint {
       }
       return;
     }
-    surface.render((sctx) => {
-      sctx.clearRect(0, 0, rect.width, rect.height);
-      sctx.translate(-rect.x, -rect.y);
-      const damage = this.root?._paintDamage;
-      if (damage) {
-        sctx.beginPath();
-        sctx.rect(damage.x, damage.y, damage.width, damage.height);
-        sctx.clip();
-      }
-      this._paintNode(sctx);
-    });
+    const draw = () =>
+      surface.render((sctx) => {
+        sctx.clearRect(0, 0, rect.width, rect.height);
+        sctx.translate(-rect.x, -rect.y);
+        const damage = this.root?._paintDamage;
+        if (damage) {
+          sctx.beginPath();
+          sctx.rect(damage.x, damage.y, damage.width, damage.height);
+          sctx.clip();
+        }
+        this._paintNode(sctx);
+      });
+    draw();
+    // A paragraph learns how far its ink reaches past its box by drawing
+    // (`TextNode._keepInkReach`). One its paint lays out at a width nothing
+    // measured it at — a box of no width is drawn unwrapped — learns it only
+    // here, after the surface was sized, which cut its overflow off on the
+    // first frame and drew it whole on every frame after. Drawn once more,
+    // at the size it turned out to need: the one time it is not known.
+    const after = this._groupRect();
+    if (after && !rectContains(rect, after)) {
+      rect = after;
+      surface = this._groupSurfaceFor(rect.width, rect.height);
+      if (!surface) return;
+      draw();
+    }
     ctx.globalAlpha = alpha * opacity;
     try {
       ctx.drawImage(surface, rect.x, rect.y);
@@ -355,11 +370,15 @@ export class NodePaint {
   }
 
   /** `order` painted in turn, each child culled against the window, its
-   *  clipping ancestors and the pass. */
+   *  clipping ancestors and the pass — by what it paints, not by its box: a
+   *  row scrolled just out of a pane still reaches into it with whatever
+   *  hangs off it, a descender past a trimmed line box or a child that
+   *  overflows it, and culled by its box it drew none of that in a full
+   *  repaint while a scroll's copy carried it. */
   _paintChildList(ctx, order) {
     for (const child of order) {
       if (child._promoted) continue; // on a layer of its own: a hole here
-      if (child._offscreen(child.abs, DAMAGE_SLOP)) continue;
+      if (child._offscreen(child._subtreeBounds(), DAMAGE_SLOP)) continue;
       if (child._outsideDamage()) continue;
       child.paint(ctx);
     }
@@ -371,8 +390,9 @@ export class NodePaint {
    */
   _paintsInto(rect) {
     if (this._promoted) return false;
-    if (!rectsOverlap(this._subtreeBounds(), rect, DAMAGE_SLOP)) return false;
-    return !this._offscreen(this.abs, DAMAGE_SLOP);
+    const reach = this._subtreeBounds();
+    if (!rectsOverlap(reach, rect, DAMAGE_SLOP)) return false;
+    return !this._offscreen(reach, DAMAGE_SLOP);
   }
 
   /**
@@ -517,6 +537,16 @@ export class NodePaint {
   }
 }
 
+/** Whether `outer` holds all of `inner`. */
+function rectContains(outer, inner) {
+  return (
+    inner.x >= outer.x &&
+    inner.y >= outer.y &&
+    inner.x + inner.width <= outer.x + outer.width &&
+    inner.y + inner.height <= outer.y + outer.height
+  );
+}
+
 /** WindowNode's half of the paint walk, installed onto `WindowNode.prototype` by window/window.js. */
 export class WindowPaint {
   /** Repaint one damage rect, or the whole window when `damage` is null. */

package/src/nodes/scrollable.js

@@ -67,6 +67,8 @@ function contentReach(node, top) {
   const boxes = layoutDiff.boxes;
   for (const child of node.children) {
     if (child.isWindow || !child.yoga || child.hidden) continue;
+    // not laid out, and not there: see `absolutize`
+    if (child.style.display === 'none') continue;
     const box = child.yoga.getComputedLayout();
     // …for the walk that places this child, later in the same one
     boxes?.set(child, box);
@@ -239,12 +241,20 @@ export const Scrollable = (Base) =>
       try {
         this._assignAbs(x, y, width, height);
         if (this.props.onLayout) this._reportLayout();
-        this._absolutizeChildren(
-          this.abs.x,
-          this.abs.y,
-          this.abs.x - wasX,
-          this.abs.y - wasY,
-        );
+        // A `display: 'none'` subtree takes part in no layout: yoga leaves
+        // its children where the last pass that reached them did — and a
+        // child inserted or moved while it was hidden with no layout at all,
+        // NaN, which a scroll pane in there measured its content from and
+        // threw on, out of the frame. The box itself has its empty rect;
+        // what is inside is placed when it is shown and laid out again.
+        if (this.style.display !== 'none') {
+          this._absolutizeChildren(
+            this.abs.x,
+            this.abs.y,
+            this.abs.x - wasX,
+            this.abs.y - wasY,
+          );
+        }
       } finally {
         if (move) {
           layoutDiff.shift = null;

package/src/nodes/text.js

@@ -52,6 +52,72 @@ function outside(ink, box) {
 /** `TextNode._trim`'s answer, per layout. */
 const trims = new WeakMap();
 
+/** {@link glyphInk}'s answer, per layout. */
+const glyphInks = new WeakMap();
+
+/**
+ * Where a layout's glyphs put ink past its lines' boxes, from its origin —
+ * or null where the engine cannot say. A glyph inks past its advance: a `j`
+ * that starts a line hooks back over the line's start and an `f` that ends
+ * one reaches past its end, by their own boxes (`glyphExtents`, ntk's). And
+ * a line set tighter than its face has ascenders over its top and
+ * descenders under its bottom, by the face's own reach (`metrics`).
+ *
+ * Found once per layout, and only where it can leave the layout's box: at a
+ * line's two ends, and over the first line and under the last. A glyph an
+ * em inside a line's ends reaches neither end, and measuring every glyph
+ * cost about as much again as laying the paragraph out.
+ */
+function glyphInk(layout) {
+  const known = glyphInks.get(layout);
+  if (known !== undefined) return known;
+  let left = Infinity;
+  let top = Infinity;
+  let right = -Infinity;
+  let bottom = -Infinity;
+  const lines = layout.lines;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const outer = i === 0 || i === lines.length - 1;
+    const start = line.x;
+    const end = line.x + line.width;
+    for (const placed of line.runs ?? []) {
+      const run = placed.run;
+      if (!run?.glyphs) continue;
+      if (outer) {
+        const m = run.font?.metrics?.(run.size);
+        if (m && m.ascent >= 0 && m.descent >= 0) {
+          top = Math.min(top, line.baseline - m.ascent);
+          bottom = Math.max(bottom, line.baseline + m.descent);
+        }
+      }
+      // the pen as `layout.draw` moves it
+      let pen = line.x + placed.x;
+      for (const glyph of run.glyphs) {
+        const gx = pen + glyph.dx;
+        const gy = line.baseline - glyph.dy;
+        pen += glyph.ax;
+        if (gx - run.size > start && gx + run.size < end) continue;
+        // a face that cannot say leaves its glyphs to the lines' boxes, and
+        // a blank glyph — a space — has no ink to reach anywhere with
+        const face = glyph.font ?? run.font;
+        const e = face?.glyphExtents?.(glyph.id, run.size);
+        if (!e || !(e.maxX > e.minX && e.maxY > e.minY)) continue;
+        left = Math.min(left, gx + e.minX);
+        right = Math.max(right, gx + e.maxX);
+        if (outer) {
+          top = Math.min(top, gy + e.minY);
+          bottom = Math.max(bottom, gy + e.maxY);
+        }
+      }
+    }
+  }
+  const ink =
+    left <= right || top <= bottom ? { left, top, right, bottom } : null;
+  glyphInks.set(layout, ink);
+  return ink;
+}
+
 /** The size under which this connection's text is painted as strips. */
 export function setTextStripBelow(app, below) {
   if (below === undefined) return;
@@ -739,7 +805,8 @@ export class TextNode extends Node {
     if (placed) layoutDiff.sink(insetRect(placed, -DAMAGE_SLOP), this);
   }
 
-  /** The rect the lines of a placed layout cover, in window coordinates. */
+  /** The rect the lines of a placed layout cover, and their glyphs' ink
+   *  where it reaches past them, in window coordinates. */
   _inkOf({ layout, x, y }) {
     const lines = layout.lines;
     if (!lines?.length) return null;
@@ -749,11 +816,21 @@ export class TextNode extends Node {
       left = Math.min(left, line.x);
       right = Math.max(right, line.x + line.width);
     }
+    let top = 0;
+    let bottom = layout.height;
+    const glyphs = glyphInk(layout);
+    if (glyphs) {
+      // each is ±Infinity where nothing was found to reach that way
+      left = Math.min(left, glyphs.left);
+      right = Math.max(right, glyphs.right);
+      top = Math.min(top, glyphs.top);
+      bottom = Math.max(bottom, glyphs.bottom);
+    }
     return {
       x: x + left,
-      y,
+      y: y + top,
       width: right - left,
-      height: layout.height,
+      height: bottom - top,
     };
   }
 

package/src/nodes/window/floors.js

@@ -56,7 +56,7 @@ export function captureLeafHeights(node, out) {
  * is back to meaning only how eagerly the space *above* the floor is given
  * up.
  */
-function namesOwnFloor(node, axis) {
+export function namesOwnFloor(node, axis) {
   const style = node.style;
   if (style.overflow === 'scroll' || style.overflow === 'hidden') return true;
   return (

package/src/nodes/window/size.js

@@ -2,7 +2,7 @@
 // floors, laying the root out, deferring floors during a live resize and
 // catching up after, and refitting the window to what it holds.
 
-import { measuringExactly } from '../../styles.js';
+import { exactLayoutConfig, measuringExactly } from '../../styles.js';
 import { availableArea } from '../../screens.js';
 import { Yoga } from '../../yoga.js';
 import {
@@ -11,6 +11,7 @@ import {
   columnHeightSpan,
   markUnreadLeaves,
   declaresOwnMinimum,
+  namesOwnFloor,
   dirtyOutside,
   floorBoundaryOf,
   probeHeightFloors,
@@ -327,12 +328,18 @@ export class WindowSize {
 
   /**
    * 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`).
+   * it has in each of the passes over the whole tree (`spine.js`), and, for
+   * its heights, as the one item of a column that offers it what each of
+   * those passes does: no height in the first, and in the collapse what
+   * the column it sits in offers there (`frameFor`), which is 0 under the
+   * window. Laid out as an item rather than as a root, it is resolved as
+   * its column resolves it there — a basis counts, a floor of its own is
+   * given way to — and what it holds is laid out in the bound yoga passes
+   * down, which squashes a pane in it that names a floor: laid out with no
+   * height at all, a <Tree>'s pane came out as tall as its 100,000 rows.
+   * 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, () =>
@@ -356,33 +363,50 @@ export class WindowSize {
       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);
+    // the column it is laid out in (`frameFor`), as wide as the one it sits in
+    const column = Yoga.Node.create(exactLayoutConfig());
+    if (widths.frame.scrolls) column.setOverflow(Yoga.OVERFLOW_SCROLL);
+    column.insertChild(yoga, 0);
+    const pass = (height) => {
+      this._scopedFloorPasses += 1;
+      column.calculateLayout(widths.width, height, dir);
+    };
+    try {
+      pass(undefined);
+      if (probe) {
+        const hit = { marked: false, owed: false };
+        probeHeightFloors(root, this, hit, root);
+        if (hit.marked) {
+          this._writeFloors('height');
+          pass(undefined);
+        }
       }
+      const intrinsic = new Map();
+      captureLeafHeights(root, intrinsic);
+      const frozen = [];
+      freezeWidths(root, frozen);
+      const shrunk = [];
+      setMeasuringShrink(root, axis, shrunk);
+      // …and gives way in it as `setMeasuringShrink` has everything else
+      // give way: to a floor it names, and to nothing else
+      const shrink = namesOwnFloor(root, axis) ? 1 : 0;
+      if ((root.style.flexShrink ?? 1) !== shrink) {
+        yoga.setFlexShrink(shrink);
+        shrunk.push(root);
+      }
+      pass(widths.frame.height);
+      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);
+    } finally {
+      column.removeChild(yoga);
+      column.free();
     }
-    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

package/src/nodes/window/spine.js

@@ -15,8 +15,13 @@
 //
 // - 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.
+//   content height in every pass. What it holds is laid out in the height
+//   the pass offers the column, though — none under a pane that scrolls,
+//   and 0 under the window, which the collapse lays out at 0 and every box
+//   on the way down passes on as a bound — and a bound is not nothing: a
+//   pane in the block that names a floor is squashed to it, and a basis
+//   counts. Laid out alone as the one item of a column that offers the
+//   same (`frameFor`), the block 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
@@ -30,7 +35,12 @@
 // Anything else — a row on the way, a margin or 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 {
+  declaresOwnMinimum,
+  inFlow,
+  mainAxisOf,
+  namesOwnFloor,
+} from './floors.js';
 import { Yoga } from '../../yoga.js';
 
 const LENGTHS_ACROSS = [
@@ -149,7 +159,7 @@ export function spineScope(root, sources, listOnly) {
       if (!child.yoga || child.isWindow || child.style.display === 'none') {
         continue;
       }
-      const widths = rootWidths(child, offered);
+      const widths = rootWidths(child, offered, node);
       if (widths === null) return null;
       roots.set(child, widths);
     }
@@ -161,6 +171,11 @@ export function spineScope(root, sources, listOnly) {
     return false;
   };
   for (const node of [...roots.keys()]) if (within(node)) roots.delete(node);
+  // …and one that is not has to be laid out alone as the whole tree lays it
+  // out, which only the pass knows for some (`frameFor`)
+  for (const [node, widths] of roots) {
+    if (!heightHolds(node, widths.frame)) return null;
+  }
   for (const node of [...spine]) {
     if (roots.has(node) || within(node)) spine.delete(node);
   }
@@ -186,6 +201,121 @@ export function spineScope(root, sources, listOnly) {
   };
 }
 
+/**
+ * The column a root is laid out alone as the one item of, for its heights
+ * (`_measureSpineRoot`): one that lays it out in what the collapse pass
+ * over the whole tree offers the column it sits in.
+ *
+ * - `COLLAPSED` under the window, which that pass lays out at 0, and under
+ *   a stop that only names its floors or clips when every box on the way
+ *   up from it passes that 0 on (`passesBound`). Every column the spine
+ *   sums passes it on too, having no height of its own — unless it names
+ *   a basis or an aspect ratio to lay out what it holds in instead.
+ * - `UNBOUNDED` in a column under a pane that scrolls, which measures what
+ *   it holds with no bound. The column is laid out at its content's height,
+ *   as long as the pane's own item on the way has no basis to start from.
+ * - An item of the pane itself is laid out in the pane's height: 0 when
+ *   the pane is squashed to nothing, as a pane under the window is, which
+ *   the frame copies by scrolling too (`SQUASHED_PANE`); in any other
+ *   pane's, which only the pass knows (`OPEN_PANE`).
+ *
+ * `null` where a box on the way lays out what it holds in a height of its
+ * own, which only the pass knows too.
+ */
+function frameFor(column, stop) {
+  if (stop.style.overflow === 'scroll') {
+    if (column === stop) {
+      return boundFrom(stop) ? SQUASHED_PANE : OPEN_PANE;
+    }
+    for (let node = column; node !== stop; node = node.parent) {
+      if (node.style.aspectRatio > 0) return null;
+      if (node.parent === stop && basisOf(node.style) !== 'auto') return null;
+    }
+    return UNBOUNDED;
+  }
+  for (let node = column; node !== stop; node = node.parent) {
+    if (!passesBound(node)) return null;
+  }
+  return boundFrom(stop) ? COLLAPSED : null;
+}
+
+const COLLAPSED = Object.freeze({ height: 0, scrolls: false });
+const UNBOUNDED = Object.freeze({ height: undefined, scrolls: false });
+const SQUASHED_PANE = Object.freeze({ height: 0, scrolls: true });
+// laid out with no bound, as `UNBOUNDED` — for the roots that nothing about
+// the pane's height decides (`heightHolds`)
+const OPEN_PANE = Object.freeze({ height: undefined, scrolls: false });
+
+/** Whether the collapse's 0 reaches what `node` holds: no box from it up to
+ *  the window has a height of its own to replace it with, and none above
+ *  it scrolls, measuring what it holds with no bound. */
+function boundFrom(node) {
+  for (let n = node; !n.isWindow; n = n.parent) {
+    if (!n.parent) return false;
+    if (n !== node && n.style.overflow === 'scroll') return false;
+    if (!passesBound(n)) return false;
+  }
+  return true;
+}
+
+/**
+ * Whether a box lays out what it holds in the bound it is laid out in
+ * itself: no height of its own named, no floor above nothing, no basis but
+ * 0 and no aspect ratio to take one from. Asked of the style, as everything
+ * here is — yoga's getters are a call into the engine and an object each,
+ * and a fling asks this of every box up to the window — and it is the
+ * style's floor that counts: the one the floors wrote is taken off a box a
+ * change is inside before anything is measured (`collectFloorStale`), and
+ * every box asked here is one.
+ */
+function passesBound(node) {
+  const style = node.style;
+  if (style.height !== undefined && style.height !== 'auto') return false;
+  if (style.minHeight !== undefined && style.minHeight !== 0) return false;
+  const basis = basisOf(style);
+  if (share(basis) || basis > 0) return false;
+  return !(style.aspectRatio > 0);
+}
+
+/** A length given as a share of something — a percentage — rather than as
+ *  a number or `auto`. */
+const share = (value) => typeof value === 'string' && value !== 'auto';
+
+/** The basis a style gives a flex item, as yoga takes it: the longhand, or
+ *  the shorthand's — 0 for a number, `auto` for either keyword. */
+function basisOf(style) {
+  if (style.flexBasis !== undefined) return style.flexBasis;
+  return typeof style.flex === 'number' ? 0 : 'auto';
+}
+
+/**
+ * Whether a root laid out alone in `frame` comes out as the whole tree lays
+ * it out: there is a frame; no length on its height axis is a share of the
+ * column it is not laid out in here; and in a pane that is not squashed,
+ * whose height only the pass knows, the root's own height is not decided
+ * by it — it does not grow into it, give way to it with a floor, or start
+ * from a basis.
+ */
+function heightHolds(root, frame) {
+  if (frame === null) return false;
+  const style = root.style;
+  const basis = basisOf(style);
+  if (
+    share(style.height) ||
+    share(style.minHeight) ||
+    share(style.maxHeight) ||
+    share(basis)
+  ) {
+    return false;
+  }
+  if (frame !== OPEN_PANE) return true;
+  return !(
+    root.yoga.getFlexGrow() > 0 ||
+    namesOwnFloor(root, 'height') ||
+    basis !== 'auto'
+  );
+}
+
 const OUT_OF_FLOW = 1;
 const RELATIVE_MARGIN = 2;
 const STYLE_FLAGS = new WeakMap();
@@ -240,7 +370,7 @@ function staleChildren(node) {
  * that is not a length, a percentage or `auto`, ends one: `auto` centres the
  * box instead of stretching it.
  */
-function rootWidths(node, offered) {
+function rootWidths(node, offered, stop) {
   const style = node.style;
   const parent = node.parent;
   if (!parent || !inFlow(node) || node._host !== null) return null;
@@ -249,12 +379,13 @@ function rootWidths(node, offered) {
   if (!stretched(node)) return null;
   if (MARGINS.some((key) => typeof style[key] === 'string')) return null;
   if (PADDINGS.some((key) => typeof style[key] === 'string')) return null;
-  return offered.in(parent);
+  return offered.in(parent, stop);
 }
 
 /**
  * The widths a column offers the roots in it (`rootWidths`), worked out once
- * a column rather than once a root.
+ * a column rather than once a root — and the column they are laid out in
+ * for their heights (`frameFor`), the same for every root in it.
  *
  * Every root in a column is offered the same two, and working out the width
  * pass's walks the way up to the window, with four yoga reads a box for its
@@ -272,14 +403,16 @@ class OfferedWidths {
     this.passWidths = new Map();
   }
 
-  /** `{ width, widthPass }` for a root in `column`: its content box now,
-   *  and in the width pass over the whole tree. */
-  in(column) {
+  /** `{ width, widthPass, frame }` for a root in `column`: its content box
+   *  now, and in the width pass over the whole tree; and the column it is
+   *  laid out in, under `stop`. */
+  in(column, stop) {
     let offer = this.offers.get(column);
     if (offer === undefined) {
       offer = {
         width: Math.max(0, column.yoga.getComputedWidth() - this.inset(column)),
         widthPass: this.passContent(column),
+        frame: frameFor(column, stop),
       };
       this.offers.set(column, offer);
     }

package/src/xsettings.js

@@ -127,6 +127,9 @@ class XSettingsSession {
     this.stopped = false;
     this._selectionAtom = 0;
     this._propertyAtom = 0;
+    /** What `stop` takes off the connection: the event listeners and the
+     *  XFixes address window `watchOwner` put on it. */
+    this._teardown = [];
   }
 
   _set(values) {
@@ -150,6 +153,17 @@ class XSettingsSession {
   stop() {
     this.stopped = true;
     this.listeners.clear();
+    // Taken off, not just ignored: a listener that checks `stopped` and
+    // returns still runs for every event on the connection, and an app that
+    // mounts one root after another — a test suite, a hot reload — gained a
+    // listener and a window a root.
+    for (const undo of this._teardown.splice(0)) {
+      try {
+        undo();
+      } catch {
+        // a connection already gone takes all of it with it
+      }
+    }
   }
 }
 
@@ -238,8 +252,12 @@ async function readSettings(session) {
 async function watchOwner(session) {
   const app = session.app;
   const X = app.X;
+  // Started without being awaited, so a root unmounted in the meantime has
+  // already stopped the session — and a listener added now would be one
+  // `stop` never saw.
+  if (session.stopped) return;
 
-  X.on('event', (ev) => {
+  const onProperty = (ev) => {
     if (session.stopped) return;
     if (
       ev.type === PROPERTY_NOTIFY &&
@@ -251,7 +269,9 @@ async function watchOwner(session) {
         () => {},
       );
     }
-  });
+  };
+  X.on('event', onProperty);
+  session._teardown.push(() => X.removeListener('event', onProperty));
 
   const fixes = await requireExtension(app, 'fixes');
   if (!fixes || session.stopped) return;
@@ -261,11 +281,17 @@ async function watchOwner(session) {
   X.CreateWindow(id, app.display.screen[0].root, -10, -10, 1, 1, 0, 0, 2, 0, {
     eventMask: 0,
   });
-  X.on('event', (ev) => {
+  const onOwner = (ev) => {
     if (session.stopped) return;
     if (ev.type !== fixes.firstEvent) return;
     if (ev.selection !== session._selectionAtom) return;
     latch(session).catch(() => {});
+  };
+  X.on('event', onOwner);
+  session._teardown.push(() => {
+    X.removeListener('event', onOwner);
+    // the selection input goes with the window it was addressed to
+    X.DestroyWindow(id);
   });
   fixes.SelectSelectionInput(
     id,