<!DOCTYPE html>
<html>
    <head>

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

            var textTrack;
            var cueCount;

            function setMode(value)
            {
                run("textTrack.mode = '" + value + "'");
                testExpected("textTrack.mode", value);
                testExpected("video.textTracks[0].mode", value);
                if (value == "disabled")
                    testExpected("textTrack.cues", null);
                else
                    testExpected("textTrack.cues.length", textTrack.cues.length);
                consoleWrite("");
            }

            function start()
            {
                findMediaElement();
                cueCount = 0;
                consoleWrite("");

                textTrack = document.getElementById('track_1').track;

                consoleWrite("<b>++ Test default attribute value</b>");
                testExpected("textTrack.mode", "showing");
                testExpected("video.textTracks[0].mode", "showing");
                consoleWrite("");

                consoleWrite("<b>*** Set to bogus value, should return default</b>");
                var value = "bogus";
                run("textTrack.mode = '" + value + "'");
                testExpected("textTrack.mode", "showing");
                testExpected("video.textTracks[0].mode", "showing");
                consoleWrite("");

                consoleWrite("<b>*** Set to known values</b>");
                consoleWrite("<b>++ 'disabled'</b>");
                setMode("disabled");

                setCaptionDisplayMode('ForcedOnly');

                waitForEvent('cuechange', cuechange);
                video.addEventListener('playing', playing);
                video.src = findMediaFile("video", "../content/test");
                video.play();

                consoleWrite("++ 0 events expected while mode = disabled");
                consoleWrite("");
            }
            
            function playing()
            {
                video.removeEventListener('playing', playing);

                // Play past the end of the first cue, no events should fire because track is disabled.
                setTimeout(testHiddenAndShowing, 100);
            }

            function testHiddenAndShowing()
            {
                video.pause();
                video.currentTime = 0;

                consoleWrite("<b>++ 'hidden'</b>");
                setMode("hidden");

                consoleWrite("<b>++ 'showing'</b>");
                setMode("showing");

                consoleWrite("<b>++ at least " + textTrack.cues.length + " events expected while mode = showing</b>");
                handlePromise(video.play());
            }
            
            function cuechange(event)
            {
                cueCount++;
                if (cueCount == textTrack.cues.length) {
                    endTest();
                    video.pause();
                }
            }

            setCaptionDisplayMode('Automatic');
        </script>
    </head>
    <body>
        <p>Tests that the TextTrack mode attribute is appropriately set.</p>
        <video controls>
            <track id=track_1 src="captions-webvtt/captions-fast.vtt" onload="start()" default>
        </video>
    </body>
</html>