Bug 1271765 - Part 3. Update tests for video control visual refresh. r=jaws
☠☠ backed out by 60af44ebfa62 ☠ ☠
authorRay Lin <ralin@mozilla.com>
Wed, 12 Oct 2016 13:44:30 +0800
changeset 321591 235ea1c681db5aaec4b81466d65a4dcfe374c9ce
parent 321590 02d34b18d76bf7d59d09149385b00586111146e7
child 321592 f9b7b51d141628fcbd672660ae5cae7849c2ca1e
push id83647
push userkwierso@gmail.com
push dateTue, 08 Nov 2016 22:08:41 +0000
treeherdermozilla-inbound@1d0b02250149 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1271765
milestone52.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 1271765 - Part 3. Update tests for video control visual refresh. r=jaws MozReview-Commit-ID: 24GoxgtN0Bo
accessible/tests/mochitest/tree/test_media.html
toolkit/content/tests/widgets/test_audiocontrols_dimensions.html
toolkit/content/tests/widgets/test_videocontrols.html
toolkit/content/tests/widgets/test_videocontrols_standalone.html
toolkit/content/tests/widgets/test_videocontrols_vtt.html
toolkit/content/widgets/videocontrols.xml
--- a/accessible/tests/mochitest/tree/test_media.html
+++ b/accessible/tests/mochitest/tree/test_media.html
@@ -40,16 +40,27 @@ https://bugzilla.mozilla.org/show_bug.cg
             role: ROLE_PROGRESSBAR,
             children: []
           },
           { // slider of progress bar
             role: ROLE_SLIDER,
             //name: "0:00 of 0:02 elapsed",
             children: []
           },
+          {
+            role: ROLE_TEXT_CONTAINER,
+            children: [
+              {
+                role: ROLE_TEXT_LEAF, // position text
+              },
+              {
+                role: ROLE_TEXT_LEAF, // duration text
+              }
+            ]
+          },
           { // mute button
             role: ROLE_PUSHBUTTON,
             name: "Mute",
             children: []
           },
           { // slider of volume bar
             role: ROLE_SLIDER,
             children: []
--- a/toolkit/content/tests/widgets/test_audiocontrols_dimensions.html
+++ b/toolkit/content/tests/widgets/test_audiocontrols_dimensions.html
@@ -12,17 +12,17 @@
 <div id="content">
   <audio id="audio" controls preload="auto"></audio>
 </div>
 
 <pre id="test">
 <script class="testbody" type="text/javascript">
   function loadedmetadata(event) {
     is(event.type, "loadedmetadata", "checking event type");
-    is(audio.clientHeight, 28, "checking height of audio element");
+    is(audio.clientHeight, 40, "checking height of audio element");
 
     SimpleTest.finish();
   }
 
   var audio = document.getElementById("audio");
 
   SpecialPowers.pushPrefEnv({"set": [["media.cache_size", 40000]]}, startTest);
   function startTest() {
--- a/toolkit/content/tests/widgets/test_videocontrols.html
+++ b/toolkit/content/tests/widgets/test_videocontrols.html
@@ -19,63 +19,68 @@
 /*
  * Positions of the  UI elements, relative to the upper-left corner of the
  * <video> box.
  */
 const videoWidth = 320;
 const videoHeight = 240;
 const videoDuration = 3.8329999446868896;
 
-const playButtonWidth = 28;
-const playButtonHeight = 28;
-const muteButtonWidth = 33;
-const muteButtonHeight = 28;
-const durationWidth = 34;
-const fullscreenButtonWidth = 28;
-const fullscreenButtonHeight = 28;
-const volumeSliderWidth = 32;
-const scrubberWidth = videoWidth - playButtonWidth - durationWidth - muteButtonWidth - volumeSliderWidth - fullscreenButtonWidth;
-const scrubberHeight = 28;
+const controlBarMargin = 9;
+
+const playButtonWidth = 30;
+const playButtonHeight = 40;
+const muteButtonWidth = 30;
+const muteButtonHeight = 40;
+const positionAndDurationWidth = 84;
+const fullscreenButtonWidth = 30;
+const fullscreenButtonHeight = 40;
+const volumeSliderWidth = 48;
+const volumeSliderMarginStart = 4;
+const volumeSliderMarginEnd = 6;
+const scrubberMargin = 9;
+const scrubberWidth = videoWidth - controlBarMargin - playButtonWidth - scrubberMargin * 2 - positionAndDurationWidth - muteButtonWidth - volumeSliderMarginStart - volumeSliderWidth - volumeSliderMarginEnd - fullscreenButtonWidth - controlBarMargin;
+const scrubberHeight = 40;
+
 
 // Play button is on the bottom-left
 const playButtonCenterX = 0 + Math.round(playButtonWidth / 2);
 const playButtonCenterY = videoHeight - Math.round(playButtonHeight / 2);
 // Mute button is on the bottom-right before the full screen button and volume slider
-const muteButtonCenterX = videoWidth - Math.round(muteButtonWidth / 2) - volumeSliderWidth - fullscreenButtonWidth;
+const muteButtonCenterX = videoWidth - Math.round(muteButtonWidth / 2) - volumeSliderWidth - fullscreenButtonWidth - controlBarMargin;
 const muteButtonCenterY = videoHeight - Math.round(muteButtonHeight / 2);
 // Fullscreen button is on the bottom-right at the far end
-const fullscreenButtonCenterX = videoWidth - Math.round(fullscreenButtonWidth / 2);
+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 = 0 + playButtonWidth;
+const scrubberOffsetX = controlBarMargin + playButtonWidth + scrubberMargin;
 const scrubberCenterY = videoHeight - Math.round(scrubberHeight / 2);
 
 var testnum = 1;
 var video = document.getElementById("video");
 
 const domUtil = SpecialPowers.Cc["@mozilla.org/inspector/dom-utils;1"]
                              .getService(SpecialPowers.Ci.inIDOMUtils);
 
 function getButtonByAttribute(aName, aValue) {
   var kids = domUtil.getChildrenForNode(video, true);
   var videocontrols = kids[1];
   return SpecialPowers.wrap(document)
     .getAnonymousElementByAttribute(videocontrols, aName, aValue);
 }
 
 function isMuteButtonMuted() {
-  var muteButton = getButtonByAttribute('class', 'muteButton');
+  var muteButton = getButtonByAttribute('anonid', 'muteButton');
   return muteButton.getAttribute('muted') === 'true';
 }
 
 function isVolumeSliderShowingCorrectVolume(expectedVolume) {
-  var volumeButton = getButtonByAttribute('anonid', 'volumeForeground');
-  let expectedPaddingRight = (1 - expectedVolume) * volumeSliderWidth + "px";
-  is(volumeButton.style.paddingRight, expectedPaddingRight,
+  var volumeControl = getButtonByAttribute('anonid', 'volumeControl');
+  is(+volumeControl.value, expectedVolume * 100,
      "volume slider should match expected volume");
 }
 
 function forceReframe() {
   // Setting display then getting the bounding rect to force a frame
   // reconstruction on the video element.
   video.style.display = "block";
   video.getBoundingClientRect();
@@ -224,17 +229,17 @@ function runTest(event) {
 
     /*
      * Click the slider at the 1/4 point with the mouse (jump backwards)
      */
     case 13:
       is(event.type, "seeked", "checking event type");
       ok(true, "video position is at " + video.currentTime);
       var expectedTime = videoDuration / 2;
-      ok(Math.abs(video.currentTime - expectedTime) < 0.1, "checking expected playback position");
+      ok(Math.abs(video.currentTime - expectedTime) < 0.25, "checking expected playback position");
 
       SimpleTest.executeSoon(() => {
         synthesizeMouse(video, scrubberOffsetX + (scrubberWidth / 4), scrubberCenterY, { });
       });
       break;
 
     case 14:
       is(event.type, "seeking", "checking event type");
--- a/toolkit/content/tests/widgets/test_videocontrols_standalone.html
+++ b/toolkit/content/tests/widgets/test_videocontrols_standalone.html
@@ -8,18 +8,19 @@
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
 </head>
 <body>
 <p id="display"></p>
 
 <pre id="test">
 <script class="testbody" type="text/javascript">
 
-const videoWidth = 320;
-const videoHeight = 240;
+const videoBorderWidth = 1;
+const videoWidth = 320 + videoBorderWidth * 2;
+const videoHeight = 240 + videoBorderWidth * 2;
 
 function getMediaElement(aWindow) {
   return aWindow.document.getElementsByTagName("video")[0];
 }
 
 var popup = window.open("seek_with_sound.ogg");
 popup.addEventListener("load", function onLoad() {
   popup.removeEventListener("load", onLoad);
@@ -63,17 +64,17 @@ function runTestAudioPre() {
       })
     }
   })
 }
 
 function runTestAudio(aAudio) {
   info("User agent (help diagnose bug #943556): " + navigator.userAgent);
   var isAndroid = navigator.userAgent.includes("Android");
-  var expectedHeight = isAndroid ? 103 : 28;
+  var expectedHeight = isAndroid ? 103 : 42;
   var condition = function () {
     var boundingRect = aAudio.getBoundingClientRect();
     return boundingRect.height == expectedHeight;
   };
   waitForCondition(condition, function () {
     var boundingRect = aAudio.getBoundingClientRect();
     is(boundingRect.height, expectedHeight,
        "Height of audio element should be " + expectedHeight + ", which is equal to the controls bar.");
--- a/toolkit/content/tests/widgets/test_videocontrols_vtt.html
+++ b/toolkit/content/tests/widgets/test_videocontrols_vtt.html
@@ -15,17 +15,17 @@
 
 <pre id="test">
 <script clas="testbody" type="application/javascript">
   SimpleTest.waitForExplicitFinish();
 
   const domUtils = SpecialPowers.Cc["@mozilla.org/inspector/dom-utils;1"].
     getService(SpecialPowers.Ci.inIDOMUtils);
   const video = document.getElementById("video");
-  const ccBtn = getElementByAttribute("class", "closedCaptionButton");
+  const ccBtn = getElementByAttribute("anonid", "closedCaptionButton");
   const testCases = [];
 
   testCases.push(() => new Promise(resolve => {
     is(ccBtn.getAttribute("hidden"), "true", "CC button should hide");
 
     resolve();
   }));
 
@@ -41,18 +41,18 @@
     });
   }));
 
   testCases.push(() => new Promise(resolve => {
     const sub = video.addTextTrack("subtitles", "English", "en");
     sub.mode = "disabled";
 
     SimpleTest.executeSoon(() => {
-      is(ccBtn.getAttribute("hidden"), "", "CC button should show");
-      is(ccBtn.getAttribute("enabled"), "", "CC button should be disabled");
+      is(ccBtn.hasAttribute("hidden"), false, "CC button should show");
+      is(ccBtn.hasAttribute("enabled"), false, "CC button should be disabled");
 
       resolve();
     });
   }));
 
   testCases.push(() => new Promise(resolve => {
     const subtitle = video.addTextTrack("subtitles", "English", "en");
     subtitle.mode = "showing";
--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -237,19 +237,19 @@
                           <progress anonid="bufferBar" class="bufferBar" value="0" max="100"></progress>
                           <progress anonid="progressBar" class="progressBar" value="0" max="100"></progress>
                         </div>
                       </div>
                       <input type="range" anonid="scrubber" class="scrubber"/>
                     </div>
                     <span anonid="positionLabel" class="positionLabel" role="presentation"></span>
                     <span anonid="durationLabel" class="durationLabel" role="presentation"></span>
-                    <div anonid="positionDurationBox" class="positionDurationBox" role="none">
+                    <span anonid="positionDurationBox" class="positionDurationBox" aria-hidden="true">
                       &positionAndDuration.nameFormat;
-                    </div>
+                    </span>
                     <div anonid="controlBarSpacer" class="controlBarSpacer" hidden="true" role="none"></div>
                     <button anonid="muteButton"
                             class="muteButton"
                             mutelabel="&muteButton.muteLabel;"
                             unmutelabel="&muteButton.unmuteLabel;"/>
                     <div anonid="volumeStack" class="volumeStack progressContainer" role="none">
                       <input type="range" anonid="volumeControl" class="volumeControl" min="0" max="100" step="1"/>
                     </div>