Revert of Simplify CanvasAsyncBlobCreator by removing ContextObserver and related tests

third_party/WebKit/LayoutTests/fast/canvas/toBlob/canvas-toBlob-toDataURL-race-imageEncoder-png.html

Index: third_party/WebKit/LayoutTests/fast/canvas/toBlob/canvas-toBlob-toDataURL-race-imageEncoder-png.html
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/toBlob/canvas-toBlob-toDataURL-race-imageEncoder-png.html b/third_party/WebKit/LayoutTests/fast/canvas/toBlob/canvas-toBlob-toDataURL-race-imageEncoder-png.html
new file mode 100644
index 0000000000000000000000000000000000000000..806cc27179e6e799fab8dd160d4d1399d0862a7a
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/canvas/toBlob/canvas-toBlob-toDataURL-race-imageEncoder-png.html
@@ -0,0 +1,21 @@
+<script src = "../../../resources/js-test.js"></script>
+<script src = "../script-tests/canvas-toBlob-toDataURL-race.js"></script>
+<script type = 'text/javascript'>
+description("Verifies if synchronous PNG image encoding (toDataURL) conflicts with asynchronous image encoding (toBlob)");
+
+//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;
+    });
+}
+
+//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();
+}
+</script>