@gjsify/canvas2d-core 0.4.0 → 0.4.3

package/src/canvas-state.spec.ts

@@ -1,245 +0,0 @@
-// Canvas 2D state stack tests — save/restore must round-trip every
-// state field (fillStyle, strokeStyle, globalAlpha, lineWidth, transform,
-// text properties, clip region, imageSmoothingEnabled).
-//
-// Ported from refs/wpt/html/canvas/element/the-canvas-state/
-//   2d.state.saverestore.{fillStyle,strokeStyle,globalAlpha,
-//   globalCompositeOperation,lineWidth,lineCap,lineJoin,miterLimit,
-//   transformation,path,underflow,clip,stackdepth}.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);
-}
-
-function nearlyEqual(a: number, b: number, eps = 1e-9): boolean {
-    return Math.abs(a - b) < eps;
-}
-
-export default async () => {
-    await describe('CanvasRenderingContext2D — state save/restore', async () => {
-
-        await describe('style properties', async () => {
-            await it('save/restore round-trips fillStyle string colors', async () => {
-                const ctx = makeCtx();
-                ctx.fillStyle = '#ff0000';
-                ctx.save();
-                ctx.fillStyle = '#00ff00';
-                expect(ctx.fillStyle).toBe('#00ff00');
-                ctx.restore();
-                expect(ctx.fillStyle).toBe('#ff0000');
-            });
-
-            await it('save/restore round-trips strokeStyle', async () => {
-                const ctx = makeCtx();
-                ctx.strokeStyle = '#112233';
-                ctx.save();
-                ctx.strokeStyle = '#445566';
-                ctx.restore();
-                expect(ctx.strokeStyle).toBe('#112233');
-            });
-
-            await it('save/restore round-trips globalAlpha', async () => {
-                const ctx = makeCtx();
-                ctx.globalAlpha = 0.3;
-                ctx.save();
-                ctx.globalAlpha = 0.9;
-                ctx.restore();
-                expect(nearlyEqual(ctx.globalAlpha, 0.3)).toBe(true);
-            });
-
-            await it('save/restore round-trips globalCompositeOperation', async () => {
-                const ctx = makeCtx();
-                ctx.globalCompositeOperation = 'source-over';
-                ctx.save();
-                ctx.globalCompositeOperation = 'destination-over';
-                ctx.restore();
-                expect(ctx.globalCompositeOperation).toBe('source-over');
-            });
-        });
-
-        await describe('line properties', async () => {
-            await it('save/restore round-trips lineWidth', async () => {
-                const ctx = makeCtx();
-                ctx.lineWidth = 3;
-                ctx.save();
-                ctx.lineWidth = 10;
-                ctx.restore();
-                expect(ctx.lineWidth).toBe(3);
-            });
-
-            await it('save/restore round-trips lineCap and lineJoin', async () => {
-                const ctx = makeCtx();
-                ctx.lineCap = 'round';
-                ctx.lineJoin = 'bevel';
-                ctx.save();
-                ctx.lineCap = 'square';
-                ctx.lineJoin = 'miter';
-                ctx.restore();
-                expect(ctx.lineCap).toBe('round');
-                expect(ctx.lineJoin).toBe('bevel');
-            });
-
-            await it('save/restore round-trips miterLimit', async () => {
-                const ctx = makeCtx();
-                ctx.miterLimit = 5;
-                ctx.save();
-                ctx.miterLimit = 20;
-                ctx.restore();
-                expect(ctx.miterLimit).toBe(5);
-            });
-
-            await it('save/restore round-trips lineDash and lineDashOffset', async () => {
-                const ctx = makeCtx();
-                ctx.setLineDash([5, 2]);
-                ctx.lineDashOffset = 3;
-                ctx.save();
-                ctx.setLineDash([10, 10]);
-                ctx.lineDashOffset = 7;
-                ctx.restore();
-                const restored = ctx.getLineDash();
-                expect(restored.length).toBe(2);
-                expect(restored[0]).toBe(5);
-                expect(restored[1]).toBe(2);
-                expect(ctx.lineDashOffset).toBe(3);
-            });
-        });
-
-        await describe('text properties', async () => {
-            await it('save/restore round-trips font, textAlign, textBaseline', async () => {
-                const ctx = makeCtx();
-                ctx.font = 'bold 20px sans-serif';
-                ctx.textAlign = 'center';
-                ctx.textBaseline = 'middle';
-                ctx.save();
-                ctx.font = '10px serif';
-                ctx.textAlign = 'left';
-                ctx.textBaseline = 'top';
-                ctx.restore();
-                expect(ctx.font).toBe('bold 20px sans-serif');
-                expect(ctx.textAlign).toBe('center');
-                expect(ctx.textBaseline).toBe('middle');
-            });
-        });
-
-        await describe('shadow properties', async () => {
-            await it('save/restore round-trips shadow state', async () => {
-                const ctx = makeCtx();
-                ctx.shadowColor = '#abcdef';
-                ctx.shadowBlur = 5;
-                ctx.shadowOffsetX = 3;
-                ctx.shadowOffsetY = 7;
-                ctx.save();
-                ctx.shadowColor = '#000000';
-                ctx.shadowBlur = 0;
-                ctx.shadowOffsetX = 0;
-                ctx.shadowOffsetY = 0;
-                ctx.restore();
-                expect(ctx.shadowColor).toBe('#abcdef');
-                expect(ctx.shadowBlur).toBe(5);
-                expect(ctx.shadowOffsetX).toBe(3);
-                expect(ctx.shadowOffsetY).toBe(7);
-            });
-        });
-
-        await describe('imageSmoothing properties — Excalibur pixel-art regression', async () => {
-            // Locks the Phase D imageSmoothingEnabled=false fix. If any
-            // future refactor drops imageSmoothingEnabled from cloneState,
-            // save/restore would silently reset it to the default (true)
-            // and pixel-art sprites would render blurry again.
-            await it('save/restore round-trips imageSmoothingEnabled', async () => {
-                const ctx = makeCtx();
-                ctx.imageSmoothingEnabled = false;
-                ctx.save();
-                ctx.imageSmoothingEnabled = true;
-                ctx.restore();
-                expect(ctx.imageSmoothingEnabled).toBe(false);
-            });
-
-            await it('save/restore round-trips imageSmoothingQuality', async () => {
-                const ctx = makeCtx();
-                ctx.imageSmoothingQuality = 'high';
-                ctx.save();
-                ctx.imageSmoothingQuality = 'low';
-                ctx.restore();
-                expect(ctx.imageSmoothingQuality).toBe('high');
-            });
-        });
-
-        await describe('transform matrix', async () => {
-            await it('save/restore round-trips translation', async () => {
-                const ctx = makeCtx();
-                ctx.translate(10, 20);
-                ctx.save();
-                ctx.translate(50, 50);
-                const inner = ctx.getTransform();
-                expect(nearlyEqual(inner.e, 60)).toBe(true);
-                expect(nearlyEqual(inner.f, 70)).toBe(true);
-                ctx.restore();
-                const outer = ctx.getTransform();
-                expect(nearlyEqual(outer.e, 10)).toBe(true);
-                expect(nearlyEqual(outer.f, 20)).toBe(true);
-            });
-
-            await it('save/restore round-trips scale', async () => {
-                const ctx = makeCtx();
-                ctx.scale(2, 3);
-                ctx.save();
-                ctx.scale(5, 5);
-                ctx.restore();
-                const m = ctx.getTransform();
-                expect(nearlyEqual(m.a, 2)).toBe(true);
-                expect(nearlyEqual(m.d, 3)).toBe(true);
-            });
-        });
-
-        await describe('nested save/restore stacks', async () => {
-            await it('triple save + triple restore returns to default', async () => {
-                const ctx = makeCtx();
-                ctx.save();
-                ctx.fillStyle = '#111111';
-                ctx.save();
-                ctx.fillStyle = '#222222';
-                ctx.save();
-                ctx.fillStyle = '#333333';
-                ctx.restore();
-                expect(ctx.fillStyle).toBe('#222222');
-                ctx.restore();
-                expect(ctx.fillStyle).toBe('#111111');
-                ctx.restore();
-                // Default fillStyle per spec is #000000
-                expect(ctx.fillStyle).toBe('#000000');
-            });
-
-            await it('restore() on empty stack is a no-op', async () => {
-                const ctx = makeCtx();
-                // Should not throw — Canvas 2D spec explicitly allows
-                // unbalanced restores.
-                expect(() => {
-                    ctx.restore();
-                    ctx.restore();
-                    ctx.restore();
-                }).not.toThrow();
-            });
-
-            await it('deep stack (50 saves) restores correctly', async () => {
-                const ctx = makeCtx();
-                const fills: string[] = [];
-                for (let i = 0; i < 50; i++) {
-                    ctx.save();
-                    ctx.fillStyle = '#' + (i * 7).toString(16).padStart(6, '0');
-                    fills.push(ctx.fillStyle as string);
-                }
-                for (let i = 49; i >= 0; i--) {
-                    expect(ctx.fillStyle).toBe(fills[i]);
-                    ctx.restore();
-                }
-            });
-        });
-    });
-};

package/src/canvas-state.ts

@@ -1,77 +0,0 @@
-// Drawing state for Canvas 2D context save()/restore() stack.
-// Each save() pushes a clone of the current state; restore() pops it.
-
-import type { RGBA } from './color.js';
-import { BLACK } from './color.js';
-
-export interface CanvasState {
-    // Fill & stroke
-    fillStyle: string | CanvasGradient | CanvasPattern;
-    fillColor: RGBA;
-    strokeStyle: string | CanvasGradient | CanvasPattern;
-    strokeColor: RGBA;
-
-    // Line properties
-    lineWidth: number;
-    lineCap: CanvasLineCap;
-    lineJoin: CanvasLineJoin;
-    miterLimit: number;
-    lineDash: number[];
-    lineDashOffset: number;
-
-    // Compositing
-    globalAlpha: number;
-    globalCompositeOperation: GlobalCompositeOperation;
-
-    // Shadows (Phase 5 — tracked in state for save/restore correctness)
-    shadowColor: string;
-    shadowBlur: number;
-    shadowOffsetX: number;
-    shadowOffsetY: number;
-
-    // Text (Phase 4)
-    font: string;
-    textAlign: CanvasTextAlign;
-    textBaseline: CanvasTextBaseline;
-    direction: CanvasDirection;
-
-    // Image smoothing
-    imageSmoothingEnabled: boolean;
-    imageSmoothingQuality: ImageSmoothingQuality;
-}
-
-export function createDefaultState(): CanvasState {
-    return {
-        fillStyle: '#000000',
-        fillColor: { ...BLACK },
-        strokeStyle: '#000000',
-        strokeColor: { ...BLACK },
-        lineWidth: 1,
-        lineCap: 'butt',
-        lineJoin: 'miter',
-        miterLimit: 10,
-        lineDash: [],
-        lineDashOffset: 0,
-        globalAlpha: 1,
-        globalCompositeOperation: 'source-over',
-        shadowColor: 'rgba(0, 0, 0, 0)',
-        shadowBlur: 0,
-        shadowOffsetX: 0,
-        shadowOffsetY: 0,
-        font: '10px sans-serif',
-        textAlign: 'start',
-        textBaseline: 'alphabetic',
-        direction: 'ltr',
-        imageSmoothingEnabled: true,
-        imageSmoothingQuality: 'low',
-    };
-}
-
-export function cloneState(state: CanvasState): CanvasState {
-    return {
-        ...state,
-        fillColor: { ...state.fillColor },
-        strokeColor: { ...state.strokeColor },
-        lineDash: [...state.lineDash],
-    };
-}

package/src/canvas-text.spec.ts

@@ -1,241 +0,0 @@
-// Canvas 2D text rendering tests — baseline positioning and alignment
-// Reference: refs/wpt/html/canvas/element/text/2d.text.draw.baseline.*.html
-// Ported from W3C WPT canvas text tests (3-Clause BSD, web-platform-tests contributors)
-// Reimplemented for GJS using PangoCairo (no DOM, no font face loading)
-
-import { describe, it, expect } from '@gjsify/unit';
-import { CanvasRenderingContext2D } from './canvas-rendering-context-2d.js';
-
-// --- Helpers ---
-
-/**
- * Create a minimal canvas mock + context for testing.
- * CanvasRenderingContext2D only needs canvas.width / canvas.height.
- */
-function makeCtx(width: number, height: number): CanvasRenderingContext2D {
-    const canvas = { width, height };
-    return new CanvasRenderingContext2D(canvas);
-}
-
-/**
- * Find the first and last row (y-coordinate) that contains at least one
- * "green" pixel (G > 128, R < 64, B < 64) in the given ImageData.
- * Returns { first: -1, last: -1 } when no green pixel is found.
- */
-function findGreenRowBounds(data: Uint8ClampedArray, width: number, height: number) {
-    let first = -1;
-    let last = -1;
-    for (let y = 0; y < height; y++) {
-        for (let x = 0; x < width; x++) {
-            const i = (y * width + x) * 4;
-            if (data[i + 1] > 128 && data[i] < 64 && data[i + 2] < 64) {
-                if (first === -1) first = y;
-                last = y;
-                break;
-            }
-        }
-    }
-    return { first, last };
-}
-
-/**
- * Draw text on a background-filled canvas and return the bounding rows of the
- * rendered text pixels.
- *
- * @param baseline CSS textBaseline value
- * @param yCoord   The y argument passed to fillText
- * @param width    Canvas width
- * @param height   Canvas height
- */
-function drawAndMeasure(
-    baseline: CanvasTextBaseline,
-    yCoord: number,
-    width = 300,
-    height = 100,
-) {
-    const ctx = makeCtx(width, height);
-
-    // Red background
-    ctx.fillStyle = '#f00';
-    ctx.fillRect(0, 0, width, height);
-
-    // Green text — use a wide string to guarantee pixels across multiple columns
-    ctx.fillStyle = '#0f0';
-    ctx.font = '24px sans-serif';
-    ctx.textBaseline = baseline;
-    ctx.textAlign = 'left';
-    ctx.fillText('XXXXXXX', 0, yCoord);
-
-    const imageData = ctx.getImageData(0, 0, width, height);
-    return findGreenRowBounds(imageData.data, width, height);
-}
-
-// --- Tests ---
-
-export default async () => {
-
-    await describe('CanvasRenderingContext2D.fillText — textBaseline positioning', async () => {
-
-        // textBaseline='top': text top edge is at the provided y coordinate.
-        // With y=5, the first green row must appear near y=5 (within ±8px).
-        await it("textBaseline='top': text starts near y", async () => {
-            const { first, last } = drawAndMeasure('top', 5);
-            expect(first).toBeGreaterThan(-1); // text was rendered
-            expect(first).toBeLessThan(15);    // top edge close to y=5
-            expect(last).toBeGreaterThan(first); // text has height
-        });
-
-        // textBaseline='bottom': text bottom edge is at y. With y=95 on a 100px canvas,
-        // the last green row must appear near y=95 (within ±8px).
-        await it("textBaseline='bottom': text ends near y", async () => {
-            const { first, last } = drawAndMeasure('bottom', 95, 300, 100);
-            expect(last).toBeGreaterThan(-1);  // text was rendered
-            expect(last).toBeGreaterThan(85);  // bottom edge close to y=95
-            expect(first).toBeLessThan(last);  // text has height
-        });
-
-        // textBaseline='middle': the vertical midpoint of the text is at y.
-        // With y=50 on a 100px canvas, text must span across the center:
-        // first green row < 50 AND last green row > 50.
-        await it("textBaseline='middle': text is centered on y", async () => {
-            const { first, last } = drawAndMeasure('middle', 50, 300, 100);
-            expect(first).toBeGreaterThan(-1);
-            expect(first).toBeLessThan(50);    // text extends above center
-            expect(last).toBeGreaterThan(50);  // text extends below center
-        });
-
-        // textBaseline='alphabetic': the baseline (a reference Latin line) is at y.
-        // Ascent extends above y, descent extends below.
-        // With y=50 on a 100px canvas:
-        //   - first green row < 50 (ascent above baseline)
-        //   - last green row > 50  (descent below baseline — use 'g' which has a descender)
-        await it("textBaseline='alphabetic': baseline is at y, ascent above, descent below", async () => {
-            // Use text with descenders (g, p, q, y) so pixels extend below the baseline.
-            const canvas = { width: 300, height: 100 };
-            const ctx = new CanvasRenderingContext2D(canvas);
-            ctx.fillStyle = '#f00';
-            ctx.fillRect(0, 0, 300, 100);
-            ctx.fillStyle = '#0f0';
-            ctx.font = '24px sans-serif';
-            ctx.textBaseline = 'alphabetic';
-            ctx.textAlign = 'left';
-            ctx.fillText('Xgpqy', 0, 50); // descenders ensure pixels below baseline
-            const imageData = ctx.getImageData(0, 0, 300, 100);
-            const { first, last } = findGreenRowBounds(imageData.data, 300, 100);
-            expect(first).toBeGreaterThan(-1);
-            expect(first).toBeLessThan(50);    // text extends above y
-            expect(last).toBeGreaterThan(50);  // descent below y
-        });
-
-        // textBaseline='hanging': the hanging baseline is at y (used for Devanagari etc.).
-        // Approximates the top of the cap height (~0.8 * ascent below the em-square top).
-        // Most of the text should extend BELOW y, with very little above.
-        await it("textBaseline='hanging': text mostly extends below y", async () => {
-            const { first, last } = drawAndMeasure('hanging', 5, 300, 100);
-            expect(first).toBeGreaterThan(-1);
-            // Text should start near y=5; because hanging ≈ 0.2*ascent from top,
-            // first green row should be within 10px of y=5.
-            expect(first).toBeLessThan(20);
-            expect(last).toBeGreaterThan(first);
-        });
-
-        // textBaseline='ideographic': ideographic baseline is at y.
-        // Below the alphabetic baseline; the bulk of text is ABOVE y.
-        await it("textBaseline='ideographic': most text is above y", async () => {
-            const { first, last } = drawAndMeasure('ideographic', 70, 300, 100);
-            expect(first).toBeGreaterThan(-1);
-            expect(first).toBeLessThan(70);  // text extends above y
-            // last may be ≥ 70 (descent below ideographic line) or ≤ 70
-            expect(last).toBeGreaterThan(first);
-        });
-
-        // Regression: 'top' at y=0 should NOT be far below y=0.
-        // Before fix, yOff = +ascent pushed text ~20px too low (wrong).
-        await it("textBaseline='top' regression: first pixel is near y=0, not shifted down by ascent", async () => {
-            const { first } = drawAndMeasure('top', 0, 300, 80);
-            // Before fix: first ≈ 18+ (shifted by ascent). After fix: first ≈ 0-9
-            // (exact value varies with PangoCairo version and font hinting).
-            expect(first).toBeLessThan(12);
-        });
-
-        // Regression: 'alphabetic' at y=40 should put text above AND below y=40.
-        // Before fix, yOff=0 put the layout TOP at y=40, so all text was below y=40.
-        await it("textBaseline='alphabetic' regression: text extends above y, not only below", async () => {
-            const { first } = drawAndMeasure('alphabetic', 40, 300, 80);
-            expect(first).toBeLessThan(40);  // ascent extends above y=40
-        });
-
-        // Regression: 'middle' at y=40 with 24px font → text spans ~28..52
-        // Before fix: yOff = ascent - height/2 ≈ +10, so layout top at ~50, text at 50..74
-        //             → first ≈ 50, which is NOT less than 40.
-        await it("textBaseline='middle' regression: text straddles y, not shifted below y", async () => {
-            const { first } = drawAndMeasure('middle', 40, 300, 80);
-            expect(first).toBeLessThan(40);
-        });
-    });
-
-    await describe('CanvasRenderingContext2D.fillText — textAlign positioning', async () => {
-
-        await it("textAlign='center': text is centered on x", async () => {
-            const width = 200;
-            const height = 60;
-            const ctx = makeCtx(width, height);
-            ctx.fillStyle = '#f00';
-            ctx.fillRect(0, 0, width, height);
-            ctx.fillStyle = '#0f0';
-            ctx.font = '20px sans-serif';
-            ctx.textBaseline = 'top';
-            ctx.textAlign = 'center';
-            ctx.fillText('XX', width / 2, 0);
-
-            const imageData = ctx.getImageData(0, 0, width, height);
-            // Find leftmost and rightmost green column
-            let leftCol = -1, rightCol = -1;
-            for (let x = 0; x < width; x++) {
-                for (let y = 0; y < height; y++) {
-                    const i = (y * width + x) * 4;
-                    if (imageData.data[i + 1] > 128 && imageData.data[i] < 64 && imageData.data[i + 2] < 64) {
-                        if (leftCol === -1) leftCol = x;
-                        rightCol = x;
-                        break;
-                    }
-                }
-            }
-            expect(leftCol).toBeGreaterThan(-1);
-            // Text should be roughly centered: left and right distances from center should be similar
-            const distLeft = width / 2 - leftCol;
-            const distRight = rightCol - width / 2;
-            // Both sides should have roughly equal extent (within 20px)
-            expect(Math.abs(distLeft - distRight)).toBeLessThan(20);
-        });
-
-        await it("textAlign='left': text starts at x", async () => {
-            const width = 200;
-            const height = 60;
-            const ctx = makeCtx(width, height);
-            ctx.fillStyle = '#f00';
-            ctx.fillRect(0, 0, width, height);
-            ctx.fillStyle = '#0f0';
-            ctx.font = '20px sans-serif';
-            ctx.textBaseline = 'top';
-            ctx.textAlign = 'left';
-            ctx.fillText('XX', 20, 0);
-
-            const imageData = ctx.getImageData(0, 0, width, height);
-            let leftCol = -1;
-            outer: for (let x = 0; x < width; x++) {
-                for (let y = 0; y < height; y++) {
-                    const i = (y * width + x) * 4;
-                    if (imageData.data[i + 1] > 128 && imageData.data[i] < 64 && imageData.data[i + 2] < 64) {
-                        leftCol = x;
-                        break outer;
-                    }
-                }
-            }
-            // leftmost green pixel should be near x=20
-            expect(leftCol).toBeGreaterThan(-1);
-            expect(leftCol).toBeGreaterThan(14);
-            expect(leftCol).toBeLessThan(30);
-        });
-    });
-};