Bug 1271765 - Part 3. Update tests for video control visual refresh. r=jaws

MozReview-Commit-ID: 24GoxgtN0Bo

--HG--
extra : rebase_source : 2ecc77eed9ff4ce6ca989a78b13d209bed356656

accessible/tests/mochitest/tree/test_media.html

@@ -45,6 +45,17 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=483573
             //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",

toolkit/content/tests/widgets/test_audiocontrols_dimensions.html

@@ -17,7 +17,7 @@
 <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();
   }

toolkit/content/tests/widgets/test_videocontrols.html

@@ -24,29 +24,35 @@ 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;
@@ -63,14 +69,13 @@ function getButtonByAttribute(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");
 }
 
@@ -229,7 +234,7 @@ function runTest(event) {
       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, { });

toolkit/content/tests/widgets/test_videocontrols_standalone.html

@@ -13,8 +13,9 @@
 <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];
@@ -68,7 +69,7 @@ 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;

toolkit/content/tests/widgets/test_videocontrols_vtt.html

@@ -20,7 +20,7 @@
   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 => {
@@ -46,8 +46,8 @@
     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();
     });

toolkit/content/widgets/videocontrols.xml

@@ -242,9 +242,9 @@
                     </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"