| OLD | NEW |
|---|
| (Empty) | |
| 1 <html> |
| 2 <head> |
| 3 <style type="text/css"> |
| 4 video { |
| 5 display: none; |
| 6 } |
| 7 </style> |
| 8 </head> |
| 9 <body> |
| 10 <canvas id="canvas"></canvas> |
| 11 <video id="video"> |
| 12 <source src="../../media/resources/test-live.webm" type='video/webm' /> |
| 13 </video> |
| 14 <script src="../../resources/js-test.js"></script> |
| 15 <script> |
| 16 description('Verify that consecutive drawImage from a live video correctly pro
pagates frame updates.'); |
| 17 if (window.testRunner) { |
| 18 testRunner.dumpAsText(); |
| 19 testRunner.waitUntilDone(); |
| 20 } |
| 21 |
| 22 var canvas = document.getElementById("canvas"); |
| 23 canvas.width = 100; |
| 24 canvas.height = 100; |
| 25 var ctx = canvas.getContext("2d"); |
| 26 |
| 27 var video = document.getElementById("video"); |
| 28 video.addEventListener("playing", drawFirstFrame, true); |
| 29 video.play(); |
| 30 |
| 31 function drawFirstFrame() { |
| 32 video.removeEventListener("playing", drawFirstFrame, true); |
| 33 ctx.drawImage(video, 0, 0, canvas.width, canvas.height); |
| 34 requestAnimationFrame(function() { |
| 35 video.addEventListener("timeupdate", updateVideo, true); |
| 36 }); |
| 37 } |
| 38 |
| 39 var referenceImageData; |
| 40 var processedFirstFrame = false; |
| 41 var imagesAreTheSame; |
| 42 |
| 43 function updateVideo() { |
| 44 if (!processedFirstFrame) { |
| 45 ctx.drawImage(video, 0, 0, canvas.width, canvas.height); |
| 46 referenceImageData = ctx.getImageData(0, 0, canvas.width, canvas.height); |
| 47 processedFirstFrame = true; |
| 48 } else { |
| 49 video.removeEventListener("timeupdate", updateVideo, true); |
| 50 ctx.drawImage(video, 0, 0, canvas.width, canvas.height); |
| 51 var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); |
| 52 imagesAreTheSame = true; |
| 53 for(var i = 0; i < imageData.data.length; ++i) { |
| 54 if (imageData.data[i] != referenceImageData.data[i]) { |
| 55 imagesAreTheSame = false; |
| 56 break; |
| 57 } |
| 58 } |
| 59 shouldBeFalse("imagesAreTheSame"); |
| 60 if (window.testRunner) |
| 61 testRunner.notifyDone(); |
| 62 } |
| 63 } |
| 64 </script> |
| 65 </body> |
| 66 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1431783002:
Adding a layout test for drawing a live video to a canvas (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master