1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
<!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.ogg";
}))));
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>
|
