Bug 1585769 - Regression test. r=JSON_voorhees

This added test, browser_thirdPartyIframe.js, is disabled for Fission until
we get Picture-in-Picture support working for it (Bug 1576915).

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

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

toolkit/components/pictureinpicture/tests/browser.ini

@@ -5,6 +5,7 @@ support-files =
   test-button-overlay.html
   test-opaque-overlay.html
   test-page.html
+  test-page-with-iframe.html
   test-pointer-events-none.html
   test-transparent-overlay-1.html
   test-transparent-overlay-2.html
@@ -27,6 +28,8 @@ skip-if = debug
 [browser_rerequestPiP.js]
 [browser_showMessage.js]
 [browser_stripVideoStyles.js]
+[browser_thirdPartyIframe.js]
+skip-if = fission # Bug 1576915
 [browser_toggleAfterTabTearOutIn.js]
 [browser_toggleButtonOverlay.js]
 skip-if = true # Bug 1546455

toolkit/components/pictureinpicture/tests/browser_thirdPartyIframe.js

@@ -0,0 +1,57 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests that videos hosted inside of a third-party <iframe> can be opened
+ * in a Picture-in-Picture window.
+ */
+add_task(async () => {
+  for (let videoID of ["with-controls", "no-controls"]) {
+    info(`Testing ${videoID} case.`);
+
+    await BrowserTestUtils.withNewTab(
+      {
+        url: TEST_PAGE_WITH_IFRAME,
+        gBrowser,
+      },
+      async browser => {
+        // TEST_PAGE_WITH_IFRAME is hosted at a different domain from TEST_PAGE,
+        // so loading TEST_PAGE within the iframe will act as our third-party
+        // iframe.
+        await SpecialPowers.spawn(browser, [TEST_PAGE], async TEST_PAGE => {
+          let iframe = content.document.getElementById("iframe");
+          let loadPromise = ContentTaskUtils.waitForEvent(iframe, "load");
+          iframe.src = TEST_PAGE;
+          await loadPromise;
+        });
+
+        let iframeBc = browser.browsingContext.getChildren()[0];
+        let pipWin = await triggerPictureInPicture(iframeBc, videoID);
+        ok(pipWin, "Got Picture-in-Picture window.");
+
+        try {
+          await assertShowingMessage(iframeBc, videoID, true);
+        } finally {
+          let uaWidgetUpdate = SpecialPowers.spawn(iframeBc, [], async () => {
+            await ContentTaskUtils.waitForEvent(
+              content.windowRoot,
+              "UAWidgetSetupOrChange",
+              true /* capture */
+            );
+          });
+          await BrowserTestUtils.closeWindow(pipWin);
+          await uaWidgetUpdate;
+        }
+
+        // no-controls case is disabled until we ensure that there's a UAWidget for
+        // the no-controls case on Desktop (which should be fixed as part of
+        // bug 1535354).
+        if (videoID !== "no-controls") {
+          await assertShowingMessage(iframeBc, videoID, false);
+        }
+      }
+    );
+  }
+});

toolkit/components/pictureinpicture/tests/head.js

@@ -7,7 +7,12 @@ const TEST_ROOT = getRootDirectory(gTestPath).replace(
   "chrome://mochitests/content",
   "http://example.com"
 );
+const TEST_ROOT_2 = getRootDirectory(gTestPath).replace(
+  "chrome://mochitests/content",
+  "http://example.org"
+);
 const TEST_PAGE = TEST_ROOT + "test-page.html";
+const TEST_PAGE_WITH_IFRAME = TEST_ROOT_2 + "test-page-with-iframe.html";
 const WINDOW_TYPE = "Toolkit:PictureInPicture";
 const TOGGLE_ID = "pictureInPictureToggleButton";
 const HOVER_VIDEO_OPACITY = 0.8;
@@ -18,7 +23,8 @@ const HOVER_TOGGLE_OPACITY = 1.0;
  * Picture-in-Picture for that <video>, and resolves with the
  * Picture-in-Picture window once it is ready to be used.
  *
- * @param {Element} browser The <xul:browser> hosting the <video>
+ * @param {Element,BrowsingContext} browser The <xul:browser> or
+ * BrowsingContext hosting the <video>
  *
  * @param {String} videoID The ID of the video to trigger
  * Picture-in-Picture on.
@@ -28,7 +34,7 @@ const HOVER_TOGGLE_OPACITY = 1.0;
  */
 async function triggerPictureInPicture(browser, videoID) {
   let domWindowOpened = BrowserTestUtils.domWindowOpened(null);
-  let videoReady = ContentTask.spawn(browser, videoID, async videoID => {
+  let videoReady = SpecialPowers.spawn(browser, [videoID], async videoID => {
     let video = content.document.getElementById(videoID);
     let event = new content.CustomEvent("MozTogglePictureInPicture", {
       bubbles: true,
@@ -49,7 +55,8 @@ async function triggerPictureInPicture(browser, videoID) {
  * video is showing the "This video is playing in Picture-in-Picture mode."
  * status message overlay.
  *
- * @param {Element} browser The <xul:browser> hosting the <video>
+ * @param {Element,BrowsingContext} browser The <xul:browser> or
+ * BrowsingContext hosting the <video>
  *
  * @param {String} videoID The ID of the video to trigger
  * Picture-in-Picture on.
@@ -60,11 +67,11 @@ async function triggerPictureInPicture(browser, videoID) {
  * @resolves When the checks have completed.
  */
 async function assertShowingMessage(browser, videoID, expected) {
-  let showing = await ContentTask.spawn(browser, videoID, async videoID => {
+  let showing = await SpecialPowers.spawn(browser, [videoID], async videoID => {
     let video = content.document.getElementById(videoID);
     let shadowRoot = video.openOrClosedShadowRoot;
     let pipOverlay = shadowRoot.querySelector(".pictureInPictureOverlay");
-    ok(pipOverlay, "Should be able to find Picture-in-Picture overlay.");
+    Assert.ok(pipOverlay, "Should be able to find Picture-in-Picture overlay.");
 
     let rect = pipOverlay.getBoundingClientRect();
     return rect.height > 0 && rect.width > 0;

toolkit/components/pictureinpicture/tests/test-page-with-iframe.html

@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Picture-in-Picture tests</title>
+  <script type="text/javascript" src="click-event-helper.js"></script>
+</head>
+<style>
+  html, body {
+    height: 100vh;
+    width: 100vw;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+  #iframe {
+    height: 100vh;
+    width: 100vw;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+</style>
+<body>
+  <iframe id="iframe"></iframe>
+</body>
+</html>