summaryrefslogtreecommitdiffstats
path: root/toolkit/content/tests/widgets/test_videocontrols_vtt.html
blob: 27052b770e0a7b3bfcc77a7fe2d729edf49f6159 (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
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE HTML>
<html>
<head>
  <title>Video controls test - VTT</title>
  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<p id="display"></p>

<div id="content">
  <video id="video" controls preload="auto"></video>
</div>

<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 ttList = getElementByAttribute("class", "textTrackList");
  const testCases = [];

  testCases.push(() => new Promise(resolve => {
    is(ccBtn.getAttribute("hidden"), "true", "CC button should hide");

    resolve();
  }));

  testCases.push(() => new Promise(resolve => {
    video.addTextTrack("descriptions", "English", "en");
    video.addTextTrack("chapters", "English", "en");
    video.addTextTrack("metadata", "English", "en");

    SimpleTest.executeSoon(() => {
      is(ccBtn.getAttribute("hidden"), "true", "CC button should hide if no supported tracks provided");

      resolve();
    });
  }));

  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");

      resolve();
    });
  }));

  testCases.push(() => new Promise(resolve => {
    const subtitle = video.addTextTrack("subtitles", "English", "en");
    subtitle.mode = "showing";

    SimpleTest.executeSoon(() => {
      is(ccBtn.getAttribute("enabled"), "true", "CC button should be enabled");
      subtitle.mode = "disabled";

      resolve();
    });
  }));

  testCases.push(() => new Promise(resolve => {
    const caption = video.addTextTrack("captions", "English", "en");
    caption.mode = "showing";

    SimpleTest.executeSoon(() => {
      is(ccBtn.getAttribute("enabled"), "true", "CC button should be enabled");

      resolve();
    });
  }));

  testCases.push(() => new Promise(resolve => {
    synthesizeMouseAtCenter(ccBtn, {});

    SimpleTest.executeSoon(() => {
      is(ttList.hasAttribute("hidden"), false, "Texttrack menu should show up");
      is(ttList.lastChild.getAttribute("on"), "true", "The last added item should be highlighted");

      resolve();
    });
  }));

  testCases.push(() => new Promise(resolve => {
    const tt = ttList.children[1];

    isnot(tt.getAttribute("on"), "true", "Item should be off before click");
    synthesizeMouseAtCenter(tt, {});

    SimpleTest.executeSoon(() => {
      is(tt.getAttribute("on"), "true", "Selected item should be enabled");
      is(ttList.getAttribute("hidden"), "true", "Should hide texttrack menu once clicked on an item");

      resolve();
    });
  }));

  function executeTestCases(tasks) {
    return tasks.reduce((promise, task) => promise.then(task), Promise.resolve());
  }

  function getElementByAttribute(aName, aValue) {
    const videoControl = domUtils.getChildrenForNode(video, true)[1];

    return SpecialPowers.wrap(document)
      .getAnonymousElementByAttribute(videoControl, aName, aValue);
  }

  function loadedmetadata() {
    executeTestCases(testCases).then(SimpleTest.finish);
  }

  function startMediaLoad() {
    video.src = "seek_with_sound.ogg";
    video.addEventListener("loadedmetadata", loadedmetadata, false);
  }

  function loadevent() {
    SpecialPowers.pushPrefEnv({"set": [["media.cache_size", 40000]]}, startMediaLoad);
  }

  window.addEventListener("load", loadevent, false);
</script>
</pre>
</body>
</html>