test: add portrait fixture images and extreme-height regression test

Add test-portrait-tall.png (200x4000) and test-portrait-extreme.png
(100x6000) fixtures. Update crop overflow tests to use fixture files
instead of generating images at runtime, and add a second test case
for extremely tall images.

tests/e2e/gui-tools-essential.spec.ts

@@ -1,4 +1,3 @@
-import { execFileSync } from "node:child_process";
 import path from "node:path";
 import { expect, test, uploadTestImage, waitForProcessing } from "./helpers";
 
@@ -198,19 +197,12 @@ test.describe("GUI Essential Tools", () => {
       await expect(page.getByTestId("crop-download")).toBeVisible({ timeout: 15_000 });
     });
 
-    test("tall portrait image fits within viewport without overflow", async ({
+    test("tall portrait image (200x4000) fits within viewport without overflow", async ({
       loggedInPage: page,
     }) => {
       await page.goto("/crop");
 
-      // Create a tall portrait image (200x2000) to trigger overflow
+      const portraitPath = path.join(process.cwd(), "tests", "fixtures", "test-portrait-tall.png");
-      const portraitPath = path.join(process.cwd(), "test-results", "test-portrait-tall.png");
-      const script = [
-        "const sharp = require('sharp');",
-        `sharp({create:{width:200,height:2000,channels:4,background:{r:0,g:128,b:255,alpha:1}}}).png().toFile('${portraitPath.replace(/'/g, "\\'")}')`,
-      ].join(" ");
-      execFileSync("node", ["-e", script], { cwd: process.cwd(), timeout: 5000 });
-
       const fileChooserPromise = page.waitForEvent("filechooser");
       await page.locator("[class*='border-dashed']").first().click();
       const fileChooser = await fileChooserPromise;
@@ -224,6 +216,34 @@ test.describe("GUI Essential Tools", () => {
       const box = await img.boundingBox();
       expect(box).not.toBeNull();
       expect(box!.y + box!.height).toBeLessThanOrEqual(viewport.height);
+      expect(box!.y).toBeGreaterThanOrEqual(0);
+    });
+
+    test("extremely tall portrait image (100x6000) fits within viewport without overflow", async ({
+      loggedInPage: page,
+    }) => {
+      await page.goto("/crop");
+
+      const extremePath = path.join(
+        process.cwd(),
+        "tests",
+        "fixtures",
+        "test-portrait-extreme.png",
+      );
+      const fileChooserPromise = page.waitForEvent("filechooser");
+      await page.locator("[class*='border-dashed']").first().click();
+      const fileChooser = await fileChooserPromise;
+      await fileChooser.setFiles(extremePath);
+      await page.waitForTimeout(1000);
+
+      const img = page.locator(".ReactCrop img");
+      await expect(img).toBeVisible();
+
+      const viewport = page.viewportSize()!;
+      const box = await img.boundingBox();
+      expect(box).not.toBeNull();
+      expect(box!.y + box!.height).toBeLessThanOrEqual(viewport.height);
+      expect(box!.y).toBeGreaterThanOrEqual(0);
     });
   });