<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

        <style>
        video::cue(c) {color: purple}
        video::cue(v) {color: yellow}
        video::cue(v[voice="Mark"]) {color: red}
        video::cue(v[voice="Nancy"]) {color: green}
        video::cue(b) {color: lime}
        video::cue(.red, .red2) { color:red }
        #testvideo::cue(.green) { color:green }
        video::cue(#testcue) {color: green}
        video::cue(:future) {color: gray}
        </style>

        <script>

        var cueNode;
        var seekedCount = 0;
        var seekTimes = [0.3, 0.5, 0.7, 0.9, 1.1, 1.3, 1.5];

        var info = [["rgb(255, 0, 0)", "rgb(0, 128, 0)", "rgb(255, 0, 0)"],
                    ["rgb(128, 0, 128)", "rgb(128, 128, 128)", "rgb(128, 128, 128)"],
                    ["rgb(128, 0, 128)", "rgb(128, 0, 128)", "rgb(128, 128, 128)"],
                    ["rgb(128, 0, 128)", "rgb(128, 0, 128)", "rgb(128, 0, 128)"],
                    ["rgb(128, 0, 128)", "rgb(255, 255, 0)", "rgb(0, 255, 0)"],
                    ["rgb(0, 128, 0)", "rgb(0, 128, 0)", "rgb(0, 128, 0)"],
                    ["rgb(255, 255, 0)", "rgb(255, 0, 0)", "rgb(0, 128, 0)"]];

        var description = ["1. Test that cues are being matched properly by the class name",
                           "2. Test that cues are being matched properly by the ':future' pseudo class.", "", "",
                           "3. Test that cues are being matched properly by tag.",
                           "4. Test that cues are being matched properly by id.",
                           "5. Test that cues are being matched properly by the voice attribute."];

        function skipNonElements(root)
        {
            nextElementSibling = root;
            while (nextElementSibling.nodeType != 1) {
                nextElementSibling = nextElementSibling.nextSibling;
            }
            return nextElementSibling;
        }

        function seeked()
        {
            if (testEnded)
                return;

            if (description[seekedCount] != "") {
                consoleWrite("<br>");
                consoleWrite(description[seekedCount]);
            }

            cueNode = skipNonElements(textTrackDisplayElement(video, 'cue').firstChild);
            skipNonElements(cueNode);
            testExpected("getComputedStyle(cueNode).color", info[seekedCount][0]);
            cueNode = skipNonElements(cueNode.nextSibling);
            testExpected("getComputedStyle(cueNode).color", info[seekedCount][1]);
            cueNode = skipNonElements(cueNode.nextSibling);
            testExpected("getComputedStyle(cueNode).color", info[seekedCount][2]);

            if (++seekedCount == info.length)
                endTest();
            else {
                consoleWrite("");
                run("video.currentTime = " + seekTimes[seekedCount]);
            }
        }

        function loaded()
        {
            findMediaElement();
            video.src = findMediaFile('video', '../content/test');
            video.id = "testvideo";
            waitForEvent('seeked', seeked);
            waitForEvent('canplaythrough', function() { video.currentTime = seekTimes[0]; });
        }

        setCaptionDisplayMode('Automatic');
        </script>
    </head>
    <body onload="loaded()">
        <video controls >
            <track src="captions-webvtt/styling.vtt" kind="captions" default>
        </video>
    </body>
</html>