Chromium Code Reviews 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| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <html> | |
| 2 <head> | |
| 3 <style trpe="text/css"> | |
|
Stephen White
2015/11/04 22:40:24
type?
| |
| 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 |
