@flighthq/surface 0.1.0

package/src/surfaceAlpha.test.ts

@@ -0,0 +1,113 @@
+import { createSurface } from './surface';
+import { copySurfaceAlpha, multiplySurfaceAlpha, setSurfaceAlpha } from './surfaceAlpha';
+import { getSurfacePixel, setSurfacePixel } from './surfacePixel';
+import { createSurfaceRegion } from './surfaceRegion';
+
+describe('copySurfaceAlpha', () => {
+  it('copies alpha from source to dest, leaving RGB unchanged', () => {
+    const src = createSurface(2, 1);
+    setSurfacePixel(src, 0, 0, 0x00000080); // alpha 0x80
+    setSurfacePixel(src, 1, 0, 0x000000ff); // alpha 0xff
+    const dst = createSurface(2, 1, 0xff00ffff); // red pixels, fully opaque
+    copySurfaceAlpha(createSurfaceRegion(dst), createSurfaceRegion(src));
+    // RGB unchanged, alpha from source.
+    expect((getSurfacePixel(dst, 0, 0) >>> 24) & 0xff).toBe(0xff); // red channel
+    expect(getSurfacePixel(dst, 0, 0) & 0xff).toBe(0x80); // alpha
+    expect(getSurfacePixel(dst, 1, 0) & 0xff).toBe(0xff);
+  });
+
+  it('same-surface region is a no-op on alpha', () => {
+    const surf = createSurface(2, 1, 0x112233aa);
+    copySurfaceAlpha(createSurfaceRegion(surf), createSurfaceRegion(surf));
+    expect(getSurfacePixel(surf, 0, 0) & 0xff).toBe(0xaa);
+  });
+
+  it('operates only on the overlap of both regions', () => {
+    const src = createSurface(3, 1, 0x00000080);
+    const dst = createSurface(3, 1, 0x00000000);
+    // Copy only 1 pixel wide.
+    copySurfaceAlpha(
+      { surface: dst, x: 0, y: 0, width: 1, height: 1 },
+      { surface: src, x: 0, y: 0, width: 1, height: 1 },
+    );
+    expect(getSurfacePixel(dst, 0, 0) & 0xff).toBe(0x80);
+    expect(getSurfacePixel(dst, 1, 0) & 0xff).toBe(0x00); // untouched
+  });
+});
+
+describe('multiplySurfaceAlpha', () => {
+  it('factor 0 makes region fully transparent', () => {
+    const surf = createSurface(2, 2, 0xff0000ff);
+    multiplySurfaceAlpha(createSurfaceRegion(surf), 0);
+    expect(getSurfacePixel(surf, 0, 0) & 0xff).toBe(0);
+    expect(getSurfacePixel(surf, 1, 1) & 0xff).toBe(0);
+  });
+
+  it('factor 1 leaves alpha unchanged', () => {
+    const surf = createSurface(1, 1, 0xff0000ab);
+    multiplySurfaceAlpha(createSurfaceRegion(surf), 1);
+    expect(getSurfacePixel(surf, 0, 0) & 0xff).toBe(0xab);
+  });
+
+  it('factor 0.5 halves the alpha', () => {
+    const surf = createSurface(1, 1, 0xff0000fe);
+    multiplySurfaceAlpha(createSurfaceRegion(surf), 0.5);
+    // 0xfe * 0.5 = 127
+    expect(getSurfacePixel(surf, 0, 0) & 0xff).toBe(127);
+  });
+
+  it('clamps factor to [0, 1]', () => {
+    const surf = createSurface(1, 1, 0xff0000aa);
+    multiplySurfaceAlpha(createSurfaceRegion(surf), 2);
+    // Factor clamped to 1, alpha unchanged.
+    expect(getSurfacePixel(surf, 0, 0) & 0xff).toBe(0xaa);
+  });
+
+  it('leaves RGB channels unchanged', () => {
+    const surf = createSurface(1, 1, 0x123456ff);
+    multiplySurfaceAlpha(createSurfaceRegion(surf), 0.5);
+    const p = getSurfacePixel(surf, 0, 0);
+    expect((p >>> 24) & 0xff).toBe(0x12);
+    expect((p >> 16) & 0xff).toBe(0x34);
+    expect((p >> 8) & 0xff).toBe(0x56);
+  });
+});
+
+describe('setSurfaceAlpha', () => {
+  it('writes a constant alpha to all pixels in region', () => {
+    const surf = createSurface(3, 3, 0xff0000ff);
+    setSurfaceAlpha(createSurfaceRegion(surf), 0x40);
+    for (let y = 0; y < 3; y++) {
+      for (let x = 0; x < 3; x++) {
+        expect(getSurfacePixel(surf, x, y) & 0xff).toBe(0x40);
+      }
+    }
+  });
+
+  it('leaves RGB unchanged', () => {
+    const surf = createSurface(1, 1, 0x112233ff);
+    setSurfaceAlpha(createSurfaceRegion(surf), 0x80);
+    const p = getSurfacePixel(surf, 0, 0);
+    expect((p >>> 24) & 0xff).toBe(0x11);
+    expect((p >> 16) & 0xff).toBe(0x22);
+    expect((p >> 8) & 0xff).toBe(0x33);
+    expect(p & 0xff).toBe(0x80);
+  });
+
+  it('clamps alpha to [0, 255]', () => {
+    const surf = createSurface(1, 1, 0xff0000ff);
+    setSurfaceAlpha(createSurfaceRegion(surf), -10);
+    expect(getSurfacePixel(surf, 0, 0) & 0xff).toBe(0);
+    setSurfaceAlpha(createSurfaceRegion(surf), 300);
+    expect(getSurfacePixel(surf, 0, 0) & 0xff).toBe(255);
+  });
+
+  it('only affects the specified sub-region', () => {
+    const surf = createSurface(4, 1, 0xff0000ff);
+    setSurfaceAlpha({ surface: surf, x: 1, y: 0, width: 2, height: 1 }, 0x00);
+    expect(getSurfacePixel(surf, 0, 0) & 0xff).toBe(0xff); // untouched
+    expect(getSurfacePixel(surf, 1, 0) & 0xff).toBe(0x00);
+    expect(getSurfacePixel(surf, 2, 0) & 0xff).toBe(0x00);
+    expect(getSurfacePixel(surf, 3, 0) & 0xff).toBe(0xff); // untouched
+  });
+});

package/src/surfaceBevel.test.ts

@@ -0,0 +1,67 @@
+import { createSurface } from './surface';
+import { bevelSurface } from './surfaceBevel';
+
+function region(
+  surface: ReturnType<typeof createSurface>,
+  x = 0,
+  y = 0,
+  width = surface.width,
+  height = surface.height,
+) {
+  return { surface, x, y, width, height };
+}
+
+// 5x1 strip with a single alpha edge: transparent | transparent | opaque | opaque | opaque.
+function edgeStrip() {
+  const s = createSurface(5, 1);
+  for (let x = 2; x < 5; x++) s.data[x * 4 + 3] = 255;
+  return s;
+}
+
+describe('bevelSurface', () => {
+  it('highlights the light-facing edge and shades the opposite edge', () => {
+    // Light from the left (angle π). With radiusX=1 the blurred alpha is
+    // [0, 85, 170, 255, 255]; the gradient highlights the left edge of the
+    // shape and shadows the right edge.
+    const source = edgeStrip();
+    const out = new Uint8ClampedArray(5 * 4);
+    const scratch = new Uint8ClampedArray(5 * 4);
+    bevelSurface(out, scratch, region(source), {
+      angle: Math.PI,
+      distance: 1,
+      radiusX: 1,
+      radiusY: 0,
+      type: 'both',
+      highlightColor: 0xffffffff,
+      shadowColor: 0x000000ff,
+    });
+    // Left edge: white highlight.
+    expect(out[2 * 4 + 0]).toBe(255);
+    expect(out[2 * 4 + 1]).toBe(255);
+    expect(out[2 * 4 + 2]).toBe(255);
+    expect(out[2 * 4 + 3]).toBe(170);
+    // Right edge of the strip faces away from the light: black shadow.
+    expect(out[4 * 4 + 0]).toBe(0);
+    expect(out[4 * 4 + 1]).toBe(0);
+    expect(out[4 * 4 + 2]).toBe(0);
+    expect(out[4 * 4 + 3]).toBe(255);
+  });
+
+  it("'inner' type clips the bevel to inside the shape", () => {
+    const source = edgeStrip();
+    const out = new Uint8ClampedArray(5 * 4);
+    const scratch = new Uint8ClampedArray(5 * 4);
+    bevelSurface(out, scratch, region(source), {
+      angle: Math.PI,
+      distance: 1,
+      radiusX: 1,
+      radiusY: 0,
+      type: 'inner',
+    });
+    // x0/x1 are outside the shape (source alpha 0) → clipped to 0.
+    expect(out[0 * 4 + 3]).toBe(0);
+    expect(out[1 * 4 + 3]).toBe(0);
+    // x2 is inside the shape → highlight survives.
+    expect(out[2 * 4 + 3]).toBe(170);
+  });
+});

package/src/surfaceBlur.test.ts

@@ -0,0 +1,240 @@
+import { createSurface } from './surface';
+import {
+  blurSurfacePixelsHorizontal,
+  blurSurfacePixelsHorizontalWeighted,
+  blurSurfacePixelsVertical,
+  blurSurfacePixelsVerticalWeighted,
+  boxBlurSurface,
+  computeGaussianKernel,
+  gaussianBlurSurface,
+} from './surfaceBlur';
+import { premultiplySurfacePixels, unpremultiplySurfacePixels } from './surfaceFormat';
+
+function region(
+  surface: ReturnType<typeof createSurface>,
+  x = 0,
+  y = 0,
+  width = surface.width,
+  height = surface.height,
+) {
+  return { surface, x, y, width, height };
+}
+
+describe('blurSurfacePixelsHorizontal', () => {
+  it('spreads alpha into horizontal neighbors', () => {
+    const source = new Uint8ClampedArray([0, 0, 0, 0, 0, 0, 0, 255, 0, 0, 0, 0]);
+    const out = new Uint8ClampedArray(12);
+    blurSurfacePixelsHorizontal(out, source, 3, 1, 1);
+    expect(out[3]).toBeGreaterThan(0);
+    expect(out[11]).toBeGreaterThan(0);
+  });
+
+  it('copies source to out without spreading when radius is 0', () => {
+    const source = new Uint8ClampedArray([0, 0, 0, 255, 0, 0, 0, 0]);
+    const out = new Uint8ClampedArray(8);
+    blurSurfacePixelsHorizontal(out, source, 2, 1, 0);
+    expect(out[3]).toBe(255);
+    expect(out[7]).toBe(0);
+  });
+
+  it('premultiplying before blur avoids the dark-halo artifact at transparent edges', () => {
+    // [opaque red, transparent]. Straight-alpha blur bleeds the transparent
+    // pixel's hidden black into the red; a premultiplied blur keeps it pure red.
+    const buf = new Uint8ClampedArray([255, 0, 0, 255, 0, 0, 0, 0]);
+
+    const straight = new Uint8ClampedArray(8);
+    blurSurfacePixelsHorizontal(straight, buf, 2, 1, 1);
+    expect(straight[4]).toBe(128); // transparent pixel's red darkened toward black
+
+    const premul = new Uint8ClampedArray(8);
+    premultiplySurfacePixels(premul, buf, 8);
+    const blurred = new Uint8ClampedArray(8);
+    blurSurfacePixelsHorizontal(blurred, premul, 2, 1, 1);
+    const result = new Uint8ClampedArray(8);
+    unpremultiplySurfacePixels(result, blurred, 8);
+    expect(result[4]).toBe(255); // red stays pure
+    expect(result[7]).toBe(128); // alpha still half
+  });
+
+  it('produces correct edge average for a single row', () => {
+    // pixels: [0, 255, 0] alpha only; radius=1
+    // x=0: avg([0,255])/2 = 128 (approx); x=1: avg([0,255,0])/3 = 85; x=2: avg([255,0])/2 = 128
+    const source = new Uint8ClampedArray([0, 0, 0, 0, 0, 0, 0, 255, 0, 0, 0, 0]);
+    const out = new Uint8ClampedArray(12);
+    blurSurfacePixelsHorizontal(out, source, 3, 1, 1);
+    expect(out[3]).toBe(128); // (0+255)/2
+    expect(out[7]).toBe(85); // (0+255+0)/3
+    expect(out[11]).toBe(128); // (255+0)/2
+  });
+});
+
+describe('blurSurfacePixelsHorizontalWeighted', () => {
+  it('applies Gaussian weights to horizontal neighbors', () => {
+    const kernel = new Float32Array(3);
+    computeGaussianKernel(kernel, 1, 0.8);
+    const source = new Uint8ClampedArray([0, 0, 0, 0, 0, 0, 0, 255, 0, 0, 0, 0]);
+    const out = new Uint8ClampedArray(12);
+    blurSurfacePixelsHorizontalWeighted(out, source, 3, 1, kernel);
+    // center weight >> edge; center alpha should be highest
+    expect(out[7]).toBeGreaterThan(out[3]);
+    expect(out[7]).toBeGreaterThan(out[11]);
+  });
+
+  it('with an identity kernel [1] leaves source unchanged', () => {
+    const kernel = new Float32Array([1]);
+    const source = new Uint8ClampedArray([0x11, 0x22, 0x33, 0xff]);
+    const out = new Uint8ClampedArray(4);
+    blurSurfacePixelsHorizontalWeighted(out, source, 1, 1, kernel);
+    expect(out[0]).toBe(0x11);
+    expect(out[3]).toBe(0xff);
+  });
+});
+
+describe('blurSurfacePixelsVertical', () => {
+  it('spreads alpha into vertical neighbors', () => {
+    const source = new Uint8ClampedArray([0, 0, 0, 0, 0, 0, 0, 255, 0, 0, 0, 0]);
+    const out = new Uint8ClampedArray(12);
+    blurSurfacePixelsVertical(out, source, 1, 3, 1);
+    expect(out[3]).toBeGreaterThan(0);
+    expect(out[11]).toBeGreaterThan(0);
+  });
+});
+
+describe('blurSurfacePixelsVerticalWeighted', () => {
+  it('applies Gaussian weights to vertical neighbors', () => {
+    const kernel = new Float32Array(3);
+    computeGaussianKernel(kernel, 1, 0.8);
+    const source = new Uint8ClampedArray([0, 0, 0, 0, 0, 0, 0, 255, 0, 0, 0, 0]);
+    const out = new Uint8ClampedArray(12);
+    blurSurfacePixelsVerticalWeighted(out, source, 1, 3, kernel);
+    expect(out[7]).toBeGreaterThan(out[3]);
+  });
+});
+
+describe('boxBlurSurface', () => {
+  it('spreads alpha into neighboring pixels', () => {
+    const source = createSurface(3, 1);
+    source.data[7] = 255; // center pixel opaque
+    const out = new Uint8ClampedArray(3 * 4);
+    const scratch = new Uint8ClampedArray(3 * 4);
+    boxBlurSurface(out, scratch, region(source), { radiusX: 2, radiusY: 0 });
+    expect(out[3]).toBeGreaterThan(0);
+    expect(out[11]).toBeGreaterThan(0);
+  });
+
+  it('writes source into out when blur is zero', () => {
+    const source = createSurface(1, 1, 0x336699ff);
+    const out = new Uint8ClampedArray(4);
+    const scratch = new Uint8ClampedArray(4);
+    boxBlurSurface(out, scratch, region(source), { radiusX: 0, radiusY: 0 });
+    expect(out[0]).toBe(0x33);
+    expect(out[3]).toBe(0xff);
+  });
+
+  it('result always lands in out regardless of pass parity', () => {
+    const source = createSurface(3, 3, 0xffffff88);
+    const out = new Uint8ClampedArray(3 * 3 * 4);
+    const scratch = new Uint8ClampedArray(3 * 3 * 4);
+    boxBlurSurface(out, scratch, region(source), { radiusX: 2, radiusY: 0 });
+    expect(out[3]).toBeGreaterThan(0);
+  });
+
+  it('source.surface.data can be used as out for a full-surface region', () => {
+    const surface = createSurface(3, 1);
+    surface.data[7] = 255;
+    const scratch = new Uint8ClampedArray(3 * 4);
+    boxBlurSurface(surface.data, scratch, region(surface), { radiusX: 2, radiusY: 0 });
+    expect(surface.data[3]).toBeGreaterThan(0);
+    expect(surface.data[11]).toBeGreaterThan(0);
+  });
+
+  it('blurs only the offset sub-region, reading from the right source pixels', () => {
+    // 4 px alpha: [_, 255, 100, _]. Blurring region (1,0,2,1) extracts [255,100]
+    // and averages them — proving the source x-offset is honored, not ignored.
+    const surface = createSurface(4, 1);
+    surface.data[1 * 4 + 3] = 255;
+    surface.data[2 * 4 + 3] = 100;
+    const out = new Uint8ClampedArray(2 * 4);
+    const scratch = new Uint8ClampedArray(2 * 4);
+    boxBlurSurface(out, scratch, region(surface, 1, 0, 2, 1), { radiusX: 2, radiusY: 0 });
+    expect(out[3]).toBe(178); // round((255 + 100) / 2)
+    expect(out[7]).toBe(178);
+  });
+});
+
+describe('computeGaussianKernel', () => {
+  it('produces a kernel that sums to 1', () => {
+    const kernel = new Float32Array(7);
+    computeGaussianKernel(kernel, 3, 1.0);
+    const sum = kernel.reduce((acc, v) => acc + v, 0);
+    expect(sum).toBeCloseTo(1, 5);
+  });
+
+  it('is symmetric', () => {
+    const kernel = new Float32Array(9);
+    computeGaussianKernel(kernel, 4, 1.5);
+    for (let i = 0; i < 4; i++) {
+      expect(kernel[i]).toBeCloseTo(kernel[8 - i], 10);
+    }
+  });
+
+  it('center weight is the largest', () => {
+    const kernel = new Float32Array(5);
+    computeGaussianKernel(kernel, 2, 1.0);
+    expect(kernel[2]).toBeGreaterThan(kernel[1]);
+    expect(kernel[1]).toBeGreaterThan(kernel[0]);
+  });
+
+  it('radius-0 kernel produces a single weight of 1', () => {
+    const kernel = new Float32Array(1);
+    computeGaussianKernel(kernel, 0, 1.0);
+    expect(kernel[0]).toBeCloseTo(1, 10);
+  });
+
+  it('sigma <= 0 produces a unit impulse rather than a NaN kernel', () => {
+    const kernel = new Float32Array(5).fill(9);
+    computeGaussianKernel(kernel, 2, 0);
+    expect(kernel[2]).toBe(1);
+    expect(kernel[0]).toBe(0);
+    expect(kernel[4]).toBe(0);
+    expect(kernel.every((v) => !Number.isNaN(v))).toBe(true);
+  });
+});
+
+describe('gaussianBlurSurface', () => {
+  it('spreads alpha into neighboring pixels', () => {
+    const source = createSurface(5, 1);
+    source.data[2 * 4 + 3] = 255; // center pixel opaque
+    const out = new Uint8ClampedArray(5 * 4);
+    const scratch = new Uint8ClampedArray(5 * 4);
+    gaussianBlurSurface(out, scratch, region(source), 1.0);
+    expect(out[3]).toBeGreaterThan(0);
+    expect(out[4 * 4 + 3]).toBeGreaterThan(0);
+  });
+
+  it('center pixel retains more weight than edges', () => {
+    const source = createSurface(5, 1);
+    source.data[2 * 4 + 3] = 255;
+    const out = new Uint8ClampedArray(5 * 4);
+    const scratch = new Uint8ClampedArray(5 * 4);
+    gaussianBlurSurface(out, scratch, region(source), 0.8);
+    expect(out[2 * 4 + 3]).toBeGreaterThan(out[3]);
+  });
+
+  it('with sigma=0 writes source unchanged', () => {
+    const source = createSurface(1, 1, 0x336699ff);
+    const out = new Uint8ClampedArray(4);
+    const scratch = new Uint8ClampedArray(4);
+    gaussianBlurSurface(out, scratch, region(source), 0);
+    expect(out[0]).toBe(0x33);
+    expect(out[3]).toBe(0xff);
+  });
+
+  it('result always lands in out regardless of pass parity', () => {
+    const source = createSurface(3, 3, 0xffffff88);
+    const out = new Uint8ClampedArray(3 * 3 * 4);
+    const scratch = new Uint8ClampedArray(3 * 3 * 4);
+    gaussianBlurSurface(out, scratch, region(source), 1.0);
+    expect(out[3]).toBeGreaterThan(0);
+  });
+});

package/src/surfaceChannel.test.ts

@@ -0,0 +1,97 @@
+import { createSurface } from './surface';
+import { mergeSurfaceChannels, splitSurfaceChannels } from './surfaceChannel';
+import { getSurfacePixel, setSurfacePixel } from './surfacePixel';
+import { createSurfaceRegion } from './surfaceRegion';
+
+describe('mergeSurfaceChannels', () => {
+  it('combines one channel from each input into the output', () => {
+    const rSurf = createSurface(1, 1, 0xff000000); // R=0xff, G=0, B=0, A=0
+    const gSurf = createSurface(1, 1, 0x00ff0000); // R=0, G=0xff, B=0, A=0
+    const bSurf = createSurface(1, 1, 0x0000ff00); // R=0, G=0, B=0xff, A=0
+    const aSurf = createSurface(1, 1, 0x000000ff); // R=0, G=0, B=0, A=0xff
+    const out = createSurface(1, 1);
+    mergeSurfaceChannels(
+      createSurfaceRegion(out),
+      createSurfaceRegion(rSurf),
+      createSurfaceRegion(gSurf),
+      createSurfaceRegion(bSurf),
+      createSurfaceRegion(aSurf),
+    );
+    expect(getSurfacePixel(out, 0, 0)).toBe(0xff_ff_ff_ff);
+  });
+
+  it('uses the minimum dimension overlap', () => {
+    const r = createSurface(3, 1, 0xff000000);
+    const g = createSurface(3, 1, 0x00ff0000);
+    const b = createSurface(3, 1, 0x0000ff00);
+    const a = createSurface(3, 1, 0x000000ff);
+    const out = createSurface(3, 1);
+    // Restrict r region to width=1 — only pixel 0 should be written.
+    mergeSurfaceChannels(
+      createSurfaceRegion(out),
+      { surface: r, x: 0, y: 0, width: 1, height: 1 },
+      createSurfaceRegion(g),
+      createSurfaceRegion(b),
+      createSurfaceRegion(a),
+    );
+    // Pixel 0 is covered; pixel 1 should be untouched (0x00000000).
+    expect((getSurfacePixel(out, 0, 0) >>> 24) & 0xff).toBe(0xff);
+    expect(getSurfacePixel(out, 1, 0)).toBe(0x00000000);
+  });
+});
+
+describe('splitSurfaceChannels', () => {
+  it('returns four surfaces of the same dimensions', () => {
+    const src = createSurface(3, 2, 0x112233ff);
+    const [r, g, b, a] = splitSurfaceChannels(src);
+    expect(r.width).toBe(3);
+    expect(r.height).toBe(2);
+    expect(g.width).toBe(3);
+    expect(b.height).toBe(2);
+    expect(a.width).toBe(3);
+  });
+
+  it('each channel surface is a grayscale copy of that channel', () => {
+    const src = createSurface(1, 1);
+    setSurfacePixel(src, 0, 0, 0x11_22_33_44);
+    const [r, g, b, a] = splitSurfaceChannels(src);
+    // R surface: R=G=B=0x11, A=0xff.
+    expect((getSurfacePixel(r, 0, 0) >>> 24) & 0xff).toBe(0x11);
+    expect((getSurfacePixel(r, 0, 0) >> 16) & 0xff).toBe(0x11);
+    expect((getSurfacePixel(r, 0, 0) >> 8) & 0xff).toBe(0x11);
+    expect(getSurfacePixel(r, 0, 0) & 0xff).toBe(0xff);
+    // G surface: R=G=B=0x22, A=0xff.
+    expect((getSurfacePixel(g, 0, 0) >>> 24) & 0xff).toBe(0x22);
+    // B surface: R=G=B=0x33, A=0xff.
+    expect((getSurfacePixel(b, 0, 0) >>> 24) & 0xff).toBe(0x33);
+    // A surface: R=G=B=A=0x44 (alpha stored in all channels for round-trip fidelity).
+    expect((getSurfacePixel(a, 0, 0) >>> 24) & 0xff).toBe(0x44);
+    expect(getSurfacePixel(a, 0, 0) & 0xff).toBe(0x44);
+  });
+
+  it('returns distinct surface objects', () => {
+    const src = createSurface(2, 2, 0xffffffff);
+    const [r, g, b, a] = splitSurfaceChannels(src);
+    expect(r).not.toBe(src);
+    expect(r).not.toBe(g);
+    expect(g).not.toBe(b);
+    expect(b).not.toBe(a);
+  });
+
+  it('round-trip: split then merge reconstructs the original', () => {
+    const src = createSurface(2, 2);
+    setSurfacePixel(src, 0, 0, 0xaabbccdd);
+    setSurfacePixel(src, 1, 0, 0x11223344);
+    const [r, g, b, a] = splitSurfaceChannels(src);
+    const out = createSurface(2, 2);
+    mergeSurfaceChannels(
+      createSurfaceRegion(out),
+      createSurfaceRegion(r),
+      createSurfaceRegion(g),
+      createSurfaceRegion(b),
+      createSurfaceRegion(a),
+    );
+    expect(getSurfacePixel(out, 0, 0)).toBe(0xaabbccdd);
+    expect(getSurfacePixel(out, 1, 0)).toBe(0x11223344);
+  });
+});