| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="media-file.js"></script> |
| <script> |
| |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| } |
| |
| function onLoad() { |
| var video = document.getElementsByTagName('video')[0]; |
| video.src = findMediaFile("video", "content/test"); |
| |
| var canvas1 = document.getElementById('canvas1'); |
| var canvas2 = document.getElementById('canvas2'); |
| var ctx1 = canvas1.getContext('2d'); |
| var ctx2 = canvas2.getContext('2d'); |
| |
| video.load(); |
| video.addEventListener("canplay", function (e) { |
| ctx1.fillStyle = ctx1.createPattern(video, 'repeat'); |
| ctx1.fillRect(0, 0, 320, 240); |
| |
| ctx2.drawImage(video, 0, 0); |
| |
| if (window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| }); |
| } |
| |
| </script> |
| </head> |
| <body onload="onLoad();"> |
| Test to verify that drawing a video to a 2D canvas with drawImage and with a CanvasPattern works as expected. |
| <video></video> |
| <canvas id="canvas1" width="320px" height="240px"></canvas> |
| <canvas id="canvas2" width="320px" height="240px"></canvas> |
| </body> |
| </html> |