@flighthq/effects-canvas 0.3.0-next.906.07cea63 → 0.3.0

package/src/canvasGradientBevelEffect.test.ts

@@ -0,0 +1,180 @@
+import { createCanvasRenderState, createCanvasRenderTarget } from '@flighthq/scene2d-canvas/contract';
+import type { CanvasRenderTarget, CanvasRenderTargetPool, GradientBevelEffect } from '@flighthq/types/contract';
+
+import {
+  applyGradientBevelEffectToCanvas,
+  defaultCanvasGradientBevelEffectRunner,
+  registerCanvasGradientBevelEffect,
+} from './canvasGradientBevelEffect';
+import { getCanvasRenderEffectRunner } from './canvasRenderEffectRegistry';
+
+// Recipe assertions rather than pixels — see canvasBlendEffect.test.ts. Scratch targets are pre-seeded so
+// each pass is identifiable; the pool pops from the end, so the seed order reverses the acquire order.
+function seededPool(ids: readonly string[]): { pool: CanvasRenderTargetPool; targets: CanvasRenderTarget[] } {
+  const targets = ids.map((id) => {
+    const target = createCanvasRenderTarget(4, 4);
+    target.canvas.id = id;
+    return target;
+  });
+  return { pool: { free: [...targets].reverse(), inUse: [] }, targets };
+}
+
+function recordAll(log: string[], targets: readonly Readonly<CanvasRenderTarget>[]): void {
+  for (const target of targets) {
+    const context = target.context;
+    const into = target.canvas.id;
+    vi.spyOn(context, 'drawImage').mockImplementation(((image: CanvasImageSource) => {
+      log.push(`${(image as HTMLCanvasElement).id || 'canvas'}->${into}|${context.globalCompositeOperation}`);
+    }) as typeof context.drawImage);
+  }
+}
+
+function scene(): { source: CanvasRenderTarget; dest: CanvasRenderTarget } {
+  const source = createCanvasRenderTarget(4, 4);
+  const dest = createCanvasRenderTarget(4, 4);
+  source.canvas.id = 'source';
+  dest.canvas.id = 'dest';
+  return { source, dest };
+}
+
+const RAMP = { alphas: [1, 1], colors: [0xff0000, 0x0000ff], ratios: [0, 255] };
+
+function effectOf(over: Partial<GradientBevelEffect> = {}): GradientBevelEffect {
+  return { kind: 'GradientBevelEffect', ...RAMP, ...over } as GradientBevelEffect;
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+const SCRATCH = ['blurred', 'lit', 'shade', 'side', 'ramped', 'band'];
+
+describe('applyGradientBevelEffectToCanvas', () => {
+  it('builds both sides by knockout and accumulates the ramped result into the band', () => {
+    const { source, dest } = scene();
+    const { pool, targets } = seededPool(SCRATCH);
+    const log: string[] = [];
+    recordAll(log, [...targets, dest]);
+
+    applyGradientBevelEffectToCanvas(source, dest, pool, effectOf());
+
+    expect(log).toContain('shade->side|destination-out');
+    expect(log).toContain('lit->side|destination-out');
+    // Two ramp lookups, one per side, each composited into the band.
+    expect(log.filter((e) => e === 'ramped->band|source-over')).toHaveLength(2);
+  });
+
+  it('offsets the two copies in opposite directions', () => {
+    const { source, dest } = scene();
+    const { pool, targets } = seededPool(SCRATCH);
+    const offsets: Record<string, number[]> = {};
+    for (const target of [...targets, dest]) {
+      const context = target.context;
+      const into = target.canvas.id;
+      vi.spyOn(context, 'drawImage').mockImplementation(((image: CanvasImageSource, dx?: number, dy?: number) => {
+        offsets[`${(image as HTMLCanvasElement).id}->${into}`] = [dx ?? 0, dy ?? 0];
+      }) as typeof context.drawImage);
+    }
+
+    applyGradientBevelEffectToCanvas(source, dest, pool, effectOf({ angle: 0, distance: 6 }));
+
+    expect(offsets['blurred->lit'][0]).toBeCloseTo(-6);
+    expect(offsets['blurred->shade'][0]).toBeCloseTo(6);
+  });
+
+  it('clips the band inside the shape by default and outside it for outer', () => {
+    for (const [bevelType, operation] of [
+      [undefined, 'source->band|destination-in'],
+      ['outer', 'source->band|destination-out'],
+    ] as const) {
+      const { source, dest } = scene();
+      const { pool, targets } = seededPool(SCRATCH);
+      const log: string[] = [];
+      recordAll(log, [...targets, dest]);
+
+      applyGradientBevelEffectToCanvas(source, dest, pool, effectOf({ bevelType }));
+
+      expect(log).toContain(operation);
+      vi.restoreAllMocks();
+    }
+  });
+
+  it('reads the two sides from opposite ends of one ramp', () => {
+    // The signed ramp IS the effect: the shadow edge takes the ramp's low end and the highlight edge its
+    // high end. Both sides reading the same direction would give a bevel with two identically-coloured
+    // rims, which is a gradient glow with extra steps. Invisible to a drawImage log, because the lookup
+    // writes through putImageData — so this reads the buffers it wrote.
+    const { source, dest } = scene();
+    const { pool, targets } = seededPool(SCRATCH);
+    const side = targets[SCRATCH.indexOf('side')];
+    const ramped = targets[SCRATCH.indexOf('ramped')];
+
+    // A fully covered side, so each lookup lands at its extreme rather than both at the midpoint.
+    const covered = side.context.createImageData(4, 4);
+    for (let i = 0; i < 16; i++) covered.data[i * 4 + 3] = 255;
+    vi.spyOn(side.context, 'getImageData').mockReturnValue(covered);
+    const written: number[][] = [];
+    vi.spyOn(ramped.context, 'putImageData').mockImplementation(((image: ImageData) => {
+      written.push([image.data[0], image.data[1], image.data[2], image.data[3]]);
+    }) as typeof ramped.context.putImageData);
+
+    applyGradientBevelEffectToCanvas(source, dest, pool, effectOf());
+
+    // Red at ratio 0, blue at ratio 255: highlight reads blue, shadow reads red.
+    expect(written).toHaveLength(2);
+    expect(written[0]).toEqual([0, 0, 255, 255]);
+    expect(written[1]).toEqual([255, 0, 0, 255]);
+  });
+
+  it('draws the source before the band', () => {
+    const { source, dest } = scene();
+    const { pool, targets } = seededPool(SCRATCH);
+    const log: string[] = [];
+    recordAll(log, [...targets, dest]);
+
+    applyGradientBevelEffectToCanvas(source, dest, pool, effectOf());
+
+    expect(log.filter((e) => e.endsWith('->dest|source-over'))).toEqual([
+      'source->dest|source-over',
+      'band->dest|source-over',
+    ]);
+  });
+
+  it('returns every scratch target to the pool', () => {
+    const { source, dest } = scene();
+    const { pool } = seededPool(SCRATCH);
+
+    applyGradientBevelEffectToCanvas(source, dest, pool, effectOf());
+
+    expect(pool.inUse).toHaveLength(0);
+    expect(pool.free).toHaveLength(SCRATCH.length);
+  });
+
+  it('runs without a caller-supplied pool', () => {
+    const { source, dest } = scene();
+
+    expect(() => applyGradientBevelEffectToCanvas(source, dest, effectOf())).not.toThrow();
+  });
+});
+
+describe('defaultCanvasGradientBevelEffectRunner', () => {
+  it('applies the bevel through the pipeline context', () => {
+    const state = createCanvasRenderState(document.createElement('canvas'));
+    const { source, dest } = scene();
+    const { pool, targets } = seededPool(SCRATCH);
+    const log: string[] = [];
+    recordAll(log, [...targets, dest]);
+
+    defaultCanvasGradientBevelEffectRunner({ state, source, dest, pool }, effectOf());
+
+    expect(log).toContain('band->dest|source-over');
+  });
+});
+
+describe('registerCanvasGradientBevelEffect', () => {
+  it('registers the default runner under the GradientBevelEffect kind', () => {
+    const state = createCanvasRenderState(document.createElement('canvas'));
+    registerCanvasGradientBevelEffect(state);
+
+    expect(getCanvasRenderEffectRunner(state, 'GradientBevelEffect')).toBe(defaultCanvasGradientBevelEffectRunner);
+  });
+});

package/src/canvasGradientGlowEffect.test.ts

@@ -0,0 +1,125 @@
+import { createCanvasRenderState, createCanvasRenderTarget } from '@flighthq/scene2d-canvas/contract';
+import type { CanvasRenderTarget, CanvasRenderTargetPool, GradientGlowEffect } from '@flighthq/types/contract';
+
+import {
+  applyGradientGlowEffectToCanvas,
+  defaultCanvasGradientGlowEffectRunner,
+  registerCanvasGradientGlowEffect,
+} from './canvasGradientGlowEffect';
+import { getCanvasRenderEffectRunner } from './canvasRenderEffectRegistry';
+
+// Recipe assertions rather than pixels — see canvasBlendEffect.test.ts. Scratch targets are pre-seeded so
+// each pass is identifiable; the pool pops from the end, so the seed order reverses the acquire order.
+function seededPool(ids: readonly string[]): { pool: CanvasRenderTargetPool; targets: CanvasRenderTarget[] } {
+  const targets = ids.map((id) => {
+    const target = createCanvasRenderTarget(4, 4);
+    target.canvas.id = id;
+    return target;
+  });
+  return { pool: { free: [...targets].reverse(), inUse: [] }, targets };
+}
+
+function recordAll(log: string[], targets: readonly Readonly<CanvasRenderTarget>[]): void {
+  for (const target of targets) {
+    const context = target.context;
+    const into = target.canvas.id;
+    vi.spyOn(context, 'drawImage').mockImplementation(((image: CanvasImageSource) => {
+      log.push(`${(image as HTMLCanvasElement).id || 'canvas'}->${into}|${context.globalCompositeOperation}`);
+    }) as typeof context.drawImage);
+  }
+}
+
+function scene(): { source: CanvasRenderTarget; dest: CanvasRenderTarget } {
+  const source = createCanvasRenderTarget(4, 4);
+  const dest = createCanvasRenderTarget(4, 4);
+  source.canvas.id = 'source';
+  dest.canvas.id = 'dest';
+  return { source, dest };
+}
+
+const RAMP = { alphas: [1, 1], colors: [0xff0000, 0x0000ff], ratios: [0, 255] };
+
+function effectOf(over: Partial<GradientGlowEffect> = {}): GradientGlowEffect {
+  return { kind: 'GradientGlowEffect', ...RAMP, ...over } as GradientGlowEffect;
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+const SCRATCH = ['blurred', 'glow'];
+
+describe('applyGradientGlowEffectToCanvas', () => {
+  it('blurs the silhouette, then draws the glow under the source', () => {
+    const { source, dest } = scene();
+    const { pool, targets } = seededPool(SCRATCH);
+    const log: string[] = [];
+    recordAll(log, [...targets, dest]);
+
+    applyGradientGlowEffectToCanvas(source, dest, pool, effectOf());
+
+    // Glow first, source over it: this is an OUTER effect, so the shape occludes the glow beneath it.
+    // The ramp lookup between them writes via putImageData and so does not appear in a drawImage log.
+    expect(log).toEqual(['source->blurred|source-over', 'glow->dest|source-over', 'source->dest|source-over']);
+  });
+
+  it('drops the source when sourceMode is hide', () => {
+    const { source, dest } = scene();
+    const { pool, targets } = seededPool(SCRATCH);
+    const log: string[] = [];
+    recordAll(log, [...targets, dest]);
+
+    applyGradientGlowEffectToCanvas(source, dest, pool, effectOf({ sourceMode: 'hide' }));
+
+    expect(log.filter((e) => e.endsWith('->dest|source-over'))).toEqual(['glow->dest|source-over']);
+  });
+
+  it('draws the glow once per whole unit of strength', () => {
+    const { source, dest } = scene();
+    const { pool, targets } = seededPool(SCRATCH);
+    const log: string[] = [];
+    recordAll(log, [...targets, dest]);
+
+    applyGradientGlowEffectToCanvas(source, dest, pool, effectOf({ strength: 3 }));
+
+    expect(log.filter((e) => e.startsWith('glow->dest'))).toHaveLength(3);
+  });
+
+  it('returns both scratch targets to the pool', () => {
+    const { source, dest } = scene();
+    const { pool } = seededPool(SCRATCH);
+
+    applyGradientGlowEffectToCanvas(source, dest, pool, effectOf());
+
+    expect(pool.inUse).toHaveLength(0);
+    expect(pool.free).toHaveLength(SCRATCH.length);
+  });
+
+  it('runs without a caller-supplied pool', () => {
+    const { source, dest } = scene();
+
+    expect(() => applyGradientGlowEffectToCanvas(source, dest, effectOf())).not.toThrow();
+  });
+});
+
+describe('defaultCanvasGradientGlowEffectRunner', () => {
+  it('applies the glow through the pipeline context', () => {
+    const state = createCanvasRenderState(document.createElement('canvas'));
+    const { source, dest } = scene();
+    const { pool, targets } = seededPool(SCRATCH);
+    const log: string[] = [];
+    recordAll(log, [...targets, dest]);
+
+    defaultCanvasGradientGlowEffectRunner({ state, source, dest, pool }, effectOf());
+
+    expect(log).toContain('glow->dest|source-over');
+  });
+});
+
+describe('registerCanvasGradientGlowEffect', () => {
+  it('registers the default runner under the GradientGlowEffect kind', () => {
+    const state = createCanvasRenderState(document.createElement('canvas'));
+    registerCanvasGradientGlowEffect(state);
+
+    expect(getCanvasRenderEffectRunner(state, 'GradientGlowEffect')).toBe(defaultCanvasGradientGlowEffectRunner);
+  });
+});

package/src/canvasGradientRamp.test.ts

@@ -0,0 +1,98 @@
+import { createCanvasRenderTarget } from '@flighthq/scene2d-canvas/contract';
+
+import { applyCanvasGradientRampLookup, buildCanvasGradientRamp } from './canvasGradientRamp';
+
+function entry(ramp: Readonly<Uint8ClampedArray>, index: number): number[] {
+  return [ramp[index * 4], ramp[index * 4 + 1], ramp[index * 4 + 2], ramp[index * 4 + 3]];
+}
+
+describe('applyCanvasGradientRampLookup', () => {
+  // jsdom's 2D context does not rasterize, but getImageData/putImageData round-trip a real buffer, so a
+  // per-pixel pass IS verifiable here in a way a drawImage recipe is not. Seed the source buffer, run the
+  // pass, read the destination back.
+  function runLookup(alphas: readonly number[], ramp: Uint8ClampedArray, bias?: number, scale?: number): number[][] {
+    const source = createCanvasRenderTarget(alphas.length, 1);
+    const dest = createCanvasRenderTarget(alphas.length, 1);
+    const seeded = source.context.createImageData(alphas.length, 1);
+    for (let i = 0; i < alphas.length; i++) seeded.data[i * 4 + 3] = alphas[i];
+    vi.spyOn(source.context, 'getImageData').mockReturnValue(seeded);
+    let written: ImageData | null = null;
+    vi.spyOn(dest.context, 'putImageData').mockImplementation(((image: ImageData) => {
+      written = image;
+    }) as typeof dest.context.putImageData);
+
+    applyCanvasGradientRampLookup(dest, source, ramp, bias, scale);
+
+    const out = written as ImageData | null;
+    const result: number[][] = [];
+    for (let i = 0; i < alphas.length; i++) {
+      result.push([out!.data[i * 4], out!.data[i * 4 + 1], out!.data[i * 4 + 2], out!.data[i * 4 + 3]]);
+    }
+    vi.restoreAllMocks();
+    return result;
+  }
+
+  it('replaces each pixel with the ramp entry its alpha indexes', () => {
+    const ramp = buildCanvasGradientRamp([0x000000, 0xff0000], [0, 1], [0, 255]);
+
+    // Alpha 0 reads the ramp's first entry, alpha 255 its last — the index is the VALUE at the pixel,
+    // which is what makes this a lookup rather than a spatial gradient.
+    expect(runLookup([0, 255], ramp)).toEqual([entry(ramp, 0), entry(ramp, 255)]);
+  });
+
+  it('maps through bias and scale so a signed band can read one ramp from its midpoint', () => {
+    const ramp = buildCanvasGradientRamp([0x000000, 0xffffff], [1, 1], [0, 255]);
+
+    // The bevel's two halves: highlight runs upward from the midpoint, shadow downward. A full-strength
+    // pixel therefore lands at opposite ends of the same ramp depending on which side built it.
+    expect(runLookup([255], ramp, 0.5, 0.5)).toEqual([entry(ramp, 255)]);
+    expect(runLookup([255], ramp, 0.5, -0.5)).toEqual([entry(ramp, 0)]);
+    expect(runLookup([0], ramp, 0.5, 0.5)).toEqual([entry(ramp, 128)]);
+  });
+
+  it('clamps an index the bias and scale push outside the ramp', () => {
+    const ramp = buildCanvasGradientRamp([0x102030, 0x405060], [1, 1], [0, 255]);
+
+    expect(runLookup([255], ramp, 2, 1)).toEqual([entry(ramp, 255)]);
+    expect(runLookup([255], ramp, -2, 1)).toEqual([entry(ramp, 0)]);
+  });
+});
+
+describe('buildCanvasGradientRamp', () => {
+  it('interpolates linearly between stops', () => {
+    const ramp = buildCanvasGradientRamp([0x000000, 0xffffff], [0, 1], [0, 255]);
+
+    expect(entry(ramp, 0)).toEqual([0, 0, 0, 0]);
+    expect(entry(ramp, 255)).toEqual([255, 255, 255, 255]);
+    // Midpoint is the average of both ends, per channel and in alpha.
+    const mid = entry(ramp, 128);
+    expect(mid[0]).toBeGreaterThan(120);
+    expect(mid[0]).toBeLessThan(136);
+    expect(mid[3]).toBeGreaterThan(120);
+    expect(mid[3]).toBeLessThan(136);
+  });
+
+  it('extends the first and last stop to the ends of the ramp', () => {
+    // Stops covering only the middle: everything below the first ratio holds the first colour and
+    // everything above the last holds the last, rather than fading to transparent black.
+    const ramp = buildCanvasGradientRamp([0xff0000, 0x00ff00], [1, 1], [64, 192]);
+
+    expect(entry(ramp, 0)).toEqual([255, 0, 0, 255]);
+    expect(entry(ramp, 255)).toEqual([0, 255, 0, 255]);
+  });
+
+  it('returns a fully transparent ramp when there are no stops', () => {
+    const ramp = buildCanvasGradientRamp([], [], []);
+
+    expect(ramp).toHaveLength(256 * 4);
+    expect(entry(ramp, 0)).toEqual([0, 0, 0, 0]);
+    expect(entry(ramp, 255)).toEqual([0, 0, 0, 0]);
+  });
+
+  it('takes the later stop when two share a ratio rather than dividing by zero', () => {
+    const ramp = buildCanvasGradientRamp([0xff0000, 0x00ff00, 0x0000ff], [1, 1, 1], [0, 128, 128]);
+
+    expect(entry(ramp, 200).every((c) => Number.isFinite(c))).toBe(true);
+    expect(entry(ramp, 255)).toEqual([0, 0, 255, 255]);
+  });
+});

package/src/canvasInnerGlowEffect.test.ts

@@ -0,0 +1,152 @@
+import { createCanvasRenderState, createCanvasRenderTarget } from '@flighthq/scene2d-canvas/contract';
+import type { CanvasRenderTarget, CanvasRenderTargetPool, InnerGlowEffect } from '@flighthq/types/contract';
+
+import {
+  applyInnerGlowEffectToCanvas,
+  defaultCanvasInnerGlowEffectRunner,
+  registerCanvasInnerGlowEffect,
+} from './canvasInnerGlowEffect';
+import { getCanvasRenderEffectRunner } from './canvasRenderEffectRegistry';
+
+// Recipe assertions rather than pixels, for the reason in canvasBlendEffect.test.ts: jsdom's 2D context
+// rasterizes nothing. The scratch targets are pre-seeded into the pool so each one is identifiable by id,
+// which turns "the right multi-pass recipe ran" into an assertion instead of a hope. Pool acquisition
+// pops from the end, so the seed order is the reverse of the acquisition order.
+function seededPool(ids: readonly string[]): { pool: CanvasRenderTargetPool; targets: CanvasRenderTarget[] } {
+  const targets = ids.map((id) => {
+    const target = createCanvasRenderTarget(4, 4);
+    target.canvas.id = id;
+    return target;
+  });
+  return { pool: { free: [...targets].reverse(), inUse: [] }, targets };
+}
+
+// One transcript across every target, so ordering between passes is visible and not just within one.
+function recordAll(log: string[], targets: readonly Readonly<CanvasRenderTarget>[]): void {
+  for (const target of targets) {
+    const context = target.context;
+    const into = target.canvas.id;
+    vi.spyOn(context, 'drawImage').mockImplementation(((image: CanvasImageSource, dx?: number, dy?: number) => {
+      const from = (image as HTMLCanvasElement).id || 'canvas';
+      log.push(`${from}->${into}|${context.globalCompositeOperation}|${dx ?? 0},${dy ?? 0}`);
+    }) as typeof context.drawImage);
+    vi.spyOn(context, 'fillRect').mockImplementation((() => {
+      log.push(`fill->${into}|${context.globalCompositeOperation}`);
+    }) as typeof context.fillRect);
+  }
+}
+
+function scene(): { source: CanvasRenderTarget; dest: CanvasRenderTarget } {
+  const source = createCanvasRenderTarget(4, 4);
+  const dest = createCanvasRenderTarget(4, 4);
+  source.canvas.id = 'source';
+  dest.canvas.id = 'dest';
+  return { source, dest };
+}
+
+function innerGlow(over: Partial<InnerGlowEffect> = {}): InnerGlowEffect {
+  return { kind: 'InnerGlowEffect', ...over } as InnerGlowEffect;
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('applyInnerGlowEffectToCanvas', () => {
+  it('inverts the silhouette, blurs it, clips it back to the source, and draws it over the source', () => {
+    const { source, dest } = scene();
+    const { pool, targets } = seededPool(['mask', 'glow']);
+    const log: string[] = [];
+    recordAll(log, [...targets, dest]);
+
+    applyInnerGlowEffectToCanvas(source, dest, pool, innerGlow());
+
+    expect(log).toEqual([
+      // Inversion: fill the whole target with the tint, then knock the silhouette out of it.
+      'fill->mask|source-over',
+      'source->mask|destination-out|0,0',
+      // Blur the inversion so it carries inward across the boundary.
+      'mask->glow|source-over|0,0',
+      // Clip back to the shape, discarding everything that never made it inside.
+      'source->glow|destination-in|0,0',
+      // Source first, glow over it — an inner effect sits ON the shape.
+      'source->dest|source-over|0,0',
+      'glow->dest|source-over|0,0',
+    ]);
+  });
+
+  it('drops the source and keeps only the glow when sourceMode is hide', () => {
+    const { source, dest } = scene();
+    const { pool, targets } = seededPool(['mask', 'glow']);
+    const log: string[] = [];
+    recordAll(log, [...targets, dest]);
+
+    applyInnerGlowEffectToCanvas(source, dest, pool, innerGlow({ sourceMode: 'hide' }));
+
+    expect(log.filter((entry) => entry.endsWith('->dest|source-over|0,0'))).toEqual(['glow->dest|source-over|0,0']);
+  });
+
+  it('draws the glow once per whole unit of strength', () => {
+    const { source, dest } = scene();
+    const { pool, targets } = seededPool(['mask', 'glow']);
+    const log: string[] = [];
+    recordAll(log, [...targets, dest]);
+
+    applyInnerGlowEffectToCanvas(source, dest, pool, innerGlow({ strength: 3 }));
+
+    expect(log.filter((entry) => entry.startsWith('glow->dest'))).toHaveLength(3);
+  });
+
+  it('still draws the glow once for a fractional strength below one', () => {
+    // Math.floor would give zero passes and silently drop the effect; the floor is clamped to one so a
+    // partial strength weakens the tint rather than removing the glow.
+    const { source, dest } = scene();
+    const { pool, targets } = seededPool(['mask', 'glow']);
+    const log: string[] = [];
+    recordAll(log, [...targets, dest]);
+
+    applyInnerGlowEffectToCanvas(source, dest, pool, innerGlow({ strength: 0.5 }));
+
+    expect(log.filter((entry) => entry.startsWith('glow->dest'))).toHaveLength(1);
+  });
+
+  it('returns both scratch targets to the pool', () => {
+    // Every acquire must be matched by a release, or the pool grows a target per frame forever.
+    const { source, dest } = scene();
+    const { pool } = seededPool(['mask', 'glow']);
+
+    applyInnerGlowEffectToCanvas(source, dest, pool, innerGlow());
+
+    expect(pool.inUse).toHaveLength(0);
+    expect(pool.free).toHaveLength(2);
+  });
+
+  it('runs without a caller-supplied pool', () => {
+    const { source, dest } = scene();
+
+    expect(() => applyInnerGlowEffectToCanvas(source, dest, innerGlow())).not.toThrow();
+  });
+});
+
+describe('defaultCanvasInnerGlowEffectRunner', () => {
+  it('applies the glow through the pipeline context', () => {
+    const state = createCanvasRenderState(document.createElement('canvas'));
+    const { source, dest } = scene();
+    const { pool, targets } = seededPool(['mask', 'glow']);
+    const log: string[] = [];
+    recordAll(log, [...targets, dest]);
+
+    defaultCanvasInnerGlowEffectRunner({ state, source, dest, pool }, innerGlow());
+
+    expect(log).toContain('source->glow|destination-in|0,0');
+  });
+});
+
+describe('registerCanvasInnerGlowEffect', () => {
+  it('registers the default runner under the InnerGlowEffect kind', () => {
+    const state = createCanvasRenderState(document.createElement('canvas'));
+    registerCanvasInnerGlowEffect(state);
+
+    expect(getCanvasRenderEffectRunner(state, 'InnerGlowEffect')).toBe(defaultCanvasInnerGlowEffectRunner);
+  });
+});