test: math-based screen-space verification of flip transforms

Address concern that the previous tests only verified call structure,
not that the resulting transform was actually correct.

New approach: replay the recorded translate/scale renderer calls into
a real Matrix2d, then apply that matrix to the corners of drawPattern's
destination rect. The resulting screen-space coordinates can be compared
against the values the math says they should be.

6 new tests:
- zoom=1, no flip → corners at (0,0) … (2W, 2H)
- zoom=2, no flip → corners at (0,0) … (4W, 4H)
- flipX zoom=1 → SAME screen footprint, horizontal corner swap
- flipX zoom=2 → SAME screen footprint (the actual regression: this
  would FAIL on the original preDraw-based flip)
- flipY zoom=2 → SAME screen footprint, vertical corner swap
- flipX+flipY zoom=2 → corners rotate 180° around the rect centre

These prove the algebra (pivot location, ordering with the zoom
transforms) — not just that calls happen.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: obiot

packages/melonjs/tests/imagelayer.spec.js

@@ -1,5 +1,5 @@
 import { beforeAll, describe, expect, it, vi } from "vitest";
-import { boot, game, ImageLayer, Rect, video } from "../src/index.js";
+import { boot, game, ImageLayer, Matrix2d, Rect, video } from "../src/index.js";
 
 describe("ImageLayer", () => {
 	let testImage;
@@ -314,4 +314,253 @@ describe("ImageLayer", () => {
 			expect(setMaskIdx).toBeGreaterThan(zoomScaleIdx);
 		});
 	});
+
+	describe("draw screen-space transform math (replays renderer calls)", () => {
+		// Replays the recorded translate/scale calls into a real Matrix2d,
+		// then applies the matrix to the corners of `drawPattern(0,0,W*2,H*2)`
+		// to compute their final screen-space positions. This tests the actual
+		// composed transform — not just that individual calls happened.
+		function replayInto(matrix, events) {
+			for (const e of events) {
+				if (e.kind === "translate") {
+					matrix.translate(e.args[0], e.args[1]);
+				} else if (e.kind === "scale") {
+					matrix.scale(e.args[0], e.args[1]);
+				}
+			}
+			return matrix;
+		}
+
+		function makeRendererStub(events) {
+			return {
+				save: vi.fn(),
+				translate: vi.fn((x, y) => {
+					events.push({ kind: "translate", args: [x, y] });
+				}),
+				scale: vi.fn((x, y) => {
+					events.push({ kind: "scale", args: [x, y] });
+				}),
+				setMask: vi.fn(),
+				drawPattern: vi.fn(),
+			};
+		}
+
+		function makeLayer() {
+			const layer = new ImageLayer(0, 0, {
+				image: testImage,
+				name: "test",
+				repeat: "no-repeat",
+			});
+			// pin the layer geometry — `pos = (0,0)`, anchor `(0,0)`, ratio `(0,0)`
+			// (static), so the computed `x` / `y` in draw() are both 0
+			layer.width = 64;
+			layer.height = 64;
+			return layer;
+		}
+
+		function makeViewport({ zoom = 1, width = 800, height = 600 } = {}) {
+			return {
+				zoom,
+				width,
+				height,
+				pos: { x: 0, y: 0 },
+				bounds: { width, height },
+			};
+		}
+
+		// Corners of drawPattern's destination rect in local coordinates,
+		// before any of the recorded transforms are applied. drawPattern is
+		// always called with `(0, 0, viewport.width * 2, viewport.height * 2)`.
+		function corners(viewport) {
+			const W2 = viewport.width * 2;
+			const H2 = viewport.height * 2;
+			return {
+				topLeft: { x: 0, y: 0 },
+				topRight: { x: W2, y: 0 },
+				bottomLeft: { x: 0, y: H2 },
+				bottomRight: { x: W2, y: H2 },
+			};
+		}
+
+		// At pos=(0,0) anchor=(0,0) static, the unflipped pattern occupies
+		// the screen-space rect (0, 0) → (W*2*Z, H*2*Z).
+		function expectedUnflipped(viewport) {
+			const W2 = viewport.width * 2;
+			const H2 = viewport.height * 2;
+			const Z = viewport.zoom;
+			return {
+				topLeft: { x: 0, y: 0 },
+				topRight: { x: W2 * Z, y: 0 },
+				bottomLeft: { x: 0, y: H2 * Z },
+				bottomRight: { x: W2 * Z, y: H2 * Z },
+			};
+		}
+
+		function transformCorners(matrix, c) {
+			const out = {};
+			for (const k of Object.keys(c)) {
+				out[k] = { x: c[k].x, y: c[k].y };
+				matrix.apply(out[k]);
+			}
+			return out;
+		}
+
+		function expectClose(actual, expected) {
+			expect(actual.x).toBeCloseTo(expected.x, 6);
+			expect(actual.y).toBeCloseTo(expected.y, 6);
+		}
+
+		it("zoom=1, no flip: pattern occupies (0,0) → (2W, 2H) in screen space", () => {
+			const events = [];
+			const layer = makeLayer();
+			const viewport = makeViewport({ zoom: 1 });
+			layer.draw(makeRendererStub(events), viewport);
+
+			const actual = transformCorners(
+				replayInto(new Matrix2d(), events),
+				corners(viewport),
+			);
+			const exp = expectedUnflipped(viewport);
+			expectClose(actual.topLeft, exp.topLeft);
+			expectClose(actual.topRight, exp.topRight);
+			expectClose(actual.bottomLeft, exp.bottomLeft);
+			expectClose(actual.bottomRight, exp.bottomRight);
+		});
+
+		it("zoom=2, no flip: pattern occupies (0,0) → (2W*2, 2H*2) in screen space", () => {
+			const events = [];
+			const layer = makeLayer();
+			const viewport = makeViewport({ zoom: 2 });
+			layer.draw(makeRendererStub(events), viewport);
+
+			const actual = transformCorners(
+				replayInto(new Matrix2d(), events),
+				corners(viewport),
+			);
+			const exp = expectedUnflipped(viewport);
+			expectClose(actual.topLeft, exp.topLeft);
+			expectClose(actual.topRight, exp.topRight);
+			expectClose(actual.bottomLeft, exp.bottomLeft);
+			expectClose(actual.bottomRight, exp.bottomRight);
+		});
+
+		it("flipX at zoom=1: covers SAME screen rect as unflipped, but corners swap horizontally", () => {
+			const events = [];
+			const layer = makeLayer();
+			layer.flipX(true);
+			const viewport = makeViewport({ zoom: 1 });
+			layer.draw(makeRendererStub(events), viewport);
+
+			const actual = transformCorners(
+				replayInto(new Matrix2d(), events),
+				corners(viewport),
+			);
+			const exp = expectedUnflipped(viewport);
+
+			// the screen-space footprint is identical (mirror, not translate)
+			const actualXs = [
+				actual.topLeft.x,
+				actual.topRight.x,
+				actual.bottomLeft.x,
+				actual.bottomRight.x,
+			];
+			const expectedXs = [
+				exp.topLeft.x,
+				exp.topRight.x,
+				exp.bottomLeft.x,
+				exp.bottomRight.x,
+			];
+			expect(Math.min(...actualXs)).toBeCloseTo(Math.min(...expectedXs), 6);
+			expect(Math.max(...actualXs)).toBeCloseTo(Math.max(...expectedXs), 6);
+
+			// the LEFT corner of the original rect now maps to the RIGHT side
+			expectClose(actual.topLeft, exp.topRight);
+			expectClose(actual.topRight, exp.topLeft);
+			expectClose(actual.bottomLeft, exp.bottomRight);
+			expectClose(actual.bottomRight, exp.bottomLeft);
+		});
+
+		it("flipX at zoom=2: still covers the SAME screen rect (this is the fix)", () => {
+			// Regression test for the original bug: at non-1 zoom, the pre-zoom
+			// flip pivot would land in the wrong screen-space location.
+			// With flip moved to draw() (post-zoom), the mirrored pattern still
+			// occupies the SAME screen rect as the unflipped pattern at zoom=2.
+			const events = [];
+			const layer = makeLayer();
+			layer.flipX(true);
+			const viewport = makeViewport({ zoom: 2 });
+			layer.draw(makeRendererStub(events), viewport);
+
+			const actual = transformCorners(
+				replayInto(new Matrix2d(), events),
+				corners(viewport),
+			);
+			const exp = expectedUnflipped(viewport);
+
+			const actualXs = [
+				actual.topLeft.x,
+				actual.topRight.x,
+				actual.bottomLeft.x,
+				actual.bottomRight.x,
+			];
+			const expectedXs = [
+				exp.topLeft.x,
+				exp.topRight.x,
+				exp.bottomLeft.x,
+				exp.bottomRight.x,
+			];
+			expect(Math.min(...actualXs)).toBeCloseTo(Math.min(...expectedXs), 6);
+			expect(Math.max(...actualXs)).toBeCloseTo(Math.max(...expectedXs), 6);
+		});
+
+		it("flipY at zoom=2: covers SAME screen rect (vertical mirror)", () => {
+			const events = [];
+			const layer = makeLayer();
+			layer.flipY(true);
+			const viewport = makeViewport({ zoom: 2 });
+			layer.draw(makeRendererStub(events), viewport);
+
+			const actual = transformCorners(
+				replayInto(new Matrix2d(), events),
+				corners(viewport),
+			);
+			const exp = expectedUnflipped(viewport);
+
+			const actualYs = [
+				actual.topLeft.y,
+				actual.topRight.y,
+				actual.bottomLeft.y,
+				actual.bottomRight.y,
+			];
+			const expectedYs = [
+				exp.topLeft.y,
+				exp.topRight.y,
+				exp.bottomLeft.y,
+				exp.bottomRight.y,
+			];
+			expect(Math.min(...actualYs)).toBeCloseTo(Math.min(...expectedYs), 6);
+			expect(Math.max(...actualYs)).toBeCloseTo(Math.max(...expectedYs), 6);
+		});
+
+		it("flipX+flipY at zoom=2: corners rotate 180° around the rect centre", () => {
+			const events = [];
+			const layer = makeLayer();
+			layer.flipX(true);
+			layer.flipY(true);
+			const viewport = makeViewport({ zoom: 2 });
+			layer.draw(makeRendererStub(events), viewport);
+
+			const actual = transformCorners(
+				replayInto(new Matrix2d(), events),
+				corners(viewport),
+			);
+			const exp = expectedUnflipped(viewport);
+
+			// top-left ↔ bottom-right, top-right ↔ bottom-left
+			expectClose(actual.topLeft, exp.bottomRight);
+			expectClose(actual.topRight, exp.bottomLeft);
+			expectClose(actual.bottomLeft, exp.topRight);
+			expectClose(actual.bottomRight, exp.topLeft);
+		});
+	});
 });