HTML <canvas>: add WEBP lossless encoding support

third_party/WebKit/LayoutTests/fast/canvas/canvas-toBlob-webp-maximum-quality.html

-<canvas id="mycanvas"></canvas>
-<img id="result" onload="testDone()">
-<script type = 'text/javascript'>
+<!-- The letters in the right image should be crisp like the letters in the left image. -->
+<canvas></canvas>
+<img id="result">
+<pre id="error"></pre>
+
+<script>
 if (window.testRunner) {
     testRunner.dumpAsTextWithPixelResults();
     testRunner.waitUntilDone();
 }
 
-function testDone()
-{
-    if (window.testRunner)
-        testRunner.notifyDone();
-}
+var image = new Image();
 
-var image = new Image();
 image.onload = function() {
-        var canvas = document.getElementById("mycanvas");
-        canvas.width = image.width;
-        canvas.height = image.height;
-        var ctx = canvas.getContext('2d');
-        ctx.drawImage(image, 0, 0);
+    var canvas = document.querySelector('canvas');
+    canvas.width = this.width;
+    canvas.height = this.height;
+    canvas.getContext('2d').drawImage(this, 0, 0);
 
-        canvas.toBlob(function(blob) {
-            url = URL.createObjectURL(blob);
-            result.src = url;
-        }, "image/webp", 1.0);
-}
+    result.onload = function() {
+        if (window.testRunner)
+            window.testRunner.notifyDone();
+    };
+
+    canvas.toBlob(function(blob) {
+        var errorImage = "../../fast/images/resources/rgb-jpeg-red.jpg";
+        if (!(blob instanceof Blob)) {
+            error.textContent += "FAIL: the blob is not valid.";
+            result.src = errorImage;
+        } else if (blob.type != 'image/webp') {
+            error.textContent += "FAIL: the blob should have 'image/webp' type.";
+            result.src = errorImage;
+        } else {
+            result.src = URL.createObjectURL(blob);
+        }
+    }, "image/webp", 1.0); // maximum quality
+};
+
 image.src = "resources/letters.png";
 </script>