<!DOCTYPE html>
<html>
    <head>
        <title>Testing that the track menu gets localized strings</title>
        <script src="media-controls.js"></script>
        <script src="media-file.js"></script>
        <script src="video-test.js"></script>
        <script src="trackmenu-test.js"></script>
        <script>

        var trackListSection;
        var item;

        if (window.testRunner)
            testRunner.dumpAsText();

        function testMenuHeaders()
        {
            var trackListElement = getTrackListElement();
            if (!trackListElement)
                return;

            trackListSection = trackListElement.querySelector("h3");
            if (!trackListSection) {
                failTest("There should be a single section element in track list menu");
                return;
            }

            consoleWrite("Heading should be labelled 'Subtitles'");
            testExpected("trackListSection.textContent", "Subtitles");

            var captionsEntries = trackListElement.querySelectorAll("li");
            if (!captionsEntries || captionsEntries.length <= 0) {
                failTest("Not enough items in captions menu");
                return;
            }

            item = captionsEntries[0];
            consoleWrite("<br>First item in captions menu should be labelled 'Off'");
            testExpected("item.textContent", "Off");

            item = captionsEntries[1];
            consoleWrite("<br>Second item in captions menu should be labelled 'Automatic (English)'");
            testExpected("item.textContent", "Automatic (English)");


            item = captionsEntries[2];
            consoleWrite("<br>Third item in captions menu should be labelled 'English CC'");
            testExpected("item.textContent", "English CC");

            item = captionsEntries[3];
            consoleWrite("<br>Fourth item in captions menu should be labelled 'Laugh Track (English-United States)'");
            testExpected("item.textContent", "Laugh Track (English-United States)");

            item = captionsEntries[4];
            consoleWrite("<br>Fifth item in captions menu should be labelled 'Unknown SDH'");
            testExpected("item.textContent", "Unknown SDH");

            endTest();
        }

        function start()
        {
            findMediaElement();
            video.src = 'content/counting-captioned.mov';
            waitForEvent('canplaythrough', function () { startTrackMenuTest(testMenuHeaders); });
        }
        </script>
    </head>

    <body onload="start()">
        <p>Test that captions and subtitles menu items are localized.</p>
        <video width="500" height="300" controls>
            <track kind="captions" src="track/captions-webvtt/captions-fast.vtt">
            <track kind="subtitles" src="track/captions-webvtt/captions-fast.vtt" label="Laugh Track" srclang="en-US">
        </video>
    </body>
</html>