wgsl-play 0.0.39 → 0.0.40

package/src/test/WgslPlay.connect.e2e.ts

@@ -0,0 +1,101 @@
+/** E2E tests for connect page (wgsl-edit connection, virtualLibs). */
+import { expect, test } from "@playwright/test";
+import {
+  expectCanvasSnapshot,
+  waitForFrame,
+  waitForNewFrame,
+  waitForWgslPlay,
+} from "./E2eHelpers.ts";
+
+test("connectToSource - multi-file from wgsl-edit renders", async ({
+  page,
+}) => {
+  await page.goto("/connect.html");
+  await waitForFrame(page, "#multifilePlayer");
+  await expectCanvasSnapshot(
+    page,
+    "#multifilePlayer",
+    "connect-source-multifile.png",
+  );
+});
+
+test("connectToSource - condition toggle re-renders", async ({ page }) => {
+  await page.goto("/connect.html");
+  await waitForFrame(page, "#connectCondPlayer");
+
+  await expectCanvasSnapshot(
+    page,
+    "#connectCondPlayer",
+    "connect-conditions-green.png",
+  );
+
+  await page.click("#set-connect-red");
+  await waitForNewFrame(page, "#connectCondPlayer");
+
+  await expectCanvasSnapshot(
+    page,
+    "#connectCondPlayer",
+    "connect-conditions-red.png",
+  );
+});
+
+test("connectToSource - external deps are fetched", {
+  tag: "@network",
+}, async ({ page }) => {
+  await page.goto("/connect.html");
+  await page.waitForLoadState("networkidle");
+  await waitForFrame(page, "#connectExtPlayer");
+
+  // If discoverAndRebuild wasn't called, this would show an error overlay
+  const hasError = await page.evaluate(
+    () =>
+      (document.querySelector("#connectExtPlayer") as any)?.hasError ?? true,
+  );
+  expect(hasError).toBe(false);
+  await expectCanvasSnapshot(
+    page,
+    "#connectExtPlayer",
+    "connect-source-external.png",
+  );
+});
+
+test("connectToSource - dynamic npm package loading", {
+  tag: "@network",
+}, async ({ page }) => {
+  await page.goto("/connect.html");
+  await waitForFrame(page, "#dynamicNpmPlayer");
+
+  await page.click("#inject-dynamic-npm");
+  await page.waitForLoadState("networkidle");
+  await waitForFrame(page, "#dynamicNpmPlayer");
+
+  const hasError = await page.evaluate(
+    () =>
+      (document.querySelector("#dynamicNpmPlayer") as any)?.hasError ?? true,
+  );
+  expect(hasError).toBe(false);
+  await expectCanvasSnapshot(
+    page,
+    "#dynamicNpmPlayer",
+    "connect-dynamic-npm.png",
+  );
+});
+
+test("editor.link() with virtualLibs resolves env:: module", async ({
+  page,
+}) => {
+  await page.goto("/connect.html");
+  await waitForWgslPlay(page);
+
+  await page.click("#link-virtual-libs");
+  await page.waitForFunction(
+    () =>
+      document.querySelector("#virtual-libs-output")?.textContent !==
+      "Not linked yet",
+  );
+
+  const output = await page.textContent("#virtual-libs-output");
+  expect(output).toContain("var<uniform>");
+  expect(output).toContain("fs_main");
+  expect(output).not.toContain("Error");
+});

package/src/test/WgslPlay.loading.e2e.ts

@@ -0,0 +1,68 @@
+/** E2E tests for loading page (npm CDN, shaderRoot, ?static, ?link). */
+import { test } from "@playwright/test";
+import {
+  expectCanvasSnapshot,
+  waitForFrame,
+  waitForWgslPlay,
+} from "./E2eHelpers.ts";
+
+test("npm CDN - external imports work", { tag: "@network" }, async ({
+  page,
+}) => {
+  await page.goto("/loading.html");
+  await waitForWgslPlay(page);
+
+  await page.click("#load-npm-shader");
+  await page.waitForLoadState("networkidle");
+  await waitForFrame(page, "#npmPlayer");
+
+  // Rewind to time=0 for deterministic snapshot (rewind() renders synchronously)
+  await page.click("#npm-rewind");
+  await expectCanvasSnapshot(page, "#npmPlayer", "npm-cdn.png");
+});
+
+test("shaderRoot - package:: imports resolve", async ({ page }) => {
+  await page.goto("/loading.html");
+  await waitForWgslPlay(page);
+
+  await page.click("#load-internal-shader");
+  await waitForFrame(page, "#internalImportPlayer");
+
+  await expectCanvasSnapshot(
+    page,
+    "#internalImportPlayer",
+    "shader-root-internal.png",
+  );
+});
+
+test("shaderRoot - src attribute with super:: and package:: imports", async ({
+  page,
+}) => {
+  await page.goto("/loading.html");
+  await waitForWgslPlay(page);
+
+  await page.click("#load-src-shader");
+  await waitForFrame(page, "#srcAttrPlayer");
+
+  await expectCanvasSnapshot(page, "#srcAttrPlayer", "shader-root-src.png");
+});
+
+test("?static import - wesl-plugin build-time linking", async ({ page }) => {
+  await page.goto("/loading.html");
+  await waitForWgslPlay(page);
+
+  await page.click("#load-static-shader");
+  await waitForFrame(page, "#staticImportPlayer");
+
+  await expectCanvasSnapshot(page, "#staticImportPlayer", "static-import.png");
+});
+
+test("?link import - wesl-plugin runtime linking", async ({ page }) => {
+  await page.goto("/loading.html");
+  await waitForWgslPlay(page);
+
+  await page.click("#load-link-shader");
+  await waitForFrame(page, "#linkImportPlayer");
+
+  await expectCanvasSnapshot(page, "#linkImportPlayer", "link-import.png");
+});

package/src/test/WgslPlay.resize.e2e.ts

@@ -0,0 +1,199 @@
+/** E2E tests for two-corner resize handles + corner-local hover-reveal. */
+import { expect, type Page, test } from "@playwright/test";
+import { waitForWgslPlay } from "./E2eHelpers.ts";
+
+/** Get a resize handle's bounding box (in viewport coords) from inside shadow DOM. */
+async function handleBox(page: Page, playerId: string, corner: "br" | "bl") {
+  return page.evaluate(
+    ([id, c]) => {
+      const el = document.querySelector(id) as HTMLElement | null;
+      const handle = el?.shadowRoot?.querySelector(
+        `.resize-handle.${c}`,
+      ) as HTMLElement | null;
+      if (!handle) return null;
+      const r = handle.getBoundingClientRect();
+      return { x: r.x, y: r.y, width: r.width, height: r.height };
+    },
+    [playerId, corner] as const,
+  );
+}
+
+/** Read computed opacity (numeric) of a resize handle. */
+async function handleOpacity(
+  page: Page,
+  playerId: string,
+  corner: "br" | "bl",
+): Promise<number> {
+  return page.evaluate(
+    ([id, c]) => {
+      const el = document.querySelector(id) as HTMLElement | null;
+      const handle = el?.shadowRoot?.querySelector(
+        `.resize-handle.${c}`,
+      ) as HTMLElement | null;
+      return handle ? Number(getComputedStyle(handle).opacity) : -1;
+    },
+    [playerId, corner] as const,
+  );
+}
+
+/** Get an element's bounding box (in viewport coords). */
+async function elBox(page: Page, selector: string) {
+  return page.evaluate(sel => {
+    const el = document.querySelector(sel) as HTMLElement | null;
+    if (!el) return null;
+    const r = el.getBoundingClientRect();
+    return { x: r.x, y: r.y, width: r.width, height: r.height };
+  }, selector);
+}
+
+/** Drag from start to (start + dx, start + dy) via raw mouse events. */
+async function dragBy(
+  page: Page,
+  startX: number,
+  startY: number,
+  dx: number,
+  dy: number,
+) {
+  await page.mouse.move(startX, startY);
+  await page.mouse.down();
+  await page.mouse.move(startX + dx, startY + dy, { steps: 8 });
+  await page.mouse.up();
+}
+
+test("both handles render in shadow DOM with opacity 0 at rest", async ({
+  page,
+}) => {
+  await page.goto("/resize.html");
+  await waitForWgslPlay(page);
+
+  expect(await handleOpacity(page, "#blockPlayer", "br")).toBe(0);
+  expect(await handleOpacity(page, "#blockPlayer", "bl")).toBe(0);
+});
+
+test("BR handle reveals only on BR corner hover", async ({ page }) => {
+  await page.goto("/resize.html");
+  await waitForWgslPlay(page);
+
+  const br = await handleBox(page, "#blockPlayer", "br");
+  if (!br) throw new Error("br handle not found");
+  await page.mouse.move(br.x + br.width / 2, br.y + br.height / 2);
+
+  // opacity transitions over 0.15s — poll until past midpoint
+  await expect
+    .poll(() => handleOpacity(page, "#blockPlayer", "br"), { timeout: 2000 })
+    .toBeGreaterThan(0.9);
+  expect(await handleOpacity(page, "#blockPlayer", "bl")).toBe(0);
+});
+
+test("BL handle reveals only on BL corner hover", async ({ page }) => {
+  await page.goto("/resize.html");
+  await waitForWgslPlay(page);
+
+  const bl = await handleBox(page, "#blockPlayer", "bl");
+  if (!bl) throw new Error("bl handle not found");
+  await page.mouse.move(bl.x + bl.width / 2, bl.y + bl.height / 2);
+
+  await expect
+    .poll(() => handleOpacity(page, "#blockPlayer", "bl"), { timeout: 2000 })
+    .toBeGreaterThan(0.9);
+  expect(await handleOpacity(page, "#blockPlayer", "br")).toBe(0);
+});
+
+test("canvas-interior hover does not reveal either handle", async ({
+  page,
+}) => {
+  await page.goto("/resize.html");
+  await waitForWgslPlay(page);
+
+  const player = await elBox(page, "#blockPlayer");
+  if (!player) throw new Error("player not found");
+  // Center of the canvas, away from any corner.
+  await page.mouse.move(
+    player.x + player.width / 2,
+    player.y + player.height / 2,
+  );
+
+  expect(await handleOpacity(page, "#blockPlayer", "br")).toBe(0);
+  expect(await handleOpacity(page, "#blockPlayer", "bl")).toBe(0);
+});
+
+test("BR drag grows width and height", async ({ page }) => {
+  await page.goto("/resize.html");
+  await waitForWgslPlay(page);
+
+  const before = await elBox(page, "#blockPlayer");
+  const br = await handleBox(page, "#blockPlayer", "br");
+  if (!before || !br) throw new Error("setup failed");
+
+  await dragBy(page, br.x + br.width / 2, br.y + br.height / 2, 50, 50);
+
+  const after = await elBox(page, "#blockPlayer");
+  if (!after) throw new Error("missing after rect");
+  expect(after.width).toBeGreaterThan(before.width + 40);
+  expect(after.height).toBeGreaterThan(before.height + 40);
+});
+
+test("BL drag in flex layout grows play width, shrinks edit, pins right edge", async ({
+  page,
+}) => {
+  await page.goto("/resize.html");
+  await waitForWgslPlay(page);
+  await page.locator("#flexPlayer").scrollIntoViewIfNeeded();
+
+  const playBefore = await elBox(page, "#flexPlayer");
+  const editBefore = await elBox(page, ".splitter > .edit");
+  const bl = await handleBox(page, "#flexPlayer", "bl");
+  if (!playBefore || !editBefore || !bl) throw new Error("setup failed");
+
+  await dragBy(page, bl.x + bl.width / 2, bl.y + bl.height / 2, -50, 0);
+
+  const playAfter = await elBox(page, "#flexPlayer");
+  const editAfter = await elBox(page, ".splitter > .edit");
+  if (!playAfter || !editAfter) throw new Error("missing after rect");
+
+  expect(playAfter.width).toBeGreaterThan(playBefore.width + 40);
+  expect(editAfter.width).toBeLessThan(editBefore.width - 40);
+  // Right edge of the player stays pinned (flex container fills its parent).
+  const playRightBefore = playBefore.x + playBefore.width;
+  const playRightAfter = playAfter.x + playAfter.width;
+  expect(Math.abs(playRightAfter - playRightBefore)).toBeLessThan(2);
+});
+
+test("min-size guard clamps width to 16px on aggressive shrink", async ({
+  page,
+}) => {
+  await page.goto("/resize.html");
+  await waitForWgslPlay(page);
+
+  const before = await elBox(page, "#blockPlayer");
+  const bl = await handleBox(page, "#blockPlayer", "bl");
+  if (!before || !bl) throw new Error("setup failed");
+
+  // Drag BL far to the right (shrinks width — clamps at 16).
+  await dragBy(
+    page,
+    bl.x + bl.width / 2,
+    bl.y + bl.height / 2,
+    before.width + 200,
+    0,
+  );
+
+  const after = await elBox(page, "#blockPlayer");
+  if (!after) throw new Error("missing after rect");
+  expect(after.width).toBeGreaterThanOrEqual(16);
+  expect(after.width).toBeLessThan(32);
+});
+
+test("non-resizable element renders no visible handles", async ({ page }) => {
+  await page.goto("/resize.html");
+  await waitForWgslPlay(page);
+
+  const display = await page.evaluate(() => {
+    const el = document.querySelector("#plainPlayer") as HTMLElement | null;
+    const h = el?.shadowRoot?.querySelector(
+      ".resize-handle",
+    ) as HTMLElement | null;
+    return h ? getComputedStyle(h).display : "missing";
+  });
+  expect(display).toBe("none");
+});

package/src/test/WgslPlay.resources.e2e.ts

@@ -0,0 +1,67 @@
+/** E2E tests for resources page (@texture, @sampler, @buffer). */
+import { expect, test } from "@playwright/test";
+import {
+  expectCanvasSnapshot,
+  waitForFrame,
+  waitForNewFrame,
+  waitForWgslPlay,
+} from "./E2eHelpers.ts";
+
+test("@texture single resolves <canvas data-texture> child", async ({
+  page,
+}) => {
+  await page.goto("/resources.html");
+  await waitForFrame(page, "#singleTexturePlayer");
+  await expectCanvasSnapshot(page, "#singleTexturePlayer", "texture-grid.png");
+});
+
+test("@texture multi blends two host canvases", async ({ page }) => {
+  await page.goto("/resources.html");
+  await waitForFrame(page, "#multiTexturePlayer");
+  await expectCanvasSnapshot(page, "#multiTexturePlayer", "texture-multi.png");
+});
+
+test("@buffer zero-init storage buffer renders deterministically", async ({
+  page,
+}) => {
+  await page.goto("/resources.html");
+  await waitForFrame(page, "#bufferPlayer");
+  await expectCanvasSnapshot(page, "#bufferPlayer", "buffer-zero-init.png");
+});
+
+test("@texture from <img> decodes and rebuilds on src swap", async ({
+  page,
+}) => {
+  await page.goto("/resources.html");
+  await waitForFrame(page, "#imgTexturePlayer");
+  await expectCanvasSnapshot(
+    page,
+    "#imgTexturePlayer",
+    "texture-img-magenta.png",
+  );
+
+  await page.click("#swap-img-texture");
+  await waitForNewFrame(page, "#imgTexturePlayer");
+  await expectCanvasSnapshot(
+    page,
+    "#imgTexturePlayer",
+    "texture-img-green.png",
+  );
+});
+
+test("@test_texture is rejected with structured compile-error", async ({
+  page,
+}) => {
+  await page.goto("/resources.html");
+  await waitForWgslPlay(page);
+
+  await page.waitForFunction(
+    () =>
+      (document.querySelector("#rejected-texture-status") as HTMLElement)
+        ?.dataset.rejected === "true",
+  );
+
+  const text = await page.textContent("#rejected-texture-status");
+  expect(text).toContain("rejected (resource)");
+  expect(text).toContain("@test_texture");
+});

package/src/test/WgslPlay.uniforms.e2e.ts

@@ -0,0 +1,57 @@
+/** E2E tests for uniforms page (@uniforms controls, mouse). */
+import { expect, test } from "@playwright/test";
+import { expectCanvasSnapshot, waitForFrame } from "./E2eHelpers.ts";
+
+test("@uniforms controls panel renders and responds", async ({ page }) => {
+  await page.goto("/uniforms.html");
+  await waitForFrame(page, "#uniformsPlayer");
+
+  const hasError = await page.evaluate(
+    () => (document.querySelector("#uniformsPlayer") as any)?.hasError ?? true,
+  );
+  expect(hasError).toBe(false);
+
+  // Rewind so snapshot is deterministic (brightness set by page script on compile-success)
+  // rewind() synchronously renders one frame, so no need to waitForNewFrame
+  await page.evaluate(() => {
+    (document.querySelector("#uniformsPlayer") as any)?.rewind();
+  });
+  await expectCanvasSnapshot(page, "#uniformsPlayer", "uniforms-initial.png");
+
+  // Hover to reveal controls toggle, click to expand
+  await page.locator("#uniformsPlayer").hover({ position: { x: 16, y: 16 } });
+  await page.evaluate(() => {
+    const el = document.querySelector("#uniformsPlayer");
+    (el?.shadowRoot?.querySelector(".uniform-toggle") as HTMLElement)?.click();
+  });
+
+  // Verify controls panel expanded with 3 controls (brightness is plain, no UI)
+  const controlCount = await page.evaluate(() => {
+    const el = document.querySelector("#uniformsPlayer");
+    const panel = el?.shadowRoot?.querySelector(".uniform-panel");
+    const rows = panel?.querySelectorAll(".uniform-row");
+    return {
+      visible: panel?.checkVisibility() ?? false,
+      count: rows?.length ?? 0,
+    };
+  });
+  expect(controlCount.visible).toBe(true);
+  expect(controlCount.count).toBe(3);
+
+  // Adjust the frequency slider and verify re-render
+  await page.evaluate(() => {
+    const el = document.querySelector("#uniformsPlayer");
+    const slider = el?.shadowRoot?.querySelector(
+      'input[type="range"]',
+    ) as HTMLInputElement;
+    if (slider) {
+      slider.value = "16";
+      slider.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  });
+  await expectCanvasSnapshot(
+    page,
+    "#uniformsPlayer",
+    "uniforms-slider-changed.png",
+  );
+});