@flighthq/displayobject-dom 0.1.0

package/src/domCache.test.ts

@@ -0,0 +1,93 @@
+import { createDisplayObject } from '@flighthq/displayobject';
+import { createMatrix } from '@flighthq/geometry';
+import { createRenderCache, RenderCacheKind, useRenderCache } from '@flighthq/render';
+
+import {
+  defaultDomRenderCacheRenderer,
+  enableDomRenderCache,
+  ensureDomRenderCacheTarget,
+  getDomRenderCacheTarget,
+  releaseDomRenderCache,
+} from './domCache';
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+
+function makeState() {
+  return createDomRenderState(document.createElement('div'));
+}
+
+function makeCacheNode(source: unknown): any {
+  return { source, kind: RenderCacheKind, transform2D: createMatrix(), alpha: 1, blendMode: null };
+}
+
+describe('defaultDomRenderCacheRenderer', () => {
+  it('is a no-op when no cache is attached to the source', () => {
+    const state = makeState();
+    expect(() => defaultDomRenderCacheRenderer.submit(state, makeCacheNode(createDisplayObject()))).not.toThrow();
+  });
+
+  it('places the target canvas attached to the source node', () => {
+    const state = makeState();
+    const obj = createDisplayObject();
+    const cache = createRenderCache();
+    useRenderCache(state, obj, cache);
+    const target = ensureDomRenderCacheTarget(state, cache, 16, 16);
+    defaultDomRenderCacheRenderer.submit(state, makeCacheNode(obj));
+    expect(target.canvas.style.transform).not.toBe('');
+  });
+});
+
+describe('enableDomRenderCache', () => {
+  it('registers the renderer for the render cache kind', () => {
+    const state = makeState();
+    enableDomRenderCache(state);
+    expect(getDomRenderStateRuntime(state).rendererMap.get(RenderCacheKind)).toBe(defaultDomRenderCacheRenderer);
+  });
+});
+
+describe('ensureDomRenderCacheTarget', () => {
+  it('creates a target sized to the request', () => {
+    const state = makeState();
+    const target = ensureDomRenderCacheTarget(state, createRenderCache(), 64, 32);
+    expect(target.width).toBe(64);
+    expect(target.height).toBe(32);
+  });
+
+  it('reuses and resizes the same target on subsequent calls', () => {
+    const state = makeState();
+    const cache = createRenderCache();
+    const first = ensureDomRenderCacheTarget(state, cache, 64, 32);
+    const second = ensureDomRenderCacheTarget(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 = makeState();
+    const stateB = makeState();
+    const cache = createRenderCache();
+    expect(ensureDomRenderCacheTarget(stateA, cache, 8, 8)).not.toBe(ensureDomRenderCacheTarget(stateB, cache, 8, 8));
+  });
+});
+
+describe('getDomRenderCacheTarget', () => {
+  it('returns null before a target is allocated', () => {
+    expect(getDomRenderCacheTarget(makeState(), createRenderCache())).toBeNull();
+  });
+
+  it('returns the allocated target', () => {
+    const state = makeState();
+    const cache = createRenderCache();
+    const target = ensureDomRenderCacheTarget(state, cache, 8, 8);
+    expect(getDomRenderCacheTarget(state, cache)).toBe(target);
+  });
+});
+
+describe('releaseDomRenderCache', () => {
+  it('drops the target for the cache', () => {
+    const state = makeState();
+    const cache = createRenderCache();
+    ensureDomRenderCacheTarget(state, cache, 8, 8);
+    releaseDomRenderCache(state, cache);
+    expect(getDomRenderCacheTarget(state, cache)).toBeNull();
+  });
+});

package/src/domClip.test.ts

@@ -0,0 +1,12 @@
+import { enableDomClipSupport } from './domClip';
+import { createDomRenderState } from './domRenderState';
+
+describe('enableDomClipSupport', () => {
+  it('sets DOM clip hooks on the render state', () => {
+    const state = createDomRenderState(document.createElement('div'));
+
+    enableDomClipSupport(state);
+
+    expect(state.displayObjectClipHooks).not.toBeNull();
+  });
+});

package/src/domClipContours.test.ts

@@ -0,0 +1,62 @@
+import { createMatrix } from '@flighthq/geometry';
+import type { DomClipContourEntry } from '@flighthq/types';
+
+import { buildDomContourClipPath, pushDomClipContours } from './domClipContours';
+
+const identityMap = (x: number, y: number): readonly [number, number] => [x, y];
+
+describe('buildDomContourClipPath', () => {
+  it('emits a polygon() for a single contour', () => {
+    const entry: DomClipContourEntry = {
+      kind: 'contour',
+      contours: [[0, 0, 10, 0, 10, 10, 0, 10]],
+      winding: 'nonZero',
+    };
+    expect(buildDomContourClipPath(entry, identityMap)).toBe('polygon(0px 0px, 10px 0px, 10px 10px, 0px 10px)');
+  });
+
+  it('emits a path() with fill-rule for multiple contours', () => {
+    const entry: DomClipContourEntry = {
+      kind: 'contour',
+      contours: [
+        [0, 0, 10, 0, 10, 10],
+        [2, 2, 4, 2, 4, 4],
+      ],
+      winding: 'evenOdd',
+    };
+    const result = buildDomContourClipPath(entry, identityMap);
+    expect(result.startsWith("path('evenodd', '")).toBe(true);
+    expect(result).toContain('M0 0 L10 0 L10 10 Z');
+    expect(result).toContain('M2 2 L4 2 L4 4 Z');
+  });
+
+  it('maps points through the provided mapper', () => {
+    const entry: DomClipContourEntry = { kind: 'contour', contours: [[0, 0, 2, 0, 2, 2]], winding: 'nonZero' };
+    const shift = (x: number, y: number): readonly [number, number] => [x + 5, y + 1];
+    expect(buildDomContourClipPath(entry, shift)).toBe('polygon(5px 1px, 7px 1px, 7px 3px)');
+  });
+});
+
+describe('pushDomClipContours', () => {
+  it('pushes a contour entry with points transformed to stage space', () => {
+    const stack: DomClipContourEntry[] = [];
+    const transform = createMatrix();
+    transform.tx = 100;
+    transform.ty = 50;
+    pushDomClipContours(stack, [[0, 0, 10, 0, 10, 10]], 'nonZero', transform);
+    expect(stack.length).toBe(1);
+    expect(stack[0].kind).toBe('contour');
+    expect(stack[0].winding).toBe('nonZero');
+    expect(stack[0].contours).toEqual([[100, 50, 110, 50, 110, 60]]);
+  });
+
+  it('applies the full affine transform to each point', () => {
+    const stack: DomClipContourEntry[] = [];
+    const transform = createMatrix();
+    transform.a = 2;
+    transform.d = 3;
+    pushDomClipContours(stack, [[1, 1]], 'evenOdd', transform);
+    expect(stack[0].contours).toEqual([[2, 3]]);
+    expect(stack[0].winding).toBe('evenOdd');
+  });
+});

package/src/domClipRectangle.test.ts

@@ -0,0 +1,81 @@
+import { createDisplayObject } from '@flighthq/displayobject';
+import { createMatrix, createRectangle } from '@flighthq/geometry';
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import type { DomRenderState, DomStageRectangle } from '@flighthq/types';
+
+import {
+  applyDomClipRectangles,
+  createDomStageRectangle,
+  pushDomClipRectangle,
+  setDomClipHooks,
+} from './domClipRectangle';
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+
+function makeState(): DomRenderState {
+  return createDomRenderState(document.createElement('div'));
+}
+
+describe('applyDomClipRectangles', () => {
+  it('clears clip styles when no rectangles are active', () => {
+    const state = makeState();
+    const source = createDisplayObject();
+    const data = getOrCreateRenderProxy2D(state, source);
+    const element = document.createElement('div');
+    element.style.clipPath = 'inset(0)';
+    getDomRenderStateRuntime(state).domElementMap.set(data, element);
+
+    applyDomClipRectangles(state, data, []);
+
+    expect(element.style.clipPath).toBe('');
+  });
+
+  it('sets a local polygon clip path from intersected stage rectangles', () => {
+    const state = makeState();
+    const source = createDisplayObject();
+    const data = getOrCreateRenderProxy2D(state, source);
+    const element = document.createElement('div');
+    element.style.transform = 'matrix(1,0,0,1,10,20)';
+    getDomRenderStateRuntime(state).domElementMap.set(data, element);
+
+    applyDomClipRectangles(state, data, [
+      { bottom: 100, left: 0, right: 100, top: 0 },
+      { bottom: 90, left: 20, right: 80, top: 30 },
+    ]);
+
+    expect(element.style.clipPath).toBe('polygon(10px 10px, 70px 10px, 70px 70px, 10px 70px)');
+  });
+});
+
+describe('createDomStageRectangle', () => {
+  it('transforms a local rectangle into a stage-space AABB', () => {
+    const rect = createDomStageRectangle(createRectangle(10, 20, 30, 40), createMatrix(1, 0, 0, 1, 5, 6));
+
+    expect(rect).toEqual({ bottom: 66, left: 15, right: 45, top: 26 });
+  });
+});
+
+describe('pushDomClipRectangle', () => {
+  it('pushes a transformed stage rectangle', () => {
+    const rectangles: DomStageRectangle[] = [];
+
+    pushDomClipRectangle(rectangles, createRectangle(0, 0, 10, 20), createMatrix(1, 0, 0, 1, 2, 3));
+
+    expect(rectangles).toEqual([{ bottom: 23, left: 2, right: 12, top: 3 }]);
+  });
+});
+
+describe('setDomClipHooks', () => {
+  it('sets DOM clip hooks on the render state', () => {
+    const state = makeState();
+    setDomClipHooks(state);
+    expect(getDomRenderStateRuntime(state).domClipHooks).not.toBeNull();
+  });
+
+  it('is idempotent', () => {
+    const state = makeState();
+    setDomClipHooks(state);
+    const first = getDomRenderStateRuntime(state).domClipHooks;
+    setDomClipHooks(state);
+    expect(getDomRenderStateRuntime(state).domClipHooks).toBe(first);
+  });
+});

package/src/domDisplayObject.test.ts

@@ -0,0 +1,236 @@
+import { createDisplayObject, setDisplayObjectClip } from '@flighthq/displayobject';
+import { createRectangle } from '@flighthq/geometry';
+import { addNodeChild, invalidateNodeLocalTransform } from '@flighthq/node';
+import { getOrCreateRenderProxy2D, prepareDisplayObjectRender, registerRenderer } from '@flighthq/render';
+import type { ClipRegion, Rectangle } from '@flighthq/types';
+import { DisplayObjectKind } from '@flighthq/types';
+
+import { enableDomClipSupport } from './domClip';
+import { defaultDomDisplayObjectRenderer, drawDomDisplayObject, renderDomDisplayObject } from './domDisplayObject';
+import { createDomRenderState, getDomRenderStateRuntime } from './domRenderState';
+
+function makeRectangleClip(rect: Rectangle): ClipRegion {
+  return { contours: null, rect, version: 0, winding: 'nonZero' };
+}
+
+function makeState() {
+  const container = document.createElement('div');
+  return createDomRenderState(container);
+}
+
+// Sets up a node with a mock renderer that registers a specific element without going
+// through registerRenderer (which would change rendererMapId and overwrite other nodes).
+function setupRenderedNode(
+  state: ReturnType<typeof makeState>,
+  obj: ReturnType<typeof createDisplayObject>,
+  el: HTMLElement,
+) {
+  const data = getOrCreateRenderProxy2D(state, obj);
+  data.visible = true;
+  data.alpha = 1;
+  data.transform2D.a = 1;
+  data.transform2D.d = 1;
+  data.renderer = {
+    createData: vi.fn(),
+    submit: vi.fn().mockImplementation(() => {
+      getDomRenderStateRuntime(state).domCurrentElement = el;
+    }),
+  };
+  data.rendererMapId = getDomRenderStateRuntime(state).rendererMapId;
+  return data;
+}
+
+describe('defaultDomDisplayObjectRenderer', () => {
+  it('exposes a createData and submit function', () => {
+    expect(typeof defaultDomDisplayObjectRenderer.createData).toBe('function');
+    expect(typeof defaultDomDisplayObjectRenderer.submit).toBe('function');
+  });
+});
+
+describe('drawDomDisplayObject', () => {
+  it('does not throw for any render proxy', () => {
+    const state = makeState();
+    const proxy = getOrCreateRenderProxy2D(state, createDisplayObject());
+    expect(() => drawDomDisplayObject(state, proxy)).not.toThrow();
+  });
+});
+
+describe('renderDomDisplayObject', () => {
+  it('does not throw for a simple visible object', () => {
+    const state = makeState();
+    const obj = createDisplayObject();
+    expect(() => renderDomDisplayObject(state, obj)).not.toThrow();
+  });
+
+  it('removes foreign elements from the container on first render', () => {
+    const state = makeState();
+    const foreign = document.createElement('span');
+    state.element.appendChild(foreign);
+
+    const obj = createDisplayObject();
+    renderDomDisplayObject(state, obj);
+
+    expect(state.element.contains(foreign)).toBe(false);
+  });
+
+  it('skips rendering when the object has zero scale', () => {
+    const state = makeState();
+    const obj = createDisplayObject();
+    obj.scaleX = 0;
+    obj.scaleY = 0;
+    invalidateNodeLocalTransform(obj);
+
+    const renderer = { createData: vi.fn(), submit: vi.fn() };
+    registerRenderer(state, DisplayObjectKind, renderer);
+    prepareDisplayObjectRender(state, obj);
+    renderDomDisplayObject(state, obj);
+
+    expect(renderer.submit).not.toHaveBeenCalled();
+  });
+
+  it('skips rendering invisible objects', () => {
+    const state = makeState();
+    const obj = createDisplayObject();
+    obj.visible = false;
+
+    const renderer = { createData: vi.fn(), submit: vi.fn() };
+    registerRenderer(state, DisplayObjectKind, renderer);
+    prepareDisplayObjectRender(state, obj);
+    renderDomDisplayObject(state, obj);
+
+    expect(renderer.submit).not.toHaveBeenCalled();
+  });
+
+  it('skips objects with zero alpha', () => {
+    const state = makeState();
+    const obj = createDisplayObject();
+    obj.alpha = 0;
+
+    const renderer = { createData: vi.fn(), submit: vi.fn() };
+    registerRenderer(state, DisplayObjectKind, renderer);
+    prepareDisplayObjectRender(state, obj);
+    renderDomDisplayObject(state, obj);
+
+    expect(renderer.submit).not.toHaveBeenCalled();
+  });
+
+  it('calls draw when the object is visible and has a renderer', () => {
+    const state = makeState();
+    const obj = createDisplayObject();
+    const el = document.createElement('div');
+    const data = setupRenderedNode(state, obj, el);
+
+    renderDomDisplayObject(state, obj);
+
+    expect(data.renderer!.submit).toHaveBeenCalledOnce();
+  });
+
+  it('traverses children', () => {
+    const state = makeState();
+    const parent = createDisplayObject();
+    const child = createDisplayObject();
+    addNodeChild(parent, child);
+
+    const childEl = document.createElement('div');
+    const childData = setupRenderedNode(state, child, childEl);
+
+    prepareDisplayObjectRender(state, parent);
+    renderDomDisplayObject(state, parent);
+
+    expect(childData.renderer!.submit).toHaveBeenCalled();
+  });
+
+  it('skips draw on fully static nodes after first render', () => {
+    const state = makeState();
+    const obj = createDisplayObject();
+    const el = document.createElement('div');
+    const data = setupRenderedNode(state, obj, el);
+
+    // First render: node is new, draw must be called.
+    renderDomDisplayObject(state, obj);
+    expect(data.renderer!.submit).toHaveBeenCalledTimes(1);
+
+    // Second render: nothing changed, draw should be skipped.
+    renderDomDisplayObject(state, obj);
+    expect(data.renderer!.submit).toHaveBeenCalledTimes(1);
+  });
+
+  it('places rendered elements in scene-graph order', () => {
+    const state = makeState();
+    const parent = createDisplayObject();
+    const childA = createDisplayObject();
+    const childB = createDisplayObject();
+    addNodeChild(parent, childA);
+    addNodeChild(parent, childB);
+
+    const elA = document.createElement('div');
+    const elB = document.createElement('span');
+    setupRenderedNode(state, childA, elA);
+    setupRenderedNode(state, childB, elB);
+
+    prepareDisplayObjectRender(state, parent);
+    renderDomDisplayObject(state, parent);
+
+    const children = Array.from(state.element.children);
+    expect(children.indexOf(elA)).toBeLessThan(children.indexOf(elB));
+  });
+
+  it('reconciles DOM when a child is removed', () => {
+    const state = makeState();
+    const parent = createDisplayObject();
+    const childA = createDisplayObject();
+    const childB = createDisplayObject();
+    addNodeChild(parent, childA);
+    addNodeChild(parent, childB);
+
+    const elA = document.createElement('div');
+    const elB = document.createElement('span');
+    setupRenderedNode(state, childA, elA);
+    const dataB = setupRenderedNode(state, childB, elB);
+
+    prepareDisplayObjectRender(state, parent);
+    renderDomDisplayObject(state, parent);
+    expect(state.element.children.length).toBe(2);
+
+    dataB.visible = false;
+
+    renderDomDisplayObject(state, parent);
+
+    expect(state.element.contains(elA)).toBe(true);
+    expect(state.element.contains(elB)).toBe(false);
+  });
+
+  it('applies an inherited rectangle clip to child elements', () => {
+    const state = makeState();
+    enableDomClipSupport(state);
+    const parent = createDisplayObject();
+    setDisplayObjectClip(parent, makeRectangleClip(createRectangle(10, 20, 30, 40)));
+    const child = createDisplayObject();
+    addNodeChild(parent, child);
+
+    prepareDisplayObjectRender(state, parent);
+    const el = document.createElement('div');
+    setupRenderedNode(state, child, el);
+
+    renderDomDisplayObject(state, parent);
+
+    expect(el.style.clipPath).toBe('polygon(10px 20px, 40px 20px, 40px 60px, 10px 60px)');
+  });
+
+  it('applies a rectangle clip set directly on the clipping node to its content', () => {
+    const state = makeState();
+    enableDomClipSupport(state);
+    const parent = createDisplayObject();
+    setDisplayObjectClip(parent, makeRectangleClip(createRectangle(5, 6, 20, 30)));
+    const content = createDisplayObject();
+    addNodeChild(parent, content);
+
+    const el = document.createElement('div');
+    setupRenderedNode(state, content, el);
+
+    prepareDisplayObjectRender(state, parent);
+    renderDomDisplayObject(state, parent);
+
+    expect(el.style.clipPath).toBe('polygon(5px 6px, 25px 6px, 25px 36px, 5px 36px)');
+  });
+});

package/src/domFontSource.test.ts

@@ -0,0 +1,30 @@
+import { getDomFontAscentCached, invalidateDomFontResource, setDomFontAscentCached } from './domFontSource';
+
+describe('getDomFontAscentCached', () => {
+  it('returns undefined for an unknown font key', () => {
+    expect(getDomFontAscentCached('12px "UnknownFont-x9z"')).toBeUndefined();
+  });
+});
+
+describe('invalidateDomFontResource', () => {
+  it('removes cache entries that match the font family', () => {
+    setDomFontAscentCached("16px 'MyFont'", 14);
+    setDomFontAscentCached('16px "MyFont"', 14);
+    invalidateDomFontResource({ family: 'MyFont', face: null });
+    expect(getDomFontAscentCached("16px 'MyFont'")).toBeUndefined();
+    expect(getDomFontAscentCached('16px "MyFont"')).toBeUndefined();
+  });
+
+  it('does not remove cache entries for other families', () => {
+    setDomFontAscentCached("16px 'OtherFont'", 13);
+    invalidateDomFontResource({ family: 'MyFont', face: null });
+    expect(getDomFontAscentCached("16px 'OtherFont'")).toBe(13);
+  });
+});
+
+describe('setDomFontAscentCached', () => {
+  it('stores and retrieves an ascent value', () => {
+    setDomFontAscentCached('12px "CacheTestFont"', 10);
+    expect(getDomFontAscentCached('12px "CacheTestFont"')).toBe(10);
+  });
+});

package/src/domMaterials.test.ts

@@ -0,0 +1,111 @@
+import { BlendMode } from '@flighthq/types';
+
+import { applyDomBlendMode, enableDomBlendModeSupport, getDomBlendModeFidelity } from './domMaterials';
+import { createDomRenderState } from './domRenderState';
+
+describe('applyDomBlendMode', () => {
+  let el: HTMLElement;
+
+  beforeEach(() => {
+    el = document.createElement('div');
+  });
+
+  it('sets mixBlendMode to "screen" for BlendMode.Add', () => {
+    applyDomBlendMode(el, BlendMode.Add);
+    expect(el.style.mixBlendMode).toBe('screen');
+  });
+
+  it('sets mixBlendMode to "darken" for BlendMode.Darken', () => {
+    applyDomBlendMode(el, BlendMode.Darken);
+    expect(el.style.mixBlendMode).toBe('darken');
+  });
+
+  it('sets mixBlendMode to "difference" for BlendMode.Difference', () => {
+    applyDomBlendMode(el, BlendMode.Difference);
+    expect(el.style.mixBlendMode).toBe('difference');
+  });
+
+  it('sets mixBlendMode to "hard-light" for BlendMode.Hardlight', () => {
+    applyDomBlendMode(el, BlendMode.Hardlight);
+    expect(el.style.mixBlendMode).toBe('hard-light');
+  });
+
+  it('sets mixBlendMode to "lighten" for BlendMode.Lighten', () => {
+    applyDomBlendMode(el, BlendMode.Lighten);
+    expect(el.style.mixBlendMode).toBe('lighten');
+  });
+
+  it('sets mixBlendMode to "multiply" for BlendMode.Multiply', () => {
+    applyDomBlendMode(el, BlendMode.Multiply);
+    expect(el.style.mixBlendMode).toBe('multiply');
+  });
+
+  it('sets mixBlendMode to "overlay" for BlendMode.Overlay', () => {
+    applyDomBlendMode(el, BlendMode.Overlay);
+    expect(el.style.mixBlendMode).toBe('overlay');
+  });
+
+  it('sets mixBlendMode to "screen" for BlendMode.Screen', () => {
+    applyDomBlendMode(el, BlendMode.Screen);
+    expect(el.style.mixBlendMode).toBe('screen');
+  });
+
+  it('clears mixBlendMode for null (default)', () => {
+    el.style.mixBlendMode = 'multiply';
+    applyDomBlendMode(el, null);
+    expect(el.style.mixBlendMode).toBe('');
+  });
+
+  it('clears mixBlendMode for BlendMode.Normal', () => {
+    el.style.mixBlendMode = 'multiply';
+    applyDomBlendMode(el, BlendMode.Normal);
+    expect(el.style.mixBlendMode).toBe('');
+  });
+});
+
+describe('enableDomBlendModeSupport', () => {
+  it('wires applyBlendMode onto the state', () => {
+    const state = createDomRenderState(document.createElement('div'));
+    expect(state.applyBlendMode).toBeNull();
+    enableDomBlendModeSupport(state);
+    expect(state.applyBlendMode).not.toBeNull();
+  });
+
+  it('causes blend modes to be applied to elements', () => {
+    const state = createDomRenderState(document.createElement('div'));
+    enableDomBlendModeSupport(state);
+    const el = document.createElement('div');
+    state.applyBlendMode!(el, BlendMode.Multiply);
+    expect(el.style.mixBlendMode).toBe('multiply');
+  });
+});
+
+describe('getDomBlendModeFidelity', () => {
+  it('returns "approximate" for BlendMode.Add', () => {
+    expect(getDomBlendModeFidelity(BlendMode.Add)).toBe('approximate');
+  });
+
+  it('returns "exact" for BlendMode.Multiply', () => {
+    expect(getDomBlendModeFidelity(BlendMode.Multiply)).toBe('exact');
+  });
+
+  it('returns "exact" for BlendMode.Normal', () => {
+    expect(getDomBlendModeFidelity(BlendMode.Normal)).toBe('exact');
+  });
+
+  it('returns "unsupported" for BlendMode.Alpha', () => {
+    expect(getDomBlendModeFidelity(BlendMode.Alpha)).toBe('unsupported');
+  });
+
+  it('returns "unsupported" for BlendMode.Erase', () => {
+    expect(getDomBlendModeFidelity(BlendMode.Erase)).toBe('unsupported');
+  });
+
+  it('returns "unsupported" for BlendMode.Invert', () => {
+    expect(getDomBlendModeFidelity(BlendMode.Invert)).toBe('unsupported');
+  });
+
+  it('returns "unsupported" for BlendMode.Subtract', () => {
+    expect(getDomBlendModeFidelity(BlendMode.Subtract)).toBe('unsupported');
+  });
+});