Chromium Code Reviews Chromium Code Reviews
Issue 2728193004:
Add canvas.drawImage test for animated image types (Closed)
| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <html> | |
| 2 <!-- canvas.drawImage() for animated images should draw the initial | |
| 3 frame (or poster frame) of the animated image. --> | |
| 4 | |
| 5 <body> | |
| 6 <style> | |
| 7 canvas { width : 315px; height: 236px; } | |
| 8 </style> | |
| 9 <canvas id='canvas1'></canvas> | |
| 10 <img onload='loaded(this, "GIF ", 1)'><br> | |
| 11 <canvas id='canvas2'></canvas> | |
| 12 <img onload='loaded(this, "APNG", 2)'><br> | |
| 13 <canvas id='canvas3'></canvas> | |
| 14 <img onload='loaded(this, "WEBP", 3)'><br> | |
| 15 <pre id='results'></pre> | |
| 16 </body> | |
| 17 | |
| 18 <script> | |
| 19 if (window.testRunner) { | |
| 20 testRunner.waitUntilDone(); | |
| 21 testRunner.dumpAsText(); | |
| 22 } | |
| 23 | |
| 24 var sources = [ | |
| 25 '../../images/resources/count-down-color-test.gif', | |
| 26 '../../images/resources/count-down-color-test.png', | |
| 27 '../../images/resources/count-down-color-test.webp', | |
| 28 ]; | |
| 29 | |
| 30 function loaded(img, name, i) { | |
| 31 // Advance the image away from frame 0 to a frame that has black, | |
| 32 // white and gray pixels, viz., no color pixels. | |
| 33 if (window.internals) { | |
| 34 for (var frame = 0; frame < 10; ++frame) | |
| 35 window.internals.advanceImageAnimation(img); | |
| 36 runTest(); | |
| 37 } 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
| |
| 38 var noColorFrameDelayInMS = 1500; | |
| 39 setTimeout(runTest, noColorFrameDelayInMS); | |
| 40 } | |
| 41 | |
| 42 function runTest() { | |
| 43 requestAnimationFrame(function test() { | |
| 44 results.textContent += name + ' image test: '; | |
| 45 drawImageToCanvasTest(img, i); | |
| 46 startNextTestIfNeeded(i); | |
|
Noel Gordon
2017/03/09 03:41:00
(After testing an image, this call loads the next
| |
| 47 }); | |
| 48 } | |
| 49 } | |
| 50 | |
| 51 function drawImageToCanvasTest(img, i) { | |
| 52 var canvas = document.querySelector('#canvas' + i); | |
| 53 canvas.width = img.width; | |
| 54 canvas.height = img.height; | |
| 55 | |
| 56 var context = canvas.getContext('2d'); | |
| 57 context.drawImage(img, 0, 0); | |
| 58 testImagePixel(context, img); | |
| 59 } | |
| 60 | |
| 61 function testImagePixel(context, img) { | |
| 62 var center = { x : img.width / 2, y : img.height / 2 }; | |
| 63 | |
| 64 try { | |
| 65 var pixel = context.getImageData(center.x, center.y, 1, 1); | |
| 66 } catch (exception) { | |
| 67 results.textContent += 'FAIL: ' + exception + '\n'; | |
| 68 return; | |
| 69 } | |
| 70 | |
| 71 // 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
| |
| 72 var green = | |
| 73 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.
| |
| 74 results.textContent += green ? 'PASS\n' : 'FAIL\n'; | |
| 75 } | |
| 76 | |
| 77 function startNextTestIfNeeded(i) { | |
| 78 if (i < sources.length) { | |
| 79 document.querySelectorAll('img')[i].src = sources[i]; | |
| 80 } else if (window.testRunner) { | |
| 81 testRunner.notifyDone(); | |
| 82 } | |
| 83 } | |
| 84 | |
| 85 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
| |
| 86 </script> | |
| 87 </html> | |
| OLD | NEW |
