react-x11 2.49.0 → 2.50.0

package/src/nodes/node.js

@@ -227,6 +227,14 @@ export class Node {
     // the layout that threw, with the style value that named it: flexbox
     // until the style names a different one
     this._layoutAbandoned = null;
+    // what the style's relative lengths read, and the context they read it
+    // through during a swap (`_noteUnits` in styling.js)
+    this._unitDeps = 0;
+    this._emBasis = undefined;
+    this._units = null;
+    this._unitsNow = null;
+    this._makeUnits = null;
+    this._sizeQueried = false;
     this._syncStyle(props);
     this.yoga = yoga ? createLayoutNode() : null;
     if (this.yoga) {

package/src/nodes/paint.js

@@ -4,6 +4,7 @@
 
 import { isPlaced } from '../layouts.js';
 import { Surface } from '../offscreen.js';
+import { radiusOf } from '../styles.js';
 import { isPaintedColor } from './boxpaint.js';
 import { DAMAGE_SLOP } from './damage.js';
 import { DRAWN_KINDS } from './kinds.js';
@@ -357,7 +358,7 @@ export class NodePaint {
     // a context with no `roundRect` has always clipped a rounded box to its
     // rectangle, the way `_roundedPath` degrades
     const radius =
-      typeof ctx.roundRect === 'function' ? (this.style.borderRadius ?? 0) : 0;
+      typeof ctx.roundRect === 'function' ? radiusOf(this.style, this.abs) : 0;
     if (radius > 0 && this._paintRoundedChildren(ctx, order, radius)) return;
     const clip = this._childrenCanOverflow();
     if (clip) {
@@ -661,7 +662,8 @@ export class WindowPaint {
    * Shape extension's hard 1-bit edge.
    */
   _paintWindowBackground(ctx, damage, width, height) {
-    const { backgroundColor, borderRadius = 0 } = this.style;
+    const backgroundColor = this.resolveColor(this.style.backgroundColor);
+    const borderRadius = radiusOf(this.style, { width, height });
     if (DEV && this.style.boxShadow) devWarnWindowShadow(this.kind);
     // A `backgroundImage` works wherever a `backgroundColor` does, which is
     // the rule worth having — over the whole window, in window coordinates,

package/src/nodes/queries.js

@@ -183,42 +183,54 @@ export class NodeQueries {
     // what pushes that into the subtree; only the node-local text props are
     // left to notice here
     this._syncStyle(this.props);
+    this._restyled(before, 'applied when a query block started matching');
+  }
+
+  /**
+   * What a style resolved again outside a commit owes, past the swap itself:
+   * the node-local text props, and the layout. Returns whether the layout
+   * moved. A resize, a container settling, a font size a relative length
+   * read — none of them is React re-rendering the node, so nothing else
+   * applies it.
+   *
+   * A block that moved a layout property changed the tree the content floors
+   * were measured from — the debt a style change from React leaves too
+   * (`invalidate`, reason 'props'). It has to be marked as a *content*
+   * change: the live-resize deferral takes a plain `_floorsDirty` for the
+   * drag itself and lays out against the floors in hand, which are the old
+   * arrangement's, and by the time the catch-up looks the dirty flags are
+   * spent and no leaf's height moved — so the floor of a card that turned
+   * from a row into a column would stay the row's, and yoga would squeeze the
+   * column down to it.
+   *
+   * This can run in a frame, so a value the layout refuses is dropped and
+   * reported rather than thrown: nothing would catch it. `how` is the clause
+   * the report says it was applied by.
+   */
+  _restyled(before, how) {
     if (localTextStyleChanged(this.style, before)) this._textContentChanged();
-    if (this.yoga && this.style !== before) {
-      // A block that moved a layout property changed the tree the content
-      // floors were measured from — the debt a style change from React
-      // leaves too (`invalidate`, reason 'props'). It has to be marked as a
-      // *content* change: the live-resize deferral takes a plain
-      // `_floorsDirty` for the drag itself and lays out against the floors
-      // in hand, which are the old arrangement's, and by the time the
-      // catch-up looks the dirty flags are spent and no leaf's height moved
-      // — so the floor of a card that turned from a row into a column would
-      // stay the row's, and yoga would squeeze the column down to it.
-      //
-      // This runs in a frame, so a value the layout refuses is dropped and
-      // reported rather than thrown: nothing would catch it.
-      const refused = [];
-      const moved = applyLayoutStyle(this.yoga, this.style, before, refused);
-      for (const { key, value, error } of refused) {
-        // an enum's own message already says what it is and what it takes
-        const said = error.message.startsWith('react-x11:')
-          ? error.message
-          : `react-x11: invalid ${key} ${JSON.stringify(value)} ` +
-            `(${error.message})`;
-        reportStyleProblem(
-          this,
-          `${said} in <${this.kind} style>, applied when a query block ` +
-            'started matching',
-          'The declaration is dropped, as CSS drops one it cannot parse',
-        );
-      }
-      if (moved && this.root) {
-        this.root._floorsDirty = true;
-        this.root._floorsContentDirty = true;
-        this.root._floorsSources.add(this);
-        this.root._floorsOtherSources.add(this);
-      }
+    if (!this.yoga || this.style === before) return false;
+    const refused = [];
+    const moved = applyLayoutStyle(this.yoga, this.style, before, refused);
+    for (const { key, value, error } of refused) {
+      // an enum's own message already says what it is and what it takes
+      const said = error.message.startsWith('react-x11:')
+        ? error.message
+        : `react-x11: invalid ${key} ${JSON.stringify(value)} ` +
+          `(${error.message})`;
+      reportStyleProblem(
+        this,
+        `${said} in <${this.kind} style>, ${how}`,
+        'The declaration is dropped, as CSS drops one it cannot parse',
+      );
+    }
+    if (moved && this.root) {
+      this.root._floorsDirty = true;
+      this.root._floorsContentDirty = true;
+      this.root._floorsSources.add(this);
+      this.root._floorsOtherSources.add(this);
     }
+    return moved;
   }
 }
 

package/src/nodes/scrollblit.js

@@ -7,7 +7,7 @@
 // applies the blits at flush. Every failure falls back to repainting the
 // viewport, so the fast path can cost correctness nothing.
 
-import { EMPTY_STYLE, resolveBorderWidths } from '../styles.js';
+import { EMPTY_STYLE, radiusOf, resolveBorderWidths } from '../styles.js';
 import {
   DAMAGE_SLOP,
   MAX_DAMAGE_RECTS,
@@ -648,7 +648,10 @@ export class NodeScrollBlit {
   _paintsNothingOwn() {
     if (this.kind !== 'box' || this.isScroller?.()) return false;
     const style = this.style ?? EMPTY_STYLE;
-    if (isPaintedColor(style.backgroundColor) || style.backgroundImage) {
+    if (
+      isPaintedColor(this.resolveColor(style.backgroundColor)) ||
+      style.backgroundImage
+    ) {
       return false;
     }
     if (style.opacity !== undefined && style.opacity < 1) return false;
@@ -763,7 +766,7 @@ export class WindowScrollBlit {
       blitBorder.right > 0 ||
       blitBorder.bottom > 0 ||
       blitBorder.left > 0 ||
-      node.style.borderRadius > 0
+      radiusOf(node.style, node.abs) > 0
     ) {
       return;
     }
@@ -1101,7 +1104,7 @@ export class WindowScrollBlit {
       bw.right,
       bw.bottom,
       bw.left,
-      node.style?.borderRadius ?? 0,
+      radiusOf(node.style, node.abs),
     );
     if (!rectContains(insetRect(node.abs, inset), vp)) return;
     // A scroll container's children *are* the scrolled content, which is
@@ -1229,7 +1232,7 @@ export class WindowScrollBlit {
   _cornerPins(node, vp, upTo = this) {
     let out = null;
     for (let n = node.parent; n && n !== upTo; n = n.parent) {
-      const radius = n.style?.borderRadius ?? 0;
+      const radius = radiusOf(n.style, n.abs);
       if (!(radius > 0) || !n.abs) continue;
       for (const square of cornerSquares(n.abs, radius)) {
         if (!rectsOverlap(square, vp)) continue;
@@ -1295,7 +1298,7 @@ export class WindowScrollBlit {
           // squares is translation-safe, and so is an element blit that
           // pins the squares it reaches into (`_cornerPins`) — repaired
           // where they are and where the copy dragged them.
-          const radius = child.style?.borderRadius ?? 0;
+          const radius = radiusOf(child.style, child.abs);
           if (radius > 0 && !cornersPinned(child.abs, radius, vp, pinned)) {
             return false;
           }
@@ -1407,7 +1410,7 @@ export class WindowScrollBlit {
           break;
         }
         if (n.clipsChildren()) {
-          const radius = n.style?.borderRadius ?? 0;
+          const radius = radiusOf(n.style, n.abs);
           cover = intersectRects(
             cover,
             radius > 0 ? insetRect(n.abs, radius) : n.abs,

package/src/nodes/styling.js

@@ -21,9 +21,85 @@ import {
   containerAnswers,
   resolveQueries,
 } from '../styles.js';
+import { readLength, UNIT_EM, UNIT_REM, UNIT_VIEWPORT } from '../shorthands.js';
+import { DEFAULT_TEXT_STYLE } from '../styles.js';
 import { CUSTOM_SEMANTIC_NAMES } from './kinds.js';
 import { DEV, shallowEqual } from './util.js';
 
+/**
+ * What a relative length on one node resolves against — `em`, `rem` and the
+ * viewport units (src/shorthands.js, `RELATIVE`) — in logical pixels, the
+ * unit everything an app writes is in. Lazy: a style written in pixels asks
+ * none of it, and pays one allocation. Each answer it gives is recorded in
+ * `deps`, which is how the node knows to resolve the style again when that
+ * answer moves (`_noteUnits`).
+ *
+ * `style` is the one being resolved, not the one in force: a `padding:
+ * '1em'` beside a `fontSize: '20px'` is 20, whichever the style had before.
+ */
+class Units {
+  constructor(node, style) {
+    this.node = node;
+    this.style = style;
+    this.deps = 0;
+    this.parentEmRead = undefined;
+    this.emRead = undefined;
+  }
+
+  /** The font size this node inherits — what `em` is on `fontSize`
+   *  itself, as in CSS. Device pixels down the cascade, at this node's
+   *  scale, so one divide brings it back. */
+  get parentEm() {
+    this.deps |= UNIT_EM;
+    if (this.parentEmRead === undefined) {
+      const node = this.node;
+      this.parentEmRead = node.inheritedTextStyle.size / (node.scale || 1);
+    }
+    return this.parentEmRead;
+  }
+
+  /** This node's own font size — its `fontSize`, read against what it
+   *  inherits where that is relative, or the inherited one. Depends on the
+   *  inheritance only when it reads it. */
+  get em() {
+    if (this.emRead === undefined) {
+      const size = this.style.fontSize;
+      let own;
+      if (size != null && size !== '') {
+        try {
+          own = readLength('fontSize', size, undefined, this);
+        } catch {
+          // the text inherits past a size it cannot read, and so does `em`
+        }
+      }
+      this.emRead = typeof own === 'number' && own >= 0 ? own : this.parentEm;
+    }
+    return this.emRead;
+  }
+
+  /** The palette's `fontSize`: the root font size here, the size every label
+   *  that names none of its own is set in. */
+  get rem() {
+    this.deps |= UNIT_REM;
+    return this.node.theme?.fontSize ?? DEFAULT_TEXT_STYLE.size;
+  }
+
+  /** The window this node is in, as a size query sees it. Before the window
+   *  has been laid out, the size it asked for, where it named one; the
+   *  size-query registry resolves the style again when the real one lands. */
+  get viewport() {
+    this.deps |= UNIT_VIEWPORT;
+    const node = this.node;
+    const root = node.root ?? (node.isWindow ? node : null);
+    if (root?.querySize) return root.querySize;
+    const props = root?.props;
+    return {
+      width: typeof props?.width === 'number' ? props.width : 0,
+      height: typeof props?.height === 'number' ? props.height : 0,
+    };
+  }
+}
+
 /**
  * A style property passed flat used to be silently dropped — it was neither
  * a layout prop, a paint prop nor an `on*` handler, so nothing looked at it
@@ -46,6 +122,9 @@ function assertNoFlatStyleProps(props, kind, semantic) {
 // style, and there is no element where a name means both.
 const NO_SEMANTIC_NAMES = new Set();
 
+/** What a style that read no relative length read: nothing. */
+const NO_UNITS = Object.freeze({ deps: 0, parentEmRead: undefined });
+
 /** A node's own style, installed onto `Node.prototype` by node.js. */
 export class NodeStyling {
   /**
@@ -81,15 +160,9 @@ export class NodeStyling {
     // window size queries fold into the base before state blocks, so a
     // `:hover` inside the wide layout still wins over the wide layout
     const kinds = queryKinds(this._baseStyle);
+    // whether a resize re-resolves this node is decided at the end, once the
+    // style has said whether it reads the window through a viewport unit
     const queried = (kinds & QUERY_SIZE) !== 0;
-    if (queried !== this._queried) {
-      this._queried = queried;
-      const root = this.root;
-      if (root?._sizeQueryNodes) {
-        if (queried) root._sizeQueryNodes.add(this);
-        else root._sizeQueryNodes.delete(this);
-      }
-    }
     // `@supports` blocks keep their own registry: what re-resolves them is
     // the server's answer changing, not a resize
     // Registered unconditionally rather than on change: a `<window>`'s own
@@ -166,20 +239,90 @@ export class NodeStyling {
       }
     }
     this._stateful = hasStateStyles(this._baseStyle);
+    const merged = this._stateful
+      ? resolveStyleStates(this._baseStyle, this.states)
+      : this._baseStyle;
     // The scale multiplies *after* every merge — state blocks, queries,
-    // the flex shorthand — so each of those keeps thinking in the logical
-    // pixels the app wrote, and device pixels exist only downstream of
-    // this line (src/scale.js).
-    return this._retarget(
-      scaleResolvedStyle(
-        resolveComputedStyle(
-          this._stateful
-            ? resolveStyleStates(this._baseStyle, this.states)
-            : this._baseStyle,
-        ),
-        this.scale,
-      ),
+    // the shorthands, the relative units — so each of those keeps thinking
+    // in the logical pixels the app wrote, and device pixels exist only
+    // downstream of this line (src/scale.js).
+    this._unitsNow = null;
+    const target = scaleResolvedStyle(
+      resolveComputedStyle(merged, this._unitsMaker()),
+      this.scale,
+    );
+    const units = this._unitsNow ?? NO_UNITS;
+    // what a loop's relative end reads (`_syncLoops`) is read through the
+    // same context, during the swap
+    // …and the basis is in place before the swap, which may walk the text
+    // cascade back through this node (`_emMoved`)
+    this._units = units;
+    this._noteUnits(units, queried, false);
+    const out = this._retarget(target);
+    this._units = null;
+    this._noteUnits(units, queried, true);
+    return out;
+  }
+
+  /**
+   * Record what this node's style read to resolve its relative lengths, and
+   * join or leave what moves each: the size-query registry for the window's
+   * size (a viewport unit asks the same question an `'@width'` block does,
+   * and is answered by the same re-resolution on a resize); the text cascade
+   * for the inherited font size (`_retext` walks it, and stops at a node
+   * whose resolution was never cached — so a node that reads it caches one);
+   * and the theme walk for the palette's (`_themeChanged`).
+   */
+  /** What makes this node's unit context, for `resolveComputedStyle` to
+   *  call only when a style has something to read; the one it made is
+   *  `_unitsNow`. Made once per node, rather than a context per style. */
+  _unitsMaker() {
+    return (this._makeUnits ??= (style) =>
+      (this._unitsNow = new Units(this, style)));
+  }
+
+  _noteUnits(units, sizeQueried, settled) {
+    this._unitDeps = units.deps;
+    this._emBasis = units.parentEmRead;
+    this._sizeQueried = sizeQueried;
+    const asks = sizeQueried || (units.deps & UNIT_VIEWPORT) !== 0;
+    if (asks !== this._queried) {
+      this._queried = asks;
+      const root = this.root;
+      if (root?._sizeQueryNodes) {
+        if (asks) root._sizeQueryNodes.add(this);
+        else root._sizeQueryNodes.delete(this);
+      }
+    }
+    // asked of the style the swap put in force, never the one before it
+    if (settled && units.deps & UNIT_EM && this._resolvedText === undefined) {
+      this.resolvedTextStyle();
+    }
+  }
+
+  /**
+   * Resolve the style again because something a relative length read moved
+   * — the font size this node inherits — with no commit to do it. The rest
+   * is the tail a re-resolution outside a commit always has
+   * (`_restyled`), plus the claim a commit would have made.
+   */
+  _unitsMoved() {
+    if (this.destroyed) return;
+    const before = this.style;
+    this._syncStyle(this.props);
+    const moved = this._restyled(
+      before,
+      'resolved against a font size that moved',
     );
+    if (moved) this._invalidateLayout('units');
+    else if (this.style !== before) this.root?.invalidate(false, this, 'units');
+  }
+
+  /** Whether the font size this node inherits is not the one its relative
+   *  lengths were resolved against. */
+  _emMoved() {
+    if (!(this._unitDeps & UNIT_EM)) return false;
+    return this.inheritedTextStyle.size / (this.scale || 1) !== this._emBasis;
   }
 
   /**
@@ -194,12 +337,24 @@ export class NodeStyling {
     // the node has a state block of its own (`_outlineExtent`)
     this._clearPaintBounds();
     if (!this._stateful || this.destroyed) return;
+    const merged = resolveStyleStates(this._baseStyle, this.states);
+    this._unitsNow = null;
     const next = scaleResolvedStyle(
-      resolveComputedStyle(resolveStyleStates(this._baseStyle, this.states)),
+      resolveComputedStyle(merged, this._unitsMaker()),
       this.scale,
     );
     if (shallowEqual(next, this._targetStyle)) return;
+    const units = this._unitsNow;
+    this._units = units;
     this._retarget(next);
+    this._units = null;
+    // a state block reads what the base did and may read more — a radius in
+    // `rem` on `:hover` — and a node keeps answering to all of it
+    if (units !== null) {
+      units.deps |= this._unitDeps;
+      units.parentEmRead ??= this._emBasis;
+      this._noteUnits(units, this._sizeQueried, true);
+    }
     // a state block may only set paint properties, so the node's own region
     // is the whole of what changed
     this.root?.invalidate(false, this, 'style-state');

package/src/nodes/window/capabilities.js

@@ -137,7 +137,7 @@ export class WindowCapabilities {
    * whatever it skipped would show the last frame's pixels.
    */
   _windowBackground() {
-    const own = this.style.backgroundColor;
+    const own = this.resolveColor(this.style.backgroundColor);
     if (isColor(own)) return own;
     const palette = this.theme.background;
     return isColor(palette) ? palette : 'white';

package/src/nodes/window/floors.js

@@ -233,24 +233,24 @@ 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
+ * Whether `node` is a box its surroundings cannot size and nothing around it
+ * reads the size of — 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.
+ * Absolutely positioned, and the same size in every pass wherever it sits
+ * (`sizedAlike`): 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 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.
+ * A card on a graph, a popover laid out inside the window, a sized overlay,
+ * a badge or a label hung off a point: 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;
@@ -259,18 +259,63 @@ export function isFloorBoundary(node) {
     !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
+    (node.parent?._host ?? null) === null &&
+    sizedAlike(node, 'width') &&
+    sizedAlike(node, 'height')
   );
 }
 
+/**
+ * Whether every pass lays this absolute box out at the same size along
+ * `axis`, whatever its containing block is offered: a number its style
+ * names, or the size of what is inside it.
+ *
+ * Yoga measures an absolute box that names no size at its content's
+ * max-content size, with no bound from the box it is placed in — down, and
+ * across under a row. Under a column it is offered the column's width to
+ * wrap in, and that is another number in each pass (none in the width
+ * pass, the real one in the heights'), so what is inside it would be
+ * measured at whatever width the pass gave it, and not at the one a pass
+ * over it alone does. Nor may anything else bound it on that axis: an edge
+ * pinned at both ends sizes it from its containing block, a ratio from the
+ * other axis, and a minimum or a maximum is applied after its content was
+ * measured — yoga lays out the height of a box held under a `maxWidth` at
+ * the width it had before it was held, and a box laid out alone at the
+ * width it was held to.
+ */
+function sizedAlike(node, axis) {
+  const style = node.style;
+  const across = axis === 'width';
+  const size = across ? style.width : style.height;
+  if (typeof size === 'number') return true;
+  if (size !== undefined && size !== 'auto') return false;
+  if (
+    (across ? style.minWidth : style.minHeight) !== undefined ||
+    (across ? style.maxWidth : style.maxHeight) !== undefined ||
+    style.aspectRatio !== undefined
+  ) {
+    return false;
+  }
+  // two insets across are both ends in one direction or the other
+  let insets = 0;
+  for (const key of across ? INSETS_ACROSS : INSETS_DOWN) {
+    if (style[key] !== undefined) insets++;
+  }
+  if (insets > 1) return false;
+  return (
+    !across || (node.parent != null && mainAxisOf(node.parent) === 'width')
+  );
+}
+
+const INSETS_ACROSS = ['left', 'right', 'start', 'end'];
+const INSETS_DOWN = ['top', 'bottom'];
+
 const PADDINGS = [
   'padding',
   'paddingTop',