Bug 1505547 - Use DocumentOrShadowRoot level checks in videocontrols for fullscreen; r=timdream
authorEdgar Chen <echen@mozilla.com>
Thu, 29 Nov 2018 23:01:55 +0000
changeset 508092 76a737a5a6e94e14b5fad10ca62ab259a27e2615
parent 508091 f9900ac6071c17ff7af3ccfaf2a8ce02ea66cffc
child 508093 6a516d21eae63a07573958fedb5ff291e2c393b8
push id1905
push userffxbld-merge
push dateMon, 21 Jan 2019 12:33:13 +0000
treeherdermozilla-release@c2fca1944d8c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstimdream
bugs1505547
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1505547 - Use DocumentOrShadowRoot level checks in videocontrols for fullscreen; r=timdream Differential Revision: https://phabricator.services.mozilla.com/D13402
toolkit/content/tests/widgets/test_videocontrols.html
toolkit/content/tests/widgets/xbl/test_videocontrols.html
toolkit/content/widgets/videocontrols.js
toolkit/content/widgets/videocontrols.xml
--- a/toolkit/content/tests/widgets/test_videocontrols.html
+++ b/toolkit/content/tests/widgets/test_videocontrols.html
@@ -10,16 +10,18 @@
 </head>
 <body>
 <p id="display"></p>
 
 <div id="content">
   <video width="320" height="240" id="video" controls mozNoDynamicControls preload="auto"></video>
 </div>
 
+<div id="host"></div>
+
 <pre id="test">
 <script class="testbody" type="text/javascript">
 
 /*
  * Positions of the  UI elements, relative to the upper-left corner of the
  * <video> box.
  */
 const videoWidth = 320;
@@ -51,16 +53,19 @@ const muteButtonCenterY = videoHeight - 
 // Fullscreen button is on the bottom-right at the far end
 const fullscreenButtonCenterX = videoWidth - Math.round(fullscreenButtonWidth / 2) - controlBarMargin;
 const fullscreenButtonCenterY = videoHeight - Math.round(fullscreenButtonHeight / 2);
 // Scrubber bar is between the play and mute buttons. We don't need it's
 // X center, just the offset of its box.
 const scrubberOffsetX = controlBarMargin + playButtonWidth + scrubberMargin;
 const scrubberCenterY = videoHeight - Math.round(scrubberHeight / 2);
 
+const screenWidth = window.screen.width;
+const screenHeight = window.screen.height;
+
 const video = document.getElementById("video");
 
 let expectingEvents;
 let expectingEventPromise;
 
 async function isMuteButtonMuted() {
   const muteButton = getElementWithinVideo(video, "muteButton");
   await new Promise(SimpleTest.executeSoon);
@@ -400,14 +405,43 @@ add_task(async function ensure_fullscree
   // Wiggle the mouse a bit
   synthesizeMouse(video, playButtonCenterX, playButtonCenterY, { type: "mousemove" });
 
   is(controlsSpacer.hasAttribute("hideCursor"), false, "Cursor is shown");
 
   // Restore
   video.setAttribute("mozNoDynamicControls", "");
   document.mozCancelFullScreen();
+  await waitForEvent("mozfullscreenchange");
+  if (!video.paused) {
+    video.pause();
+    await waitForEvent("pause");
+  }
+});
+
+// Bug 1505547: Make sure the fullscreen button works if the video element is in shadow tree.
+add_task(async function ensure_fullscreen_button() {
+  video.removeAttribute("mozNoDynamicControls");
+  let host = document.getElementById("host");
+  let root = host.attachShadow({ mode: "open" });
+  root.appendChild(video);
+
+  video.mozRequestFullScreen();
+  await waitForEvent("mozfullscreenchange");
+
+  const buttonCenterX = screenWidth - Math.round(fullscreenButtonWidth / 2) - controlBarMargin;
+  const buttonCenterY = screenHeight - Math.round(fullscreenButtonHeight / 2);
+
+  // Wiggle the mouse a bit
+  synthesizeMouse(video, buttonCenterX, buttonCenterY, { type: "mousemove" });
+
+  synthesizeMouse(video, buttonCenterX, buttonCenterY, {});
+  await waitForEvent("mozfullscreenchange");
+
+  // Restore
+  video.setAttribute("mozNoDynamicControls", "");
+  document.getElementById("content").appendChild(video);
 });
 
 </script>
 </pre>
 </body>
 </html>
--- a/toolkit/content/tests/widgets/xbl/test_videocontrols.html
+++ b/toolkit/content/tests/widgets/xbl/test_videocontrols.html
@@ -10,16 +10,18 @@
 </head>
 <body>
 <p id="display"></p>
 
 <div id="content">
   <video width="320" height="240" id="video" controls mozNoDynamicControls preload="auto"></video>
 </div>
 
+<div id="host"></div>
+
 <pre id="test">
 <script class="testbody" type="text/javascript">
 
 /*
  * Positions of the  UI elements, relative to the upper-left corner of the
  * <video> box.
  */
 const videoWidth = 320;
@@ -51,16 +53,19 @@ const muteButtonCenterY = videoHeight - 
 // Fullscreen button is on the bottom-right at the far end
 const fullscreenButtonCenterX = videoWidth - Math.round(fullscreenButtonWidth / 2) - controlBarMargin;
 const fullscreenButtonCenterY = videoHeight - Math.round(fullscreenButtonHeight / 2);
 // Scrubber bar is between the play and mute buttons. We don't need it's
 // X center, just the offset of its box.
 const scrubberOffsetX = controlBarMargin + playButtonWidth + scrubberMargin;
 const scrubberCenterY = videoHeight - Math.round(scrubberHeight / 2);
 
+const screenWidth = window.screen.width;
+const screenHeight = window.screen.height;
+
 const video = document.getElementById("video");
 
 let expectingEvents;
 let expectingEventPromise;
 
 async function isMuteButtonMuted() {
   const muteButton = getAnonElementWithinVideoByAttribute(video, "anonid", "muteButton");
   await new Promise(SimpleTest.executeSoon);
@@ -400,14 +405,43 @@ add_task(async function ensure_fullscree
   // Wiggle the mouse a bit
   synthesizeMouse(video, playButtonCenterX, playButtonCenterY, { type: "mousemove" });
 
   is(controlsSpacer.hasAttribute("hideCursor"), false, "Cursor is shown");
 
   // Restore
   video.setAttribute("mozNoDynamicControls", "");
   document.mozCancelFullScreen();
+  await waitForEvent("mozfullscreenchange");
+  if (!video.paused) {
+    video.pause();
+    await waitForEvent("pause");
+  }
+});
+
+// Bug 1505547: Make sure the fullscreen button works if the video element is in shadow tree.
+add_task(async function ensure_fullscreen_button() {
+  video.removeAttribute("mozNoDynamicControls");
+  let host = document.getElementById("host");
+  let root = host.attachShadow({ mode: "open" });
+  root.appendChild(video);
+
+  video.mozRequestFullScreen();
+  await waitForEvent("mozfullscreenchange");
+
+  const buttonCenterX = screenWidth - Math.round(fullscreenButtonWidth / 2) - controlBarMargin;
+  const buttonCenterY = screenHeight - Math.round(fullscreenButtonHeight / 2);
+
+  // Wiggle the mouse a bit
+  synthesizeMouse(video, buttonCenterX, buttonCenterY, { type: "mousemove" });
+
+  synthesizeMouse(video, buttonCenterX, buttonCenterY, {});
+  await waitForEvent("mozfullscreenchange");
+
+  // Restore
+  video.setAttribute("mozNoDynamicControls", "");
+  document.getElementById("content").appendChild(video);
 });
 
 </script>
 </pre>
 </body>
 </html>
--- a/toolkit/content/widgets/videocontrols.js
+++ b/toolkit/content/widgets/videocontrols.js
@@ -1281,17 +1281,18 @@ this.VideoControlsImplPageWidget = class
         }
 
         // We'll handle style changes in the event listener for
         // the "volumechange" event, same as if content script was
         // controlling volume.
       },
 
       get isVideoInFullScreen() {
-        return this.document.mozFullScreenElement == this.shadowRoot.host;
+        let element = this.shadowRoot.host;
+        return element.getRootNode().mozFullScreenElement == element;
       },
 
       toggleFullscreen() {
         this.isVideoInFullScreen ?
           this.document.mozCancelFullScreen() :
           this.video.mozRequestFullScreen();
       },
 
--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -1276,17 +1276,17 @@
         }
 
         // We'll handle style changes in the event listener for
         // the "volumechange" event, same as if content script was
         // controlling volume.
       },
 
       get isVideoInFullScreen() {
-        return document.mozFullScreenElement == this.video;
+        return this.video.getRootNode().mozFullScreenElement == this.video;
       },
 
       toggleFullscreen() {
         this.isVideoInFullScreen ?
           document.mozCancelFullScreen() :
           this.video.mozRequestFullScreen();
       },