@solidtv/renderer 1.5.6 → 1.6.1

package/src/core/Stage.renderListUpdate.test.ts

@@ -0,0 +1,73 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Stage } from './Stage.js';
+
+/**
+ * Tests for the requestRenderListUpdate dedupe.
+ *
+ * A full Stage needs a live renderer, so the method is exercised on a minimal
+ * fake via the prototype. Only the fields requestRenderListUpdate touches are
+ * provided: renderer.invalidateQuadBuffer, renderListDirty, requestRender.
+ */
+
+type FakeStage = {
+  renderer: { invalidateQuadBuffer?: ReturnType<typeof vi.fn> };
+  renderListDirty: boolean;
+  requestRender: ReturnType<typeof vi.fn>;
+};
+
+const makeStage = (hasInvalidate = true): FakeStage => ({
+  renderer: hasInvalidate ? { invalidateQuadBuffer: vi.fn() } : {},
+  renderListDirty: false,
+  requestRender: vi.fn(),
+});
+
+const requestRenderListUpdate = (stage: FakeStage) =>
+  Stage.prototype.requestRenderListUpdate.call(stage as unknown as Stage);
+
+describe('Stage.requestRenderListUpdate dedupe', () => {
+  it('invalidates the quad buffer and marks the list dirty on first call', () => {
+    const stage = makeStage();
+
+    requestRenderListUpdate(stage);
+
+    expect(stage.renderer.invalidateQuadBuffer!.mock.calls.length).toBe(1);
+    expect(stage.renderListDirty).toBe(true);
+    expect(stage.requestRender.mock.calls.length).toBe(1);
+  });
+
+  it('skips repeat invalidations while a rebuild is already pending', () => {
+    const stage = makeStage();
+
+    requestRenderListUpdate(stage);
+    requestRenderListUpdate(stage);
+    requestRenderListUpdate(stage);
+
+    // One structural invalidation for the whole burst (e.g. a row of cards
+    // flipping renderable in the same frame), but a render is requested each
+    // time so no frame is ever dropped.
+    expect(stage.renderer.invalidateQuadBuffer!.mock.calls.length).toBe(1);
+    expect(stage.requestRender.mock.calls.length).toBe(3);
+    expect(stage.renderListDirty).toBe(true);
+  });
+
+  it('invalidates again after drawFrame clears the dirty flag', () => {
+    const stage = makeStage();
+
+    requestRenderListUpdate(stage);
+    // drawFrame rebuilds the render list and clears the flag
+    stage.renderListDirty = false;
+    requestRenderListUpdate(stage);
+
+    expect(stage.renderer.invalidateQuadBuffer!.mock.calls.length).toBe(2);
+    expect(stage.renderListDirty).toBe(true);
+  });
+
+  it('handles renderers without invalidateQuadBuffer (canvas backend)', () => {
+    const stage = makeStage(false);
+
+    requestRenderListUpdate(stage);
+
+    expect(stage.renderListDirty).toBe(true);
+    expect(stage.requestRender.mock.calls.length).toBe(1);
+  });
+});

package/src/core/Stage.ts

@@ -200,6 +200,7 @@ export class Stage {
       premultiplyAlphaHonored,
       platform,
       maxRetryCount,
+      imageDecodeConcurrency,
     } = options;
 
     assertTruthy(
@@ -229,6 +230,7 @@ export class Stage {
       // undefined -> true (default: assume honored, no probe)
       premultiplyAlphaHonored: premultiplyAlphaHonored ?? true,
       maxRetryCount,
+      imageDecodeConcurrency,
     });
 
     // Wait for the Texture Manager to initialize
@@ -737,6 +739,17 @@ export class Stage {
   }
 
   requestRenderListUpdate() {
+    this.requestRender();
+
+    // A rebuild is already pending: the invalidation below ran when the flag
+    // was first raised, and the render list doesn't change until drawFrame
+    // rebuilds it. Skipping the repeat matters when many nodes flip renderable
+    // state in one frame (e.g. a whole row scrolling out of the viewport) —
+    // invalidateQuadBuffer walks the entire render list on every call.
+    if (this.renderListDirty === true) {
+      return;
+    }
+
     // Notify the renderer that the render list is structurally changing.
     // For the WebGL renderer this resets per-node buffer slot assignments
     // and schedules a full GPU buffer re-upload on the next frame.
@@ -744,7 +757,6 @@ export class Stage {
       this.renderer.invalidateQuadBuffer();
     }
     this.renderListDirty = true;
-    this.requestRender();
   }
 
   buildRenderList(node: CoreNode) {

package/src/core/lib/WebGlContextWrapper.test.ts

@@ -19,7 +19,7 @@ function mockWebGl1(hasVaoExtension: boolean): WebGLRenderingContext {
     deleteVertexArrayOES: (_vao: unknown) => undefined,
   };
   const target: Record<string, unknown> = {
-    canvas: {},
+    canvas: { width: 1920, height: 1080 },
     drawingBufferWidth: 100,
     drawingBufferHeight: 100,
     getParameter: () => 8,
@@ -56,3 +56,25 @@ describe('WebGlContextWrapper VAO support', () => {
     expect(glw.isWebGl2).toBe(false);
   });
 });
+
+describe('WebGlContextWrapper canvas dimension cache', () => {
+  it('seeds canvasW/canvasH from the canvas at construction', () => {
+    const glw = new WebGlContextWrapper(mockWebGl1(true));
+    expect(glw.canvasW).toBe(1920);
+    expect(glw.canvasH).toBe(1080);
+  });
+
+  it('does not track canvas resizes until updateCanvasDimensions is called', () => {
+    const glw = new WebGlContextWrapper(mockWebGl1(true));
+    const canvas = glw.canvas as { width: number; height: number };
+
+    canvas.width = 1280;
+    canvas.height = 720;
+    expect(glw.canvasW).toBe(1920);
+    expect(glw.canvasH).toBe(1080);
+
+    glw.updateCanvasDimensions();
+    expect(glw.canvasW).toBe(1280);
+    expect(glw.canvasH).toBe(720);
+  });
+});

package/src/core/lib/WebGlContextWrapper.ts

@@ -69,7 +69,18 @@ export class WebGlContextWrapper {
   //#endregion Vertex Array Objects
 
   //#region Canvas
-  public readonly canvas;
+  public readonly canvas: HTMLCanvasElement | OffscreenCanvas;
+  /**
+   * Cached copies of `canvas.width`/`canvas.height`.
+   *
+   * @remarks
+   * On HTMLCanvasElement these are DOM getters that cross into Blink — too
+   * slow to read per render op per frame on embedded targets. The canvas is
+   * only resized via Renderer.updateAppDimensions, which refreshes this cache
+   * through {@link updateCanvasDimensions}.
+   */
+  public canvasW: number;
+  public canvasH: number;
   //#endregion Canvas
 
   //#region WebGL Enums
@@ -170,6 +181,8 @@ export class WebGlContextWrapper {
     this.isWebGl2 = this.gl2 !== null;
 
     this.canvas = gl.canvas;
+    this.canvasW = gl.canvas.width;
+    this.canvasH = gl.canvas.height;
 
     // Extract GLenums
     this.MAX_RENDERBUFFER_SIZE = gl.MAX_RENDERBUFFER_SIZE;
@@ -447,6 +460,15 @@ export class WebGlContextWrapper {
     this.gl.viewport(x, y, width, height);
   }
 
+  /**
+   * Refresh {@link canvasW}/{@link canvasH} from the canvas element.
+   * Must be called after the canvas is resized.
+   */
+  updateCanvasDimensions() {
+    this.canvasW = this.canvas.width;
+    this.canvasH = this.canvas.height;
+  }
+
   /**
    * ```
    * gl.clearColor(red, green, blue, alpha);

package/src/core/lib/colorParser.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest';
+import { parseColor } from './colorParser.js';
+
+describe('parseColor', () => {
+  it('returns the white singleton for opaque white', () => {
+    const first = parseColor(0xffffffff);
+    const second = parseColor(0xffffffff);
+
+    expect(first).toBe(second);
+    expect(first.isWhite).toBe(true);
+    expect(first.a).toBe(1);
+    expect(first.r).toBe(0xff);
+    expect(first.g).toBe(0xff);
+    expect(first.b).toBe(0xff);
+  });
+
+  it('extracts abgr components', () => {
+    const color = parseColor(0x80102030);
+
+    expect(color.isWhite).toBe(false);
+    expect(color.a).toBe(0x80 / 255);
+    expect(color.b).toBe(0x10);
+    expect(color.g).toBe(0x20);
+    expect(color.r).toBe(0x30);
+  });
+
+  it('reuses one scratch object across calls', () => {
+    const first = parseColor(0x80102030);
+    const second = parseColor(0xff405060);
+
+    expect(second).toBe(first);
+    expect(second.a).toBe(1);
+    expect(second.b).toBe(0x40);
+    expect(second.g).toBe(0x50);
+    expect(second.r).toBe(0x60);
+  });
+
+  it('never returns the white singleton as the scratch object', () => {
+    const white = parseColor(0xffffffff);
+    const tinted = parseColor(0x80102030);
+
+    expect(tinted).not.toBe(white);
+    expect(white.isWhite).toBe(true);
+    expect(white.r).toBe(0xff);
+  });
+});

package/src/core/lib/colorParser.ts

@@ -14,18 +14,29 @@ const WHITE: IParsedColor = {
   b: 0xff,
 };
 
+const SCRATCH: IParsedColor = {
+  isWhite: false,
+  a: 1,
+  r: 0,
+  g: 0,
+  b: 0,
+};
+
 /**
- * Extract color components
+ * Extract color components.
+ *
+ * Returns a shared scratch object to avoid a per-call allocation in the
+ * canvas frame loop — consume it synchronously, never retain it.
  */
 export function parseColor(abgr: number): IParsedColor {
   if (abgr === 0xffffffff) {
     return WHITE;
   }
-  const a = ((abgr >>> 24) & 0xff) / 255;
-  const b = (abgr >>> 16) & 0xff & 0xff;
-  const g = (abgr >>> 8) & 0xff & 0xff;
-  const r = abgr & 0xff & 0xff;
-  return { isWhite: false, a, r, g, b };
+  SCRATCH.a = ((abgr >>> 24) & 0xff) / 255;
+  SCRATCH.b = (abgr >>> 16) & 0xff;
+  SCRATCH.g = (abgr >>> 8) & 0xff;
+  SCRATCH.r = abgr & 0xff;
+  return SCRATCH;
 }
 
 export function parseToAbgrString(abgr: number): string {

package/src/core/platforms/web/WebPlatform.ts

@@ -29,9 +29,24 @@ export class WebPlatform extends Platform {
   override startLoop(stage: Stage): void {
     let isIdle = false;
     let lastFrameTime = 0;
+    // Set by `tick` once it has queued the next frame; read by `runLoop`'s catch
+    // so a throw after scheduling never double-schedules (which would compound
+    // into runaway frames if it threw every frame). Reset at the top of each frame.
+    let scheduled = false;
     const buffer = 4;
 
-    const runLoop = (currentTime: number = 0) => {
+    const requestLoop = () => requestAnimationFrame(runLoop);
+
+    // All per-frame work lives in `tick`, deliberately split out of `runLoop`.
+    // `runLoop` carries the try/catch that keeps the loop alive, and some
+    // optimizing compilers — notably Chrome 38's Crankshaft, our language floor —
+    // refuse to optimize any function that contains a try/catch. Keeping that
+    // guard in a near-empty shell confines the de-opt to the shell: every hot
+    // operation (the `stage.*` calls below, run every frame) stays in fully
+    // optimizable functions. `tick` is also where all client-supplied code runs
+    // (synchronous event subscribers, the events drained by `flushFrameEvents`,
+    // and animation steps) — i.e. everything that can actually throw.
+    const tick = (currentTime: number) => {
       // The GL context is lost and the engine does not rebuild it in place.
       // Stop the loop entirely (no reschedule) so we issue no GL calls against
       // a dead context. Recovery is via app reload (see the `contextLost` event).
@@ -55,6 +70,7 @@ export class WebPlatform extends Platform {
           } else {
             requestAnimationFrame(runLoop);
           }
+          scheduled = true;
           return;
         }
 
@@ -64,65 +80,62 @@ export class WebPlatform extends Platform {
         lastFrameTime = currentTime;
       }
 
-      // From here on the frame runs client-supplied code: synchronous event
-      // subscribers (`frameTick`, `idle`, and the queued events drained by
-      // `flushFrameEvents`) and animation steps. A throw in any of these would
-      // otherwise propagate out of the rAF callback and permanently stop the
-      // render loop — the whole app freezes until reload. Guard the body and
-      // always keep the loop alive: hand the error to `handleLoopError` (a
-      // no-op by default; the app can override it to log/report) and reschedule.
-      // `scheduled` tracks whether the next tick was already queued before the
-      // throw so we never double-schedule (which would compound into runaway
-      // frames if it threw every frame).
-      let scheduled = false;
-      try {
-        stage.updateFrameTime();
-        const hasActiveAnimations = stage.updateAnimations();
-
-        if (!stage.hasSceneUpdates()) {
-          // We still need to calculate the fps else it looks like the app is frozen
-          stage.calculateFps();
+      stage.updateFrameTime();
+      const hasActiveAnimations = stage.updateAnimations();
 
-          // We use 15ms instead of 16.6ms to provide a safety buffer.
-          // This ensures we wake up slightly before the next frame to check for updates,
-          // preventing us from missing a frame due to timer variances.
-          setTimeout(requestLoop, Math.max(targetFrameTime, 15));
-          scheduled = true;
+      if (!stage.hasSceneUpdates()) {
+        // We still need to calculate the fps else it looks like the app is frozen
+        stage.calculateFps();
 
-          if (isIdle === false) {
-            // The render burst has settled. Probe for a GPU out-of-memory now
-            // rather than every frame: GL errors accumulate and persist until
-            // drained, so a single check here still catches any OOM raised during
-            // the active frames, without paying the getError() CPU/GPU sync on
-            // every frame. Queues the `outOfMemory` event, flushed below.
-            if (stage.renderer.checkForOutOfMemory() === true) {
-              stage.txMemManager.handleOutOfMemory();
-            }
-            stage.shManager.cleanup();
-            stage.cleanupTextRenderers();
-            stage.eventBus.emit('idle');
-            isIdle = true;
-          }
+        // We use 15ms instead of 16.6ms to provide a safety buffer.
+        // This ensures we wake up slightly before the next frame to check for updates,
+        // preventing us from missing a frame due to timer variances.
+        setTimeout(requestLoop, Math.max(targetFrameTime, 15));
+        scheduled = true;
 
-          if (stage.txMemManager.checkCleanup() === true) {
-            stage.txMemManager.cleanup();
+        if (isIdle === false) {
+          // The render burst has settled. Probe for a GPU out-of-memory now
+          // rather than every frame: GL errors accumulate and persist until
+          // drained, so a single check here still catches any OOM raised during
+          // the active frames, without paying the getError() CPU/GPU sync on
+          // every frame. Queues the `outOfMemory` event, flushed below.
+          if (stage.renderer.checkForOutOfMemory() === true) {
+            stage.txMemManager.handleOutOfMemory();
           }
+          stage.shManager.cleanup();
+          stage.cleanupTextRenderers();
+          stage.eventBus.emit('idle');
+          isIdle = true;
+        }
 
-          stage.flushFrameEvents();
-          return;
+        if (stage.txMemManager.checkCleanup() === true) {
+          stage.txMemManager.cleanup();
         }
 
-        isIdle = false;
-        stage.drawFrame(hasActiveAnimations);
         stage.flushFrameEvents();
+        return;
+      }
 
-        // Schedule next frame
-        requestAnimationFrame(runLoop);
-        scheduled = true;
+      isIdle = false;
+      stage.drawFrame(hasActiveAnimations);
+      stage.flushFrameEvents();
+
+      // Schedule next frame
+      requestAnimationFrame(runLoop);
+      scheduled = true;
+    };
+
+    const runLoop = (currentTime: number = 0) => {
+      // `tick` runs client-supplied code every frame; a throw there would
+      // otherwise propagate out of the rAF callback and permanently stop the
+      // render loop — the whole app freezes until reload. Guard it and always
+      // keep the loop alive: hand the error to `handleLoopError` (a no-op by
+      // default; the app can override it to log/report) and reschedule unless
+      // `tick` already queued the next frame before throwing.
+      scheduled = false;
+      try {
+        tick(currentTime);
       } catch (error: unknown) {
-        // Report the error (default handler is a no-op), then keep the loop
-        // alive — a single bad frame must never freeze the app. Skip the
-        // reschedule if this frame already queued the next tick before throwing.
         const handleLoopError = stage.options.handleLoopError;
         if (handleLoopError !== undefined) {
           handleLoopError(error);
@@ -133,8 +146,6 @@ export class WebPlatform extends Platform {
       }
     };
 
-    const requestLoop = () => requestAnimationFrame(runLoop);
-
     requestAnimationFrame(runLoop);
   }
 

package/src/core/renderers/canvas/CanvasRenderer.test.ts

@@ -33,6 +33,236 @@ describe('CanvasRenderer.renderContext', () => {
   });
 });
 
+describe('CanvasRenderer.addQuad transform detection', () => {
+  const makeRenderer = () => {
+    const renderer = Object.create(CanvasRenderer.prototype) as CanvasRenderer;
+    const context = {
+      save: vi.fn(),
+      restore: vi.fn(),
+      setTransform: vi.fn(),
+      scale: vi.fn(),
+      translate: vi.fn(),
+      fillRect: vi.fn(),
+      clip: vi.fn(),
+      fillStyle: '',
+      globalAlpha: 1,
+    };
+    (renderer as any).context = context;
+    (renderer as any).pixelRatio = 1;
+    (renderer as any).stage = { defaultTexture: null };
+    return { renderer, context };
+  };
+
+  const makeColorNode = (transform: {
+    tx: number;
+    ty: number;
+    ta: number;
+    tb: number;
+    tc: number;
+    td: number;
+  }) =>
+    ({
+      globalTransform: transform,
+      clippingRect: { valid: false, x: 0, y: 0, w: 0, h: 0 },
+      placeholderActive: false,
+      premultipliedColorTl: 0xff0000ff,
+      premultipliedColorTr: 0xff0000ff,
+      premultipliedColorBr: 0xff0000ff,
+      worldAlpha: 1,
+      props: {
+        texture: { type: TextureType.color },
+        shader: null,
+        w: 100,
+        h: 50,
+      },
+    } as any);
+
+  it('applies the transform for a scaleY-only transform (td !== 1)', () => {
+    const { renderer, context } = makeRenderer();
+    const node = makeColorNode({ tx: 5, ty: 10, ta: 1, tb: 0, tc: 0, td: 2 });
+
+    renderer.addQuad(node);
+
+    expect(context.setTransform).toHaveBeenCalledWith(1, 0, 0, 2, 5, 10);
+    expect(context.save).toHaveBeenCalledTimes(1);
+    expect(context.restore).toHaveBeenCalledTimes(1);
+  });
+
+  it('applies the transform for a rotation-only transform (tb/tc !== 0)', () => {
+    const { renderer, context } = makeRenderer();
+    const node = makeColorNode({ tx: 0, ty: 0, ta: 1, tb: -1, tc: 1, td: 1 });
+
+    renderer.addQuad(node);
+
+    expect(context.setTransform).toHaveBeenCalledWith(1, 1, -1, 1, 0, 0);
+  });
+
+  it('skips the transform for an identity transform', () => {
+    const { renderer, context } = makeRenderer();
+    const node = makeColorNode({ tx: 5, ty: 10, ta: 1, tb: 0, tc: 0, td: 1 });
+
+    renderer.addQuad(node);
+
+    expect(context.setTransform).not.toHaveBeenCalled();
+    expect(context.save).not.toHaveBeenCalled();
+    expect(context.fillRect).toHaveBeenCalledWith(5, 10, 100, 50);
+  });
+});
+
+describe('CanvasRenderer.reset', () => {
+  const makeRenderer = (clearColorAlpha: number) => {
+    const renderer = Object.create(CanvasRenderer.prototype) as CanvasRenderer;
+    const context = {
+      setTransform: vi.fn(),
+      clearRect: vi.fn(),
+      fillRect: vi.fn(),
+      scale: vi.fn(),
+      fillStyle: '',
+    };
+    let widthWrites = 0;
+    const canvas = {
+      height: 100,
+      get width() {
+        return 200;
+      },
+      set width(_v: number) {
+        widthWrites++;
+      },
+    };
+    (renderer as any).context = context;
+    (renderer as any).canvas = canvas;
+    (renderer as any).pixelRatio = 2;
+    (renderer as any).clearColor = 'rgba(0,0,0,0)';
+    (renderer as any).clearColorAlpha = clearColorAlpha;
+    return { renderer, context, getWidthWrites: () => widthWrites };
+  };
+
+  it('clears via setTransform + clearRect without reallocating the canvas', () => {
+    const { renderer, context, getWidthWrites } = makeRenderer(0);
+
+    renderer.reset();
+
+    expect(getWidthWrites()).toBe(0);
+    expect(context.setTransform).toHaveBeenCalledWith(1, 0, 0, 1, 0, 0);
+    expect(context.clearRect).toHaveBeenCalledWith(0, 0, 200, 100);
+    expect(context.scale).toHaveBeenCalledWith(2, 2);
+  });
+
+  it('skips the clear-color fill when the clear color is fully transparent', () => {
+    const { renderer, context } = makeRenderer(0);
+
+    renderer.reset();
+
+    expect(context.fillRect).not.toHaveBeenCalled();
+  });
+
+  it('fills with the clear color when its alpha is non-zero', () => {
+    const { renderer, context } = makeRenderer(0xff);
+    (renderer as any).clearColor = 'rgba(16,32,48,1)';
+
+    renderer.reset();
+
+    expect(context.fillRect).toHaveBeenCalledWith(0, 0, 200, 100);
+    expect(context.fillStyle).toBe('rgba(16,32,48,1)');
+  });
+
+  it('updateClearColor keeps the alpha skip in sync', () => {
+    const { renderer, context } = makeRenderer(0xff);
+
+    renderer.updateClearColor(0x00000000);
+    renderer.reset();
+
+    expect(context.fillRect).not.toHaveBeenCalled();
+  });
+});
+
+describe('CanvasRenderer.addQuad allocation-free paths', () => {
+  const makeRenderer = () => {
+    const renderer = Object.create(CanvasRenderer.prototype) as CanvasRenderer;
+    const context = {
+      save: vi.fn(),
+      restore: vi.fn(),
+      setTransform: vi.fn(),
+      scale: vi.fn(),
+      translate: vi.fn(),
+      fillRect: vi.fn(),
+      beginPath: vi.fn(),
+      rect: vi.fn(),
+      clip: vi.fn(),
+      fillStyle: '',
+      globalAlpha: 1,
+    };
+    (renderer as any).context = context;
+    (renderer as any).pixelRatio = 1;
+    (renderer as any).stage = { defaultTexture: null };
+    return { renderer, context };
+  };
+
+  const makeColorNode = (shader: unknown = null) =>
+    ({
+      globalTransform: { tx: 5, ty: 10, ta: 1, tb: 0, tc: 0, td: 1 },
+      clippingRect: { valid: true, x: 0, y: 0, w: 300, h: 200 },
+      placeholderActive: false,
+      premultipliedColorTl: 0xff0000ff,
+      premultipliedColorTr: 0xff0000ff,
+      premultipliedColorBr: 0xff0000ff,
+      worldAlpha: 1,
+      props: {
+        texture: { type: TextureType.color },
+        shader,
+        w: 100,
+        h: 50,
+      },
+    } as any);
+
+  it('clips with beginPath/rect/clip instead of a Path2D', () => {
+    const { renderer, context } = makeRenderer();
+
+    renderer.addQuad(makeColorNode());
+
+    expect(context.beginPath).toHaveBeenCalledTimes(1);
+    expect(context.rect).toHaveBeenCalledWith(0, 0, 300, 200);
+    expect(context.clip).toHaveBeenCalledWith();
+    expect(context.fillRect).toHaveBeenCalledWith(5, 10, 100, 50);
+  });
+
+  it('passes the same preallocated renderContext callback to every shader', () => {
+    // Real construction (not Object.create) so class-field initializers run —
+    // the preallocated callback is a field arrow function.
+    const context = {
+      save: vi.fn(),
+      restore: vi.fn(),
+      fillRect: vi.fn(),
+      beginPath: vi.fn(),
+      rect: vi.fn(),
+      clip: vi.fn(),
+      fillStyle: '',
+      globalAlpha: 1,
+    };
+    const renderer = new CanvasRenderer({
+      stage: { pixelRatio: 1, clearColor: 0x00000000, defaultTexture: null },
+      canvas: { getContext: () => context },
+    } as any);
+    const seen: Array<() => void> = [];
+    const shader = {
+      applySNR: false,
+      render: vi.fn((_ctx: unknown, _node: unknown, rc: () => void) => {
+        seen.push(rc);
+        rc();
+      }),
+    };
+
+    renderer.addQuad(makeColorNode(shader));
+    renderer.addQuad(makeColorNode(shader));
+
+    expect(seen.length).toBe(2);
+    expect(seen[0]).toBe(seen[1]);
+    // The callback drew each node's content when invoked
+    expect(context.fillRect).toHaveBeenCalledTimes(2);
+    expect(context.fillRect).toHaveBeenCalledWith(5, 10, 100, 50);
+  });
+});
+
 describe('CanvasRenderer.getCapabilities', () => {
   it('reports the canvas backend with no WebGL or VAO support', () => {
     const renderer = Object.create(CanvasRenderer.prototype) as CanvasRenderer;