summaryrefslogtreecommitdiffstats
path: root/toolkit/content/tests/widgets/test_videocontrols_scrubber_position_nopreload.html
blob: 968ba5db96cb3cc593d960057236c9c23597c98d (plain)
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
<!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>

<pre id="test">
<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>
</pre>
</body>
</html>