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 55%
copy from LayoutTests/fast/canvas/canvas-toDataURL-jpeg-maximum-quality.html
copy to LayoutTests/fast/canvas/canvas-toDataURL-webp-maximum-quality.html
index 77bd2e898984012039eb70c5ca4f6acdc921778a..0d82396bf08c067e913393afe107d3c000c42d1a 100644
--- a/LayoutTests/fast/canvas/canvas-toDataURL-jpeg-maximum-quality.html
+++ b/LayoutTests/fast/canvas/canvas-toDataURL-webp-maximum-quality.html
@@ -1,6 +1,7 @@
-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) {
@@ -8,20 +9,24 @@ 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;
+
+    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";