Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 90 insertions, 0 deletions

diff --git a/toolkit/components/pictureinpicture/tests/browser_tabIconOverlayPiP.js b/toolkit/components/pictureinpicture/tests/browser_tabIconOverlayPiP.js
new file mode 100644
index 0000000000..3ca55f2c73
--- /dev/null
+++ b/toolkit/components/pictureinpicture/tests/browser_tabIconOverlayPiP.js
@@ -0,0 +1,90 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * The goal of this test is check the that "tab-icon-overlay" image is
+ * showing when the tab is using PiP.
+ *
+ * The browser will create a tab and open a video using PiP
+ * then the tests check that the tab icon overlay image is showing*
+ *
+ *
+ */
+add_task(async () => {
+  let videoID = "with-controls";
+  await BrowserTestUtils.withNewTab(
+    {
+      url: TEST_PAGE_WITH_SOUND,
+      gBrowser,
+    },
+    async browser => {
+      await ensureVideosReady(browser);
+
+      let audioPromise = BrowserTestUtils.waitForEvent(
+        browser,
+        "DOMAudioPlaybackStarted"
+      );
+
+      await SpecialPowers.spawn(browser, [videoID], async videoID => {
+        await content.document.getElementById(videoID).play();
+      });
+
+      // Check that video is playing
+      ok(!(await isVideoPaused(browser, videoID)), "The video is not paused.");
+      await audioPromise;
+
+      // Need tab to access the tab-icon-overlay element
+      let tab = gBrowser.getTabForBrowser(browser);
+
+      // Use tab to get the tab-icon-overlay element
+      let tabIconOverlay = tab.getElementsByClassName("tab-icon-overlay")[0];
+
+      // Not in PiP yet so the tab-icon-overlay does not have "pictureinpicture" attribute
+      ok(!tabIconOverlay.hasAttribute("pictureinpicture"), "Not using PiP");
+
+      // Sound is playing so tab should have "soundplaying" attribute
+      ok(tabIconOverlay.hasAttribute("soundplaying"), "Sound is playing");
+
+      // Start the PiP
+      let pipWin = await triggerPictureInPicture(browser, videoID);
+      ok(pipWin, "Got Picture-in-Picture window.");
+
+      // Check that video is still playing
+      ok(!(await isVideoPaused(browser, videoID)), "The video is not paused.");
+
+      // Video is still playing so the tab-icon-overlay should have "soundplaying" as an attribute
+      ok(
+        tabIconOverlay.hasAttribute("soundplaying"),
+        "Tab knows sound is playing"
+      );
+
+      // Now in PiP. "pictureinpicture" is an attribute
+      ok(
+        tabIconOverlay.hasAttribute("pictureinpicture"),
+        "Tab knows were using PiP"
+      );
+
+      // We know the tab has sound playing and it is using PiP so we can check the
+      // tab-icon-overlay image is showing
+      let style = window.getComputedStyle(tabIconOverlay);
+      Assert.equal(
+        style.listStyleImage,
+        'url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg")',
+        "Got the tab-icon-overlay image"
+      );
+
+      // Check tab is not muted
+      ok(!tabIconOverlay.hasAttribute("muted"), "Tab is not muted");
+
+      // Click on tab icon overlay to mute tab and check it is muted
+      tabIconOverlay.click();
+      ok(tabIconOverlay.hasAttribute("muted"), "Tab is muted");
+
+      // Click on tab icon overlay to unmute tab and check it is not muted
+      tabIconOverlay.click();
+      ok(!tabIconOverlay.hasAttribute("muted"), "Tab is not muted");
+    }
+  );
+});