Fix multi-webview browser capture prep

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

@@ -28,10 +28,18 @@ describe("resident browser webviews", () => {
     expect(webview.style.display).toBe("inline-flex");
     expect(webview.style.width).toBe("1280px");
     expect(webview.style.height).toBe("800px");
+    expect(webview.style.position).toBe("absolute");
+    expect(webview.style.left).toBe("0px");
+    expect(webview.style.top).toBe("0px");
+    expect(webview.style.zIndex).toBe("0");
 
     const reused = takeResidentBrowserWebview("browser-a");
 
     expect(reused).toBe(webview);
+    expect(webview.style.position).toBe("");
+    expect(webview.style.left).toBe("");
+    expect(webview.style.top).toBe("");
+    expect(webview.style.zIndex).toBe("");
     expect(takeResidentBrowserWebview("browser-a")).toBeNull();
   });
 
@@ -87,6 +95,10 @@ describe("resident browser webviews", () => {
     expect(webview.style.display).toBe("inline-flex");
     expect(webview.style.width).toBe("1280px");
     expect(webview.style.height).toBe("800px");
+    expect(webview.style.position).toBe("absolute");
+    expect(webview.style.left).toBe("0px");
+    expect(webview.style.top).toBe("0px");
+    expect(webview.style.zIndex).toBe("2");
 
     await restoreResidentBrowserWebviewAfterPixelCapture(preparation);
 
@@ -94,6 +106,42 @@ describe("resident browser webviews", () => {
     expect(host?.style.width).toBe("1280px");
     expect(host?.style.height).toBe("800px");
     expect(host?.style.opacity).toBe("0");
+    expect(webview.style.zIndex).toBe("0");
+  });
+
+  it("parks resident webviews as an overlapping stack and raises the capture target", async () => {
+    const firstWebview = ensureResidentBrowserWebview({
+      browserId: "browser-first",
+      url: "https://example.com/first",
+    });
+    const secondWebview = ensureResidentBrowserWebview({
+      browserId: "browser-second",
+      url: "https://example.com/second",
+    });
+    if (!firstWebview || !secondWebview) {
+      throw new Error("Expected resident browser webviews");
+    }
+
+    expect(firstWebview.style.position).toBe("absolute");
+    expect(firstWebview.style.left).toBe("0px");
+    expect(firstWebview.style.top).toBe("0px");
+    expect(firstWebview.style.zIndex).toBe("0");
+    expect(secondWebview.style.position).toBe("absolute");
+    expect(secondWebview.style.left).toBe("0px");
+    expect(secondWebview.style.top).toBe("0px");
+    expect(secondWebview.style.zIndex).toBe("0");
+
+    const preparation = await prepareResidentBrowserWebviewForPixelCapture({
+      browserId: "browser-second",
+    });
+
+    expect(firstWebview.style.zIndex).toBe("0");
+    expect(secondWebview.style.zIndex).toBe("2");
+
+    await restoreResidentBrowserWebviewAfterPixelCapture(preparation);
+
+    expect(firstWebview.style.zIndex).toBe("0");
+    expect(secondWebview.style.zIndex).toBe("0");
   });
 
   it("keeps the resident host paintable until every capture token is restored", async () => {