<!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");
enableTestMode(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;
// Seek to some point within the first second
video.currentTime = 0.5;
video.onseeked = 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>