feat(vrt): per-test render-mode gating for Canvas2D visual regression

examples/common/ExampleSettings.ts

@@ -29,6 +29,10 @@ export interface ExampleSettings {
    * Name of the test being run.
    */
   testName: string;
+  /**
+   * Render mode the test is running under.
+   */
+  renderMode: 'webgl' | 'canvas';
   /**
    * Renderer instance
    */

examples/index.ts

@@ -29,6 +29,12 @@ interface TestModule {
     urlParams: URLSearchParams,
   ) => Partial<RendererMainSettings>;
   automation?: (settings: ExampleSettings) => Promise<void>;
+  /**
+   * Render modes this test's automation supports. Defaults to all modes.
+   * Set to `['webgl']` for tests exercising features the Canvas2D backend
+   * does not implement (e.g. render-to-texture).
+   */
+  renderModes?: ('webgl' | 'canvas')[];
 }
 
 const getTestPath = (testName: string) => `./tests/${testName}.ts`;
@@ -296,6 +302,7 @@ async function runTest(
 
   const exampleSettings: ExampleSettings = {
     testName: test,
+    renderMode: renderMode as 'webgl' | 'canvas',
     renderer,
     appElement,
     testRoot,
@@ -491,7 +498,16 @@ async function runAutomation(
     // results in automation mode.
     await setupMathRandom();
 
-    const { automation, customSettings } = await testModule();
+    const { automation, customSettings, renderModes } = await testModule();
+    if (
+      renderModes !== undefined &&
+      renderModes.indexOf(renderMode as 'webgl' | 'canvas') === -1
+    ) {
+      console.log(
+        `Skipping ${testName} (not enabled for renderMode=${renderMode})`,
+      );
+      continue;
+    }
     console.log(`Attempting to run automation for ${testName}...`);
     if (automation) {
       console.log(`Running automation for ${testName}...`);
@@ -509,6 +525,7 @@ async function runAutomation(
         });
         const exampleSettings: ExampleSettings = {
           testName,
+          renderMode: renderMode as 'webgl' | 'canvas',
           renderer,
           testRoot,
           appElement,

examples/tests/alpha-blending.ts

@@ -28,7 +28,8 @@ export async function automation(settings: ExampleSettings) {
 }
 
 export default async function test(settings: ExampleSettings) {
-  const { testName, renderer, appElement, automation, testRoot } = settings;
+  const { testName, renderer, appElement, automation, testRoot, renderMode } =
+    settings;
   const savedState = automation
     ? null
     : loadStorage<LocalStorageData>(testName);
@@ -366,63 +367,66 @@ export default async function test(settings: ExampleSettings) {
 
     curY += 30 + PADDING;
 
-    const SDF_TEXT = 'This "SDF" text should appear invisible';
+    // The SDF text renderer is not registered in canvas render mode
+    if (renderMode === 'webgl') {
+      const SDF_TEXT = 'This "SDF" text should appear invisible';
 
-    // SDF Text - Same Color - 100% alpha prop / 100% alpha component
-    renderer.createTextNode({
-      text: SDF_TEXT,
-      fontFamily: 'Ubuntu',
-      fontSize: 30,
-      alpha: 1,
-      color: bgColor,
-      y: curY,
-      textRendererOverride: 'sdf',
-      parent: sideContainer,
-    });
+      // SDF Text - Same Color - 100% alpha prop / 100% alpha component
+      renderer.createTextNode({
+        text: SDF_TEXT,
+        fontFamily: 'Ubuntu',
+        fontSize: 30,
+        alpha: 1,
+        color: bgColor,
+        y: curY,
+        textRendererOverride: 'sdf',
+        parent: sideContainer,
+      });
 
-    curY += 30 + PADDING;
+      curY += 30 + PADDING;
 
-    // SDF Text - Same Color - 50% alpha prop / 100% alpha component
-    renderer.createTextNode({
-      text: SDF_TEXT,
-      fontFamily: 'Ubuntu',
-      fontSize: 30,
-      alpha: 0.5,
-      color: bgColor,
-      y: curY,
-      textRendererOverride: 'sdf',
-      parent: sideContainer,
-    });
+      // SDF Text - Same Color - 50% alpha prop / 100% alpha component
+      renderer.createTextNode({
+        text: SDF_TEXT,
+        fontFamily: 'Ubuntu',
+        fontSize: 30,
+        alpha: 0.5,
+        color: bgColor,
+        y: curY,
+        textRendererOverride: 'sdf',
+        parent: sideContainer,
+      });
 
-    curY += 30 + PADDING;
+      curY += 30 + PADDING;
 
-    // SDF Text - Same Color - 100% alpha prop / 50% alpha component
-    renderer.createTextNode({
-      text: SDF_TEXT,
-      fontFamily: 'Ubuntu',
-      fontSize: 30,
-      alpha: 1,
-      color: mergeColorAlpha(bgColor, 0.5),
-      y: curY,
-      textRendererOverride: 'sdf',
-      parent: sideContainer,
-    });
+      // SDF Text - Same Color - 100% alpha prop / 50% alpha component
+      renderer.createTextNode({
+        text: SDF_TEXT,
+        fontFamily: 'Ubuntu',
+        fontSize: 30,
+        alpha: 1,
+        color: mergeColorAlpha(bgColor, 0.5),
+        y: curY,
+        textRendererOverride: 'sdf',
+        parent: sideContainer,
+      });
 
-    curY += 30 + PADDING;
+      curY += 30 + PADDING;
 
-    // SDF Text - Same Color - 50% alpha prop / 50% alpha component
-    renderer.createTextNode({
-      text: SDF_TEXT,
-      fontFamily: 'Ubuntu',
-      fontSize: 30,
-      alpha: 0.5,
-      color: mergeColorAlpha(bgColor, 0.5),
-      y: curY,
-      textRendererOverride: 'sdf',
-      parent: sideContainer,
-    });
+      // SDF Text - Same Color - 50% alpha prop / 50% alpha component
+      renderer.createTextNode({
+        text: SDF_TEXT,
+        fontFamily: 'Ubuntu',
+        fontSize: 30,
+        alpha: 0.5,
+        color: mergeColorAlpha(bgColor, 0.5),
+        y: curY,
+        textRendererOverride: 'sdf',
+        parent: sideContainer,
+      });
 
-    curY += 30 + PADDING;
+      curY += 30 + PADDING;
+    }
 
     //// Texture Blending Test
 

examples/tests/clipping.ts

@@ -1,5 +1,5 @@
 import type { ExampleSettings } from '../common/ExampleSettings.js';
-import { paginateTestRows } from '../common/paginateTestRows.js';
+import { paginateTestRows, type TestRow } from '../common/paginateTestRows.js';
 import { PageContainer } from '../common/PageContainer.js';
 import { waitForLoadedDimensions } from '../common/utils.js';
 import { deg2Rad } from '@lightningjs/renderer/utils';
@@ -15,7 +15,7 @@ const SQUARE_SIZE = 200;
 const PADDING = 20;
 
 export default async function test(settings: ExampleSettings) {
-  const { renderer } = settings;
+  const { renderer, renderMode } = settings;
   const pageContainer = new PageContainer(settings, {
     w: renderer.settings.appWidth,
     h: renderer.settings.appHeight,
@@ -434,34 +434,39 @@ export default async function test(settings: ExampleSettings) {
         return SQUARE_SIZE;
       },
     },
-    {
-      title:
-        'SDF text clips ANCESTOR text node children that is outside of its bounds',
-      content: async (rowNode) => {
-        const curX = 0;
-
-        const parent = renderer.createNode({
-          x: curX,
-          w: SQUARE_SIZE,
-          h: SQUARE_SIZE,
-          parent: rowNode,
-          clipping: true,
-        });
-
-        renderer.createTextNode({
-          w: SQUARE_SIZE,
-          h: SQUARE_SIZE,
-          parent,
-          fontFamily: 'Ubuntu',
-          fontSize: 40,
-          color: 0x000000ff,
-          textRendererOverride: 'sdf',
-          text: 'SDF ancestor clipping',
-        });
-
-        return SQUARE_SIZE;
-      },
-    },
+    // The SDF text renderer is not registered in canvas render mode
+    ...((renderMode === 'webgl'
+      ? [
+          {
+            title:
+              'SDF text clips ANCESTOR text node children that is outside of its bounds',
+            content: async (rowNode) => {
+              const curX = 0;
+
+              const parent = renderer.createNode({
+                x: curX,
+                w: SQUARE_SIZE,
+                h: SQUARE_SIZE,
+                parent: rowNode,
+                clipping: true,
+              });
+
+              renderer.createTextNode({
+                w: SQUARE_SIZE,
+                h: SQUARE_SIZE,
+                parent,
+                fontFamily: 'Ubuntu',
+                fontSize: 40,
+                color: 0x000000ff,
+                textRendererOverride: 'sdf',
+                text: 'SDF ancestor clipping',
+              });
+
+              return SQUARE_SIZE;
+            },
+          },
+        ]
+      : []) satisfies TestRow[]),
     {
       title: 'Clipping bounds are scaled with the `scale` property',
       content: async (rowNode) => {

examples/tests/render-settings.ts

@@ -22,14 +22,21 @@ export async function automation(settings: ExampleSettings) {
   await testPage();
 }
 
-export default async function test({ renderer, testRoot }: ExampleSettings) {
+export default async function test({
+  renderer,
+  testRoot,
+  renderMode,
+}: ExampleSettings) {
+  // Ubuntu-ssdf only exists as an SDF font; fall back to the canvas-loaded
+  // Ubuntu face so the labels render under the Canvas2D backend.
+  const fontFamily = renderMode === 'canvas' ? 'Ubuntu' : 'Ubuntu-ssdf';
   const ppr = renderer.stage.options.devicePhysicalPixelRatio;
   const lpr = renderer.stage.options.deviceLogicalPixelRatio;
 
   const info = renderer.createTextNode({
     text: 'Initial default settings',
     fontSize: 30,
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     x: 10,
     y: 810,
     maxWidth: renderer.root.w - 20,
@@ -41,7 +48,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     fontSize: 30,
     x: 10,
     y: 960,
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     parent: testRoot,
   });
 
@@ -82,7 +89,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     pivot: 0,
     text: 'red',
     fontSize: 80,
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     parent: boundaryRect2,
   });
 
@@ -92,7 +99,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     fontSize: 30,
     x: 10,
     y: yPos,
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     parent: testRoot,
   });
   yPos += 40;
@@ -102,7 +109,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     fontSize: 30,
     x: 10,
     y: yPos,
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     parent: testRoot,
   });
   yPos += 40;
@@ -112,7 +119,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     fontSize: 30,
     x: 10,
     y: yPos,
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     parent: testRoot,
   });
   yPos += 40;
@@ -122,7 +129,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     fontSize: 30,
     x: 10,
     y: yPos,
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     parent: testRoot,
   });
   yPos += 40;
@@ -132,7 +139,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     fontSize: 30,
     x: 10,
     y: yPos,
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     parent: testRoot,
   });
   yPos += 40;
@@ -151,7 +158,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     fontSize: 30,
     x: 50,
     y: yPos,
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     parent: testRoot,
   });
   yPos += 40;
@@ -170,7 +177,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     y: yPos,
     h: 100,
     text: 'Inspector enabled?',
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     fontSize: 30,
     parent: testRoot,
     data: {
@@ -184,7 +191,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     fontSize: 30,
     x: 10,
     y: yPos + 100,
-    fontFamily: 'Ubuntu-ssdf',
+    fontFamily: fontFamily,
     parent: testRoot,
   });
   yPos += 40;

examples/tests/rtt-dimension.ts

@@ -1,6 +1,9 @@
 import type { ExampleSettings } from '../common/ExampleSettings.js';
 import rocko from '../assets/rocko.png';
 
+// renderToTexture is a noop on the Canvas2D backend
+export const renderModes: ('webgl' | 'canvas')[] = ['webgl'];
+
 export async function automation(settings: ExampleSettings) {
   const page = await test(settings);