<!DOCTYPE html>
<html>
<head>
    <style>
        video {
            box-shadow: -50px -50px 0px black;
            background-color: red;   
            margin: 50px;
            width: 500.25px;
        }

        .obscurer {
            position: absolute;
            width: 14px;
            height: 10px;
            background-color: gray;
        }
    </style>
    <script src="../../media/media-file.js"></script>
    <script>
        var requirePixelDump = true;
        var video;

        function testComplete()
        {
            if (window.testRunner)
                testRunner.notifyDone();
        }

        function canplaythrough()
        {
            video.currentTime = 1;
        }

        function doTest()
        {
            findMediaElement();
            waitForEvent('canplaythrough', canplaythrough);
            waitForEvent('seeked', testComplete);
            video.src = findMediaFile('video', '../../media/content/counting');
        }
        
        window.addEventListener('load', doTest, false);
    </script>
    <script src="../../media/video-test.js"></script>
</head>
<body>
    <video></video>

    <div class="obscurer" style="left: 5px; top: 5px;"></div>
    <div class="obscurer" style="left: 5px; top: 410px;"></div>
    <div class="obscurer" style="left: 500px; top: 5px;"></div>

    <div class="obscurer" style="left: 55px; top: 55px;"></div>
    <div class="obscurer" style="left: 55px; top: 460px;"></div>
    <div class="obscurer" style="left: 550px; top: 55px;"></div>
    <div class="obscurer" style="left: 550px; top: 460px;"></div>
</body>
</html>