| <!DOCTYPE html> |
| <title>Test that we can display a track list menu and select tracks from the list.</title> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script src="media-controls.js"></script> |
| <!-- Width should be large enough to display closed captions button. --> |
| <video controls style="width: 500px"> |
| <track src="track/captions-webvtt/captions.vtt" kind="captions" label="Track1"> |
| <track src="track/captions-webvtt/long-word.vtt" kind="captions" label="Track2"> |
| </video> |
| <script> |
| async_test(function(t) { |
| var video = document.querySelector("video"); |
| |
| var trackElements = document.querySelectorAll("track"); |
| var textTracks = video.textTracks; |
| for (var i = 0; i < textTracks.length; i++) { |
| trackElements[i].onload = t.step_func(trackLoaded); |
| var track = textTracks[i]; |
| if (track.mode == "disabled") |
| track.mode = "hidden"; |
| } |
| |
| var numberOfTracksLoaded = 0; |
| function trackLoaded() { |
| numberOfTracksLoaded++; |
| if (numberOfTracksLoaded != 2) |
| return; |
| |
| video.oncanplaythrough = t.step_func(function() { |
| assert_true(isClosedCaptionsButtonEnabled(video)); |
| assert_equals(video.textTracks.length, 2); |
| assert_equals(video.textTracks[0].mode, "hidden"); |
| assert_equals(video.textTracks[1].mode, "hidden"); |
| |
| // Select track 0 and verify it is displayed. |
| clickTextTrackAtIndex(video, 0, t.step_func(function() { |
| assert_equals(video.textTracks[0].mode, "showing"); |
| assert_equals(video.textTracks[1].mode, "hidden"); |
| assert_equals(textTrackDisplayElement(video).innerText, "Lorem"); |
| |
| // Select track 1 and verify it is displayed. |
| clickTextTrackAtIndex(video, 1, t.step_func_done(function() { |
| assert_equals(video.textTracks[0].mode, "disabled"); |
| assert_equals(video.textTracks[1].mode, "showing"); |
| assert_equals(textTrackDisplayElement(video).innerText, "first caption"); |
| })); |
| })); |
| }); |
| |
| video.src = "content/test.ogv"; |
| } |
| }); |
| </script> |
