<html>
    <head>
        <title>Create patterns on canvas using video</title>
        <script src="media-file.js"></script>
        <script src="video-test.js"></script>
        <script src="../resources/platform-helper.js"></script>
        <script>
            var video;
            var numberOfSeeks = 4;

            var expectedResults = [
                // Each entry is formatted as [x, y, r, g, b].
                [40, 165, 200, 200, 0], // Represents yellow north west tile.
                [355, 165, 200, 200, 0], // Represents yellow north east tile.
                [40, 403, 200, 200, 0], // Represents yellow south west tile.
                [355, 403, 200, 200, 0], // Represents yellow south east tile.

                [56, 165, 57, 202, 203], // Represents blue/cyan north west tile.
                [371, 165, 57, 202, 203], // Represents blue/cyan north east tile.
                [56, 403, 57, 202, 203], // Represents blue/cyan south west tile.
                [371, 403, 57, 202, 203], // Represents blue/cyan south east tile.

                [73, 165, 53, 203, 9], // Represents green north west tile.
                [388, 165, 53, 203, 9], // Represents green north east tile.
                [73, 403, 53, 203, 9], // Represents green south west tile.
                [388, 403, 53, 203, 9], // Represents green south east tile.
            ]

            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 = 2 * video.videoWidth;
                canvas.height = 2 * video.videoHeight;
                var ctx = canvas.getContext('2d');
                ctx.fillStyle = ctx.createPattern(video, 'repeat');
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                document.getElementById('canvases').appendChild(canvas);

                expectedResults.forEach(function(element) {
                    checkColorAtLocation(ctx, element[0], element[1], element[2], element[3], element[4], videoCanvasPixelComparisonTolerance());
                });

                // Ensure that the test seeks a couple of times.
                if (--numberOfSeeks) {
                    video.currentTime += 0.24;
                    return;
                }

                endTest();
            }

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

            function start()
            {
                findMediaElement();
                waitForEvent('canplaythrough', canplaythrough);
                waitForEvent('seeked', drawAndInsertFrame);
                video.src = findMediaFile('video', 'content/test');
            }
        </script>
    </head>

    <body onload="start()">
        <video id="video"></video>
        <div id="canvases"></div>
    </body>
</html>