OLD | NEW |
1 <canvas id="canvas" width="64px" height="64px" style="display: none"></canvas> | 1 <!-- The letters in the right image should be blurry compared to the letters in
the left image. --> |
2 <pre id="log"></pre> | 2 <canvas></canvas> |
3 <img id="result"> | 3 <img id="result"> |
| 4 <pre id="error"></pre> |
| 5 |
4 <script> | 6 <script> |
5 if (window.testRunner) { | 7 if (window.testRunner) { |
6 window.testRunner.dumpAsTextWithPixelResults(); | 8 window.testRunner.dumpAsTextWithPixelResults(); |
7 window.testRunner.waitUntilDone(); | 9 window.testRunner.waitUntilDone(); |
8 } | 10 } |
9 | 11 |
10 function webpDataURLTest() | 12 var image = new Image(); |
11 { | |
12 var canvas = document.getElementById('canvas'); | |
13 var context = canvas.getContext('2d'); | |
14 context.drawImage(window.image, 0, 0, canvas.width, canvas.height); | |
15 | 13 |
16 var dataURL = canvas.toDataURL('image/webp', 0.8); | 14 image.onload = function() { |
| 15 var canvas = document.querySelector('canvas'); |
| 16 canvas.width = this.width; |
| 17 canvas.height = this.height; |
| 18 canvas.getContext('2d').drawImage(this, 0, 0); |
| 19 |
| 20 var dataURL = canvas.toDataURL('image/webp', 0.3); // low quality |
| 21 |
17 if (!dataURL.match(/^data:image\/webp[;,]/)) | 22 if (!dataURL.match(/^data:image\/webp[;,]/)) |
18 document.getElementById('log').textContent += "FAIL: canvas.toDataURL('i
mage/webp') not supported"; | 23 error.textContent += "FAIL: the dataURL should have 'image/webp' type."; |
19 else | 24 else |
20 document.getElementById('result').src = dataURL; | 25 result.src = dataURL; |
| 26 |
| 27 document.body.style.zoom = 1.3; // zoom in to see the low quality |
21 | 28 |
22 if (window.testRunner) | 29 if (window.testRunner) |
23 window.testRunner.notifyDone(); | 30 window.testRunner.notifyDone(); |
24 } | 31 }; |
25 | 32 |
26 var image = new Image(); | 33 image.src = "resources/letters.png"; |
27 image.onload = webpDataURLTest; | |
28 image.src = 'resources/html5.png'; | |
29 </script> | 34 </script> |
OLD | NEW |