<!DOCTYPE html>
<html>
    <head>
        <script>var requirePixelDump = true;</script>
        <script src=../media-file.js></script>
        <script src=../video-test.js></script>
        <script src=../media-controls.js></script>

        <style>
        video::cue {
            background-image: linear-gradient(to bottom, dimgray, lightgray);
        }
        video::cue(b) {
            color: red;
            font-size: 15px;
        }
        video::cue {
            color: green;
            font-size: 15px;
        }
        </style>
        <script>
        function seeked()
        {
            consoleWrite("Finishing test.");
            setTimeout(endTest, 100);
        }

        function loaded()
        {
            consoleWrite("Test that CSS in VTT file is applied correctly.");
            findMediaElement();
            video.src = findMediaFile('video', '../content/test');
            waitForEvent('seeked', seeked);
            waitForEvent('canplaythrough', function() { video.currentTime = 0; });
        }

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