forked from mirrors/gecko-dev
a233ee39e7
Files containing theora have been modified to use VP9 in WebM, which is equivalent for those tests, that only require a video with or without sound. Differential Revision: https://phabricator.services.mozilla.com/D204642
179 lines
5.8 KiB
HTML
179 lines
5.8 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>Video controls test - Size</title>
|
|
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<script src="/tests/SimpleTest/EventUtils.js"></script>
|
|
<script type="text/javascript" src="head.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
|
|
</head>
|
|
<body>
|
|
<p id="display"></p>
|
|
|
|
<div id="content">
|
|
<video controls preload="auto" width="480" height="320"></video>
|
|
<video controls preload="auto" width="320" height="320"></video>
|
|
<video controls preload="auto" width="280" height="320"></video>
|
|
<video controls preload="auto" width="240" height="320"></video>
|
|
<video controls preload="auto" width="180" height="320"></video>
|
|
<video controls preload="auto" width="120" height="320"></video>
|
|
<video controls preload="auto" width="60" height="320"></video>
|
|
<video controls preload="auto" width="48" height="320"></video>
|
|
<video controls preload="auto" width="20" height="320"></video>
|
|
|
|
<video controls preload="auto" width="480" height="240"></video>
|
|
<video controls preload="auto" width="480" height="120"></video>
|
|
<video controls preload="auto" width="480" height="39"></video>
|
|
</div>
|
|
|
|
<pre id="test">
|
|
<script clas="testbody" type="application/javascript">
|
|
SimpleTest.waitForExplicitFinish();
|
|
|
|
const videoElems = [...document.getElementsByTagName("video")];
|
|
const testCases = [];
|
|
|
|
const isTouchControl = navigator.appVersion.includes("Android");
|
|
|
|
const buttonWidth = isTouchControl ? 40 : 30;
|
|
const minSrubberWidth = isTouchControl ? 64 : 48;
|
|
const minControlBarHeight = isTouchControl ? 52 : 40;
|
|
const minControlBarWidth = isTouchControl ? 58 : 48;
|
|
const minClickToPlaySize = isTouchControl ? 64 : 48;
|
|
|
|
function getElementName(elem) {
|
|
return elem.getAttribute("anonid") || elem.getAttribute("class");
|
|
}
|
|
|
|
function testButton(btn) {
|
|
if (btn.hidden) return;
|
|
|
|
const rect = btn.getBoundingClientRect();
|
|
const name = getElementName(btn);
|
|
|
|
is(rect.width, buttonWidth, `${name} should have correct width`);
|
|
is(rect.height, minControlBarHeight, `${name} should have correct height`);
|
|
}
|
|
|
|
function testScrubber(scrubber) {
|
|
if (scrubber.hidden) return;
|
|
|
|
const rect = scrubber.getBoundingClientRect();
|
|
const name = getElementName(scrubber);
|
|
|
|
ok(rect.width >= minSrubberWidth, `${name} should longer than ${minSrubberWidth}`);
|
|
}
|
|
|
|
function testUI(video) {
|
|
video.style.display = "block";
|
|
video.getBoundingClientRect();
|
|
video.style.display = "";
|
|
|
|
const videoRect = video.getBoundingClientRect();
|
|
|
|
const videoHeight = video.clientHeight;
|
|
const videoWidth = video.clientWidth;
|
|
|
|
const videoSizeMsg = `size:${videoRect.width}x${videoRect.height} -`;
|
|
const controlBar = getElementWithinVideo(video, "controlBar");
|
|
const playBtn = getElementWithinVideo(video, "playButton");
|
|
const scrubber = getElementWithinVideo(video, "scrubberStack");
|
|
const positionDurationBox = getElementWithinVideo(video, "positionDurationBox");
|
|
const durationLabel = positionDurationBox.getElementsByTagName("span")[0];
|
|
const muteBtn = getElementWithinVideo(video, "muteButton");
|
|
const volumeStack = getElementWithinVideo(video, "volumeStack");
|
|
const fullscreenBtn = getElementWithinVideo(video, "fullscreenButton");
|
|
const clickToPlay = getElementWithinVideo(video, "clickToPlay");
|
|
|
|
|
|
// Controls should show/hide according to the priority
|
|
const prioritizedControls = [
|
|
playBtn,
|
|
muteBtn,
|
|
fullscreenBtn,
|
|
positionDurationBox,
|
|
scrubber,
|
|
durationLabel,
|
|
volumeStack,
|
|
];
|
|
|
|
let stopAppend = false;
|
|
prioritizedControls.forEach(control => {
|
|
is(control.hidden, stopAppend = stopAppend || control.hidden,
|
|
`${videoSizeMsg} ${getElementName(control)} should ${stopAppend ? "hide" : "show"}`);
|
|
});
|
|
|
|
|
|
// All controls should fit in control bar container
|
|
const controls = [
|
|
playBtn,
|
|
scrubber,
|
|
positionDurationBox,
|
|
muteBtn,
|
|
volumeStack,
|
|
fullscreenBtn,
|
|
];
|
|
|
|
let widthSum = 0;
|
|
controls.forEach(control => {
|
|
widthSum += control.clientWidth;
|
|
});
|
|
ok(videoWidth >= widthSum,
|
|
`${videoSizeMsg} controlBar fit in video's width`);
|
|
|
|
|
|
// Control bar should show/hide according to video's dimensions
|
|
const shouldHideControlBar = videoHeight <= minControlBarHeight ||
|
|
videoWidth < minControlBarWidth;
|
|
is(controlBar.hidden, shouldHideControlBar, `${videoSizeMsg} controlBar show/hide`);
|
|
|
|
if (!shouldHideControlBar) {
|
|
is(controlBar.clientWidth, videoWidth, `control bar width should equal to video width`);
|
|
|
|
// Check all controls' dimensions
|
|
testButton(playBtn);
|
|
testButton(muteBtn);
|
|
testButton(fullscreenBtn);
|
|
testScrubber(scrubber);
|
|
testScrubber(volumeStack);
|
|
}
|
|
|
|
|
|
// ClickToPlay button should show if min size can fit in
|
|
const shouldHideClickToPlay = videoWidth <= minClickToPlaySize ||
|
|
(videoHeight - minClickToPlaySize) / 2 <= minControlBarHeight;
|
|
is(clickToPlay.hidden, shouldHideClickToPlay, `${videoSizeMsg} clickToPlay show/hide`);
|
|
}
|
|
|
|
|
|
testCases.push(() => Promise.all(videoElems.map(video => new Promise(resolve => {
|
|
video.addEventListener("loadedmetadata", resolve);
|
|
video.src = "seek_with_sound.webm";
|
|
}))));
|
|
|
|
videoElems.forEach(video => {
|
|
testCases.push(() => new Promise(resolve => {
|
|
SimpleTest.executeSoon(() => {
|
|
testUI(video);
|
|
resolve();
|
|
});
|
|
}));
|
|
});
|
|
|
|
function executeTasks(tasks) {
|
|
return tasks.reduce((promise, task) => promise.then(task), Promise.resolve());
|
|
}
|
|
|
|
function start() {
|
|
executeTasks(testCases).then(SimpleTest.finish);
|
|
}
|
|
|
|
function loadevent() {
|
|
SpecialPowers.pushPrefEnv({"set": [["media.cache_size", 40000]]}, start);
|
|
}
|
|
|
|
window.addEventListener("load", loadevent);
|
|
</script>
|
|
</pre>
|
|
</body>
|
|
</html>
|