src/third_party/WebKit/LayoutTests/fast/canvas/canvas-composite-video.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <title>Test drawImage(image) with canvas with different composite modes.</title>
   5     <script src="resources/canvas-composite-image-common.js"></script>
   6     <style type="text/css">
   7       body { margin: 5px; font-family: arial,verdana,helvetica; background: #fff; }
   8       canvas { border: 1px solid #999; }
   9       div { margin: 10px; }
  10       #output h1 { font-size: medium; font-weight: normal; }
  11       #output h2 { font-size: small; font-weight: normal; }
  12       #output div { font-size: small; margin: 0px; }
  13       #output .pass { color: green; }
  14       #output .fail { color: rgb(255, 0, 0); }
  15       #output .error { color: rgb(255, 0, 64); }
  16       td { padding: 2px 5px; }
  17       table { border-collapse: collapse; }
  18     </style>
  19   </head>
  20   <body>
  21     <div>Test Results</div>
  22     <div><table id='outputtable'></table></div>
  23     <div>Test Video</div>
  24     <div><video id="video" loop>
  25       <source src="resources/canvas_video.mp4"  type='video/mp4' />
  26       <source src="resources/canvas_video.webm" type='video/webm' />
  27       <source src="resources/canvas_video.ogv"  type='video/ogg' />
  28     </video></div>
  29     <script type="application/x-javascript">
  30       function drawImage(context, compositeIndex, alpha) {
  31         context.globalCompositeOperation = compositeTypes[compositeIndex];
  32         if (alpha)
  33           context.globalAlpha = 0.5;
  34         var videoElement = document.getElementById('video');
  35         context.drawImage(videoElement, 10, 10);
  36       }
  37
  38       function setupTest() {}
  39
  40       var video = document.getElementById("video");
  41       video.addEventListener("playing", playVideo, true);
  42       video.play();
  43
  44       function playVideo() {
  45         video.removeEventListener("playing", playVideo, true);
  46         // We cannot read pixel after drawing a video because of SecurityError:
  47         // The canvas has been tainted by cross-origin data.
  48         runTest("dumpAsTextWithPixelResults")
  49       }
  50     </script>
  51   </body>
  52 </html>