Support lossy and lossless <canvas>.toDataURL for webp

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

Index: LayoutTests/fast/canvas/canvas-toDataURL-webp.html
diff --git a/LayoutTests/fast/canvas/canvas-toDataURL-webp.html b/LayoutTests/fast/canvas/canvas-toDataURL-webp.html
index 24f7f92a231cc13eb21dd8fe027ba9ac7bbb61f5..81bd8e03e0d7832e89d86de8f726c14326a510d8 100644
--- a/LayoutTests/fast/canvas/canvas-toDataURL-webp.html
+++ b/LayoutTests/fast/canvas/canvas-toDataURL-webp.html
@@ -1,29 +1,33 @@
-<canvas id="canvas" width="64px" height="64px" style="display: none"></canvas>
-<pre id="log"></pre>
+<!-- The letters in the right image should be blurry compared to the letters in the left image. -->
+<canvas></canvas>
 <img id="result">
+<pre id="log"></pre>
+
 <script>
 if (window.testRunner) {
     window.testRunner.dumpAsTextWithPixelResults();
     window.testRunner.waitUntilDone();
 }
 
-function webpDataURLTest()
-{
-    var canvas = document.getElementById('canvas');
-    var context = canvas.getContext('2d');
-    context.drawImage(window.image, 0, 0, canvas.width, canvas.height);
+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);
+
+    document.body.style.zoom = 1.3;
+
+    var dataURL = canvas.toDataURL('image/webp', 0.2);
 
-    var dataURL = canvas.toDataURL('image/webp', 0.8);
     if (!dataURL.match(/^data:image\/webp[;,]/))
-        document.getElementById('log').textContent += "FAIL: canvas.toDataURL('image/webp') not supported";
+        document.getElementById('log').textContent += "FAIL: the dataURL should have 'image/webp' type.";
     else
         document.getElementById('result').src = dataURL;
 
     if (window.testRunner)
         window.testRunner.notifyDone();
-}
+};
 
-var image = new Image();
-image.onload = webpDataURLTest;
-image.src = 'resources/html5.png';
+image.src = "resources/letters.png";
 </script>