fixed scaling and fitting on web ui

1 files changed, 32 insertions, 0 deletions

diff --git a/tests/browser_replay_e2e.mjs b/tests/browser_replay_e2e.mjs
index 33267bbb..f0d85bf8 100644
--- a/tests/browser_replay_e2e.mjs
+++ b/tests/browser_replay_e2e.mjs
@@ -8,6 +8,10 @@ import { inflateSync } from "node:zlib";
 
 const webDir = resolve(process.argv[2] ?? "zig-out/web");
 const screenshotPath = resolve(process.argv[3] ?? "zig-out/browser-replay.png");
+const backingScale = Number(process.argv[4] ?? "1.5");
+if (!Number.isFinite(backingScale) || backingScale <= 0) {
+  throw new Error(`invalid browser backing scale: ${process.argv[4]}`);
+}
 
 const mime = new Map([
   [".html", "text/html; charset=utf-8"],
@@ -231,6 +235,34 @@ try {
   const lostMessage = consoleMessages.find((msg) => msg.includes("CONTEXT_LOST_WEBGL"));
   if (lostMessage) throw new Error(`browser WebGL context lost: ${lostMessage}`);
 
+  const initialCanvasSize = await page.evaluate(() => {
+    const canvas = document.querySelector("canvas");
+    return {
+      clientWidth: canvas.clientWidth,
+      clientHeight: canvas.clientHeight,
+      width: canvas.width,
+      height: canvas.height,
+    };
+  });
+  if (
+    initialCanvasSize.clientWidth !== 1280 ||
+    initialCanvasSize.clientHeight !== 720 ||
+    initialCanvasSize.width !== Math.round(1280 * backingScale) ||
+    initialCanvasSize.height !== Math.round(720 * backingScale)
+  ) {
+    throw new Error(`browser replay canvas did not fill initial viewport: ${JSON.stringify(initialCanvasSize)}`);
+  }
+
+  await page.setViewportSize({ width: 913, height: 617 });
+  await page.waitForFunction((scale) => {
+    const canvas = document.querySelector("canvas");
+    return canvas?.clientWidth === 913 &&
+      canvas?.clientHeight === 617 &&
+      canvas?.width === Math.round(913 * scale) &&
+      canvas?.height === Math.round(617 * scale);
+  }, backingScale, { timeout: 5000 });
+  await page.waitForFunction(() => window.__pardesReplayE2E?.draws >= 3, null, { timeout: 5000 });
+
   await page.screenshot({ path: screenshotPath, fullPage: true });
   validateScreenshot(parsePng(await readFile(screenshotPath)));
 } finally {