1 files changed, 94 insertions, 0 deletions
diff --git a/dom/media/mediacontrol/tests/browser/browser_control_page_with_audible_and_inaudible_media.js b/dom/media/mediacontrol/tests/browser/browser_control_page_with_audible_and_inaudible_media.js
new file mode 100644
index 0000000000..6d9bc38b04
--- /dev/null
+++ b/dom/media/mediacontrol/tests/browser/browser_control_page_with_audible_and_inaudible_media.js
@@ -0,0 +1,94 @@
+const PAGE_URL =
+  "https://example.com/browser/dom/media/mediacontrol/tests/browser/file_audio_and_inaudible_media.html";
+
+add_task(async function setupTestingPref() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["media.mediacontrol.testingevents.enabled", true]],
+  });
+});
+
+/**
+ * When a page has audible media and inaudible media playing at the same time,
+ * only audible media should be controlled by media control keys. However, once
+ * inaudible media becomes audible, then it should be able to be controlled.
+ */
+add_task(async function testSetPositionState() {
+  info(`open media page`);
+  const tab = await createLoadedTabWrapper(PAGE_URL);
+
+  info(`play video1 (audible) and video2 (inaudible)`);
+  await playBothAudibleAndInaudibleMedia(tab);
+
+  info(`pressing 'pause' should only affect video1 (audible)`);
+  await generateMediaControlKeyEvent("pause");
+  await checkMediaPausedState(tab, {
+    shouldVideo1BePaused: true,
+    shouldVideo2BePaused: false,
+  });
+
+  info(`make video2 become audible, then it would be able to be controlled`);
+  await unmuteInaudibleMedia(tab);
+
+  info(`pressing 'pause' should affect video2 (audible`);
+  await generateMediaControlKeyEvent("pause");
+  await checkMediaPausedState(tab, {
+    shouldVideo1BePaused: true,
+    shouldVideo2BePaused: true,
+  });
+
+  info(`remove tab`);
+  await tab.close();
+});
+
+/**
+ * The following are helper functions.
+ */
+async function playBothAudibleAndInaudibleMedia(tab) {
+  const playbackStateChangedPromise = waitUntilDisplayedPlaybackChanged();
+  await SpecialPowers.spawn(tab.linkedBrowser, [], () => {
+    const videos = content.document.getElementsByTagName("video");
+    let promises = [];
+    for (let video of videos) {
+      info(`play ${video.id} video`);
+      promises.push(video.play());
+    }
+    return Promise.all(promises);
+  });
+  await playbackStateChangedPromise;
+}
+
+function checkMediaPausedState(
+  tab,
+  { shouldVideo1BePaused, shouldVideo2BePaused }
+) {
+  return SpecialPowers.spawn(
+    tab.linkedBrowser,
+    [shouldVideo1BePaused, shouldVideo2BePaused],
+    (shouldVideo1BePaused, shouldVideo2BePaused) => {
+      const video1 = content.document.getElementById("video1");
+      const video2 = content.document.getElementById("video2");
+      is(
+        video1.paused,
+        shouldVideo1BePaused,
+        "Correct paused state for video1"
+      );
+      is(
+        video2.paused,
+        shouldVideo2BePaused,
+        "Correct paused state for video2"
+      );
+    }
+  );
+}
+
+function unmuteInaudibleMedia(tab) {
+  const unmutePromise = SpecialPowers.spawn(tab.linkedBrowser, [], () => {
+    const video2 = content.document.getElementById("video2");
+    video2.muted = false;
+  });
+  // Inaudible media was not controllable, so it won't affect the controller's
+  // playback state. However, when it becomes audible, which means being able to
+  // be controlled by media controller, it would make the playback state chanege
+  // to `playing` because now we have an audible playinng media in the page.
+  return Promise.all([unmutePromise, waitUntilDisplayedPlaybackChanged()]);
+}