Bug 1642715 - part7 : add test. r=chunmin

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

dom/media/mediacontrol/tests/browser.ini

@@ -2,6 +2,7 @@
 tags = mediacontrol
 support-files =
   file_autoplay.html
+  file_iframe_media.html
   file_main_frame_with_multiple_child_session_frames.html
   file_media_session_page.html
   file_muted_autoplay.html
@@ -16,6 +17,7 @@ support-files =
 
 [browser_audio_focus_management.js]
 [browser_media_control_audio_focus_within_a_page.js]
+[browser_media_control_before_media_starts.js]
 [browser_media_control_captured_audio.js]
 [browser_media_control_metadata.js]
 [browser_media_control_keys_event.js]

dom/media/mediacontrol/tests/browser_media_control_before_media_starts.js

@@ -0,0 +1,150 @@
+/* eslint-disable no-undef */
+
+// Import this in order to use `triggerPictureInPicture()`.
+/* import-globals-from ../../../../toolkit/components/pictureinpicture/tests/head.js */
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/toolkit/components/pictureinpicture/tests/head.js",
+  this
+);
+
+const PAGE_NON_AUTOPLAY =
+  "https://example.com/browser/dom/media/mediacontrol/tests/file_non_autoplay.html";
+const IFRAME_URL =
+  "https://example.com/browser/dom/media/mediacontrol/tests/file_iframe_media.html";
+const testVideoId = "video";
+
+add_task(async function setupTestingPref() {
+  await SpecialPowers.pushPrefEnv({
+    set: [
+      ["media.mediacontrol.testingevents.enabled", true],
+      ["full-screen-api.allow-trusted-requests-only", false],
+    ],
+  });
+});
+
+/**
+ * Usually we would only start controlling media after media starts, but if
+ * media has entered Picture-in-Picture mode or fullscreen, then we would allow
+ * users to control them directly without prior to starting media.
+ */
+add_task(async function testMediaEntersPIPMode() {
+  info(`open media page`);
+  const tab = await createTabAndLoad(PAGE_NON_AUTOPLAY);
+
+  info(`trigger PIP mode`);
+  const winPIP = await triggerPictureInPicture(tab.linkedBrowser, testVideoId);
+
+  info(`press 'play' and wait until media starts`);
+  await generateMediaControlKeyEvent("play");
+  await checkOrWaitUntilMediaStartedPlaying(tab, testVideoId);
+
+  info(`remove tab`);
+  await BrowserTestUtils.closeWindow(winPIP);
+  await BrowserTestUtils.removeTab(tab);
+});
+
+add_task(async function testMediaEntersFullScreen() {
+  info(`open media page`);
+  const tab = await createTabAndLoad(PAGE_NON_AUTOPLAY);
+
+  info(`make video fullscreen`);
+  await enableFullScreen(tab, testVideoId);
+
+  info(`press 'play' and wait until media starts`);
+  await generateMediaControlKeyEvent("play");
+  await checkOrWaitUntilMediaStartedPlaying(tab, testVideoId);
+
+  info(`remove tab`);
+  await BrowserTestUtils.removeTab(tab);
+});
+
+add_task(async function testNonMediaEntersFullScreen() {
+  info(`open media page`);
+  const tab = await createTabAndLoad(PAGE_NON_AUTOPLAY);
+
+  info(`make non-media element fullscreen`);
+  const nonMediaElementId = "image";
+  await enableFullScreen(tab, nonMediaElementId);
+
+  info(`press 'play' which should not start media`);
+  // Use `generateMediaControlKey()` directly because `play` won't affect the
+  // controller's playback state (don't need to wait for the change).
+  ChromeUtils.generateMediaControlKey("play");
+  await checkOrWaitUntilMediaStoppedPlaying(tab, testVideoId);
+
+  info(`remove tab`);
+  await BrowserTestUtils.removeTab(tab);
+});
+
+add_task(async function testMediaInIframeEntersFullScreen() {
+  info(`open media page`);
+  const tab = await createTabAndLoad(PAGE_NON_AUTOPLAY);
+
+  info(`make video in iframe fullscreen`);
+  await enableMediaFullScreenInIframe(tab, testVideoId);
+
+  info(`press 'play' and wait until media starts`);
+  await generateMediaControlKeyEvent("play");
+  await checkOrWaitUntilMediaStartedPlaying(tab, testVideoId);
+
+  info(`remove iframe that contains fullscreen video`);
+  await removeIframeFromDocument(tab);
+
+  info(`press 'pause' which should still affect video in the main frame`);
+  await generateMediaControlKeyEvent("pause");
+  await checkOrWaitUntilMediaStoppedPlaying(tab, testVideoId);
+
+  info(`remove tab`);
+  await BrowserTestUtils.removeTab(tab);
+});
+
+/**
+ * The following are helper functions.
+ */
+function enableFullScreen(tab, elementId) {
+  return SpecialPowers.spawn(tab.linkedBrowser, [elementId], elementId => {
+    return new Promise(r => {
+      const element = content.document.getElementById(elementId);
+      element.requestFullscreen();
+      element.onfullscreenchange = () => {
+        element.onfullscreenchange = null;
+        element.onfullscreenerror = null;
+        r();
+      };
+      element.onfullscreenerror = () => {
+        // Retry until the element successfully enters fullscreen.
+        element.requestFullscreen();
+      };
+    });
+  });
+}
+
+function enableMediaFullScreenInIframe(tab) {
+  return SpecialPowers.spawn(tab.linkedBrowser, [IFRAME_URL], async url => {
+    info(`create iframe and wait until it finishes loading`);
+    const iframe = content.document.getElementById("iframe");
+    iframe.src = url;
+    await new Promise(r => (iframe.onload = r));
+
+    info(`trigger media in iframe entering into fullscreen`);
+    iframe.contentWindow.postMessage("fullscreen", "*");
+    info(`wait until media in frame enters fullscreen`);
+    return new Promise(r => {
+      content.onmessage = event => {
+        is(
+          event.data,
+          "entered-fullscreen",
+          `media in iframe entered fullscreen`
+        );
+        r();
+      };
+    });
+  });
+}
+
+function removeIframeFromDocument(tab) {
+  return SpecialPowers.spawn(tab.linkedBrowser, [], () => {
+    info(`remove iframe from document`);
+    content.document.getElementById("iframe").remove();
+  });
+}

dom/media/mediacontrol/tests/file_iframe_media.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+<video id="video" src="gizmo.mp4" loop></video>
+<script type="text/javascript">
+
+const video = document.getElementById("video");
+const w = window.opener || window.parent;
+
+window.onmessage = event => {
+  if (event.data == "fullscreen") {
+    video.requestFullscreen();
+    video.onfullscreenchange = () => {
+      video.onfullscreenchange = null;
+      video.onfullscreenerror = null;
+      w.postMessage("entered-fullscreen", "*");
+    }
+    video.onfullscreenerror = () => {
+      // Retry until the element successfully enters fullscreen.
+      video.requestFullscreen();
+    }
+  }
+}
+
+</script>
+</body>
+</html>

dom/media/mediacontrol/tests/file_non_autoplay.html

@@ -5,5 +5,7 @@
 </head>
 <body>
 <video id="video" src="gizmo.mp4" loop></video>
+<image id="image" src="data:image/svg+xml;base64,PCEtLSBUaGlzIFNvdXJjZSBDb2RlIEZvcm0gaXMgc3ViamVjdCB0byB0aGUgdGVybXMgb2YgdGhlIE1vemlsbGEgUHVibGljCiAgIC0gTGljZW5zZSwgdi4gMi4wLiBJZiBhIGNvcHkgb2YgdGhlIE1QTCB3YXMgbm90IGRpc3RyaWJ1dGVkIHdpdGggdGhpcwogICAtIGZpbGUsIFlvdSBjYW4gb2J0YWluIG9uZSBhdCBodHRwOi8vbW96aWxsYS5vcmcvTVBMLzIuMC8uIC0tPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGZpbGw9ImNvbnRleHQtZmlsbCIgZmlsbC1vcGFjaXR5PSJjb250ZXh0LWZpbGwtb3BhY2l0eSIgZD0iTTggMGE4IDggMCAxIDAgOCA4IDguMDA5IDguMDA5IDAgMCAwLTgtOHptNS4xNjMgNC45NThoLTEuNTUyYTcuNyA3LjcgMCAwIDAtMS4wNTEtMi4zNzYgNi4wMyA2LjAzIDAgMCAxIDIuNjAzIDIuMzc2ek0xNCA4YTUuOTYzIDUuOTYzIDAgMCAxLS4zMzUgMS45NThoLTEuODIxQTEyLjMyNyAxMi4zMjcgMCAwIDAgMTIgOGExMi4zMjcgMTIuMzI3IDAgMCAwLS4xNTYtMS45NThoMS44MjFBNS45NjMgNS45NjMgMCAwIDEgMTQgOHptLTYgNmMtMS4wNzUgMC0yLjAzNy0xLjItMi41NjctMi45NThoNS4xMzVDMTAuMDM3IDEyLjggOS4wNzUgMTQgOCAxNHpNNS4xNzQgOS45NThhMTEuMDg0IDExLjA4NCAwIDAgMSAwLTMuOTE2aDUuNjUxQTExLjExNCAxMS4xMTQgMCAwIDEgMTEgOGExMS4xMTQgMTEuMTE0IDAgMCAxLS4xNzQgMS45NTh6TTIgOGE1Ljk2MyA1Ljk2MyAwIDAgMSAuMzM1LTEuOTU4aDEuODIxYTEyLjM2MSAxMi4zNjEgMCAwIDAgMCAzLjkxNkgyLjMzNUE1Ljk2MyA1Ljk2MyAwIDAgMSAyIDh6bTYtNmMxLjA3NSAwIDIuMDM3IDEuMiAyLjU2NyAyLjk1OEg1LjQzM0M1Ljk2MyAzLjIgNi45MjUgMiA4IDJ6bS0yLjU2LjU4MmE3LjcgNy43IDAgMCAwLTEuMDUxIDIuMzc2SDIuODM3QTYuMDMgNi4wMyAwIDAgMSA1LjQ0IDIuNTgyem0tMi42IDguNDZoMS41NDlhNy43IDcuNyAwIDAgMCAxLjA1MSAyLjM3NiA2LjAzIDYuMDMgMCAwIDEtMi42MDMtMi4zNzZ6bTcuNzIzIDIuMzc2YTcuNyA3LjcgMCAwIDAgMS4wNTEtMi4zNzZoMS41NTJhNi4wMyA2LjAzIDAgMCAxLTIuNjA2IDIuMzc2eiIvPgo8L3N2Zz4K">
+<iframe id="iframe" allow="fullscreen *" allowfullscreen></iframe>
 </body>
 </html>