<!-- The letters in the right image should be crisp like the letters in the left image. -->
<canvas></canvas>
<img id="result">
<pre id="error"></pre>

<script>
if (window.testRunner)
    testRunner.waitUntilDone();

var image = new Image();

image.onload = function() {
    var canvas = document.querySelector('canvas');
    canvas.width = this.width;
    canvas.height = this.height;
    canvas.getContext('2d').drawImage(this, 0, 0);

    result.onload = function() {
        if (window.testRunner)
            testRunner.notifyDone();
    };

    canvas.toBlob(function(blob) {
        var errorImage = "../../images/resources/rgb-jpeg-red.jpg";
        if (!(blob instanceof Blob)) {
            error.textContent += "FAIL: the blob is not valid.";
            result.src = errorImage;
        } else if (blob.type != 'image/webp') {
            error.textContent += "FAIL: the blob should have 'image/webp' type.";
            result.src = errorImage;
        } else {
            result.src = URL.createObjectURL(blob);
        }
    }, "image/webp", 1.0); // maximum quality
};

image.src = "resources/letters.png";
</script>