<!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>