<!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>
        ::cue {word-spacing: 100px;}
        ::cue(c) {padding-left: 10px; color: red;}
        .cue {
            display: inline;
            background-color: green;
        }
        </style>

        <script>

        var cueNode;

        function seeked()
        {
            if (testEnded)
                return;

            consoleWrite("<br>");
            consoleWrite("Test that only allowed for the ::cue pseudo-element properties are applied to WebVTT node objects.");

            cueNode = textTrackDisplayElement(video, 'cue').firstElementChild;
            testExpected("getComputedStyle(cueNode).color", "rgb(255, 0, 0)");
            testExpected("getComputedStyle(cueNode).padding", "0px");
            testExpected("getComputedStyle(cueNode).wordSpacing", "0px");
            cueNode = cueNode.nextElementSibling;
            testExpected("getComputedStyle(cueNode).color", "rgb(255, 0, 0)");
            testExpected("getComputedStyle(cueNode).padding", "0px");
            testExpected("getComputedStyle(cueNode).wordSpacing", "0px");
            cueNode = cueNode.nextElementSibling;
            testExpected("getComputedStyle(cueNode).color", "rgb(255, 0, 0)");
            testExpected("getComputedStyle(cueNode).padding", "0px");
            testExpected("getComputedStyle(cueNode).wordSpacing", "0px");
            
            consoleWrite("<br>Test that filtering doesn't apply to elements which class equals 'cue' outside WebVTT scope.");
            cueNode = document.getElementsByClassName("cue")[0];
            testExpected("getComputedStyle(cueNode).display", "inline");
            endTest();
        }

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

        setCaptionDisplayMode('Automatic');
        </script>
    </head>
    <body onload="loaded()">
        <video controls >
            <track src="captions-webvtt/whitelist.vtt" kind="captions" default>
        </video>
        <div><div class="cue">This should display inline</div></div>
    </body>
</html>