Support lossy and lossless <canvas>.toDataURL for webp

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

-The letters in the right image should be crisp and non-blurry like the letters in the left image.<p>
+<!-- The letters in the right image should be crisp like the letters in the left image. -->
 <canvas></canvas>
-<img id="result" onload="testDone()">
+<img id="result">
+<pre id="log"></pre>
 
 <script>
 if (window.testRunner) {
     window.testRunner.dumpAsTextWithPixelResults();
     window.testRunner.waitUntilDone();
 }
 
-function testDone()
-{
-    if (window.testRunner)
-        window.testRunner.notifyDone();
-}
-
 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.src = canvas.toDataURL('image/jpeg', 1.0);
+
     document.body.style.zoom = 1.3;
+
+    var dataURL = canvas.toDataURL('image/webp', 1.0);
+
+    if (!dataURL.match(/^data:image\/webp[;,]/))
+        document.getElementById('log').textContent += "FAIL: the dataURL should have 'image/webp' type.";
+    else
+        document.getElementById('result').src = dataURL;
+
+    if (window.testRunner)
+        window.testRunner.notifyDone();
 };
 
 image.src = "resources/letters.png";
 </script>