<!DOCTYPE html>
<title>Test that we can add a track dynamically and it is displayed on the track selection menu.</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="captions-webvtt/captions.vtt" kind="captions" label="English" srclang="en" default>
</video>
<script>
async_test(function(t) {
var trackCueText = "Bonjour";
var video = document.querySelector("video");
var track = document.querySelector("track");
enableTestMode(video);
track.oncuechange = t.step_func(function() {
track.oncuechange = null;
var new_track = video.addTextTrack("captions", "French", "fr");
new_track.addCue(new VTTCue(0, 1, trackCueText));
assert_true(isClosedCaptionsButtonEnabled(video));
assert_equals(video.textTracks.length, 2);
assert_equals(video.textTracks[0].mode, "showing");
assert_equals(video.textTracks[1].mode, "hidden");
// Verify the default track is being displayed.
assert_equals(textTrackDisplayElement(video).innerText, "Lorem");
// Click the newly added track.
clickTextTrackAtIndex(video, 1, t.step_func_done(function() {
assert_equals(video.textTracks[1].mode, "showing");
assert_equals(video.textTracks[0].mode, "disabled");
assert_equals(textTrackDisplayElement(video).innerText, trackCueText);
}));
});
video.src = "../content/test.ogv";
// Seek to a point in the middle of the first cue
video.currentTime = 0.5;
})
</script>