From 143b560b20e46ca87b7cd802198d6ec12e65009a Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Tue, 10 Mar 2026 09:05:05 +0100
Subject: [PATCH] Add a playwright test to ensure object fit is correct

---
 playwright/widget/huddle-call.test.ts |  2 +-
 playwright/widget/pip-call.test.ts    | 74 +++++++++++++++++++++++++++
 playwright/widget/test-helpers.ts     | 12 +++++
 3 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 playwright/widget/pip-call.test.ts

diff --git a/playwright/widget/huddle-call.test.ts b/playwright/widget/huddle-call.test.ts
index b42c0ab2..d4ba0006 100644
--- a/playwright/widget/huddle-call.test.ts
+++ b/playwright/widget/huddle-call.test.ts
@@ -60,7 +60,7 @@ widgetTest("Create and join a group call", async ({ addUser, browserName }) => {
     // The only way to know if it is muted or not is to look at the data-kind attribute..
     const videoButton = frame.getByTestId("incall_videomute");
     await expect(videoButton).toBeVisible();
-    // video should be off by default in a voice call
+    // video should be on
     await expect(videoButton).toHaveAttribute("aria-label", /^Stop video$/);
   }
 
diff --git a/playwright/widget/pip-call.test.ts b/playwright/widget/pip-call.test.ts
new file mode 100644
index 00000000..49ebec52
--- /dev/null
+++ b/playwright/widget/pip-call.test.ts
@@ -0,0 +1,74 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, test } from "@playwright/test";
+
+import { widgetTest } from "../fixtures/widget-user.ts";
+import { HOST1, TestHelpers } from "./test-helpers.ts";
+
+widgetTest("Put call in PIP", async ({ addUser, browserName }) => {
+  test.skip(
+    browserName === "firefox",
+    "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
+  );
+
+  test.slow();
+
+  const valere = await addUser("Valere", HOST1);
+  const timo = await addUser("Timo", HOST1);
+
+  const callRoom = "TeamRoom";
+  await TestHelpers.createRoom(callRoom, valere.page, [timo.mxId]);
+
+  await TestHelpers.createRoom("DoubleTask", valere.page);
+
+  await TestHelpers.acceptRoomInvite(callRoom, timo.page);
+
+  await TestHelpers.switchToRoomNamed(valere.page, callRoom);
+
+  // Start the call as Valere
+  await TestHelpers.startCallInCurrentRoom(valere.page, false);
+  await expect(
+    valere.page.locator('iframe[title="Element Call"]'),
+  ).toBeVisible();
+
+  await TestHelpers.joinCallFromLobby(valere.page);
+
+  await TestHelpers.joinCallInCurrentRoom(timo.page);
+
+  {
+    const frame = timo.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame();
+
+    const videoButton = frame.getByTestId("incall_videomute");
+    await expect(videoButton).toBeVisible();
+    // check that the video is on
+    await expect(videoButton).toHaveAttribute("aria-label", /^Stop video$/);
+  }
+
+  // Switch to the other room, the call should go to PIP
+  await TestHelpers.switchToRoomNamed(valere.page, "DoubleTask");
+
+  // We should see the PIP overlay
+  await expect(valere.page.locator(".mx_WidgetPip_overlay")).toBeVisible();
+
+  {
+    // wait a bit so that the PIP has rendered the video
+    await valere.page.waitForTimeout(600);
+
+    // Check for a bug where the video had the wrong fit in PIP
+    const frame = valere.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame();
+    const videoElements = await frame.locator("video").all();
+    expect(videoElements.length).toBe(1);
+
+    const pipVideo = videoElements[0];
+    await expect(pipVideo).toHaveCSS("object-fit", "cover");
+  }
+});
diff --git a/playwright/widget/test-helpers.ts b/playwright/widget/test-helpers.ts
index 6fe4479b..4562ba5a 100644
--- a/playwright/widget/test-helpers.ts
+++ b/playwright/widget/test-helpers.ts
@@ -276,4 +276,16 @@ export class TestHelpers {
       });
     }
   }
+
+  /**
+   * Switches to a room in the room list by its name.
+   * @param page - The EW page
+   * @param roomName - The name of the room to switch to
+   */
+  public static async switchToRoomNamed(
+    page: Page,
+    roomName: string,
+  ): Promise<void> {
+    await page.getByRole("option", { name: `Open room ${roomName}` }).click();
+  }
 }