[Modern Media Controls] Turn media/modern-media-controls/ios-inline-media-controls...
[WebKit-https.git] / LayoutTests / media / video-controls-captions.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5     <title>Test closed caption button toggling.</title>
6     <script src=media-file.js></script>
7     <script src=media-controls.js></script>
8     <script src=video-test.js></script>
9     <script>
10         var captionsButtonElement;
11         var captionsButtonCoordinates;
12         var track;
13
14         function addTextTrackThroughJS()
15         {
16             consoleWrite("");
17             consoleWrite("** Add a text track through JS to the video element **");
18             var t = video.addTextTrack('captions', 'English', 'en');
19             t.addCue(new VTTCue(0.0, 10.0, 'Some random caption text'));
20         }
21
22         function addUnloadableHTMLTrackElement()
23         {
24             consoleWrite("");
25             consoleWrite("** Add non-default text track through HTML with unloadable URI **");
26
27             track = document.createElement("track");
28             track.setAttribute("kind", "captions");
29             track.setAttribute("srclang", "en");
30             track.setAttribute("src", "invalid.vtt");
31
32             track.addEventListener("error", trackError);
33
34             video.appendChild(track);
35             testExpected("track.readyState", HTMLTrackElement.NONE);
36             testExpected("track.track.mode", "disabled");
37             testExpected("video.textTracks.length", 1);
38         }
39
40         function removeHTMLTrackElement()
41         {
42             consoleWrite("");
43             consoleWrite("** Remove DOM node representing the track element **");
44             var htmlTrack = video.children[0];
45             video.removeChild(htmlTrack);
46         }
47
48         function testClosedCaptionsButtonVisibility(expected)
49         {
50             try {
51                 captionsButtonElement = mediaControlsElement(internals.shadowRoot(video).firstChild, "-webkit-media-controls-toggle-closed-captions-button");
52                 captionsButtonCoordinates = mediaControlsButtonCoordinates(video, "toggle-closed-captions-button");
53             } catch (exception) {
54                 consoleWrite("Failed to find a closed captions button or its coordinates: " + exception);
55                 if (expected)
56                     failTest();
57                 return;
58             }
59
60             consoleWrite("");
61             if (expected == true) {
62                 consoleWrite("** Caption button should be visible and enabled because we have a captions track.");
63                 testExpected("captionsButtonCoordinates[0]", 0, ">");
64                 testExpected("captionsButtonCoordinates[1]", 0, ">");
65                 testExpected("captionsButtonElement.disabled", false);
66             } else {
67                 consoleWrite("** Caption button should not be visible as there are no caption tracks.");
68                 testExpected("captionsButtonCoordinates[0]", 0, "<=");
69                 testExpected("captionsButtonCoordinates[1]", 0, "<=");
70             }
71         }
72
73         function startTest()
74         {
75             if (!window.eventSender) {
76                 consoleWrite("No eventSender found.");
77                 failTest();
78             }
79
80             findMediaElement();
81             testClosedCaptionsButtonVisibility(true);
82
83             consoleWrite("");
84             consoleWrite("** The captions track should be listed in textTracks, but not yet loaded. **");
85             testExpected("video.textTracks.length", 1);
86             testExpected("video.textTracks[0].mode", "disabled");
87             checkCaptionsDisplay();
88
89             consoleWrite("");
90             consoleWrite("** Captions track should load and captions should become visible after button is clicked **");
91             clickCCButton();
92         }
93
94         function clickCCButton()
95         {
96             consoleWrite("*** Click the CC button.");
97             eventSender.mouseMoveTo(captionsButtonCoordinates[0], captionsButtonCoordinates[1]);
98             eventSender.mouseDown();
99             eventSender.mouseUp();
100         }
101
102         function checkCaptionsDisplay()
103         {
104             // When no tracks are loaded, this should report no text track container,
105             // when tracks are loaded but not visible, should report no cues visible,
106             // when tracks are loaded and visible, should properly check the text.
107             testExpected("textTrackDisplayElement(video, 'display').innerText", "Lorem");
108         }
109
110         function trackLoaded()
111         {
112             checkCaptionsDisplay();
113
114             consoleWrite("");
115             consoleWrite("** Captions should not be visible after button is clicked again **");
116             clickCCButton();
117             checkCaptionsDisplay();
118
119             removeHTMLTrackElement();
120             testClosedCaptionsButtonVisibility(false);
121
122             addUnloadableHTMLTrackElement();
123             testClosedCaptionsButtonVisibility(true);
124
125             consoleWrite("");
126             clickCCButton();
127         }
128
129         function trackError()
130         {
131             consoleWrite("** Track failed to load **");
132             testClosedCaptionsButtonVisibility(false);
133
134             addTextTrackThroughJS();
135             testClosedCaptionsButtonVisibility(true);
136
137             endTest();
138         }
139
140
141         function loaded()
142         {
143             findMediaElement();
144             consoleWrite("Set the user language preference so that the track will be chosen when the CC button is clicked.");
145             run("internals.setUserPreferredLanguages(['en'])");
146
147             waitForEvent('canplaythrough', startTest);
148
149             video.src = findMediaFile('video', 'content/counting');
150         }
151     </script>
152 </head>
153 <body onload="loaded()">
154     <p>Tests that the closed captions button, when toggled, updates the text track display area.</p>
155     <video controls >
156         <track src="track/captions-webvtt/captions-fast.vtt" kind="captions" srclang="en" onload="trackLoaded()">
157     </video>
158
159 </body>
160 </html>