@gjsify/canvas2d-core 0.4.0 → 0.4.4

package/src/canvas-composite.spec.ts

@@ -1,114 +0,0 @@
-// Canvas 2D composite operation tests — verifies the Cairo operator
-// mapping for the globalCompositeOperation modes that 2D games commonly
-// use (source-over, destination-over, source-in, destination-in,
-// lighter, xor, copy).
-//
-// Ported from refs/wpt/html/canvas/element/compositing/
-//   2d.composite.canvas.{source-over,destination-over,source-in,
-//   destination-in,lighter,xor}.html
-// Original: Copyright (c) Web Platform Tests contributors. 3-Clause BSD.
-// Reimplemented for GJS using @gjsify/canvas2d-core + @gjsify/unit.
-
-import { describe, it, expect } from '@gjsify/unit';
-import { CanvasRenderingContext2D } from './canvas-rendering-context-2d.js';
-
-function makeCtx(width = 30, height = 30): CanvasRenderingContext2D {
-    const canvas = { width, height };
-    return new CanvasRenderingContext2D(canvas);
-}
-
-function assertPixel(
-    ctx: CanvasRenderingContext2D,
-    x: number, y: number,
-    r: number, g: number, b: number, a: number,
-    tol = 2,
-): void {
-    const data = ctx.getImageData(x, y, 1, 1).data;
-    expect(Math.abs(data[0] - r) <= tol).toBe(true);
-    expect(Math.abs(data[1] - g) <= tol).toBe(true);
-    expect(Math.abs(data[2] - b) <= tol).toBe(true);
-    expect(Math.abs(data[3] - a) <= tol).toBe(true);
-}
-
-/**
- * Common setup: draws a red rect on the left half, then configures the
- * composite operator, then draws a green rect that overlaps on the right half.
- * The test asserts the result in four zones: pure red, overlap, pure green,
- * empty.
- */
-function setupAndDraw(ctx: CanvasRenderingContext2D, mode: GlobalCompositeOperation): void {
-    ctx.fillStyle = 'rgb(255, 0, 0)';
-    ctx.fillRect(5, 5, 15, 15);
-    ctx.globalCompositeOperation = mode;
-    ctx.fillStyle = 'rgb(0, 255, 0)';
-    ctx.fillRect(10, 10, 15, 15);
-}
-
-export default async () => {
-    await describe('CanvasRenderingContext2D — globalCompositeOperation', async () => {
-
-        await describe('source-over (default)', async () => {
-            await it('green overlay replaces red in the overlap region', async () => {
-                const ctx = makeCtx();
-                setupAndDraw(ctx, 'source-over');
-                // Red-only zone (7,7)
-                assertPixel(ctx, 7, 7, 255, 0, 0, 255);
-                // Overlap zone (15,15) — green on top
-                assertPixel(ctx, 15, 15, 0, 255, 0, 255);
-                // Green-only zone (22,22)
-                assertPixel(ctx, 22, 22, 0, 255, 0, 255);
-                // Empty zone (2,2)
-                assertPixel(ctx, 2, 2, 0, 0, 0, 0);
-            });
-        });
-
-        await describe('destination-over', async () => {
-            await it('green is drawn BEHIND the existing red', async () => {
-                const ctx = makeCtx();
-                setupAndDraw(ctx, 'destination-over');
-                // Overlap region — red in front
-                assertPixel(ctx, 15, 15, 255, 0, 0, 255);
-                // Red-only zone unchanged
-                assertPixel(ctx, 7, 7, 255, 0, 0, 255);
-                // Green-only zone
-                assertPixel(ctx, 22, 22, 0, 255, 0, 255);
-            });
-        });
-
-        await describe('destination-in', async () => {
-            await it('keeps only red pixels where green overlaps', async () => {
-                const ctx = makeCtx();
-                setupAndDraw(ctx, 'destination-in');
-                // Overlap region — red stays (destination-in keeps destination
-                // where source exists)
-                assertPixel(ctx, 15, 15, 255, 0, 0, 255);
-                // Red-only zone — cleared (no source → destination discarded)
-                assertPixel(ctx, 7, 7, 0, 0, 0, 0);
-                // Green-only zone — transparent (no destination)
-                assertPixel(ctx, 22, 22, 0, 0, 0, 0);
-            });
-        });
-
-        await describe('xor', async () => {
-            await it('overlap region becomes transparent', async () => {
-                const ctx = makeCtx();
-                setupAndDraw(ctx, 'xor');
-                // Overlap → transparent
-                assertPixel(ctx, 15, 15, 0, 0, 0, 0);
-                // Red-only zone
-                assertPixel(ctx, 7, 7, 255, 0, 0, 255);
-                // Green-only zone
-                assertPixel(ctx, 22, 22, 0, 255, 0, 255);
-            });
-        });
-
-        await describe('lighter (additive)', async () => {
-            await it('overlap region sums red + green → yellow', async () => {
-                const ctx = makeCtx();
-                setupAndDraw(ctx, 'lighter');
-                // Overlap: red 255 + green 255 = (255, 255, 0, 255) yellow
-                assertPixel(ctx, 15, 15, 255, 255, 0, 255);
-            });
-        });
-    });
-};

package/src/canvas-drawimage.spec.ts

@@ -1,334 +0,0 @@
-// Canvas 2D drawImage tests — verifies the full 3/5/9-argument forms,
-// transform composition, cross-canvas sourcing, and the critical
-// imageSmoothingEnabled pixel-art path (Cairo NEAREST filter lock).
-//
-// Ported from refs/wpt/html/canvas/element/drawing-images-to-the-canvas/
-//   2d.drawImage.canvas.html, .5arg.html, .9arg.basic.html,
-//   .negativedest.html, .negativedir.html, .transform.html,
-//   .alpha.html, .self.1.html, .zerosource.html
-// Plus refs/wpt/html/canvas/element/manual/image-smoothing/imagesmoothing.html
-// Original: Copyright (c) Web Platform Tests contributors. 3-Clause BSD.
-// Reimplemented for GJS using @gjsify/canvas2d-core + @gjsify/unit.
-
-import { describe, it, expect } from '@gjsify/unit';
-import { CanvasRenderingContext2D } from './canvas-rendering-context-2d.js';
-
-function makeCtx(width = 50, height = 50): CanvasRenderingContext2D {
-    const canvas = { width, height };
-    return new CanvasRenderingContext2D(canvas);
-}
-
-/**
- * Create a test image as an HTMLCanvasElement-like object with known pixel
- * content. Works through the getContext('2d') branch of _getDrawImageSource
- * (canvas-rendering-context-2d.ts:822-834), avoiding the need for PNG
- * fixtures on disk.
- */
-function createTestImage(
-    width: number,
-    height: number,
-    draw: (ctx: CanvasRenderingContext2D) => void,
-): any {
-    const ctx = makeCtx(width, height);
-    draw(ctx);
-    return {
-        width,
-        height,
-        getContext: (id: string) => (id === '2d' ? ctx : null),
-    };
-}
-
-/** Assert pixel RGBA within tolerance (default ±2 per channel). */
-function assertPixel(
-    ctx: CanvasRenderingContext2D,
-    x: number,
-    y: number,
-    r: number,
-    g: number,
-    b: number,
-    a: number,
-    tolerance = 2,
-): void {
-    const data = ctx.getImageData(x, y, 1, 1).data;
-    expect(Math.abs(data[0] - r) <= tolerance).toBe(true);
-    expect(Math.abs(data[1] - g) <= tolerance).toBe(true);
-    expect(Math.abs(data[2] - b) <= tolerance).toBe(true);
-    expect(Math.abs(data[3] - a) <= tolerance).toBe(true);
-}
-
-function assertPixelExact(
-    ctx: CanvasRenderingContext2D,
-    x: number,
-    y: number,
-    r: number,
-    g: number,
-    b: number,
-    a: number,
-): void {
-    const data = ctx.getImageData(x, y, 1, 1).data;
-    expect(data[0]).toBe(r);
-    expect(data[1]).toBe(g);
-    expect(data[2]).toBe(b);
-    expect(data[3]).toBe(a);
-}
-
-export default async () => {
-    await describe('CanvasRenderingContext2D — drawImage', async () => {
-
-        await describe('3-argument form: drawImage(image, dx, dy)', async () => {
-            await it('draws a full canvas source at the given destination', async () => {
-                const src = createTestImage(10, 10, (c) => {
-                    c.fillStyle = 'rgb(255, 0, 0)';
-                    c.fillRect(0, 0, 10, 10);
-                });
-                const dst = makeCtx(30, 30);
-                dst.drawImage(src, 5, 5);
-                // Outside the drawn region → transparent
-                assertPixel(dst, 2, 2, 0, 0, 0, 0);
-                // Inside the drawn region → red
-                assertPixel(dst, 8, 8, 255, 0, 0, 255);
-                assertPixel(dst, 14, 14, 255, 0, 0, 255);
-                // Right at the edge of the drawn region
-                assertPixel(dst, 20, 20, 0, 0, 0, 0);
-            });
-        });
-
-        await describe('5-argument form: drawImage(image, dx, dy, dw, dh)', async () => {
-            await it('scales the source to the destination rectangle', async () => {
-                const src = createTestImage(4, 4, (c) => {
-                    c.fillStyle = 'rgb(0, 255, 0)';
-                    c.fillRect(0, 0, 4, 4);
-                });
-                const dst = makeCtx(40, 40);
-                dst.drawImage(src, 10, 10, 20, 20);
-                // Pixel well inside the 20×20 destination region → green
-                assertPixel(dst, 20, 20, 0, 255, 0, 255);
-                // Pixel outside the destination region → transparent
-                assertPixel(dst, 5, 5, 0, 0, 0, 0);
-            });
-        });
-
-        await describe('9-argument form: drawImage(image, sx,sy,sw,sh, dx,dy,dw,dh)', async () => {
-            await it('crops the source region and scales to destination', async () => {
-                // Source: 20x20 with left half red, right half blue
-                const src = createTestImage(20, 20, (c) => {
-                    c.fillStyle = 'rgb(255, 0, 0)';
-                    c.fillRect(0, 0, 10, 20);
-                    c.fillStyle = 'rgb(0, 0, 255)';
-                    c.fillRect(10, 0, 10, 20);
-                });
-                const dst = makeCtx(40, 40);
-                // Take only the right (blue) half of the source and scale to 30x30
-                dst.drawImage(src, 10, 0, 10, 20, 5, 5, 30, 30);
-                assertPixel(dst, 15, 20, 0, 0, 255, 255);
-                assertPixel(dst, 30, 20, 0, 0, 255, 255);
-                // Outside destination → still transparent
-                assertPixel(dst, 2, 2, 0, 0, 0, 0);
-            });
-        });
-
-        await describe('drawImage respects current transform', async () => {
-            await it('translate shifts the destination', async () => {
-                const src = createTestImage(10, 10, (c) => {
-                    c.fillStyle = 'rgb(255, 255, 0)';
-                    c.fillRect(0, 0, 10, 10);
-                });
-                const dst = makeCtx(30, 30);
-                dst.translate(10, 10);
-                dst.drawImage(src, 0, 0);
-                // Yellow should now appear at the translated origin
-                assertPixel(dst, 15, 15, 255, 255, 0, 255);
-                assertPixel(dst, 5, 5, 0, 0, 0, 0);
-            });
-
-            await it('save/restore isolates drawImage transforms', async () => {
-                const src = createTestImage(5, 5, (c) => {
-                    c.fillStyle = 'rgb(100, 100, 100)';
-                    c.fillRect(0, 0, 5, 5);
-                });
-                const dst = makeCtx(30, 30);
-                dst.save();
-                dst.translate(20, 20);
-                dst.drawImage(src, 0, 0);
-                dst.restore();
-                // After restore, drawImage at 0,0 goes to the origin
-                dst.drawImage(src, 0, 0);
-                // Both regions should contain grey pixels
-                assertPixel(dst, 2, 2, 100, 100, 100, 255);
-                assertPixel(dst, 22, 22, 100, 100, 100, 255);
-            });
-        });
-
-        await describe('drawImage with globalAlpha', async () => {
-            await it('premultiplies globalAlpha into the source color', async () => {
-                const src = createTestImage(10, 10, (c) => {
-                    c.fillStyle = 'rgb(255, 0, 0)';
-                    c.fillRect(0, 0, 10, 10);
-                });
-                const dst = makeCtx(30, 30);
-                dst.globalAlpha = 0.5;
-                dst.drawImage(src, 10, 10);
-                // Sample well inside the destination rect to avoid bilinear
-                // edge bleeding. Canvas 2D spec: getImageData returns
-                // non-premultiplied RGBA, so red stays 255 while alpha
-                // becomes ~128. Tolerance ±5 for Cairo's rounding.
-                const data = dst.getImageData(15, 15, 1, 1).data;
-                expect(data[0]).toBe(255);
-                expect(data[1]).toBe(0);
-                expect(data[2]).toBe(0);
-                expect(data[3] > 120 && data[3] < 135).toBe(true);
-            });
-        });
-
-        await describe('drawImage — zero-size and edge cases', async () => {
-            await it('drawImage with 0-width source is a no-op', async () => {
-                const src = createTestImage(10, 10, (c) => {
-                    c.fillStyle = 'red';
-                    c.fillRect(0, 0, 10, 10);
-                });
-                const dst = makeCtx(20, 20);
-                // Pre-fill destination to check nothing was overwritten
-                dst.fillStyle = 'blue';
-                dst.fillRect(0, 0, 20, 20);
-                dst.drawImage(src, 0, 0, 0, 10, 5, 5, 10, 10);
-                // Pixel should still be the pre-fill blue
-                assertPixel(dst, 10, 10, 0, 0, 255, 255);
-            });
-
-            await it('drawImage with 0-height destination is a no-op', async () => {
-                const src = createTestImage(10, 10, (c) => {
-                    c.fillStyle = 'red';
-                    c.fillRect(0, 0, 10, 10);
-                });
-                const dst = makeCtx(20, 20);
-                dst.fillStyle = 'blue';
-                dst.fillRect(0, 0, 20, 20);
-                dst.drawImage(src, 5, 5, 10, 0);
-                assertPixel(dst, 10, 10, 0, 0, 255, 255);
-            });
-
-            // Regression: Excalibur's Loader.onDraw computes its overlay
-            // dimensions from `engine.canvasWidth / engine.pixelRatio`. When
-            // the engine fixture isn't fully wired (jelly-jumper Canvas 2D
-            // fallback path before the camera target binds), pixelRatio
-            // can be 0, propagating Infinity into the dy / dh slots. The
-            // older guard only matched literal 0; the new guard rejects
-            // any non-finite coordinate so Cairo never sees a non-invertible
-            // matrix. Without this fix the showcase fataled mid-frame and
-            // Excalibur's clock stopped, leaving the background unrendered.
-            await it('drawImage with Infinity destination y is a no-op', async () => {
-                const src = createTestImage(10, 10, (c) => {
-                    c.fillStyle = 'red';
-                    c.fillRect(0, 0, 10, 10);
-                });
-                const dst = makeCtx(20, 20);
-                dst.fillStyle = 'blue';
-                dst.fillRect(0, 0, 20, 20);
-                // 9-arg form with Infinity in dy — must not throw and must
-                // leave the destination untouched.
-                dst.drawImage(src, 0, 0, 10, 10, 0, Infinity, 10, 10);
-                assertPixel(dst, 10, 10, 0, 0, 255, 255);
-            });
-
-            await it('drawImage with NaN destination height is a no-op', async () => {
-                const src = createTestImage(10, 10, (c) => {
-                    c.fillStyle = 'red';
-                    c.fillRect(0, 0, 10, 10);
-                });
-                const dst = makeCtx(20, 20);
-                dst.fillStyle = 'blue';
-                dst.fillRect(0, 0, 20, 20);
-                dst.drawImage(src, 0, 0, 10, 10, 5, 5, 10, NaN);
-                assertPixel(dst, 10, 10, 0, 0, 255, 255);
-            });
-
-            await it('drawImage with -Infinity source width is a no-op', async () => {
-                const src = createTestImage(10, 10, (c) => {
-                    c.fillStyle = 'red';
-                    c.fillRect(0, 0, 10, 10);
-                });
-                const dst = makeCtx(20, 20);
-                dst.fillStyle = 'blue';
-                dst.fillRect(0, 0, 20, 20);
-                dst.drawImage(src, 0, 0, -Infinity, 10, 5, 5, 10, 10);
-                assertPixel(dst, 10, 10, 0, 0, 255, 255);
-            });
-        });
-
-        await describe('drawImage — imageSmoothingEnabled pixel-art lock', async () => {
-            // Regression for the Cairo Filter.NEAREST fix in drawImage.
-            // When imageSmoothingEnabled=false, scaling a 2×2 image by 10 must
-            // produce a sharp checker pattern. Otherwise Cairo's default
-            // BILINEAR filter blends the pixels and pixel-art games render
-            // blurry.
-
-            await it('imageSmoothingEnabled=false: exact nearest-neighbor scale', async () => {
-                // 2×2 image: red (top-left), green (top-right),
-                //            blue (bottom-left), white (bottom-right).
-                const src = createTestImage(2, 2, (c) => {
-                    c.fillStyle = 'rgb(255, 0, 0)';   c.fillRect(0, 0, 1, 1);
-                    c.fillStyle = 'rgb(0, 255, 0)';   c.fillRect(1, 0, 1, 1);
-                    c.fillStyle = 'rgb(0, 0, 255)';   c.fillRect(0, 1, 1, 1);
-                    c.fillStyle = 'rgb(255, 255, 255)'; c.fillRect(1, 1, 1, 1);
-                });
-                const dst = makeCtx(20, 20);
-                dst.imageSmoothingEnabled = false;
-                dst.drawImage(src, 0, 0, 20, 20);
-
-                // With NEAREST, each source pixel fills a 10×10 quadrant in
-                // the destination without color bleeding. Pixel (5,5) should
-                // be exactly red, (15,5) exactly green, etc.
-                assertPixelExact(dst, 5, 5, 255, 0, 0, 255);
-                assertPixelExact(dst, 15, 5, 0, 255, 0, 255);
-                assertPixelExact(dst, 5, 15, 0, 0, 255, 255);
-                assertPixelExact(dst, 15, 15, 255, 255, 255, 255);
-            });
-
-            await it('imageSmoothingEnabled=true: bilinear bleeding at boundaries', async () => {
-                const src = createTestImage(2, 2, (c) => {
-                    c.fillStyle = 'rgb(255, 0, 0)';   c.fillRect(0, 0, 1, 1);
-                    c.fillStyle = 'rgb(0, 255, 0)';   c.fillRect(1, 0, 1, 1);
-                    c.fillStyle = 'rgb(0, 0, 255)';   c.fillRect(0, 1, 1, 1);
-                    c.fillStyle = 'rgb(255, 255, 255)'; c.fillRect(1, 1, 1, 1);
-                });
-                const dst = makeCtx(20, 20);
-                dst.imageSmoothingEnabled = true;
-                dst.drawImage(src, 0, 0, 20, 20);
-
-                // With bilinear, pixel at the boundary between red and green
-                // (around x=10, y=5) is a mix — NOT exactly red and NOT
-                // exactly green. This test proves the filter is applied.
-                const boundary = dst.getImageData(9, 5, 1, 1).data;
-                const isExactRed = boundary[0] === 255 && boundary[1] === 0;
-                const isExactGreen = boundary[0] === 0 && boundary[1] === 255;
-                // Neither pure red nor pure green → bilinear blending is active
-                expect(isExactRed).toBe(false);
-                expect(isExactGreen).toBe(false);
-            });
-        });
-
-        await describe('drawImage with composite operation', async () => {
-            // Note: the 'copy' operator in Canvas spec wipes the ENTIRE
-            // destination, not just the drawImage rect. Our implementation
-            // clips to the destination rect for paint(), so the "wipe
-            // outside" semantic is NOT implemented here — that would require
-            // a separate clearRect path. We only verify that the inside
-            // pixel is correctly replaced.
-            await it('drawImage honors globalCompositeOperation=source-over', async () => {
-                const src = createTestImage(10, 10, (c) => {
-                    c.fillStyle = 'rgb(0, 255, 0)';
-                    c.fillRect(0, 0, 10, 10);
-                });
-                const dst = makeCtx(20, 20);
-                // Pre-fill with red
-                dst.fillStyle = 'rgb(255, 0, 0)';
-                dst.fillRect(0, 0, 20, 20);
-                // source-over: green opaque pixel replaces red in the drawn region
-                dst.drawImage(src, 5, 5);
-                assertPixel(dst, 10, 10, 0, 255, 0, 255);
-                // Outside drawn region → still red (unaffected)
-                assertPixel(dst, 1, 1, 255, 0, 0, 255);
-            });
-        });
-    });
-};

package/src/canvas-gradient.ts

@@ -1,36 +0,0 @@
-// CanvasGradient implementation backed by Cairo gradient patterns
-// Reference: https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient
-
-import Cairo from 'cairo';
-import { parseColor } from './color.js';
-
-/**
- * CanvasGradient wrapping a Cairo LinearGradient or RadialGradient.
- */
-export class CanvasGradient {
-    private _pattern: Cairo.LinearGradient | Cairo.RadialGradient;
-
-    constructor(
-        type: 'linear' | 'radial',
-        x0: number, y0: number,
-        x1: number, y1: number,
-        r0?: number, r1?: number,
-    ) {
-        if (type === 'radial') {
-            this._pattern = new Cairo.RadialGradient(x0, y0, r0!, x1, y1, r1!);
-        } else {
-            this._pattern = new Cairo.LinearGradient(x0, y0, x1, y1);
-        }
-    }
-
-    addColorStop(offset: number, color: string): void {
-        const parsed = parseColor(color);
-        if (!parsed) return;
-        this._pattern.addColorStopRGBA(offset, parsed.r, parsed.g, parsed.b, parsed.a);
-    }
-
-    /** @internal Get the underlying Cairo pattern for rendering. */
-    _getCairoPattern(): Cairo.LinearGradient | Cairo.RadialGradient {
-        return this._pattern;
-    }
-}

package/src/canvas-imagedata.spec.ts

@@ -1,150 +0,0 @@
-// Canvas 2D ImageData tests — createImageData, getImageData, putImageData
-// round-trip. Verifies pixel extraction from Cairo surfaces and the
-// RGBA byte order expected by consumers.
-//
-// Ported from refs/wpt/html/canvas/element/pixel-manipulation/
-//   2d.imageData.{create1.basic,create2.{basic,initial},get.{order.rgb,
-//   source.negative,source.outside},put.basic.rgba,put.alpha,put.dirty*}.html
-// Original: Copyright (c) Web Platform Tests contributors. 3-Clause BSD.
-// Reimplemented for GJS using @gjsify/canvas2d-core + @gjsify/unit.
-
-import { describe, it, expect } from '@gjsify/unit';
-import { CanvasRenderingContext2D } from './canvas-rendering-context-2d.js';
-
-function makeCtx(width = 20, height = 20): CanvasRenderingContext2D {
-    const canvas = { width, height };
-    return new CanvasRenderingContext2D(canvas);
-}
-
-export default async () => {
-    await describe('CanvasRenderingContext2D — ImageData', async () => {
-
-        await describe('createImageData', async () => {
-            await it('createImageData(w, h) returns an RGBA Uint8ClampedArray of w*h*4 bytes', async () => {
-                const ctx = makeCtx();
-                const img = ctx.createImageData(10, 5);
-                expect(img.width).toBe(10);
-                expect(img.height).toBe(5);
-                expect(img.data.length).toBe(10 * 5 * 4);
-            });
-
-            await it('createImageData data is initialized to transparent black', async () => {
-                const ctx = makeCtx();
-                const img = ctx.createImageData(4, 4);
-                for (let i = 0; i < img.data.length; i++) {
-                    expect(img.data[i]).toBe(0);
-                }
-            });
-
-            await it('createImageData(imageData) returns a clone with matching dimensions', async () => {
-                const ctx = makeCtx();
-                const src = ctx.createImageData(8, 3);
-                const clone = ctx.createImageData(src);
-                expect(clone.width).toBe(8);
-                expect(clone.height).toBe(3);
-                expect(clone.data.length).toBe(8 * 3 * 4);
-            });
-        });
-
-        await describe('getImageData', async () => {
-            await it('returns correct RGBA for a filled region', async () => {
-                const ctx = makeCtx(10, 10);
-                ctx.fillStyle = 'rgb(200, 100, 50)';
-                ctx.fillRect(0, 0, 10, 10);
-                const data = ctx.getImageData(5, 5, 1, 1).data;
-                expect(data[0]).toBe(200);
-                expect(data[1]).toBe(100);
-                expect(data[2]).toBe(50);
-                expect(data[3]).toBe(255);
-            });
-
-            await it('returns a full RGBA grid for a multi-pixel region', async () => {
-                const ctx = makeCtx(4, 4);
-                ctx.fillStyle = 'rgb(10, 20, 30)';
-                ctx.fillRect(0, 0, 4, 4);
-                const img = ctx.getImageData(0, 0, 4, 4);
-                expect(img.width).toBe(4);
-                expect(img.height).toBe(4);
-                expect(img.data.length).toBe(4 * 4 * 4);
-                // All 16 pixels should be (10, 20, 30, 255)
-                for (let i = 0; i < 16; i++) {
-                    expect(img.data[i * 4 + 0]).toBe(10);
-                    expect(img.data[i * 4 + 1]).toBe(20);
-                    expect(img.data[i * 4 + 2]).toBe(30);
-                    expect(img.data[i * 4 + 3]).toBe(255);
-                }
-            });
-
-            await it('preserves byte order across fillStyle color channels', async () => {
-                const ctx = makeCtx(3, 1);
-                ctx.fillStyle = 'rgb(255, 0, 0)';
-                ctx.fillRect(0, 0, 1, 1);
-                ctx.fillStyle = 'rgb(0, 255, 0)';
-                ctx.fillRect(1, 0, 1, 1);
-                ctx.fillStyle = 'rgb(0, 0, 255)';
-                ctx.fillRect(2, 0, 1, 1);
-                const data = ctx.getImageData(0, 0, 3, 1).data;
-                // Pixel 0: red
-                expect(data[0]).toBe(255);
-                expect(data[1]).toBe(0);
-                expect(data[2]).toBe(0);
-                // Pixel 1: green
-                expect(data[4]).toBe(0);
-                expect(data[5]).toBe(255);
-                expect(data[6]).toBe(0);
-                // Pixel 2: blue
-                expect(data[8]).toBe(0);
-                expect(data[9]).toBe(0);
-                expect(data[10]).toBe(255);
-            });
-        });
-
-        await describe('putImageData', async () => {
-            await it('roundtrips get → put → get unchanged', async () => {
-                const ctx = makeCtx(10, 10);
-                ctx.fillStyle = 'rgb(77, 88, 99)';
-                ctx.fillRect(0, 0, 10, 10);
-                const first = ctx.getImageData(0, 0, 10, 10);
-                ctx.clearRect(0, 0, 10, 10);
-                ctx.putImageData(first, 0, 0);
-                const second = ctx.getImageData(5, 5, 1, 1).data;
-                expect(second[0]).toBe(77);
-                expect(second[1]).toBe(88);
-                expect(second[2]).toBe(99);
-                expect(second[3]).toBe(255);
-            });
-
-            await it('putImageData ignores globalAlpha (spec)', async () => {
-                const ctx = makeCtx(10, 10);
-                ctx.fillStyle = 'rgb(100, 100, 100)';
-                ctx.fillRect(0, 0, 10, 10);
-                const src = ctx.getImageData(0, 0, 10, 10);
-                ctx.clearRect(0, 0, 10, 10);
-                ctx.globalAlpha = 0.1;
-                ctx.putImageData(src, 0, 0);
-                // putImageData writes raw pixels — globalAlpha has no effect.
-                const after = ctx.getImageData(5, 5, 1, 1).data;
-                expect(after[0]).toBe(100);
-                expect(after[3]).toBe(255);
-            });
-
-            await it('putImageData ignores globalCompositeOperation (spec: always SOURCE)', async () => {
-                const ctx = makeCtx(10, 10);
-                ctx.fillStyle = 'rgb(0, 255, 0)';
-                ctx.fillRect(0, 0, 10, 10);
-                const src = ctx.getImageData(0, 0, 10, 10);
-                // Re-fill the canvas with red, then putImageData the green data
-                // under a non-default composite.
-                ctx.fillStyle = 'rgb(255, 0, 0)';
-                ctx.fillRect(0, 0, 10, 10);
-                ctx.globalCompositeOperation = 'destination-over';
-                ctx.putImageData(src, 0, 0);
-                // Spec: putImageData uses SOURCE → green replaces red.
-                const data = ctx.getImageData(5, 5, 1, 1).data;
-                expect(data[0]).toBe(0);
-                expect(data[1]).toBe(255);
-                expect(data[2]).toBe(0);
-            });
-        });
-    });
-};