Implement Asynchronous image encoding for Canvas.toBlob

LayoutTests/fast/canvas/canvas-toBlob-toDataURL-race-imageEncoder-webp.html

Index: LayoutTests/fast/canvas/canvas-toBlob-toDataURL-race-imageEncoder-webp.html
diff --git a/LayoutTests/fast/canvas/canvas-toBlob-toDataURL-race-imageEncoder-webp.html b/LayoutTests/fast/canvas/canvas-toBlob-toDataURL-race-imageEncoder-webp.html
new file mode 100644
index 0000000000000000000000000000000000000000..589f3682eb4cef1dd7add64f4b1e83465a47d948
--- /dev/null
+++ b/LayoutTests/fast/canvas/canvas-toBlob-toDataURL-race-imageEncoder-webp.html
@@ -0,0 +1,79 @@
+<script src = "../../resources/js-test.js"></script>
+<script type = 'text/javascript'>
+description("Verifies if WEBP image encoding on main thread (toDataURL) conflicts with image encoding on async thread (toBlob)");
+if (window.testRunner) {
+    testRunner.dumpAsText();
+    testRunner.waitUntilDone();
+}
+
+var numToBlobCalls = 9; // number of toBlob calls on the original canvas
+var numToDataURLCalls = 3; // number of toDataURL calls
+var testImages = [];
+var canvasCtxs = [];
+
+// Create an original canvas with content
+var canvas = document.createElement("canvas");
+var ctx = canvas.getContext("2d");
+ctx.fillStyle = "#EE21AF";
+ctx.fillRect(0, 0, 2500, 1750);
+
+function testIfAllImagesAreCorrect()
+{
+    // Because the color filled is not black, we should not have a pixel having zero as value
+    shouldBeNonZero('canvasCtxs[0].getImageData(0, 0, 2500, 1750).data[25]');
+
+    // All resultant images should be the same because both async and main threads use the same image encoder
+    // We pick a pixel at position 25 to check whether they match
+    for (var i = 0; i < (numToBlobCalls + numToDataURLCalls - 1); i++) 
+    {
+        shouldBe('canvasCtxs[' + i + '].getImageData(0, 0, 2500, 1750).data[25]', 'canvasCtxs[' + (i+1) + '].getImageData(0, 0, 2500, 1750).data[25]');
+    }
+}
+
+var counter = numToBlobCalls + numToDataURLCalls;
+function onCanvasDrawCompleted(ctx_test, i) 
+{
+    counter = counter - 1;
+    if (counter == 0) {
+        testIfAllImagesAreCorrect();
+        if (window.testRunner)
+            testRunner.notifyDone();
+    } 
+}
+
+function createTestCase(i)
+{
+    var canvas_test = document.createElement("canvas");
+    var ctx_test = canvas_test.getContext("2d");
+    canvasCtxs[i] = ctx_test;
+
+    var newImg = new Image();
+    newImg.onload = function() {
+        ctx_test.drawImage(newImg, 0, 0, 2500, 1750);
+        onCanvasDrawCompleted(ctx_test, i);
+    }    
+    testImages[i] = newImg;
+}
+
+// Start creating test cases
+for (var i = 0; i < (numToBlobCalls + numToDataURLCalls); i++) 
+{
+    createTestCase(i);
+}
+
+//Fire a bunch of toBlob operations of canvas to keep the async thread busy
+var j = 0; // due to async nature of toBlob we need a separate counter
+for (var i = 0; i < numToBlobCalls; i++) 
+{
+    canvas.toBlob(function(blob) {
+        url = URL.createObjectURL(blob);
+        testImages[j++].src = url;
+    }, "image/webp", 1.0);
+}
+
+//Then file a bunch of toDataURL operation on main thread, so both threads now compete for image encoding
+for (var i = numToBlobCalls; i < (numToDataURLCalls + numToBlobCalls); i++) 
+{
+    testImages[i].src = canvas.toDataURL("image/webp", 1.0);
+}
+</script>