| <img id="png"/> |
| <img id="jpeg-high"/> |
| <img id="jpeg-low"/> |
| <img id="webp-high"/> |
| <img id="webp-low"/> |
| <script type="text/javascript"> |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| } |
| |
| var pngImage = document.getElementById('png'); |
| var jpegImageHigh = document.getElementById('jpeg-high'); |
| var jpegImageLow = document.getElementById('jpeg-low'); |
| var webpImageHigh = document.getElementById('webp-high'); |
| var webpImageLow = document.getElementById('webp-low'); |
| var numTestCount = 5; |
| function imageLoaded() { |
| numTestCount--; |
| if (numTestCount == 0 && window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| } |
| pngImage.addEventListener('load', imageLoaded); |
| jpegImageHigh.addEventListener('load', imageLoaded); |
| jpegImageLow.addEventListener('load', imageLoaded); |
| webpImageHigh.addEventListener('load', imageLoaded); |
| webpImageLow.addEventListener('load', imageLoaded); |
| |
| var canvas = document.createElement("canvas"); |
| canvas.width = 50; |
| canvas.height = 50; |
| var gl = canvas.getContext('webgl'); |
| gl.clearColor(0, 1, 0, 1); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| |
| canvas.toBlob(function(blob) { |
| pngImage.src = URL.createObjectURL(blob); |
| }); |
| |
| canvas.toBlob(function(blob) { |
| jpegImageHigh.src = URL.createObjectURL(blob); |
| }, "image/jpeg", 1.0); |
| |
| canvas.toBlob(function(blob) { |
| jpegImageLow.src = URL.createObjectURL(blob); |
| }, "image/jpeg", 0.2) |
| |
| canvas.toBlob(function(blob) { |
| webpImageHigh.src = URL.createObjectURL(blob); |
| }, "image/webp", 1.0); |
| |
| canvas.toBlob(function(blob) { |
| webpImageLow.src = URL.createObjectURL(blob); |
| }, "image/webp", 0.2); |
| |
| </script> |
| |