| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <script src="../../media/media-file.js"></script> |
| <script src="../../resources/platform-helper.js"></script> |
| </head> |
| <body> |
| <script> |
| description("Test the behavior of 2d canvas createPattern as a video is loaded"); |
| |
| var buffer; |
| 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. |
| ]; |
| |
| var canvases = document.createElement("div"); |
| document.body.appendChild(canvases); |
| |
| var video = document.createElement("video"); |
| video.addEventListener("loadeddata", loadeddata); |
| video.addEventListener("playing", playing); |
| |
| shouldBeNull("document.createElement('canvas').getContext('2d').createPattern(video, 'repeat')"); |
| |
| video.src = findMediaFile("video", "../../media/content/test"); |
| |
| function checkPixels(context, x, y, r, g, b, tolerance) |
| { |
| buffer = context.getImageData(x, y, 1, 1).data; |
| shouldBeCloseTo("buffer[0]", r, tolerance); |
| shouldBeCloseTo("buffer[1]", g, tolerance); |
| shouldBeCloseTo("buffer[2]", b, tolerance); |
| } |
| |
| function drawImageToCanvasAndCheckPixels() |
| { |
| var canvas = document.createElement("canvas"); |
| canvas.width = 2.5 * video.videoWidth; |
| canvas.height = 2.5 * video.videoHeight; |
| var context = canvas.getContext("2d"); |
| document.body.appendChild(canvas); |
| |
| context.fillStyle = context.createPattern(video, "repeat"); |
| context.fillRect(0, 0, canvas.width, canvas.height); |
| |
| expectedResults.forEach(function(element) { |
| checkPixels(context, element[0], element[1], element[2], element[3], element[4], videoCanvasPixelComparisonTolerance()); |
| }); |
| } |
| |
| function loadeddata() |
| { |
| drawImageToCanvasAndCheckPixels(); |
| |
| video.currentTime = 1; |
| video.play(); |
| } |
| |
| function playing() |
| { |
| video.pause(); |
| |
| drawImageToCanvasAndCheckPixels(); |
| |
| finishJSTest(); |
| } |
| |
| window.jsTestIsAsync = true; |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
