third_party/WebKit/LayoutTests/fast/canvas/canvas-drawImage-video.html

   1 <html>
   2 <head>
   3   <title>Ensure correct behavior of drawImage video elements.</title>
   4   <style trpe="text/css">
   5   video {
   6     display: none;
   7   }
   8   </style>
   9 </head>
  10 <body>
  11   <canvas id="canvas"></canvas>
  12   <video id="video">
  13     <source src="resources/canvas_video.mp4"  type='video/mp4' />
  14     <source src="resources/canvas_video.webm" type='video/webm' />
  15     <source src="resources/canvas_video.ogv"  type='video/ogg' />
  16   </video>
  17   <script>
  18   if (window.testRunner) {
  19     testRunner.dumpAsTextWithPixelResults();
  20     testRunner.waitUntilDone();
  21   }
  22
  23   var length = 150;
  24   var canvas = document.getElementById("canvas");
  25   canvas.setAttribute("width", length);
  26   canvas.setAttribute("height", length);
  27   var ctx = canvas.getContext("2d");
  28
  29   var video = document.getElementById("video");
  30   video.addEventListener("playing", drawImageToCanvas, true);
  31   video.play();
  32
  33   function drawImageToCanvas() {
  34     video.removeEventListener("playing", drawImageToCanvas, true);
  35     ctx.fillStyle = "blue";
  36     ctx.fillRect(0, 0, length, length);
  37     ctx.drawImage(video, 0, 0);
  38     ctx.globalAlpha = 0.5;
  39     ctx.drawImage(video, 0, 60);
  40     if (window.testRunner)
  41       testRunner.notifyDone();
  42   }
  43   </script>
  44 </body>
  45 </html>