Support lossy and lossless <canvas>.toDataURL for webp

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

Index: LayoutTests/fast/canvas/canvas-toDataURL-webp-maximum-quality.html
diff --git a/LayoutTests/fast/canvas/canvas-toDataURL-jpeg-maximum-quality.html b/LayoutTests/fast/canvas/canvas-toDataURL-webp-maximum-quality.html
similarity index 70%
copy from LayoutTests/fast/canvas/canvas-toDataURL-jpeg-maximum-quality.html
copy to LayoutTests/fast/canvas/canvas-toDataURL-webp-maximum-quality.html
index 77bd2e898984012039eb70c5ca4f6acdc921778a..b494d0a1de066db0130c1158bb824df3ec93c865 100644
--- a/LayoutTests/fast/canvas/canvas-toDataURL-jpeg-maximum-quality.html
+++ b/LayoutTests/fast/canvas/canvas-toDataURL-webp-maximum-quality.html
@@ -1,6 +1,6 @@
-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.<p>
 <canvas></canvas>
-<img id="result" onload="testDone()">
+<img id="result">
 
 <script>
 if (window.testRunner) {
@@ -8,20 +8,19 @@ if (window.testRunner) {
     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;
+
+    document.getElementById('result').src = canvas.toDataURL('image/webp', 1.0);
+
+    if (window.testRunner)
+        window.testRunner.notifyDone();
 };
 
 image.src = "resources/letters.png";