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| Index: third_party/WebKit/LayoutTests/fast/canvas/canvas-drawImage-live-video.html |
| diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-drawImage-live-video.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-drawImage-live-video.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..6289821c062ec6123cbeeee2354f5e8ee625d7c7 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-drawImage-live-video.html |
| @@ -0,0 +1,66 @@ |
| +<html> |
| +<head> |
| + <style trpe="text/css"> |
|
Stephen White
2015/11/04 22:40:24
type?
|
| + video { |
| + display: none; |
| + } |
| + </style> |
| +</head> |
| +<body> |
| + <canvas id="canvas"></canvas> |
| + <video id="video"> |
| + <source src="../../media/resources/test-live.webm" type='video/webm' /> |
| + </video> |
| + <script src="../../resources/js-test.js"></script> |
| + <script> |
| + description('Verify that consecutive drawImage from a live video correctly propagates frame updates.'); |
| + if (window.testRunner) { |
| + testRunner.dumpAsText(); |
| + testRunner.waitUntilDone(); |
| + } |
| + |
| + var canvas = document.getElementById("canvas"); |
| + canvas.width = 100; |
| + canvas.height = 100; |
| + var ctx = canvas.getContext("2d"); |
| + |
| + var video = document.getElementById("video"); |
| + video.addEventListener("playing", drawFirstFrame, true); |
| + video.play(); |
| + |
| + function drawFirstFrame() { |
| + video.removeEventListener("playing", drawFirstFrame, true); |
| + ctx.drawImage(video, 0, 0, canvas.width, canvas.height); |
| + requestAnimationFrame(function() { |
| + video.addEventListener("timeupdate", updateVideo, true); |
| + }); |
| + } |
| + |
| + var referenceImageData; |
| + var processedFirstFrame = false; |
| + var imagesAreTheSame; |
| + |
| + function updateVideo() { |
| + if (!processedFirstFrame) { |
| + ctx.drawImage(video, 0, 0, canvas.width, canvas.height); |
| + referenceImageData = ctx.getImageData(0, 0, canvas.width, canvas.height); |
| + processedFirstFrame = true; |
| + } else { |
| + video.removeEventListener("timeupdate", updateVideo, true); |
| + ctx.drawImage(video, 0, 0, canvas.width, canvas.height); |
| + var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); |
| + imagesAreTheSame = true; |
| + for(var i = 0; i < imageData.data.length; ++i) { |
| + if (imageData.data[i] != referenceImageData.data[i]) { |
| + imagesAreTheSame = false; |
| + break; |
| + } |
| + } |
| + shouldBeFalse("imagesAreTheSame"); |
| + if (window.testRunner) |
| + testRunner.notifyDone(); |
| + } |
| + } |
| + </script> |
| +</body> |
| +</html> |
