react-x11 2.49.0 → 2.51.0

package/src/gloverlay.js

@@ -86,6 +86,7 @@
 import { cssColorStraight } from 'ntk/color';
 
 import { FULL_DAMAGE, addDamageRect } from './nodes/damage.js';
+import { radiusOf } from './styles.js';
 import {
   innerPixels,
   intersectRects,
@@ -1200,7 +1201,7 @@ export class GlOverlay {
     }
     const area = this.area;
     // a rounded surface clips its children to an arc, and the arc stays put
-    if ((area.style?.borderRadius ?? 0) > 0) return false;
+    if (radiusOf(area.style, area.abs) > 0) return false;
     // the whole pixels of the surface's box: a fractional edge is an
     // antialiased clip, and that does not move either
     const box = innerPixels(area.abs);

package/src/node.d.ts

@@ -624,6 +624,11 @@ export declare class Node {
    * with none of its own is set in. An element that draws text inherits
    * exactly what `<text>` inherits by asking. */
   resolvedTextStyle(): TextStyle;
+  /** A colour from this node's style as one a context can paint: the value
+   * itself, or — for `currentColor` — the node's ink, the colour
+   * `resolvedTextStyle()` resolves. Everything core paints from a style
+   * colour asks here; an element painting one of its own should too. */
+  resolveColor<T>(value: T): T | string;
   /** The flattened `style` prop with the active state blocks overlaid.
    * Everything that paints or lays out reads this, never `props`. */
   readonly style: Style;

package/src/nodes/animation.js

@@ -11,9 +11,11 @@ import {
   transitionFor,
   interpolate,
   ease,
+  isColor,
   isLayoutProp,
   TEXT_LAYOUT_PROPS,
 } from '../styles.js';
+import { isCurrentColor } from '../currentcolor.js';
 import { GRID_CONTAINER_PROPS, GRID_ITEM_PROPS } from '../grid.js';
 import { isPlaced } from '../layouts.js';
 import { desktopSettings, watchDesktopSettings } from '../desktopsettings.js';
@@ -85,11 +87,16 @@ export class NodeAnimation {
     // transitions start on later changes, which is CSS's rule too.
     if (this._placed) {
       for (const prop of Object.keys(target)) {
-        const to = target[prop];
-        const from = displayed[prop];
+        let to = target[prop];
+        let from = displayed[prop];
         if (from === to || from === undefined) continue;
         const duration = transitionFor(target, prop);
         if (duration <= 0) continue;
+        if (isCurrentColor(from) || isCurrentColor(to)) {
+          from = this._swapInk(prop, from, displayed);
+          to = this._swapInk(prop, to, target);
+          if (from === to) continue;
+        }
         if (interpolate(from, to, 0.5) === null) continue; // no midpoint: snap
         const entry = {
           from,
@@ -260,6 +267,27 @@ export class NodeAnimation {
     return this.style;
   }
 
+  /**
+   * A `currentColor` end of a transition as the colour it is at the swap:
+   * the ink `style` gives this node, or on `color` itself the ink it
+   * inherits. The keyword has no midpoint of its own, so the transition
+   * runs between the two colours as they are now — and lands on the style,
+   * where the keyword follows the ink again. An ink that moves mid-flight
+   * is caught up with at the end, not chased: a `color` that should carry
+   * a border with it is the property to transition.
+   */
+  _swapInk(prop, value, style) {
+    if (!isCurrentColor(value)) return value;
+    const inherited = this.inheritedTextStyle.color;
+    if (prop === 'color') return inherited;
+    // the displayed style's ink is cached; the target's is not yet
+    return style === this.style
+      ? this.resolvedTextStyle().color
+      : isColor(style.color)
+        ? style.color
+        : inherited;
+  }
+
   _animatedValues() {
     const values = {};
     for (const [prop, a] of this._anim) {
@@ -388,7 +416,7 @@ export class NodeAnimation {
     const specs =
       target.animation == null
         ? null
-        : animationsOf(target, 'a style', this.scale);
+        : animationsOf(target, 'a style', this.scale, this._units);
     if (!specs && !this._loops) return false;
     this._loops = specs;
     if (!specs) this.root?._forgetLoopNode(this);

package/src/nodes/boxpaint.js

@@ -5,9 +5,11 @@
 import {
   DEFAULT_FOCUS_RING,
   isColor,
+  radiusOf,
   resolveBorderWidths,
   resolveBorderColors,
 } from '../styles.js';
+import { isCurrentColor } from '../currentcolor.js';
 import {
   blurKernel,
   gradientSpec,
@@ -61,6 +63,19 @@ let warnedSideRadius = false;
 
 /** Box decorations, installed onto `Node.prototype` by node.js. */
 export class NodeBoxPaint {
+  /**
+   * A colour from this node's style as a colour a context can paint: the
+   * value itself, or — for CSS's `currentColor` — this node's resolved ink,
+   * its own `color` over what it inherits. Everything that paints a style
+   * colour asks here, on every backend, so the keyword means one thing
+   * wherever it is written; a registered element painting a colour of its
+   * own style asks the same. A node whose style paints in the keyword
+   * repaints when its ink moves (`_inkMoved`).
+   */
+  resolveColor(value) {
+    return isCurrentColor(value) ? this.resolvedTextStyle().color : value;
+  }
+
   /**
    * The focus ring this node would draw: its own `outline*` style, falling
    * back to the theme's focus-ring tokens for anything it leaves out. Null
@@ -80,7 +95,9 @@ export class NodeBoxPaint {
     if (!(resolved > 0)) return null;
     return {
       width: resolved,
-      color: style.outlineColor ?? theme?.focusRing ?? DEFAULT_FOCUS_RING.color,
+      color: this.resolveColor(
+        style.outlineColor ?? theme?.focusRing ?? DEFAULT_FOCUS_RING.color,
+      ),
       offset:
         style.outlineOffset ??
         theme?.focusRingOffset ??
@@ -138,7 +155,7 @@ export class NodeBoxPaint {
     // stroked centred on the path, like the border, so half the width sits
     // inside the offset gap and half outside it
     const grow = offset + width / 2;
-    const radius = this.style.borderRadius ?? 0;
+    const radius = radiusOf(this.style, this.abs);
     ctx.strokeStyle = outline.color;
     ctx.lineWidth = width;
     ctx.beginPath();
@@ -162,7 +179,8 @@ export class NodeBoxPaint {
     // under an element that covers this pass with opaque pixels, this fill
     // is never seen (`WindowNode._coverFor`)
     if (this.root?._coverChain?.has(this)) return;
-    const { backgroundColor, borderRadius = 0 } = this.style;
+    const backgroundColor = this.resolveColor(this.style.backgroundColor);
+    const borderRadius = radiusOf(this.style, this.abs);
     const fill = (style) => {
       ctx.fillStyle = style;
       if (borderRadius > 0) {
@@ -202,7 +220,11 @@ export class NodeBoxPaint {
     const spec = gradientSpec(value, this.scale);
     if (!spec) return null;
     const { x, y, width, height } = rect;
-    const key = `${value}|${x},${y},${width},${height}`;
+    // a stop in `currentColor` is the ink, which can move under a value
+    // that did not, so the ink is part of what the gradient is keyed by
+    const inked = spec.stops.some((stop) => isCurrentColor(stop.color));
+    const ink = inked ? this.resolvedTextStyle().color : '';
+    const key = `${value}|${x},${y},${width},${height}|${ink}`;
     if (this._gradient?.key === key) return this._gradient.value;
     const line = linearGradientGeometry(spec, rect);
     if (!line) return null;
@@ -213,7 +235,7 @@ export class NodeBoxPaint {
       line.y1,
     );
     for (const [offset, color] of line.stops)
-      gradient.addColorStop(offset, color);
+      gradient.addColorStop(offset, inked ? this.resolveColor(color) : color);
     this._gradient = { key, value: gradient };
     return gradient;
   }
@@ -235,7 +257,7 @@ export class NodeBoxPaint {
     if (!value || value === 'none') return;
     const shadows = shadowSpecs(value, this.scale);
     if (!shadows?.length) return;
-    const radius = this.style.borderRadius ?? 0;
+    const radius = radiusOf(this.style, this.abs);
     for (let i = shadows.length - 1; i >= 0; i--) {
       const shadow = shadows[i];
       // CSS's `currentColor`: this node's *resolved* ink, its own `color`
@@ -404,11 +426,15 @@ export class NodeBoxPaint {
   }
 
   _paintBorder(ctx) {
-    const { borderRadius = 0 } = this.style;
+    const borderRadius = radiusOf(this.style, this.abs);
     // Both through the node's resolved direction: a `borderStartWidth` lays
     // out on one side and has to paint on the same one.
     const w = resolveBorderWidths(this.style, this.direction);
     const colors = resolveBorderColors(this.style, this.direction);
+    colors.top = this.resolveColor(colors.top);
+    colors.right = this.resolveColor(colors.right);
+    colors.bottom = this.resolveColor(colors.bottom);
+    colors.left = this.resolveColor(colors.left);
     const uniform =
       w.top === w.right &&
       w.top === w.bottom &&
@@ -469,7 +495,7 @@ export class NodeBoxPaint {
    * strokes halfway.
    */
   _paintBorderSides(ctx, w, colors) {
-    if (DEV && (this.style.borderRadius ?? 0) > 0 && !warnedSideRadius) {
+    if (DEV && radiusOf(this.style, this.abs) > 0 && !warnedSideRadius) {
       warnedSideRadius = true;
       console.warn(
         'react-x11: borderRadius needs uniform borders — same width and ' +

package/src/nodes/cascade.js

@@ -5,12 +5,14 @@
 import {
   applyLayoutStyle,
   isColor,
+  paintsCurrentColor,
   textStyleFrom,
   DEFAULT_TEXT_STYLE,
   localTextStyleChanged,
   resolvedTextDelta,
   TEXT_REMEASURE,
 } from '../styles.js';
+import { UNIT_EM, UNIT_REM } from '../shorthands.js';
 import { Yoga } from '../yoga.js';
 import { scaleOf } from '../scale.js';
 import { baseTheme } from '../palette.js';
@@ -372,8 +374,22 @@ export class NodeCascade {
     const before = this._resolvedText;
     if (before === undefined) return 0;
     this._resolvedText = undefined;
-    const cost = resolvedTextDelta(before, this.resolvedTextStyle());
-    if (cost !== 0) this._textStyleMoved(cost);
+    // A length in `em` is a length in the font size this node inherits,
+    // which is what this walk exists because of — so a node that wrote one
+    // resolves its style again here, before its own text is, since a
+    // `fontSize: '1.5em'` is part of what that text is set in.
+    if (this._emMoved()) this._unitsMoved();
+    const after = this.resolvedTextStyle();
+    const cost = resolvedTextDelta(before, after);
+    if (cost !== 0) {
+      this._textStyleMoved(cost);
+      // A node painting in `currentColor` resolved its ink to do it, so the
+      // walk reaches it — and its own style says nothing about the change,
+      // which was written on an ancestor or in its own `color`.
+      if (before.color !== after.color && paintsCurrentColor(this.style)) {
+        this._inkMoved();
+      }
+    }
     return cost;
   }
 
@@ -405,6 +421,19 @@ export class NodeCascade {
     }
   }
 
+  /**
+   * The ink moved under a node that paints something in it — a border, a
+   * fill, a gradient stop or a shadow in `currentColor`. A repaint of the
+   * node, bounded to it, and a box needs it although it draws no text
+   * (`BoxNode._textStyleMoved`): the ancestor whose `color` moved claimed
+   * its own box, which covers this one on a surface but names no node to a
+   * retained presenter re-rastering by node, and no other window to a
+   * `<popup>` written under it.
+   */
+  _inkMoved() {
+    this.root?.invalidate(false, this, 'ink');
+  }
+
   /**
    * Whether this node's ancestry is complete, so a `$token` that does not
    * resolve is a mistake rather than a node that has not been placed yet.
@@ -508,7 +537,9 @@ export class NodeCascade {
       // and the server's copy of that colour has to follow with it — otherwise
       // the next resize fills the new area in the old scheme.
       if (this.isWindow) this._syncWindowBackground();
-      if (this._usesTokens) {
+      // A relative length reads the palette too: `rem` is its `fontSize`,
+      // and `em` is what that size became by the time it reached this node.
+      if (this._usesTokens || this._unitDeps & (UNIT_REM | UNIT_EM)) {
         const before = this.style;
         this._syncStyle(this.props, mounting);
         // a token change reaches the node without React re-rendering it, so
@@ -516,6 +547,15 @@ export class NodeCascade {
         if (localTextStyleChanged(this.style, before)) {
           this._textContentChanged();
         }
+        // …and so does the layout half. A token in a layout value —
+        // `padding: '$gutter'` — resolves right here, on attach or on a
+        // palette swap, and yoga was last handed the style the constructor
+        // had, with its tokens stripped. Same tail as `_sizeQueriesChanged`
+        // and `_rescaled`; without it a themed gutter reached `this.style`
+        // and the paint, and the layout kept the un-themed value.
+        if (this.yoga && this.style !== before) {
+          applyLayoutStyle(this.yoga, this.style, before);
+        }
         if (!mounting) this.root?.invalidate(true, null, 'theme');
       }
       // The palette is the floor under the cascade, so a theme swap moves the
@@ -624,4 +664,11 @@ export class WindowCascade {
   /** Like a `<box>`: a window fills and never letters, so it is the top of
    * the cascade rather than a reader of it. */
   _textStyleMoved() {}
+
+  /** …except a fill in `currentColor`, which the server keeps a copy of for
+   *  what a resize exposes. */
+  _inkMoved() {
+    this._syncWindowBackground();
+    this.invalidate(false, null, 'ink');
+  }
 }

package/src/nodes/damage.js

@@ -86,8 +86,10 @@ export const INVALIDATE_REASONS = new Set([
   'shadow', // a boxShadow got smaller: where it *was* still owes a repaint
   'outline', // …and the same for an outline a style swap took away
   'theme', // a theme/token change restyled a subtree
+  'ink', // the ink under a currentColor moved: its `color` or an ancestor's
   'direction', // the reading direction moved: sides, glyph order, bar edge
   'scale', // a `scale` prop zoomed a subtree: every length in it moved
+  'units', // a font size an `em` length read moved, and the style with it
   'animation', // a transition frame
   'scroll', // scrollTo/scrollBy/scrollIntoView, textarea/textinput panning
   'text', // text content, input value or caret editing

package/src/nodes/layout.js

@@ -5,7 +5,7 @@
 import { Yoga } from '../yoga.js';
 import { callHandler } from '../errors.js';
 import { DAMAGE_SLOP, layoutDiff } from './damage.js';
-import { resolveBorderWidths } from '../styles.js';
+import { radiusOf, resolveBorderWidths } from '../styles.js';
 import { insetRect, intersectRects, outerPixels, outside } from './rects.js';
 import { DEV } from './util.js';
 
@@ -612,25 +612,17 @@ export class NodeLayout {
     // (`roundedCorners`), so a resize that moves that moves all four
     // corners — and their outline and shadow with them — and the ones at the
     // edges that held are in no band along the edges that moved.
-    const radius = style.borderRadius ?? 0;
+    // A percentage radius moves with the box for the same reason: it is a
+    // share of the shorter side (`radiusOf`), read off each rect.
     const now = this.abs;
-    if (
-      radius > 0 &&
-      Math.min(radius, old.width / 2, old.height / 2) !==
-        Math.min(radius, now.width / 2, now.height / 2)
-    ) {
-      return null;
-    }
+    const corner = (rect) =>
+      Math.min(radiusOf(style, rect), rect.width / 2, rect.height / 2);
+    const radius = Math.max(radiusOf(style, old), radiusOf(style, now));
+    if (radius > 0 && corner(old) !== corner(now)) return null;
     const bw = resolveBorderWidths(style, this.direction);
     const reach =
-      Math.max(
-        style.borderRadius ?? 0,
-        bw.top,
-        bw.right,
-        bw.bottom,
-        bw.left,
-        grow,
-      ) + DAMAGE_SLOP;
+      Math.max(radius, bw.top, bw.right, bw.bottom, bw.left, grow) +
+      DAMAGE_SLOP;
     const bands = [];
     const oldBottom = old.y + old.height;
     const newBottom = now.y + now.height;

package/src/nodes/moveblit.js

@@ -16,7 +16,7 @@
 // mistake it can make is not firing.
 
 import { cssColorStraight } from 'ntk/color';
-import { EMPTY_STYLE, resolveBorderWidths } from '../styles.js';
+import { EMPTY_STYLE, radiusOf, resolveBorderWidths } from '../styles.js';
 import { isPaintedColor } from './boxpaint.js';
 import { DAMAGE_SLOP, FULL_DAMAGE, addDamageRect } from './damage.js';
 import { NodePaint } from './paint.js';
@@ -100,7 +100,7 @@ function cornerSquares(box, radius) {
  * Null when nothing is left.
  */
 function clipBoxOf(node) {
-  const radius = node.style?.borderRadius ?? 0;
+  const radius = radiusOf(node.style, node.abs);
   return innerPixels(radius > 0 ? insetRect(node.abs, radius) : node.abs);
 }
 
@@ -166,9 +166,9 @@ export class NodeMoveBlit {
       const style = node.style ?? EMPTY_STYLE;
       if (style.display === 'none') return null;
       if (style.opacity !== undefined && !(style.opacity >= 1)) return null;
-      const radius = style.borderRadius ?? 0;
+      const radius = radiusOf(style, node.abs);
       let own = null;
-      if (isOpaqueColor(style.backgroundColor)) {
+      if (isOpaqueColor(node.resolveColor(style.backgroundColor))) {
         own = node.abs;
         holes.push(...cornerSquares(node.abs, radius));
       } else {
@@ -581,7 +581,7 @@ export class WindowMoveBlit {
         if (ring > 0) {
           const inner = insetRect(
             n.abs,
-            Math.max(ring, style.borderRadius ?? 0) + DAMAGE_SLOP,
+            Math.max(ring, radiusOf(style, n.abs)) + DAMAGE_SLOP,
           );
           const outer = insetRect(n.abs, -DAMAGE_SLOP);
           for (const piece of outside(outer, inner)) over(piece);

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/scrollable.js

@@ -247,7 +247,10 @@ export const Scrollable = (Base) =>
         // 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') {
+        // Both routes to it: the style, and the `hidden` React sets for
+        // `<Activity>` and `<Suspense>` (`setHidden`), which reaches yoga
+        // without touching the style.
+        if (this.style.display !== 'none' && !this.hidden) {
           this._absolutizeChildren(
             this.abs.x,
             this.abs.y,

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,