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
|
<!doctype html>
<html>
<head>
<title>Video controls test - VTT</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 id="video" controls preload="auto"></video>
</div>
<script clas="testbody" type="application/javascript">
SimpleTest.waitForExplicitFinish();
const video = document.getElementById("video");
const ccBtn = getElementWithinVideo(video, "closedCaptionButton");
const ttList = getElementWithinVideo(video, "textTrackList");
const ttListContainer = getElementWithinVideo(
video,
"textTrackListContainer"
);
add_task(async function wait_for_media_ready() {
await SpecialPowers.pushPrefEnv({ set: [["media.cache_size", 40000]] });
await new Promise(resolve => {
video.src = "seek_with_sound.webm";
video.addEventListener("loadedmetadata", resolve);
});
});
add_task(async function check_inital_state() {
ok(ccBtn.hidden, "CC button should hide");
});
add_task(async function check_unsupported_type_added() {
video.addTextTrack("descriptions", "English", "en");
video.addTextTrack("chapters", "English", "en");
video.addTextTrack("metadata", "English", "en");
await new Promise(SimpleTest.executeSoon);
ok(
ccBtn.hidden,
"CC button should hide if no supported tracks provided"
);
});
add_task(async function check_cc_button_present() {
const sub = video.addTextTrack("subtitles", "English", "en");
sub.mode = "disabled";
await new Promise(SimpleTest.executeSoon);
ok(!ccBtn.hidden, "CC button should show");
is(
ccBtn.hasAttribute("enabled"),
false,
"CC button should be disabled"
);
});
add_task(async function check_cc_button_be_enabled() {
const subtitle = video.addTextTrack("subtitles", "English", "en");
subtitle.mode = "showing";
await new Promise(SimpleTest.executeSoon);
ok(ccBtn.hasAttribute("enabled"), "CC button should be enabled");
subtitle.mode = "disabled";
});
add_task(async function check_cpations_type() {
const caption = video.addTextTrack("captions", "English", "en");
caption.mode = "showing";
await new Promise(SimpleTest.executeSoon);
ok(ccBtn.hasAttribute("enabled"), "CC button should be enabled");
});
add_task(async function check_track_ui_state() {
synthesizeMouseAtCenter(ccBtn, {});
await new Promise(SimpleTest.executeSoon);
ok(!ttListContainer.hidden, "Texttrack menu should show up");
ok(
ttList.lastChild.getAttribute("aria-checked") === "true",
"The last added item should be highlighted"
);
});
add_task(async function check_select_texttrack() {
const tt = ttList.children[1];
ok(
tt.getAttribute("aria-checked") === "false",
"Item should be off before click"
);
synthesizeMouseAtCenter(tt, {});
await once(video.textTracks, "change");
await new Promise(SimpleTest.executeSoon);
ok(
tt.getAttribute("aria-checked") === "true",
"Selected item should be enabled"
);
ok(
ttListContainer.hidden,
"Should hide texttrack menu once clicked on an item"
);
});
add_task(async function check_change_texttrack_mode() {
const tts = [...video.textTracks];
tts.forEach(tt => (tt.mode = "hidden"));
await once(video.textTracks, "change");
await new Promise(SimpleTest.executeSoon);
ok(!ccBtn.hasAttribute("enabled"), "CC button should be disabled");
// enable the last text track.
tts[tts.length - 1].mode = "showing";
await once(video.textTracks, "change");
await new Promise(SimpleTest.executeSoon);
ok(ccBtn.hasAttribute("enabled"), "CC button should be enabled");
ok(
ttList.lastChild.getAttribute("aria-checked") === "true",
"The last item should be highlighted"
);
});
</script>
</body>
</html>
|
