third_party/WebKit/LayoutTests/fast/canvas/canvas-toDataURL-webp.html

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

<script>
if (window.testRunner) {
    window.testRunner.dumpAsTextWithPixelResults();
    window.testRunner.waitUntilDone();
}

var image = new Image();

image.onload = function() {
    var canvas = document.querySelector('canvas');
    canvas.width = this.width;
    canvas.height = this.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(this, 0, 0);
    // setTimeout creates a frame barrier that locks the canvas into gpu
    // acceleration mode when running under virtual/gpu
    setTimeout(() => {
        var dataURL = canvas.toDataURL('image/webp', 0.3); // low quality

        if (!dataURL.match(/^data:image\/webp[;,]/))
            error.textContent += "FAIL: the dataURL should have 'image/webp' type.";
        else
            result.src = dataURL;

        document.body.style.zoom = 1.3; // zoom in to see the low quality

        if (window.testRunner)
            window.testRunner.notifyDone();
    }, 0);
};

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