Chromium Code Reviews Chromium Code Reviews
Issue 2728193004:
Add canvas.drawImage test for animated image types (Closed)
| Index: third_party/WebKit/LayoutTests/fast/canvas/canvas-drawImage-animated-images.html |
| diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-drawImage-animated-images.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-drawImage-animated-images.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..d8d131d5d3563e43b129f947861fd1a1cb4a5806 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-drawImage-animated-images.html |
| @@ -0,0 +1,87 @@ |
| +<html> |
| +<!-- canvas.drawImage() for animated images should draw the initial |
| + frame (or poster frame) of the animated image. --> |
| + |
| +<body> |
| + <style> |
| + canvas { width : 315px; height: 236px; } |
| + </style> |
| + <canvas id='canvas1'></canvas> |
| + <img onload='loaded(this, "GIF ", 1)'><br> |
| + <canvas id='canvas2'></canvas> |
| + <img onload='loaded(this, "APNG", 2)'><br> |
| + <canvas id='canvas3'></canvas> |
| + <img onload='loaded(this, "WEBP", 3)'><br> |
| + <pre id='results'></pre> |
| +</body> |
| + |
| +<script> |
| +if (window.testRunner) { |
| + testRunner.waitUntilDone(); |
| + testRunner.dumpAsText(); |
| +} |
| + |
| +var sources = [ |
| + '../../images/resources/count-down-color-test.gif', |
| + '../../images/resources/count-down-color-test.png', |
| + '../../images/resources/count-down-color-test.webp', |
| +]; |
| + |
| +function loaded(img, name, i) { |
| + // Advance the image away from frame 0 to a frame that has black, |
| + // white and gray pixels, viz., no color pixels. |
| + if (window.internals) { |
| + for (var frame = 0; frame < 10; ++frame) |
| + window.internals.advanceImageAnimation(img); |
| + runTest(); |
| + } else { // Manual test. |
|
scroggo_chromium
2017/03/08 20:53:22
What does it mean to run it manually? Just open th
Noel Gordon
2017/03/09 03:41:00
Yes, just open the page. However, you do need to
Noel Gordon
2017/03/11 01:39:56
... then load http://localhost:9090 in your browse
|
| + var noColorFrameDelayInMS = 1500; |
| + setTimeout(runTest, noColorFrameDelayInMS); |
| + } |
| + |
| + function runTest() { |
| + requestAnimationFrame(function test() { |
| + results.textContent += name + ' image test: '; |
| + drawImageToCanvasTest(img, i); |
| + startNextTestIfNeeded(i); |
|
Noel Gordon
2017/03/09 03:41:00
(After testing an image, this call loads the next
|
| + }); |
| + } |
| +} |
| + |
| +function drawImageToCanvasTest(img, i) { |
| + var canvas = document.querySelector('#canvas' + i); |
| + canvas.width = img.width; |
| + canvas.height = img.height; |
| + |
| + var context = canvas.getContext('2d'); |
| + context.drawImage(img, 0, 0); |
| + testImagePixel(context, img); |
| +} |
| + |
| +function testImagePixel(context, img) { |
| + var center = { x : img.width / 2, y : img.height / 2 }; |
| + |
| + try { |
| + var pixel = context.getImageData(center.x, center.y, 1, 1); |
| + } catch (exception) { |
| + results.textContent += 'FAIL: ' + exception + '\n'; |
| + return; |
| + } |
| + |
| + // Frame 0 has color pixels: PASS if the center pixel is ~green. |
|
scroggo_chromium
2017/03/08 20:53:22
Should we also verify that frame 10 is not ~green
Noel Gordon
2017/03/09 03:40:59
Ideally, but there's no way to do that with window
|
| + var green = |
| + pixel.data[0] < 5 && pixel.data[1] > 180 && pixel.data[2] < 5; |
|
Noel Gordon
2017/03/11 02:14:33
Coulda also called this var |notGray|, I suppose.
|
| + results.textContent += green ? 'PASS\n' : 'FAIL\n'; |
| +} |
| + |
| +function startNextTestIfNeeded(i) { |
| + if (i < sources.length) { |
| + document.querySelectorAll('img')[i].src = sources[i]; |
| + } else if (window.testRunner) { |
| + testRunner.notifyDone(); |
| + } |
| +} |
| + |
| +startNextTestIfNeeded(0); |
|
scroggo_chromium
2017/03/08 20:53:22
When/why is this needed? It looks like this also g
Noel Gordon
2017/03/09 03:40:59
All the <img> tags are defined like this
<img o
|
| +</script> |
| +</html> |
