<!DOCTYPE html>
<html>
    <head>
        <title>In-band track cues displayed immediately</title>

        <script src=../media-file.js></script>
        <script src=../video-test.js></script>
        <script src=../media-controls.js></script>
        <script>

            function seeked()
            {
                testExpected("textTrackDisplayElement(video, 'cue')", null);

                consoleWrite("<br><i>** Showing a track should show active cues immediately<" + "/i>");
                run("inbandTrack1.mode = 'showing'");

                testExpected("textTrackDisplayElement(video, 'cue').textContent", null, '!=');
                testExpected("inbandTrack1.activeCues.length", 1);

                consoleWrite("");
                endTest();
            }

            function canplaythrough()
            {
                consoleWrite("<br><i>** Check initial in-band track states<" + "/i>");
                run("inbandTrack1 = video.textTracks[0]");
                testExpected("video.textTracks.length", 1);
                testExpected("inbandTrack1.language", "en");
                testExpected("inbandTrack1.kind", "captions");

                consoleWrite("<br><i>** A hidden track should not have visible cues<" + "/i>");
                run("inbandTrack1.mode = 'hidden'");
                testExpected("inbandTrack1.activeCues.length", 0);

                run("video.play()");
                setTimeout(function() { video.pause(); video.currentTime = 0.5; }, 500);
            }

            function setup()
            {
                findMediaElement();
                video.src = '../content/counting-captioned.mov';
                waitForEvent('seeked', seeked);
                waitForEvent('canplaythrough', canplaythrough);
            }

        </script>
    </head>
    <body onload="setup()">
        <video controls></video>
        <p>Test that cues from in-band tracks are displayed immediately when a track is made visible.</p>
    </body>
</html>