Bug 1271765 - Part 3. Update tests for video control visual refresh. r=jaws
MozReview-Commit-ID: 24GoxgtN0Bo
--- 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>