<html>
    <head>
        <title>Drawing to canvas using video</title>
        <script src=media-file.js></script>
        <script>
            var video;
            var numberOfSeeks = 4;

            var expectedResults = [
                // [x, y, r, g, b]
                [40, 165, 194, 193, 14], // yellow
                [56, 165, 17, 197, 195], // blue/cyan
                [73, 165, 20, 200, 18], // green
            ];

            if (window.testRunner) {
                testRunner.dumpAsText(true);
                testRunner.waitUntilDone();
            }

            function checkColorAtLocation(ctx, x, y, r, g, b, tolerance)
            {
                var buffer = ctx.getImageData(x, y, 1, 1).data;
                if (Math.abs(buffer[0] - r) < tolerance
                    && Math.abs(buffer[1] - g) < tolerance
                    && Math.abs(buffer[2] - b) < tolerance)
                    logResult(true, "Saw close enough to (" + r + ", " + g + ", " + b + ") at (" + x + ", " + y + ")");
                else
                    logResult(false, "Expected (" + r + ", " + g + ", " + b + ") at (" + x + ", " + y + ") but saw (" + buffer[0] + ", " + buffer[1] + ", " + buffer[2] + ")");
            }

            function drawAndInsertFrame()
            {
                var canvas = document.createElement('canvas');
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                var ctx = canvas.getContext('2d');
                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                document.getElementById('canvases').appendChild(canvas);

                // The test video has a number of colored squares.
                // Check a few of them.
                expectedResults.forEach(function (value) {
                    checkColorAtLocation(ctx, value[0], value[1], value[2], value[3], value[4], 3);
                })

                // Seek a few times. We exercise different code paths
                // for the first few and then subsequent drawImage calls.
                if (--numberOfSeeks) {
                    video.currentTime += 0.5;
                    return;
                }

                endTest();
            }

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

            function start()
            {
                findMediaElement();
                waitForEvent('canplaythrough', canplaythrough);
                waitForEvent('seeked', drawAndInsertFrame);
                video.src = findMediaFile('video', 'content/test');
            }
        </script>
        <script src=video-test.js></script>
    </head>
    <body onload="start()">
        <video id="video"></video>
        <div id="canvases"></div>
    </body>
</html>