| <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, 194, 193, 14], // Represents yellow north west tile. |
| [355, 165, 194, 193, 14], // Represents yellow north east tile. |
| [40, 403, 194, 193, 14], // Represents yellow south west tile. |
| [355, 403, 194, 193, 14], // Represents yellow south east tile. |
| |
| [56, 165, 17, 197, 195], // Represents blue/cyan north west tile. |
| [371, 165, 17, 197, 195], // Represents blue/cyan north east tile. |
| [56, 403, 17, 197, 195], // Represents blue/cyan south west tile. |
| [371, 403, 17, 197, 195], // Represents blue/cyan south east tile. |
| |
| [73, 165, 20, 200, 18], // Represents green north west tile. |
| [388, 165, 20, 200, 18], // Represents green north east tile. |
| [73, 403, 20, 200, 18], // Represents green south west tile. |
| [388, 403, 20, 200, 18], // 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> |
