Fix browser screenshot capture for parked webviews

packages/app/src/components/browser-webview-resident.browser.test.ts

@@ -2,8 +2,10 @@ import { afterEach, describe, expect, it } from "vitest";
 import {
   clearResidentBrowserWebviewsForTests,
   ensureResidentBrowserWebview,
+  prepareResidentBrowserWebviewForPixelCapture,
   releaseResidentBrowserWebview,
   removeResidentBrowserWebview,
+  restoreResidentBrowserWebviewAfterPixelCapture,
   takeResidentBrowserWebview,
 } from "./browser-webview-resident";
 
@@ -22,6 +24,7 @@ describe("resident browser webviews", () => {
 
     expect(host.children).toHaveLength(0);
     expect(webview.isConnected).toBe(true);
+    expect(webview.style.display).toBe("inline-flex");
     expect(webview.style.width).toBe("1280px");
     expect(webview.style.height).toBe("800px");
 
@@ -57,4 +60,65 @@ describe("resident browser webviews", () => {
     expect(webview?.isConnected).toBe(false);
     expect(takeResidentBrowserWebview("browser-closed")).toBeNull();
   });
+
+  it("temporarily makes resident webviews paintable for pixel capture", async () => {
+    const webview = ensureResidentBrowserWebview({
+      browserId: "browser-capture",
+      url: "https://example.com",
+    });
+    if (!webview) {
+      throw new Error("Expected resident browser webview");
+    }
+
+    const preparation = await prepareResidentBrowserWebviewForPixelCapture({
+      browserId: "browser-capture",
+    });
+    const host = document.getElementById("paseo-browser-resident-webviews");
+
+    expect(preparation.token).toBe("capture-1");
+    expect(host?.style.left).toBe("0px");
+    expect(host?.style.top).toBe("0px");
+    expect(host?.style.width).toBe("1px");
+    expect(host?.style.height).toBe("1px");
+    expect(host?.style.overflow).toBe("hidden");
+    expect(host?.style.opacity).toBe("1");
+    expect(host?.style.pointerEvents).toBe("none");
+    expect(webview.style.display).toBe("inline-flex");
+    expect(webview.style.width).toBe("1280px");
+    expect(webview.style.height).toBe("800px");
+
+    await restoreResidentBrowserWebviewAfterPixelCapture(preparation);
+
+    expect(host?.style.left).toBe("-20000px");
+    expect(host?.style.width).toBe("1280px");
+    expect(host?.style.height).toBe("800px");
+    expect(host?.style.opacity).toBe("0");
+  });
+
+  it("keeps the resident host paintable until every capture token is restored", async () => {
+    ensureResidentBrowserWebview({
+      browserId: "browser-overlap",
+      url: "https://example.com",
+    });
+
+    const first = await prepareResidentBrowserWebviewForPixelCapture({
+      browserId: "browser-overlap",
+    });
+    const second = await prepareResidentBrowserWebviewForPixelCapture({
+      browserId: "browser-overlap",
+    });
+    const host = document.getElementById("paseo-browser-resident-webviews");
+
+    await restoreResidentBrowserWebviewAfterPixelCapture(first);
+
+    expect(host?.style.left).toBe("0px");
+    expect(host?.style.width).toBe("1px");
+    expect(host?.style.opacity).toBe("1");
+
+    await restoreResidentBrowserWebviewAfterPixelCapture(second);
+
+    expect(host?.style.left).toBe("-20000px");
+    expect(host?.style.width).toBe("1280px");
+    expect(host?.style.opacity).toBe("0");
+  });
 });