@flighthq/displayobject-canvas 0.1.0

package/src/canvasCache.test.ts

@@ -0,0 +1,189 @@
+import { createDisplayObject } from '@flighthq/displayobject';
+import { createMatrix } from '@flighthq/geometry';
+import { createRenderCache, getRenderProxy2D, RenderCacheKind, useRenderCache } from '@flighthq/render';
+
+import {
+  createCanvasCacheState,
+  defaultCanvasRenderCacheRenderer,
+  destroyCanvasRenderCacheTarget,
+  enableCanvasRenderCache,
+  ensureCanvasRenderCacheTarget,
+  getCanvasRenderCacheTarget,
+  refreshCanvasRenderCache,
+  releaseCanvasRenderCache,
+} from './canvasCache';
+import { createCanvasRenderState, getCanvasRenderStateRuntime } from './canvasRenderState';
+
+function makeCanvasState(options = {}) {
+  const canvas = document.createElement('canvas');
+  canvas.width = 200;
+  canvas.height = 200;
+  return createCanvasRenderState(canvas, options);
+}
+
+function makeCacheNode(source: unknown): any {
+  return { source, kind: RenderCacheKind, transform2D: createMatrix(), alpha: 1, blendMode: null };
+}
+
+describe('createCanvasCacheState', () => {
+  it('copies the screen state renderers', () => {
+    const screen = makeCanvasState();
+    enableCanvasRenderCache(screen);
+    const cacheState = createCanvasCacheState(screen);
+    expect(getCanvasRenderStateRuntime(cacheState).rendererMap.get(RenderCacheKind)).toBe(
+      defaultCanvasRenderCacheRenderer,
+    );
+  });
+
+  it('propagates pixel ratio and scene graph sync policy without sharing node maps', () => {
+    const screen = makeCanvasState({ pixelRatio: 3, sceneGraphSyncPolicy: 'refreshDerivedState' });
+    const cacheState = createCanvasCacheState(screen);
+    expect(cacheState.pixelRatio).toBe(3);
+    expect(cacheState.sceneGraphSyncPolicy).toBe('refreshDerivedState');
+    expect(getCanvasRenderStateRuntime(cacheState).renderProxyMap).not.toBe(
+      getCanvasRenderStateRuntime(screen).renderProxyMap,
+    );
+  });
+});
+
+describe('defaultCanvasRenderCacheRenderer', () => {
+  it('does nothing when no cache is attached to the source', () => {
+    const state = makeCanvasState();
+    const spy = vi.spyOn(state.context, 'drawImage');
+    defaultCanvasRenderCacheRenderer.submit(state, makeCacheNode(createDisplayObject()));
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it('draws the cache target attached to the source node', () => {
+    const state = makeCanvasState();
+    const obj = createDisplayObject();
+    const cache = createRenderCache();
+    useRenderCache(state, obj, cache);
+    const target = ensureCanvasRenderCacheTarget(state, cache, 16, 16);
+    const spy = vi.spyOn(state.context, 'drawImage');
+    defaultCanvasRenderCacheRenderer.submit(state, makeCacheNode(obj));
+    expect(spy).toHaveBeenCalledWith(target.canvas, 0, 0);
+  });
+});
+
+describe('destroyCanvasRenderCacheTarget', () => {
+  it('collapses the canvas to zero size and removes the target', () => {
+    const state = makeCanvasState();
+    const cache = createRenderCache();
+    const target = ensureCanvasRenderCacheTarget(state, cache, 8, 8);
+    destroyCanvasRenderCacheTarget(state, cache);
+    expect(target.canvas.width).toBe(0);
+    expect(target.canvas.height).toBe(0);
+    expect(target.width).toBe(0);
+    expect(target.height).toBe(0);
+    expect(getCanvasRenderCacheTarget(state, cache)).toBeNull();
+  });
+
+  it('is a no-op when the target does not exist', () => {
+    const state = makeCanvasState();
+    const cache = createRenderCache();
+    expect(() => destroyCanvasRenderCacheTarget(state, cache)).not.toThrow();
+  });
+});
+
+describe('enableCanvasRenderCache', () => {
+  it('registers the renderer for the render cache kind', () => {
+    const state = makeCanvasState();
+    enableCanvasRenderCache(state);
+    expect(getCanvasRenderStateRuntime(state).rendererMap.get(RenderCacheKind)).toBe(defaultCanvasRenderCacheRenderer);
+  });
+});
+
+describe('ensureCanvasRenderCacheTarget', () => {
+  it('creates a target sized to the request', () => {
+    const state = makeCanvasState();
+    const cache = createRenderCache();
+    const target = ensureCanvasRenderCacheTarget(state, cache, 64, 32);
+    expect(target.width).toBe(64);
+    expect(target.height).toBe(32);
+  });
+
+  it('reuses and resizes the same target on subsequent calls', () => {
+    const state = makeCanvasState();
+    const cache = createRenderCache();
+    const first = ensureCanvasRenderCacheTarget(state, cache, 64, 32);
+    const second = ensureCanvasRenderCacheTarget(state, cache, 16, 16);
+    expect(second).toBe(first);
+    expect(second.width).toBe(16);
+  });
+
+  it('keeps targets isolated per state for the same handle', () => {
+    const stateA = makeCanvasState();
+    const stateB = makeCanvasState();
+    const cache = createRenderCache();
+    const targetA = ensureCanvasRenderCacheTarget(stateA, cache, 8, 8);
+    const targetB = ensureCanvasRenderCacheTarget(stateB, cache, 8, 8);
+    expect(targetA).not.toBe(targetB);
+  });
+});
+
+describe('getCanvasRenderCacheTarget', () => {
+  it('returns null before a target is allocated', () => {
+    const state = makeCanvasState();
+    expect(getCanvasRenderCacheTarget(state, createRenderCache())).toBeNull();
+  });
+
+  it('returns the allocated target', () => {
+    const state = makeCanvasState();
+    const cache = createRenderCache();
+    const target = ensureCanvasRenderCacheTarget(state, cache, 8, 8);
+    expect(getCanvasRenderCacheTarget(state, cache)).toBe(target);
+  });
+});
+
+describe('refreshCanvasRenderCache', () => {
+  it('bakes on the first call and allocates the target on the screen state', () => {
+    const screen = makeCanvasState();
+    const cacheState = createCanvasCacheState(screen);
+    const cache = createRenderCache();
+    const obj = createDisplayObject();
+    const rebaked = refreshCanvasRenderCache(cacheState, cache, obj, { padding: 5 });
+    expect(rebaked).toBe(true);
+    const target = getCanvasRenderCacheTarget(screen, cache);
+    expect(target).not.toBeNull();
+    expect(target!.width).toBe(10);
+    expect(target!.height).toBe(10);
+  });
+
+  it('always rebakes under the refreshDerivedState policy', () => {
+    const screen = makeCanvasState({ sceneGraphSyncPolicy: 'refreshDerivedState' });
+    const cacheState = createCanvasCacheState(screen);
+    const cache = createRenderCache();
+    const obj = createDisplayObject();
+    refreshCanvasRenderCache(cacheState, cache, obj, { padding: 5 });
+    expect(refreshCanvasRenderCache(cacheState, cache, obj, { padding: 5 })).toBe(true);
+  });
+
+  it('skips the bake under requiresInvalidation when nothing changed', () => {
+    const screen = makeCanvasState({ sceneGraphSyncPolicy: 'requiresInvalidation' });
+    const cacheState = createCanvasCacheState(screen);
+    const cache = createRenderCache();
+    const obj = createDisplayObject();
+    refreshCanvasRenderCache(cacheState, cache, obj, { padding: 5 });
+    expect(refreshCanvasRenderCache(cacheState, cache, obj, { padding: 5 })).toBe(false);
+  });
+
+  it('does not create render nodes on the screen state', () => {
+    const screen = makeCanvasState();
+    const cacheState = createCanvasCacheState(screen);
+    const cache = createRenderCache();
+    const obj = createDisplayObject();
+    refreshCanvasRenderCache(cacheState, cache, obj);
+    expect(getRenderProxy2D(screen, obj)).toBeUndefined();
+  });
+});
+
+describe('releaseCanvasRenderCache', () => {
+  it('drops the target for the cache', () => {
+    const state = makeCanvasState();
+    const cache = createRenderCache();
+    ensureCanvasRenderCacheTarget(state, cache, 8, 8);
+    releaseCanvasRenderCache(state, cache);
+    expect(getCanvasRenderCacheTarget(state, cache)).toBeNull();
+  });
+});

package/src/canvasClip.test.ts

@@ -0,0 +1,12 @@
+import { enableCanvasClip } from './canvasClip';
+import { createCanvasRenderState } from './canvasRenderState';
+
+describe('enableCanvasClip', () => {
+  it('sets the display object clip hooks on the render state', () => {
+    const state = createCanvasRenderState(document.createElement('canvas'));
+
+    enableCanvasClip(state);
+
+    expect(state.displayObjectClipHooks).not.toBeNull();
+  });
+});

package/src/canvasClipRectangle.test.ts

@@ -0,0 +1,101 @@
+import { createDisplayObject } from '@flighthq/displayobject';
+import { createMatrix, createRectangle } from '@flighthq/geometry';
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import type { CanvasRenderState, DisplayObject, Matrix, Rectangle, RenderProxy2D } from '@flighthq/types';
+
+import { popCanvasClipRectangle, pushCanvasClipContours, pushCanvasClipRectangle } from './canvasClipRectangle';
+import { createCanvasRenderState } from './canvasRenderState';
+
+describe('Clip Rectangle Functions', () => {
+  let canvas: HTMLCanvasElement;
+  let state: CanvasRenderState;
+  let rect: Rectangle;
+  let transform2D: Matrix;
+  let source: DisplayObject;
+  let data: RenderProxy2D;
+
+  beforeEach(() => {
+    canvas = document.createElement('canvas');
+    state = createCanvasRenderState(canvas);
+    rect = createRectangle(10, 10, 100, 100);
+    transform2D = createMatrix();
+    source = createDisplayObject();
+    source.clip = { contours: null, rect, winding: 'nonZero', version: 0 };
+    data = getOrCreateRenderProxy2D(state, source);
+    data.transform2D = transform2D;
+  });
+
+  it('should call context.restore() when popClipRectangle is called', () => {
+    const restoreSpy = vi.spyOn(state.context, 'restore');
+    popCanvasClipRectangle(state);
+    expect(restoreSpy).toHaveBeenCalled();
+  });
+
+  it('should call context.save(), setTransform, and context.clip() when pushClipRectangle is called', () => {
+    const saveSpy = vi.spyOn(state.context, 'save');
+    const beginPathSpy = vi.spyOn(state.context, 'beginPath');
+    const rectSpy = vi.spyOn(state.context, 'rect');
+    const clipSpy = vi.spyOn(state.context, 'clip');
+
+    pushCanvasClipRectangle(state, rect, transform2D);
+
+    expect(saveSpy).toHaveBeenCalled();
+    expect(beginPathSpy).toHaveBeenCalled();
+    expect(rectSpy).toHaveBeenCalledWith(rect.x, rect.y, rect.width, rect.height);
+    expect(clipSpy).toHaveBeenCalled();
+  });
+});
+
+describe('popCanvasClipRectangle', () => {
+  it('calls context.restore()', () => {
+    const c = document.createElement('canvas');
+    const state = createCanvasRenderState(c);
+    const spy = vi.spyOn(state.context, 'restore');
+    popCanvasClipRectangle(state);
+    expect(spy).toHaveBeenCalled();
+  });
+});
+
+describe('pushCanvasClipContours', () => {
+  it('saves context, traces each contour as a path, and clips', () => {
+    const c = document.createElement('canvas');
+    const state = createCanvasRenderState(c);
+    const t = createMatrix();
+    const saveSpy = vi.spyOn(state.context, 'save');
+    const beginPathSpy = vi.spyOn(state.context, 'beginPath');
+    const moveToSpy = vi.spyOn(state.context, 'moveTo');
+    const lineToSpy = vi.spyOn(state.context, 'lineTo');
+    const clipSpy = vi.spyOn(state.context, 'clip');
+
+    // Two triangles.
+    pushCanvasClipContours(
+      state,
+      [
+        [0, 0, 10, 0, 10, 10],
+        [20, 20, 30, 20, 30, 30],
+      ],
+      'nonZero',
+      t,
+    );
+
+    expect(saveSpy).toHaveBeenCalled();
+    expect(beginPathSpy).toHaveBeenCalled();
+    expect(moveToSpy).toHaveBeenCalledTimes(2); // one per contour
+    expect(lineToSpy).toHaveBeenCalledTimes(4); // two segments per triangle after the moveTo
+    expect(clipSpy).toHaveBeenCalled();
+  });
+});
+
+describe('pushCanvasClipRectangle', () => {
+  it('saves context, clips to rect, and restores', () => {
+    const c = document.createElement('canvas');
+    const state = createCanvasRenderState(c);
+    const r = createRectangle(0, 0, 50, 50);
+    const t = createMatrix();
+    const saveSpy = vi.spyOn(state.context, 'save');
+    const clipSpy = vi.spyOn(state.context, 'clip');
+    pushCanvasClipRectangle(state, r, t);
+    expect(saveSpy).toHaveBeenCalled();
+    expect(clipSpy).toHaveBeenCalled();
+  });
+});

package/src/canvasDisplayObject.test.ts

@@ -0,0 +1,117 @@
+import { createDisplayObject } from '@flighthq/displayobject';
+import { addNodeChild } from '@flighthq/node';
+import { getOrCreateRenderProxy2D, prepareDisplayObjectRender, registerRenderer } from '@flighthq/render';
+import { DisplayObjectKind } from '@flighthq/types';
+
+import { enableCanvasCssFilter, setCanvasCssFilter } from './canvasCSSFilterBinding';
+import {
+  defaultCanvasDisplayObjectRenderer,
+  drawCanvasDisplayObject,
+  renderCanvasDisplayObject,
+} from './canvasDisplayObject';
+import { createCanvasRenderState } from './canvasRenderState';
+
+function makeState() {
+  const canvas = document.createElement('canvas');
+  canvas.width = 200;
+  canvas.height = 200;
+  const state = createCanvasRenderState(canvas);
+  registerRenderer(state, DisplayObjectKind, defaultCanvasDisplayObjectRenderer);
+  return state;
+}
+
+describe('defaultCanvasDisplayObjectRenderer', () => {
+  it('has submit, and createData', () => {
+    expect(typeof defaultCanvasDisplayObjectRenderer.submit).toBe('function');
+    expect(typeof defaultCanvasDisplayObjectRenderer.createData).toBe('function');
+  });
+});
+
+describe('drawCanvasDisplayObject', () => {
+  it('does not throw', () => {
+    const state = makeState();
+    const obj = createDisplayObject();
+    const data = getOrCreateRenderProxy2D(state, obj);
+    expect(() => drawCanvasDisplayObject(state, data)).not.toThrow();
+  });
+
+  it('does not call fillRect (no visual geometry)', () => {
+    const state = makeState();
+    const obj = createDisplayObject();
+    const data = getOrCreateRenderProxy2D(state, obj);
+    const spy = vi.spyOn(state.context, 'fillRect');
+
+    drawCanvasDisplayObject(state, data);
+
+    expect(spy).not.toHaveBeenCalled();
+  });
+});
+
+describe('renderCanvasDisplayObject', () => {
+  it('does not throw for a simple visible object', () => {
+    const state = makeState();
+    const obj = createDisplayObject();
+    prepareDisplayObjectRender(state, obj);
+    expect(() => renderCanvasDisplayObject(state, obj)).not.toThrow();
+  });
+
+  it('calls renderer.submit for a visible object with a renderer', () => {
+    const state = makeState();
+    const obj = createDisplayObject();
+    const renderer = { createData: vi.fn().mockReturnValue(null), submit: vi.fn() };
+    registerRenderer(state, DisplayObjectKind, renderer);
+    prepareDisplayObjectRender(state, obj);
+
+    renderCanvasDisplayObject(state, obj);
+
+    expect(renderer.submit).toHaveBeenCalledOnce();
+  });
+
+  it('does not call renderer.submit for a hidden object', () => {
+    const state = makeState();
+    const obj = createDisplayObject();
+    obj.visible = false;
+    const renderer = { createData: vi.fn().mockReturnValue(null), submit: vi.fn() };
+    registerRenderer(state, DisplayObjectKind, renderer);
+    prepareDisplayObjectRender(state, obj);
+
+    renderCanvasDisplayObject(state, obj);
+
+    expect(renderer.submit).not.toHaveBeenCalled();
+  });
+
+  it('traverses and draws children', () => {
+    const state = makeState();
+    const parent = createDisplayObject();
+    const child = createDisplayObject();
+    addNodeChild(parent, child);
+    const renderer = { createData: vi.fn().mockReturnValue(null), submit: vi.fn() };
+    registerRenderer(state, DisplayObjectKind, renderer);
+    prepareDisplayObjectRender(state, parent);
+
+    renderCanvasDisplayObject(state, parent);
+
+    expect(renderer.submit).toHaveBeenCalledTimes(2);
+  });
+
+  it('applies a bound canvas filter around the node draw and resets after', () => {
+    const state = makeState();
+    const obj = createDisplayObject();
+    let observed: string | undefined;
+    const renderer = {
+      createData: vi.fn().mockReturnValue(null),
+      submit: vi.fn(() => {
+        observed = state.context.filter;
+      }),
+    };
+    registerRenderer(state, DisplayObjectKind, renderer);
+    enableCanvasCssFilter(state);
+    setCanvasCssFilter(state, obj, 'blur(3px)');
+    prepareDisplayObjectRender(state, obj);
+
+    renderCanvasDisplayObject(state, obj);
+
+    expect(observed).toBe('blur(3px)');
+    expect(state.context.filter).toBe('none');
+  });
+});

package/src/canvasElement.test.ts

@@ -0,0 +1,21 @@
+import { createCanvasElement } from './canvasElement';
+
+describe('createCanvasElement', () => {
+  it('sets pixel dimensions equal to logical size with default pixelRatio', () => {
+    const canvas = createCanvasElement(100, 200);
+    expect(canvas.width).toBe(100);
+    expect(canvas.height).toBe(200);
+  });
+
+  it('scales pixel dimensions by pixelRatio', () => {
+    const canvas = createCanvasElement(100, 200, 2);
+    expect(canvas.width).toBe(200);
+    expect(canvas.height).toBe(400);
+  });
+
+  it('sets CSS style dimensions to the logical size', () => {
+    const canvas = createCanvasElement(100, 200, 2);
+    expect(canvas.style.width).toBe('100px');
+    expect(canvas.style.height).toBe('200px');
+  });
+});

package/src/canvasFillPattern.test.ts

@@ -0,0 +1,96 @@
+import { createBitmapPattern, createGradientPattern } from './canvasFillPattern';
+
+function makeContext(): CanvasRenderingContext2D {
+  const canvas = document.createElement('canvas');
+  canvas.width = 200;
+  canvas.height = 200;
+  return canvas.getContext('2d') as CanvasRenderingContext2D;
+}
+
+function makeBitmap(w = 64, h = 64) {
+  const canvas = document.createElement('canvas');
+  canvas.width = w;
+  canvas.height = h;
+  return { source: canvas as CanvasImageSource, width: w, height: h };
+}
+
+describe('createBitmapPattern', () => {
+  it('returns null when bitmap.source is null', () => {
+    const context = makeContext();
+    expect(createBitmapPattern(context, { source: null, width: 64, height: 64 } as never, true)).toBeNull();
+  });
+
+  it('returns a CanvasPattern when src is valid', () => {
+    const context = makeContext();
+    const result = createBitmapPattern(context, makeBitmap() as never, true);
+    expect(result).not.toBeNull();
+  });
+
+  it('uses repeat repetition when repeat is true', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'createPattern');
+    createBitmapPattern(context, makeBitmap() as never, true);
+    expect(spy).toHaveBeenCalledWith(expect.anything(), 'repeat');
+  });
+
+  it('uses no-repeat when repeat is false', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'createPattern');
+    createBitmapPattern(context, makeBitmap() as never, false);
+    expect(spy).toHaveBeenCalledWith(expect.anything(), 'no-repeat');
+  });
+
+  it('sets imageSmoothingEnabled to true when smooth is true', () => {
+    const context = makeContext();
+    context.imageSmoothingEnabled = false;
+    createBitmapPattern(context, makeBitmap() as never, true, true);
+    expect(context.imageSmoothingEnabled).toBe(true);
+  });
+
+  it('sets imageSmoothingEnabled to false when smooth is false', () => {
+    const context = makeContext();
+    context.imageSmoothingEnabled = true;
+    createBitmapPattern(context, makeBitmap() as never, true, false);
+    expect(context.imageSmoothingEnabled).toBe(false);
+  });
+});
+
+describe('createGradientPattern', () => {
+  it('returns a CanvasGradient for linear type', () => {
+    const context = makeContext();
+    const result = createGradientPattern(
+      context,
+      'linear',
+      [0xff0000, 0x0000ff],
+      [1, 1],
+      [0, 255],
+      null,
+      'pad',
+      'rgb',
+      0,
+    );
+    expect(result).toBeInstanceOf(CanvasGradient);
+  });
+
+  it('returns a CanvasGradient for radial type', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'createRadialGradient');
+    createGradientPattern(context, 'radial', [0xff0000, 0x0000ff], [1, 1], [0, 255], null, 'pad', 'rgb', 0);
+    expect(spy).toHaveBeenCalledOnce();
+  });
+
+  it('calls createLinearGradient for linear type with pad spread', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'createLinearGradient');
+    createGradientPattern(context, 'linear', [0xff0000], [1], [128], null, 'pad', 'rgb', 0);
+    expect(spy).toHaveBeenCalledOnce();
+  });
+
+  it('uses focal point for radial gradient', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'createRadialGradient');
+    createGradientPattern(context, 'radial', [0xff0000], [1], [128], null, 'pad', 'rgb', 0.5);
+    const [fx] = spy.mock.calls[0];
+    expect(fx).not.toBe(0);
+  });
+});

package/src/canvasMaterialRegistry.test.ts

@@ -0,0 +1,69 @@
+import type { CanvasMaterialRenderer, Material } from '@flighthq/types';
+import { DefaultMaterialKind } from '@flighthq/types';
+
+import {
+  applyCanvasMaterial,
+  getCanvasMaterialRenderer,
+  registerCanvasMaterialRenderer,
+  resolveCanvasMaterialRenderer,
+} from './canvasMaterialRegistry';
+import { createCanvasRenderState } from './canvasRenderState';
+
+const TestKind = 'TestMaterial';
+const testRenderer: CanvasMaterialRenderer = { getState: () => ({ composite: 'lighter' }) };
+
+function makeState() {
+  const canvas = document.createElement('canvas');
+  canvas.width = 64;
+  canvas.height = 64;
+  return createCanvasRenderState(canvas);
+}
+
+function makeMaterial(kind: string = TestKind): Material {
+  return { kind } as Material;
+}
+
+describe('applyCanvasMaterial', () => {
+  it('returns false for a null material', () => {
+    expect(applyCanvasMaterial(makeState(), null)).toBe(false);
+  });
+
+  it('returns false when no renderer is registered', () => {
+    expect(applyCanvasMaterial(makeState(), makeMaterial())).toBe(false);
+  });
+
+  it('applies registered draw state and reports that it saved', () => {
+    const state = makeState();
+    registerCanvasMaterialRenderer(state, TestKind, testRenderer);
+    expect(applyCanvasMaterial(state, makeMaterial())).toBe(true);
+  });
+});
+
+describe('getCanvasMaterialRenderer', () => {
+  it('registers and retrieves a renderer by kind', () => {
+    const state = makeState();
+    expect(getCanvasMaterialRenderer(state, TestKind)).toBeNull();
+    registerCanvasMaterialRenderer(state, TestKind, testRenderer);
+    expect(getCanvasMaterialRenderer(state, TestKind)).toBe(testRenderer);
+  });
+});
+
+describe('registerCanvasMaterialRenderer', () => {
+  it('makes a renderer resolvable for its material kind', () => {
+    const state = makeState();
+    registerCanvasMaterialRenderer(state, TestKind, testRenderer);
+    expect(resolveCanvasMaterialRenderer(state, makeMaterial())).toBe(testRenderer);
+  });
+});
+
+describe('resolveCanvasMaterialRenderer', () => {
+  it('returns null when nothing is registered', () => {
+    expect(resolveCanvasMaterialRenderer(makeState(), makeMaterial())).toBeNull();
+  });
+
+  it('falls back to the registered default for an unregistered kind', () => {
+    const state = makeState();
+    registerCanvasMaterialRenderer(state, DefaultMaterialKind, testRenderer);
+    expect(resolveCanvasMaterialRenderer(state, makeMaterial('Other'))).toBe(testRenderer);
+  });
+});