third_party/WebKit/LayoutTests/media/video-canvas-draw.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="media-file.js"></script>
   5 <script>
   6
   7 if (window.testRunner) {
   8     testRunner.waitUntilDone();
   9 }
  10
  11 function onLoad() {
  12     var video = document.getElementsByTagName('video')[0];
  13     video.src = findMediaFile("video", "content/test");
  14
  15     var canvas1 = document.getElementById('canvas1');
  16     var canvas2 = document.getElementById('canvas2');
  17     var ctx1 = canvas1.getContext('2d');
  18     var ctx2 = canvas2.getContext('2d');
  19
  20     video.load();
  21     video.addEventListener("canplay", function (e) {
  22         ctx1.fillStyle = ctx1.createPattern(video, 'repeat');
  23         ctx1.fillRect(0, 0, 320, 240);
  24
  25         ctx2.drawImage(video, 0, 0);
  26
  27         if (window.testRunner) {
  28             testRunner.notifyDone();
  29         }
  30     });
  31 }
  32
  33 </script>
  34 </head>
  35 <body onload="onLoad();">
  36     Test to verify that drawing a video to a 2D canvas with drawImage and with a CanvasPattern works as expected.
  37     <video></video>
  38     <canvas id="canvas1" width="320px" height="240px"></canvas>
  39     <canvas id="canvas2" width="320px" height="240px"></canvas>
  40 </body>
  41 </html>