src/third_party/WebKit/LayoutTests/media/video-canvas.html-disabled

   1 <html>
   2     <head>
   3         <title>drawing &lt;video&gt; to &lt;canvas&gt;</title>
   4         <script src=../http/tests/media/video-test.js></script>
   5
   6         <script>
   7             var ctx;
   8             var results = {
   9                 current: 0,
  10                 values: [
  11                     { time:0, r:255, g:255, b:0 },
  12                     { time:2, r:8, g:0, b:226 },
  13                     { time:4, r:0, g:24, b:197 },
  14                     { time:6, r:0, g:46, b:166 },
  15                     { time:8, r:0, g:66, b:136 },
  16                     { time:10, r:0, g:85, b:112 },
  17                 ]
  18             };
  19
  20             var width;
  21             var height;
  22
  23             function testPixel()
  24             {
  25                 var expected = results.values[results.current];
  26                 if (expected.time)
  27                     ctx.drawImage(video, 0, 0, width, height);
  28
  29                 var frame = ctx.getImageData(0, 0, width, height);
  30                 r = frame.data[4 * 2 * width + 16 + 0];
  31                 g = frame.data[4 * 2 * width + 16 + 1];
  32                 b = frame.data[4 * 2 * width + 16 + 2];
  33
  34                 testExpected("r", expected.r);
  35                 testExpected("g", expected.g);
  36                 testExpected("b", expected.b);
  37
  38                 if (++results.current >= results.values.length)
  39                     endTest();
  40                 else
  41                     setTimeout(testFrame, 0);
  42             }
  43
  44             function testFrame()
  45             {
  46                 video.pause();
  47                 consoleWrite("");
  48                 var expected = results.values[results.current];
  49                 if (expected.time)
  50                     run("video.currentTime = " + expected.time);
  51                 setTimeout(testPixel, 100);
  52             }
  53
  54             function loadedmetadata()
  55             {
  56                 width = video.videoWidth / 2;
  57                 height = video.videoHeight / 2;
  58
  59                 ctx = canvas.getContext("2d");
  60                 ctx.fillStyle = 'yellow';
  61                 ctx.fillRect(0, 0, width, height);
  62                 testFrame();
  63             }
  64
  65             function start()
  66             {
  67                 findMediaElement();
  68                 canvas = document.getElementsByTagName('canvas')[0];
  69                 waitForEvent('loadedmetadata', loadedmetadata);
  70                 run("video.src = 'content/counting.mp4'");
  71             }
  72         </script>
  73     </head>
  74
  75     <body onload="start()" >
  76
  77     <div>
  78         <video controls></video>
  79         <canvas width="160" height="120" ></canvas>
  80     </div>
  81
  82     <p>Test &lt;video&gt; as a source for &lt;canvas&gt;.</p>
  83
  84     </body>
  85 </html>