Bug 1624702 - Test that the Picture-in-Picture toggle visibility is re-evaluated if the duration of the video changes. r=jaws

Differential Revision: https://phabricator.services.mozilla.com/D68823

--HG--
extra : moz-landing-system : lando

toolkit/components/pictureinpicture/tests/browser.ini

@@ -12,6 +12,7 @@ support-files =
   test-video.mp4
   test-video-cropped.mp4
   test-video-vertical.mp4
+  ../../../../dom/media/test/gizmo.mp4
 
 prefs =
   media.videocontrols.picture-in-picture.enabled=true
@@ -26,6 +27,7 @@ prefs =
 [browser_dblclickFullscreen.js]
 [browser_disabledForMediaStreamVideos.js]
 skip-if = os == 'mac' #Bug 1622391
+[browser_durationChange.js]
 [browser_fullscreen.js]
 skip-if = (os == "mac" && debug) #Bug 1566173
 [browser_keyboardShortcut.js]

toolkit/components/pictureinpicture/tests/browser_dblclickFullscreen.js

@@ -16,23 +16,17 @@ add_task(async () => {
     },
     async browser => {
       let pipWin = await triggerPictureInPicture(browser, "no-controls");
-
-      let entered = BrowserTestUtils.waitForEvent(
-        pipWin,
-        "MozDOMFullscreen:Entered"
-      );
-
       let controls = pipWin.document.getElementById("controls");
 
-      EventUtils.sendMouseEvent(
-        {
-          type: "dblclick",
-        },
-        controls,
-        pipWin
-      );
-
-      await entered;
+      await promiseFullscreenEntered(pipWin, async () => {
+        EventUtils.sendMouseEvent(
+          {
+            type: "dblclick",
+          },
+          controls,
+          pipWin
+        );
+      });
 
       Assert.equal(
         pipWin.document.fullscreenElement,
@@ -40,53 +34,35 @@ add_task(async () => {
         "Double-click caused us to enter fullscreen."
       );
 
-      await BrowserTestUtils.waitForCondition(() => {
-        return !TelemetryStopwatch.running("FULLSCREEN_CHANGE_MS");
-      });
-
       // First, we'll test exiting fullscreen by double-clicking again
       // on the document body.
 
-      let exited = BrowserTestUtils.waitForEvent(
-        pipWin,
-        "MozDOMFullscreen:Exited"
-      );
-
-      EventUtils.sendMouseEvent(
-        {
-          type: "dblclick",
-        },
-        controls,
-        pipWin
-      );
-
-      await exited;
+      await promiseFullscreenExited(pipWin, async () => {
+        EventUtils.sendMouseEvent(
+          {
+            type: "dblclick",
+          },
+          controls,
+          pipWin
+        );
+      });
 
       Assert.ok(
         !pipWin.document.fullscreenElement,
         "Double-click caused us to exit fullscreen."
       );
 
-      await BrowserTestUtils.waitForCondition(() => {
-        return !TelemetryStopwatch.running("FULLSCREEN_CHANGE_MS");
-      });
-
       // Now we double-click to re-enter fullscreen.
 
-      entered = BrowserTestUtils.waitForEvent(
-        pipWin,
-        "MozDOMFullscreen:Entered"
-      );
-
-      EventUtils.sendMouseEvent(
-        {
-          type: "dblclick",
-        },
-        controls,
-        pipWin
-      );
-
-      await entered;
+      await promiseFullscreenEntered(pipWin, async () => {
+        EventUtils.sendMouseEvent(
+          {
+            type: "dblclick",
+          },
+          controls,
+          pipWin
+        );
+      });
 
       Assert.equal(
         pipWin.document.fullscreenElement,
@@ -94,28 +70,18 @@ add_task(async () => {
         "Double-click caused us to re-enter fullscreen."
       );
 
-      await BrowserTestUtils.waitForCondition(() => {
-        return !TelemetryStopwatch.running("FULLSCREEN_CHANGE_MS");
-      });
-
       // Finally, we check that hitting Escape lets the user leave
       // fullscreen.
 
-      exited = BrowserTestUtils.waitForEvent(pipWin, "MozDOMFullscreen:Exited");
-
-      EventUtils.synthesizeKey("KEY_Escape", {}, pipWin);
-
-      await exited;
+      await promiseFullscreenExited(pipWin, async () => {
+        EventUtils.synthesizeKey("KEY_Escape", {}, pipWin);
+      });
 
       Assert.ok(
         !pipWin.document.fullscreenElement,
         "Pressing Escape caused us to exit fullscreen."
       );
 
-      await BrowserTestUtils.waitForCondition(() => {
-        return !TelemetryStopwatch.running("FULLSCREEN_CHANGE_MS");
-      });
-
       let pipClosed = BrowserTestUtils.domWindowClosed(pipWin);
       pipWin.close();
       await pipClosed;

toolkit/components/pictureinpicture/tests/browser_durationChange.js

@@ -0,0 +1,61 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests that the visibility of the toggle will be
+ * recomputed after durationchange events fire.
+ */
+add_task(async function test_durationChange() {
+  // Most of the Picture-in-Picture tests run with the always-show
+  // preference set to true to avoid the toggle visibility heuristics.
+  // Since this test actually exercises those heuristics, we have
+  // to temporarily disable that pref.
+  //
+  // We also reduce the minimum video length for displaying the toggle
+  // to 5 seconds to avoid having to include or generate a 45 second long
+  // video (which is the default minimum length).
+  await SpecialPowers.pushPrefEnv({
+    set: [
+      [
+        "media.videocontrols.picture-in-picture.video-toggle.always-show",
+        false,
+      ],
+      ["media.videocontrols.picture-in-picture.video-toggle.min-video-secs", 5],
+    ],
+  });
+
+  // First, ensure that the toggle doesn't show up for these
+  // short videos by default.
+  await testToggle(TEST_PAGE, {
+    "with-controls": { canToggle: false },
+    "no-controls": { canToggle: false },
+  });
+
+  // Now cause the video to change sources, which should fire a
+  // durationchange event. The longer video should qualify us for
+  // displaying the toggle.
+  await testToggle(
+    TEST_PAGE,
+    {
+      "with-controls": { canToggle: true },
+      "no-controls": { canToggle: true },
+    },
+    async browser => {
+      await SpecialPowers.spawn(browser, [], async () => {
+        for (let videoID of ["with-controls", "no-controls"]) {
+          let video = content.document.getElementById(videoID);
+          video.src = "gizmo.mp4";
+          let durationChangePromise = ContentTaskUtils.waitForEvent(
+            video,
+            "durationchange"
+          );
+
+          video.load();
+          await durationChangePromise;
+        }
+      });
+    }
+  );
+});

toolkit/components/pictureinpicture/tests/browser_fullscreen.js

@@ -17,18 +17,11 @@ add_task(async () => {
     },
     async browser => {
       for (let videoID of VIDEOS) {
-        let entered = BrowserTestUtils.waitForEvent(
-          window,
-          "MozDOMFullscreen:Entered"
-        );
-        await SpecialPowers.spawn(browser, [videoID], async videoID => {
-          let video = this.content.document.getElementById(videoID);
-          video.requestFullscreen();
-        });
-        await entered;
-
-        await BrowserTestUtils.waitForCondition(() => {
-          return !TelemetryStopwatch.running("FULLSCREEN_CHANGE_MS");
+        await promiseFullscreenEntered(window, async () => {
+          await SpecialPowers.spawn(browser, [videoID], async videoID => {
+            let video = this.content.document.getElementById(videoID);
+            video.requestFullscreen();
+          });
         });
 
         await BrowserTestUtils.synthesizeMouseAtCenter(
@@ -40,24 +33,18 @@ add_task(async () => {
         );
 
         let args = { videoID, TOGGLE_ID };
-        let exited = BrowserTestUtils.waitForEvent(
-          window,
-          "MozDOMFullscreen:Exited"
-        );
-        await SpecialPowers.spawn(browser, [args], async args => {
-          let { videoID, TOGGLE_ID } = args;
-          let video = this.content.document.getElementById(videoID);
-          let toggle = video.openOrClosedShadowRoot.getElementById(TOGGLE_ID);
-          ok(
-            ContentTaskUtils.is_hidden(toggle),
-            "Toggle should be hidden in fullscreen mode."
-          );
-          this.content.document.exitFullscreen();
-        });
-        await exited;
 
-        await BrowserTestUtils.waitForCondition(() => {
-          return !TelemetryStopwatch.running("FULLSCREEN_CHANGE_MS");
+        await promiseFullscreenExited(window, async () => {
+          await SpecialPowers.spawn(browser, [args], async args => {
+            let { videoID, TOGGLE_ID } = args;
+            let video = this.content.document.getElementById(videoID);
+            let toggle = video.openOrClosedShadowRoot.getElementById(TOGGLE_ID);
+            ok(
+              ContentTaskUtils.is_hidden(toggle),
+              "Toggle should be hidden in fullscreen mode."
+            );
+            this.content.document.exitFullscreen();
+          });
         });
       }
     }
@@ -76,17 +63,10 @@ add_task(async () => {
       url: TEST_PAGE,
     },
     async browser => {
-      let entered = BrowserTestUtils.waitForEvent(
-        window,
-        "MozDOMFullscreen:Entered"
-      );
-      await SpecialPowers.spawn(browser, [], async () => {
-        this.content.document.body.requestFullscreen();
-      });
-      await entered;
-
-      await BrowserTestUtils.waitForCondition(() => {
-        return !TelemetryStopwatch.running("FULLSCREEN_CHANGE_MS");
+      await promiseFullscreenEntered(window, async () => {
+        await SpecialPowers.spawn(browser, [], async () => {
+          this.content.document.body.requestFullscreen();
+        });
       });
 
       for (let videoID of VIDEOS) {
@@ -110,17 +90,10 @@ add_task(async () => {
         });
       }
 
-      let exited = BrowserTestUtils.waitForEvent(
-        window,
-        "MozDOMFullscreen:Exited"
-      );
-      await SpecialPowers.spawn(browser, [], async () => {
-        this.content.document.exitFullscreen();
-      });
-      await exited;
-
-      await BrowserTestUtils.waitForCondition(() => {
-        return !TelemetryStopwatch.running("FULLSCREEN_CHANGE_MS");
+      await promiseFullscreenExited(window, async () => {
+        await SpecialPowers.spawn(browser, [], async () => {
+          this.content.document.exitFullscreen();
+        });
       });
     }
   );

toolkit/components/pictureinpicture/tests/head.js

@@ -545,3 +545,62 @@ async function testToggleHelper(browser, videoID, canToggle, policy) {
   await BrowserTestUtils.synthesizeMouseAtPoint(1, 1, {}, browser);
   await assertSawMouseEvents(browser, true);
 }
+
+/**
+ * Helper function that ensures that a provided async function
+ * causes a window to fully enter fullscreen mode.
+ *
+ * @param window (DOM Window)
+ *   The window that is expected to enter fullscreen mode.
+ * @param asyncFn (Async Function)
+ *   The async function to run to trigger the fullscreen switch.
+ * @return Promise
+ * @resolves When the fullscreen entering transition completes.
+ */
+async function promiseFullscreenEntered(window, asyncFn) {
+  let entered = BrowserTestUtils.waitForEvent(
+    window,
+    "MozDOMFullscreen:Entered"
+  );
+
+  await asyncFn();
+
+  await entered;
+
+  await BrowserTestUtils.waitForCondition(() => {
+    return !TelemetryStopwatch.running("FULLSCREEN_CHANGE_MS");
+  });
+}
+
+/**
+ * Helper function that ensures that a provided async function
+ * causes a window to fully exit fullscreen mode.
+ *
+ * @param window (DOM Window)
+ *   The window that is expected to exit fullscreen mode.
+ * @param asyncFn (Async Function)
+ *   The async function to run to trigger the fullscreen switch.
+ * @return Promise
+ * @resolves When the fullscreen exiting transition completes.
+ */
+async function promiseFullscreenExited(window, asyncFn) {
+  let exited = BrowserTestUtils.waitForEvent(window, "MozDOMFullscreen:Exited");
+
+  await asyncFn();
+
+  await exited;
+
+  await BrowserTestUtils.waitForCondition(() => {
+    return !TelemetryStopwatch.running("FULLSCREEN_CHANGE_MS");
+  });
+
+  if (AppConstants.platform == "macosx") {
+    // On macOS, the fullscreen transition takes some extra time
+    // to complete, and we don't receive events for it. We need to
+    // wait for it to complete or else input events in the next test
+    // might get eaten up. This is the best we can currently do.
+    //
+    // eslint-disable-next-line mozilla/no-arbitrary-setTimeout
+    await new Promise(resolve => setTimeout(resolve, 2000));
+  }
+}