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
|
<!doctype html>
<!-- Any copyright is dedicated to the Public Domain.
- https://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>
Video controls test - Initial scrubber position when preload is turned off
</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
width="320"
height="240"
id="video"
mozNoDynamicControls
controls="true"
preload="none"
src="seek_with_sound.webm"
></video>
</div>
<div id="host"></div>
<script class="testbody" type="text/javascript">
const video = document.getElementById("video");
add_task(function test_initial_scrubber_position() {
// Check initial state upon load
is(video.paused, true, "checking video play state");
const scrubber = getElementWithinVideo(video, "scrubber");
ok(scrubber.max, "The max value should be set on the scrubber");
is(parseInt(scrubber.value), 0, "The initial position should be 0");
});
add_task(async function test_scrubber_after_manual_move() {
// Kick-start the video before trying to change the scrubber.
let loadedPromise =
video.readyState == video.HAVE_ENOUGH_DATA
? Promise.resolve()
: new Promise(r => {
video.addEventListener("canplaythrough", r, { once: true });
});
video.play();
await loadedPromise;
video.pause();
const scrubber = getElementWithinVideo(video, "scrubber");
// Click the middle of the scrubber:
synthesizeMouseAtCenter(scrubber, {});
// Expect that the progress updates, too:
const progress = getElementWithinVideo(video, "progressBar");
is(
// toFixed(2) takes care of rounding issues here.
(progress.value / progress.max).toFixed(2),
(scrubber.value / scrubber.max).toFixed(2),
"Should have updated progress bar."
);
});
add_task(async function test_progress_and_scrubber_once_fullscreened() {
// loop to ensure we can always get 4 timeupdate events.
video.loop = true;
video.currentTime = video.duration / 2;
info("Setting max width");
video.style.maxWidth = "200px";
info(
"Current video progress = " +
(video.currentTime / video.duration).toFixed(2)
);
// Wait for a flush so the scrubber has been hidden.
await new Promise(r =>
requestAnimationFrame(() => requestAnimationFrame(r))
);
info("Hid progress and scrubber.");
// Then full screen.
await SpecialPowers.wrap(video).requestFullscreen();
info("Gone into fullscreen.");
// Then wait for the video to play a bit (4 events is pretty arbitrary)
let updateCounter = 4;
let playABitPromise = new Promise(resolve => {
let handler = () => {
info("timeupdate event, counter left: " + updateCounter);
if (--updateCounter <= 0) {
video.removeEventListener("timeupdate", handler);
video.addEventListener("pause", resolve, { once: true });
video.pause();
}
};
video.addEventListener("timeupdate", handler);
});
video.play();
await playABitPromise;
const scrubber = getElementWithinVideo(video, "scrubber");
let videoProgress = video.currentTime / video.duration;
let fuzzFactor = video.duration * 0.01;
info("Video progress: " + videoProgress.toFixed(3));
let scrubberProgress = scrubber.value / scrubber.max;
info("Scrubber : " + scrubberProgress.toFixed(3));
ok(
scrubberProgress <= videoProgress + fuzzFactor,
"Scrubber should match actual video point in time."
);
ok(
scrubberProgress >= videoProgress - fuzzFactor,
"Scrubber should match actual video point in time."
);
// Expect that the progress matches the scrubber:
const progress = getElementWithinVideo(video, "progressBar");
let progressProgress = progress.value / progress.max;
info("Progress bar : " + progressProgress.toFixed(3));
ok(
progressProgress <= videoProgress + fuzzFactor,
"Progress bar should match actual video point in time."
);
ok(
progressProgress >= videoProgress - fuzzFactor,
"Progress bar should match actual video point in time."
);
await SpecialPowers.wrap(document).exitFullscreen();
});
</script>
</body>
</html>
|
