<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test closed caption button toggling.</title>
    <script src=media-file.js></script>
    <script src=media-controls.js></script>
    <script src=video-test.js></script>
    <script>
        var captionsButtonElement;
        var captionsButtonCoordinates;
        var track;

        function addTextTrackThroughJS()
        {
            consoleWrite("");
            consoleWrite("** Add a text track through JS to the video element **");
            var t = video.addTextTrack('captions', 'English', 'en');
            t.addCue(new VTTCue(0.0, 10.0, 'Some random caption text'));
        }

        function addUnloadableHTMLTrackElement()
        {
            consoleWrite("");
            consoleWrite("** Add non-default text track through HTML with unloadable URI **");

            track = document.createElement("track");
            track.setAttribute("kind", "captions");
            track.setAttribute("srclang", "en");
            track.setAttribute("src", "invalid.vtt");

            track.addEventListener("error", trackError);

            video.appendChild(track);
            testExpected("track.readyState", HTMLTrackElement.NONE);
            testExpected("track.track.mode", "disabled");
            testExpected("video.textTracks.length", 1);
        }

        function removeHTMLTrackElement()
        {
            consoleWrite("");
            consoleWrite("** Remove DOM node representing the track element **");
            var htmlTrack = video.children[0];
            video.removeChild(htmlTrack);
        }

        function testClosedCaptionsButtonVisibility(expected)
        {
            try {
                captionsButtonElement = mediaControlsElement(internals.shadowRoot(video).firstChild, "-webkit-media-controls-toggle-closed-captions-button");
                captionsButtonCoordinates = mediaControlsButtonCoordinates(video, "toggle-closed-captions-button");
            } catch (exception) {
                consoleWrite("Failed to find a closed captions button or its coordinates: " + exception);
                if (expected)
                    failTest();
                return;
            }

            consoleWrite("");
            if (expected == true) {
                consoleWrite("** Caption button should be visible and enabled because we have a captions track.");
                testExpected("captionsButtonCoordinates[0]", 0, ">");
                testExpected("captionsButtonCoordinates[1]", 0, ">");
                testExpected("captionsButtonElement.disabled", false);
            } else {
                consoleWrite("** Caption button should not be visible as there are no caption tracks.");
                testExpected("captionsButtonCoordinates[0]", 0, "<=");
                testExpected("captionsButtonCoordinates[1]", 0, "<=");
            }
        }

        function startTest()
        {
            if (!window.eventSender) {
                consoleWrite("No eventSender found.");
                failTest();
            }

            findMediaElement();
            testClosedCaptionsButtonVisibility(true);

            consoleWrite("");
            consoleWrite("** The captions track should be listed in textTracks, but not yet loaded. **");
            testExpected("video.textTracks.length", 1);
            testExpected("video.textTracks[0].mode", "disabled");
            checkCaptionsDisplay();

            consoleWrite("");
            consoleWrite("** Captions track should load and captions should become visible after button is clicked **");
            clickCCButton();
        }

        function clickCCButton()
        {
            consoleWrite("*** Click the CC button.");
            eventSender.mouseMoveTo(captionsButtonCoordinates[0], captionsButtonCoordinates[1]);
            eventSender.mouseDown();
            eventSender.mouseUp();
        }

        function checkCaptionsDisplay()
        {
            // When no tracks are loaded, this should report no text track container,
            // when tracks are loaded but not visible, should report no cues visible,
            // when tracks are loaded and visible, should properly check the text.
            testExpected("textTrackDisplayElement(video, 'display').innerText", "Lorem");
        }

        function trackLoaded()
        {
            checkCaptionsDisplay();

            consoleWrite("");
            consoleWrite("** Captions should not be visible after button is clicked again **");
            clickCCButton();
            checkCaptionsDisplay();

            removeHTMLTrackElement();
            testClosedCaptionsButtonVisibility(false);

            addUnloadableHTMLTrackElement();
            testClosedCaptionsButtonVisibility(true);

            consoleWrite("");
            clickCCButton();
        }

        function trackError()
        {
            consoleWrite("** Track failed to load **");
            testClosedCaptionsButtonVisibility(false);

            addTextTrackThroughJS();
            testClosedCaptionsButtonVisibility(true);

            endTest();
        }


        function loaded()
        {
            findMediaElement();
            consoleWrite("Set the user language preference so that the track will be chosen when the CC button is clicked.");
            run("internals.setUserPreferredLanguages(['en'])");

            waitForEvent('canplaythrough', startTest);

            video.src = findMediaFile('video', 'content/counting');
        }
    </script>
</head>
<body onload="loaded()">
    <p>Tests that the closed captions button, when toggled, updates the text track display area.</p>
    <video controls >
        <track src="track/captions-webvtt/captions-fast.vtt" kind="captions" srclang="en" onload="trackLoaded()">
    </video>

</body>
</html>