@flighthq/scene2d-canvas 0.2.1-next.840.857425c

package/src/canvasCSSFilterBinding.test.ts

@@ -0,0 +1,86 @@
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import type { Node2D } from '@flighthq/types';
+
+import {
+  enableCanvasCssFilter,
+  getCanvasCssFilter,
+  resolveCanvasCssFilter,
+  setCanvasCssFilter,
+} from './canvasCSSFilterBinding';
+import { createCanvasRenderState } from './canvasRenderState';
+
+function makeState() {
+  const canvas = document.createElement('canvas');
+  canvas.width = 100;
+  canvas.height = 100;
+  return createCanvasRenderState(canvas);
+}
+
+describe('enableCanvasCssFilter', () => {
+  it('installs the CSS filter resolver', () => {
+    const state = makeState();
+    expect(state.canvasCssFilterResolver).toBeNull();
+    enableCanvasCssFilter(state);
+    expect(state.canvasCssFilterResolver).toBe(resolveCanvasCssFilter);
+  });
+});
+
+describe('getCanvasCssFilter', () => {
+  it('returns the filter bound to a render node', () => {
+    const state = makeState();
+    const node = {} as Node2D;
+    setCanvasCssFilter(state, node, 'blur(4px)');
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    expect(getCanvasCssFilter(renderProxy)).toBe('blur(4px)');
+  });
+
+  it('returns undefined for a render node with no binding', () => {
+    const state = makeState();
+    const renderProxy = getOrCreateRenderProxy2D(state, {} as Node2D);
+    expect(getCanvasCssFilter(renderProxy)).toBeUndefined();
+  });
+});
+
+describe('resolveCanvasCssFilter', () => {
+  it('returns null when no filter is set', () => {
+    const state = makeState();
+    const renderProxy = getOrCreateRenderProxy2D(state, {} as Node2D);
+    expect(resolveCanvasCssFilter(state, renderProxy)).toBeNull();
+  });
+
+  it('returns the bound filter', () => {
+    const state = makeState();
+    const node = {} as Node2D;
+    setCanvasCssFilter(state, node, 'grayscale(1)');
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    expect(resolveCanvasCssFilter(state, renderProxy)).toBe('grayscale(1)');
+  });
+});
+
+describe('setCanvasCssFilter', () => {
+  it('stores a filter keyed by the per-state render node', () => {
+    const state = makeState();
+    const node = {} as Node2D;
+    setCanvasCssFilter(state, node, 'blur(2px)');
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    expect(getCanvasCssFilter(renderProxy)).toBe('blur(2px)');
+  });
+
+  it('clears the binding when passed null', () => {
+    const state = makeState();
+    const node = {} as Node2D;
+    setCanvasCssFilter(state, node, 'blur(2px)');
+    setCanvasCssFilter(state, node, null);
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    expect(getCanvasCssFilter(renderProxy)).toBeUndefined();
+  });
+
+  it('does not leak a binding across render states', () => {
+    const a = makeState();
+    const b = makeState();
+    const node = {} as Node2D;
+    setCanvasCssFilter(a, node, 'blur(2px)');
+    expect(getCanvasCssFilter(getOrCreateRenderProxy2D(b, node))).toBeUndefined();
+    expect(getCanvasCssFilter(getOrCreateRenderProxy2D(a, node))).toBe('blur(2px)');
+  });
+});

package/src/canvasCache.test.ts

@@ -0,0 +1,189 @@
+import { createMatrix } from '@flighthq/geometry';
+import { createRenderCache, getRenderProxy2D, RenderCacheKind, useRenderCache } from '@flighthq/render';
+import { createDisplayObject } from '@flighthq/scene2d';
+
+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 { createMatrix, createRectangle } from '@flighthq/geometry';
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { createDisplayObject } from '@flighthq/scene2d';
+import type { CanvasRenderState, Node2D, 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: Node2D;
+  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/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/canvasImageSource.test.ts

@@ -0,0 +1,79 @@
+import { createImageResource, invalidateImageResource } from '@flighthq/image';
+import type { ImageResource } from '@flighthq/types';
+
+import { explainCanvasImageSource, resolveCanvasImageSource } from './canvasImageSource';
+import { createCanvasRenderState } from './canvasRenderState';
+
+function makeState() {
+  const canvas = document.createElement('canvas');
+  canvas.width = 200;
+  canvas.height = 200;
+  return createCanvasRenderState(canvas);
+}
+
+function makeDataOnlyResource(width = 4, height = 4): ImageResource {
+  const resource = createImageResource();
+  resource.width = width;
+  resource.height = height;
+  resource.data = new Uint8ClampedArray(width * height * 4).fill(255);
+  return resource;
+}
+
+describe('explainCanvasImageSource', () => {
+  it('reports element for a host-element-backed resource', () => {
+    const resource = createImageResource(document.createElement('img'));
+    expect(explainCanvasImageSource(resource)).toBe('element');
+  });
+
+  it('reports data for a data-only resource', () => {
+    expect(explainCanvasImageSource(makeDataOnlyResource())).toBe('data');
+  });
+
+  it('reports none for a resource with neither representation', () => {
+    expect(explainCanvasImageSource(createImageResource())).toBe('none');
+  });
+});
+
+describe('resolveCanvasImageSource', () => {
+  it('returns the host source element directly, with no cache entry', () => {
+    const state = makeState();
+    const img = document.createElement('img');
+    const resource = createImageResource(img);
+    expect(resolveCanvasImageSource(state, resource)).toBe(img);
+  });
+
+  it('materializes a canvas element from data-only pixels', () => {
+    const state = makeState();
+    const resolved = resolveCanvasImageSource(state, makeDataOnlyResource());
+    expect(resolved).toBeInstanceOf(HTMLCanvasElement);
+  });
+
+  it('caches the materialized element across resolves of the same resource', () => {
+    const state = makeState();
+    const resource = makeDataOnlyResource();
+    const first = resolveCanvasImageSource(state, resource);
+    const second = resolveCanvasImageSource(state, resource);
+    expect(second).toBe(first);
+  });
+
+  it('re-materializes after the resource version bumps', () => {
+    const state = makeState();
+    const resource = makeDataOnlyResource();
+    const first = resolveCanvasImageSource(state, resource);
+    invalidateImageResource(resource);
+    const second = resolveCanvasImageSource(state, resource);
+    expect(second).not.toBe(first);
+  });
+
+  it('caches independently per render state', () => {
+    const stateA = makeState();
+    const stateB = makeState();
+    const resource = makeDataOnlyResource();
+    expect(resolveCanvasImageSource(stateA, resource)).not.toBe(resolveCanvasImageSource(stateB, resource));
+  });
+
+  it('returns null when the resource carries neither pixels form', () => {
+    const state = makeState();
+    expect(resolveCanvasImageSource(state, createImageResource())).toBeNull();
+  });
+});

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);
+  });
+});