@flighthq/displayobject-gl 0.1.0

package/src/glRichText.test.ts

@@ -0,0 +1,135 @@
+import { getGlRenderStateRuntime } from '@flighthq/render-gl';
+import { createRichText } from '@flighthq/text';
+import { enableTextInput } from '@flighthq/textinput';
+import type { RendererData, RenderProxy2D, RichText } from '@flighthq/types';
+
+import {
+  createGlRichTextData,
+  defaultGlRichTextRenderer,
+  destroyGlRichTextData,
+  drawGlRichText,
+  drawGlRichTextWithOverlay,
+  registerGlTextInputOverlay,
+} from './glRichText';
+import { createGlState } from './glTestHelper';
+
+function makeRichTextNode(): RenderProxy2D {
+  const richText = createRichText();
+  return {
+    source: richText,
+    blendMode: 0,
+    alpha: 1,
+    transform2D: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
+    rendererData: { texture: null },
+  } as unknown as RenderProxy2D;
+}
+
+describe('createGlRichTextData', () => {
+  it('allocates per-node data with no texture yet', () => {
+    const { state } = createGlState();
+    const data = createGlRichTextData(state, createRichText()) as unknown as { texture: WebGLTexture | null };
+    expect(data.texture).toBeNull();
+  });
+});
+
+describe('defaultGlRichTextRenderer', () => {
+  it('has a createData function', () => {
+    expect(typeof defaultGlRichTextRenderer.createData).toBe('function');
+  });
+
+  it('has a submit function pointing to drawGlRichText', () => {
+    expect(defaultGlRichTextRenderer.submit).toBe(drawGlRichText);
+  });
+});
+
+describe('destroyGlRichTextData', () => {
+  it('deletes the GPU texture the node owns', () => {
+    const { state, gl } = createGlState();
+    const texture = gl.createTexture();
+    const deleteSpy = vi.spyOn(gl, 'deleteTexture');
+    destroyGlRichTextData(state, { texture } as unknown as RendererData);
+    expect(deleteSpy).toHaveBeenCalledWith(texture);
+  });
+
+  it('is a no-op when no texture was allocated', () => {
+    const { state, gl } = createGlState();
+    const deleteSpy = vi.spyOn(gl, 'deleteTexture');
+    destroyGlRichTextData(state, { texture: null } as unknown as RendererData);
+    expect(deleteSpy).not.toHaveBeenCalled();
+  });
+});
+
+describe('drawGlRichText', () => {
+  it('binds the active bitmap shader when drawing rich text', () => {
+    const { state } = createGlState();
+    const renderProxy = makeRichTextNode();
+    (renderProxy.source as RichText).data.text = 'hello';
+
+    const bindSpy = vi.spyOn(getGlRenderStateRuntime(state).defaultBitmapShader, 'bind');
+    drawGlRichText(state, renderProxy);
+
+    expect(bindSpy).toHaveBeenCalledWith(state.gl, state, renderProxy);
+  });
+
+  it('returns early without drawing when text and chrome are empty', () => {
+    const { state, gl } = createGlState();
+    drawGlRichText(state, makeRichTextNode());
+    expect(gl.drawElements).not.toHaveBeenCalled();
+  });
+
+  it('draws when text is non-empty', () => {
+    const { state, gl } = createGlState();
+    const renderProxy = makeRichTextNode();
+    (renderProxy.source as RichText).data.text = 'hello';
+    drawGlRichText(state, renderProxy);
+    expect(gl.drawElements).toHaveBeenCalled();
+  });
+
+  it('draws resolved htmlText spans', () => {
+    const { state, gl } = createGlState();
+    const renderProxy = makeRichTextNode();
+    (renderProxy.source as RichText).data.htmlText = '<b>Bold</b><font color="#00ff00">Green</font>';
+    drawGlRichText(state, renderProxy);
+    expect(gl.drawElements).toHaveBeenCalled();
+  });
+
+  it('draws field chrome even when text is empty', () => {
+    const { state, gl } = createGlState();
+    const renderProxy = makeRichTextNode();
+    (renderProxy.source as RichText).data.background = true;
+    drawGlRichText(state, renderProxy);
+    expect(gl.drawElements).toHaveBeenCalled();
+  });
+});
+
+describe('drawGlRichTextWithOverlay', () => {
+  it('runs an optional canvas overlay after layout', () => {
+    const { state } = createGlState();
+    const renderProxy = makeRichTextNode();
+    (renderProxy.source as RichText).data.text = 'hello';
+    const overlay = vi.fn();
+
+    drawGlRichTextWithOverlay(state, renderProxy, overlay);
+
+    expect(overlay).toHaveBeenCalled();
+  });
+});
+
+describe('registerGlTextInputOverlay', () => {
+  it('invokes the registered overlay only for a RichText with an input slot', () => {
+    const overlay = vi.fn();
+    registerGlTextInputOverlay(overlay);
+    const { state } = createGlState();
+
+    const plain = makeRichTextNode();
+    (plain.source as RichText).data.text = 'x';
+    drawGlRichText(state, plain);
+    expect(overlay).not.toHaveBeenCalled();
+
+    const editable = makeRichTextNode();
+    (editable.source as RichText).data.text = 'x';
+    enableTextInput(editable.source as RichText);
+    drawGlRichText(state, editable);
+    expect(overlay).toHaveBeenCalled();
+  });
+});

package/src/glScale9Mapper.test.ts

@@ -0,0 +1,20 @@
+import { createRectangle } from '@flighthq/geometry';
+
+import { buildGlScale9Mapper } from './glScale9Mapper';
+
+describe('buildGlScale9Mapper', () => {
+  it('returns null for invalid scale or bounds', () => {
+    expect(buildGlScale9Mapper(createRectangle(0, 0, 0, 100), createRectangle(10, 10, 20, 20), 1, 1)).toBeNull();
+    expect(buildGlScale9Mapper(createRectangle(0, 0, 100, 100), createRectangle(10, 10, 20, 20), 0, 1)).toBeNull();
+  });
+
+  it('maps edge and center coordinates using 9-slice scaling', () => {
+    const mapper = buildGlScale9Mapper(createRectangle(0, 0, 100, 100), createRectangle(10, 10, 20, 20), 2, 3)!;
+
+    expect(mapper.mapX(5)).toBe(5);
+    expect(mapper.mapX(20)).toBe(70);
+    expect(mapper.mapX(40)).toBe(140);
+    expect(mapper.mapY(20)).toBe(120);
+    expect(mapper.mapY(40)).toBe(240);
+  });
+});

package/src/glScale9Shape.test.ts

@@ -0,0 +1,90 @@
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { appendShapeBeginFill, appendShapeRectangle, createScale9Shape } from '@flighthq/shape';
+
+import {
+  createGlScale9ShapeData,
+  defaultGlScale9ShapeRenderer,
+  destroyGlScale9ShapeData,
+  drawGlScale9Shape,
+  drawGlScale9ShapeMask,
+  remapGlScale9Commands,
+} from './glScale9Shape';
+import { createGlState } from './glTestHelper';
+
+const grid = { height: 80, width: 80, x: 10, y: 10 };
+
+describe('createGlScale9ShapeData', () => {
+  it('creates renderer data with a Gl texture', () => {
+    const { state, gl } = createGlState();
+    const shape = createScale9Shape(grid);
+
+    const data = createGlScale9ShapeData(state, shape);
+
+    expect(data).not.toBeNull();
+    expect(gl.createTexture).toHaveBeenCalled();
+  });
+});
+
+describe('defaultGlScale9ShapeRenderer', () => {
+  it('has submit and createData functions', () => {
+    expect(defaultGlScale9ShapeRenderer.createData).toBe(createGlScale9ShapeData);
+    expect(defaultGlScale9ShapeRenderer.submit).toBe(drawGlScale9Shape);
+  });
+});
+
+describe('destroyGlScale9ShapeData', () => {
+  it('deletes the texture it owns', () => {
+    const { state, gl } = createGlState();
+    const data = createGlScale9ShapeData(state, createScale9Shape(grid))!;
+    destroyGlScale9ShapeData(state, data);
+    expect(gl.deleteTexture).toHaveBeenCalled();
+  });
+});
+
+describe('drawGlScale9Shape', () => {
+  it('returns early when commands are empty', () => {
+    const { state, gl } = createGlState();
+    const shape = createScale9Shape(grid);
+    const data = getOrCreateRenderProxy2D(state, shape);
+
+    drawGlScale9Shape(state, data);
+
+    expect(gl.drawElements).not.toHaveBeenCalled();
+  });
+
+  it('returns early when rendererData is null', () => {
+    const { state, gl } = createGlState();
+    const shape = createScale9Shape(grid);
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeRectangle(shape, 0, 0, 100, 100);
+    const data = getOrCreateRenderProxy2D(state, shape);
+
+    drawGlScale9Shape(state, data);
+
+    expect(gl.drawElements).not.toHaveBeenCalled();
+  });
+});
+
+describe('drawGlScale9ShapeMask', () => {
+  it('uses the same draw path as normal Scale9 rendering', () => {
+    const { state, gl } = createGlState();
+    const shape = createScale9Shape(grid);
+    const data = getOrCreateRenderProxy2D(state, shape);
+
+    drawGlScale9ShapeMask(state, data);
+
+    expect(gl.drawElements).not.toHaveBeenCalled();
+  });
+});
+
+describe('remapGlScale9Commands', () => {
+  it('remaps coordinates with a compatible mapper', () => {
+    const out: unknown[] = [];
+    remapGlScale9Commands(out, ['drawRectangle', 4, 10, 20, 50, 30], {
+      mapX: (x: number) => x * 2,
+      mapY: (y: number) => y * 3,
+    });
+
+    expect(out).toEqual(['drawRectangle', 4, 20, 60, 100, 90]);
+  });
+});

package/src/glShape.test.ts

@@ -0,0 +1,115 @@
+import type * as FlightNodeModule from '@flighthq/node';
+import { getGlRenderStateRuntime } from '@flighthq/render-gl';
+import type { RenderProxy2D } from '@flighthq/types';
+import { BatchFormat } from '@flighthq/types';
+
+import { registerDefaultGlMaterial } from './glDefaultMaterial';
+import type * as GlShapeModule from './glShape';
+import { flushGlSpriteBatch } from './glSpriteBatch';
+import { createGlState } from './glTestHelper';
+import { scopeModuleMocks } from './moduleMockTestHelper';
+
+// @flighthq/node's bounds/revision queries expect a real BoundsNode; these tests drive drawGlShape
+// with lightweight fake proxies, so the two queries are stubbed. scopeModuleMocks scopes the stub to
+// this file (registry reset before the mock applies, unmock + reset after), so under a shared
+// (isolate:false) worker it never leaks into the many real consumers of these functions (node,
+// interaction, shape, text) — and a sibling that pre-evaluated ./glShape still picks up the stub.
+let defaultGlShapeRenderer: typeof GlShapeModule.defaultGlShapeRenderer;
+let drawGlShape: typeof GlShapeModule.drawGlShape;
+
+scopeModuleMocks(['@flighthq/node']);
+
+beforeAll(async () => {
+  vi.doMock('@flighthq/node', async (importOriginal) => ({
+    ...(await importOriginal<typeof FlightNodeModule>()),
+    getNodeLocalBoundsRectangle: () => ({ x: 0, y: 0, width: 64, height: 48 }),
+    getNodeLocalContentRevision: (source: any) => source?.data?.version ?? 0,
+  }));
+  ({ defaultGlShapeRenderer, drawGlShape } = await import('./glShape'));
+});
+
+function makeShapeData() {
+  const canvas = document.createElement('canvas');
+  canvas.width = 1;
+  canvas.height = 1;
+  const ctx = canvas.getContext('2d')!;
+  return { canvas, ctx, lastContentId: -1, lastW: 0, lastH: 0 };
+}
+
+function makeShapeNode(data: Record<string, unknown> = {}, rendererData: unknown = null): RenderProxy2D {
+  return {
+    source: {
+      data: {
+        commands: [],
+        version: 0,
+        ...data,
+      },
+    },
+    rendererData: rendererData,
+    blendMode: 0,
+    alpha: 1,
+    material: null,
+    materialData: null,
+    transform2D: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
+  } as unknown as RenderProxy2D;
+}
+
+describe('defaultGlShapeRenderer', () => {
+  it('declares BatchFormat.Quad', () => {
+    expect(defaultGlShapeRenderer.format).toBe(BatchFormat.Quad);
+  });
+
+  it('has a createData function', () => {
+    expect(typeof defaultGlShapeRenderer.createData).toBe('function');
+  });
+
+  it('has a submit function pointing to drawGlShape', () => {
+    expect(defaultGlShapeRenderer.submit).toBe(drawGlShape);
+  });
+});
+
+describe('drawGlShape', () => {
+  it('returns early without writing to batch when commands array is empty', () => {
+    const { state } = createGlState();
+    registerDefaultGlMaterial(state);
+    drawGlShape(state, makeShapeNode({ commands: [] }, makeShapeData()));
+    expect(getGlRenderStateRuntime(state).spriteBatchCount).toBe(0);
+  });
+
+  it('returns early without writing to batch when rendererData is null', () => {
+    const { state } = createGlState();
+    registerDefaultGlMaterial(state);
+    drawGlShape(state, makeShapeNode({ commands: [{}] }, null));
+    expect(getGlRenderStateRuntime(state).spriteBatchCount).toBe(0);
+  });
+
+  it('returns early without writing to batch when no material renderer is registered', () => {
+    const { state } = createGlState();
+    drawGlShape(state, makeShapeNode({ commands: [{}] }, makeShapeData()));
+    expect(getGlRenderStateRuntime(state).spriteBatchCount).toBe(0);
+  });
+
+  it('writes one instance to the sprite batch when shape has valid commands and bounds', () => {
+    const { state } = createGlState();
+    registerDefaultGlMaterial(state);
+    drawGlShape(state, makeShapeNode({ commands: [{}], version: 1 }, makeShapeData()));
+    expect(getGlRenderStateRuntime(state).spriteBatchCount).toBe(1);
+  });
+
+  it('draws via drawElementsInstanced after flush', () => {
+    const { state, gl } = createGlState();
+    registerDefaultGlMaterial(state);
+    drawGlShape(state, makeShapeNode({ commands: [{}], version: 1 }, makeShapeData()));
+    flushGlSpriteBatch(state);
+    expect(gl.drawElementsInstanced).toHaveBeenCalled();
+  });
+
+  it('writes correct size into instance data', () => {
+    const { state } = createGlState();
+    registerDefaultGlMaterial(state);
+    drawGlShape(state, makeShapeNode({ commands: [{}], version: 1 }, makeShapeData()));
+    const d = getGlRenderStateRuntime(state).spriteBatchInstanceData;
+    expect(d[6]).toBe(64); // width from mocked bounds
+    expect(d[7]).toBe(48); // height from mocked bounds
+  });
+});

package/src/glShapeMesh.test.ts

@@ -0,0 +1,64 @@
+import { getGlRenderStateRuntime } from '@flighthq/render-gl';
+import type { RenderProxy2D } from '@flighthq/types';
+
+import { drawGlShapeMeshes } from './glShapeMesh';
+import { createGlState } from './glTestHelper';
+
+function makeProxy(): RenderProxy2D {
+  return {
+    alpha: 1,
+    blendMode: null,
+    transform2D: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
+  } as unknown as RenderProxy2D;
+}
+
+const TRIANGLE = {
+  vertices: new Float32Array([0, 0, 10, 0, 0, 10]),
+  indices: new Uint16Array([0, 1, 2]),
+  color: 0xff8040,
+  alpha: 1,
+};
+
+describe('drawGlShapeMeshes', () => {
+  it('binds the mesh program and draws each mesh', () => {
+    const { state, gl } = createGlState();
+
+    drawGlShapeMeshes(state, makeProxy(), [TRIANGLE]);
+
+    expect(gl.useProgram).toHaveBeenCalled();
+    expect(gl.drawElements).toHaveBeenCalledWith(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 0);
+  });
+
+  it('records the mesh program as currentProgram so content draws re-bind', () => {
+    const { state } = createGlState();
+    expect(getGlRenderStateRuntime(state).currentProgram).toBeNull();
+
+    drawGlShapeMeshes(state, makeProxy(), [TRIANGLE]);
+
+    expect(getGlRenderStateRuntime(state).currentProgram).not.toBeNull();
+  });
+
+  it('uploads premultiplied color (color * alpha) for the standard blend', () => {
+    const { state, gl } = createGlState();
+
+    drawGlShapeMeshes(state, makeProxy(), [{ ...TRIANGLE, color: 0xffffff, alpha: 0.5 }]);
+
+    expect(gl.uniform4f).toHaveBeenCalledWith(expect.anything(), 0.5, 0.5, 0.5, 0.5);
+  });
+
+  it('skips fully transparent meshes', () => {
+    const { state, gl } = createGlState();
+
+    drawGlShapeMeshes(state, makeProxy(), [{ ...TRIANGLE, alpha: 0 }]);
+
+    expect(gl.drawElements).not.toHaveBeenCalled();
+  });
+
+  it('is a no-op for an empty mesh list', () => {
+    const { state, gl } = createGlState();
+
+    drawGlShapeMeshes(state, makeProxy(), []);
+
+    expect(gl.useProgram).not.toHaveBeenCalled();
+  });
+});

package/src/glSprite.test.ts

@@ -0,0 +1,79 @@
+import { addNodeChild } from '@flighthq/node';
+import { getOrCreateRenderProxy2D, prepareDisplayObjectRender, registerRenderer } from '@flighthq/render';
+import { createSprite } from '@flighthq/sprite';
+import { SpriteKind } from '@flighthq/types';
+
+import { renderGlSprite } from './glSprite';
+import { createGlState } from './glTestHelper';
+
+function makeRenderer() {
+  return { createData: () => null, submit: vi.fn() } as any;
+}
+
+describe('renderGlSprite', () => {
+  it('does not throw for an empty sprite node', () => {
+    const { state } = createGlState();
+    const sprite = createSprite();
+    expect(() => {
+      prepareDisplayObjectRender(state, sprite);
+      renderGlSprite(state, sprite);
+    }).not.toThrow();
+  });
+
+  it('calls renderer.submit for a visible sprite with a registered renderer', () => {
+    const { state } = createGlState();
+    const renderer = makeRenderer();
+    registerRenderer(state, SpriteKind, renderer);
+
+    const sprite = createSprite();
+    const data = getOrCreateRenderProxy2D(state, sprite);
+
+    prepareDisplayObjectRender(state, sprite);
+    renderGlSprite(state, sprite);
+
+    expect(renderer.submit).toHaveBeenCalledWith(state, data);
+  });
+
+  it('skips a sprite node with visible set to false', () => {
+    const { state } = createGlState();
+    const renderer = makeRenderer();
+    registerRenderer(state, SpriteKind, renderer);
+
+    const sprite = createSprite();
+    sprite.visible = false;
+
+    prepareDisplayObjectRender(state, sprite);
+    renderGlSprite(state, sprite);
+
+    expect(renderer.submit).not.toHaveBeenCalled();
+  });
+
+  it('skips a sprite node with alpha at or below 0', () => {
+    const { state } = createGlState();
+    const renderer = makeRenderer();
+    registerRenderer(state, SpriteKind, renderer);
+
+    const sprite = createSprite();
+    sprite.alpha = 0;
+
+    prepareDisplayObjectRender(state, sprite);
+    renderGlSprite(state, sprite);
+
+    expect(renderer.submit).not.toHaveBeenCalled();
+  });
+
+  it('recurses into children and renders visible ones', () => {
+    const { state } = createGlState();
+    const renderer = makeRenderer();
+    registerRenderer(state, SpriteKind, renderer);
+
+    const parent = createSprite();
+    const child = createSprite();
+    addNodeChild(parent, child);
+
+    prepareDisplayObjectRender(state, parent);
+    renderGlSprite(state, parent);
+
+    expect(renderer.submit).toHaveBeenCalledTimes(2);
+  });
+});

package/src/glSpriteBatch.test.ts

@@ -0,0 +1,153 @@
+import { getGlRenderStateRuntime } from '@flighthq/render-gl';
+import type { Material } from '@flighthq/types';
+
+import { defaultGlMaterialRenderer } from './glDefaultMaterial';
+import {
+  bindGlQuadBatchBaseAttributes,
+  ensureGlQuadBatchShader,
+  flushGlSpriteBatch,
+  packGlSpriteBatchMaterialInstance,
+  prepareGlSpriteBatchWrite,
+  setGlQuadBatchWorldAndTexture,
+  useGlQuadBatchProgram,
+} from './glSpriteBatch';
+import { createGlState } from './glTestHelper';
+
+function makeTexture(): HTMLImageElement {
+  return document.createElement('img');
+}
+
+function makeMaterial(): Material {
+  return { kind: 'TestMaterial' } as Material;
+}
+
+describe('bindGlQuadBatchBaseAttributes', () => {
+  it('sets up the corner and base instance attribute pointers', () => {
+    const { state, gl } = createGlState();
+    ensureGlQuadBatchShader(state);
+    bindGlQuadBatchBaseAttributes(state, 0);
+    expect(gl.vertexAttribPointer).toHaveBeenCalled();
+    expect(gl.vertexAttribDivisor).toHaveBeenCalled();
+  });
+});
+
+describe('ensureGlQuadBatchShader', () => {
+  it('returns a shader with a program and attribute locations', () => {
+    const { state } = createGlState();
+    const shader = ensureGlQuadBatchShader(state);
+    expect(shader.program).toBeDefined();
+    expect(typeof shader.locCorner).toBe('number');
+    expect(shader.locWorldMatrix).toBeDefined();
+    expect(shader.locTexture).toBeDefined();
+  });
+
+  it('is idempotent — returns the same shader on repeated calls', () => {
+    const { state } = createGlState();
+    const s1 = ensureGlQuadBatchShader(state);
+    const s2 = ensureGlQuadBatchShader(state);
+    expect(s1).toBe(s2);
+  });
+});
+
+describe('flushGlSpriteBatch', () => {
+  it('does nothing when batch count is zero', () => {
+    const { state, gl } = createGlState();
+    flushGlSpriteBatch(state);
+    expect(gl.drawElementsInstanced).not.toHaveBeenCalled();
+  });
+
+  it('draws when instances are pending and resets state', () => {
+    const { state, gl } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    const tex = makeTexture();
+
+    prepareGlSpriteBatchWrite(state, tex, null, null, defaultGlMaterialRenderer, 1);
+    runtime.spriteBatchCount = 1;
+    flushGlSpriteBatch(state);
+
+    expect(gl.drawElementsInstanced).toHaveBeenCalledWith(expect.anything(), 6, expect.anything(), 0, 1);
+    expect(runtime.spriteBatchCount).toBe(0);
+    expect(runtime.spriteBatchTexture).toBeNull();
+    expect(runtime.spriteBatchBlendMode).toBeNull();
+    expect(runtime.spriteBatchMaterial).toBeNull();
+  });
+});
+
+describe('packGlSpriteBatchMaterialInstance', () => {
+  it('is a no-op when no per-instance material renderer is active', () => {
+    const { state } = createGlState();
+    getGlRenderStateRuntime(state).spriteBatchMaterialRenderer = null;
+    expect(() => packGlSpriteBatchMaterialInstance(state, null, 0)).not.toThrow();
+  });
+});
+
+describe('prepareGlSpriteBatchWrite', () => {
+  it('returns float index 0 for an empty batch', () => {
+    const { state } = createGlState();
+    const tex = makeTexture();
+
+    const base = prepareGlSpriteBatchWrite(state, tex, null, null, defaultGlMaterialRenderer, 2);
+    expect(base).toBe(0);
+  });
+
+  it('flushes when texture changes', () => {
+    const { state, gl } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    const tex1 = makeTexture();
+    const tex2 = makeTexture();
+
+    prepareGlSpriteBatchWrite(state, tex1, null, null, defaultGlMaterialRenderer, 1);
+    runtime.spriteBatchCount = 1;
+
+    prepareGlSpriteBatchWrite(state, tex2, null, null, defaultGlMaterialRenderer, 1);
+
+    expect(gl.drawElementsInstanced).toHaveBeenCalledTimes(1);
+    expect(runtime.spriteBatchTexture).toBe(tex2);
+  });
+
+  it('flushes when material changes', () => {
+    const { state, gl } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    const tex = makeTexture();
+    const materialA = makeMaterial();
+    const materialB = makeMaterial();
+
+    prepareGlSpriteBatchWrite(state, tex, null, materialA, defaultGlMaterialRenderer, 1);
+    runtime.spriteBatchCount = 1;
+
+    prepareGlSpriteBatchWrite(state, tex, null, materialB, defaultGlMaterialRenderer, 1);
+
+    expect(gl.drawElementsInstanced).toHaveBeenCalledTimes(1);
+    expect(runtime.spriteBatchMaterial).toBe(materialB);
+  });
+
+  it('grows instance data when capacity is exceeded', () => {
+    const { state } = createGlState();
+    const runtime = getGlRenderStateRuntime(state);
+    const tex = makeTexture();
+    const initialFloats = runtime.spriteBatchInstanceData.length;
+
+    prepareGlSpriteBatchWrite(state, tex, null, null, defaultGlMaterialRenderer, initialFloats + 100);
+
+    expect(runtime.spriteBatchInstanceData.length).toBeGreaterThan(initialFloats);
+  });
+});
+
+describe('setGlQuadBatchWorldAndTexture', () => {
+  it('uploads the world matrix and texture unit', () => {
+    const { state, gl } = createGlState();
+    setGlQuadBatchWorldAndTexture(state, {} as WebGLUniformLocation, {} as WebGLUniformLocation);
+    expect(gl.uniformMatrix3fv).toHaveBeenCalled();
+    expect(gl.uniform1i).toHaveBeenCalled();
+  });
+});
+
+describe('useGlQuadBatchProgram', () => {
+  it('binds the program and records it as current', () => {
+    const { state, gl } = createGlState();
+    const program = {} as WebGLProgram;
+    useGlQuadBatchProgram(state, program);
+    expect(gl.useProgram).toHaveBeenCalledWith(program);
+    expect(getGlRenderStateRuntime(state).currentProgram).toBe(program);
+  });
+});