Fix OffscreenCanvas-placeholder-image-source.html

This corrects the expectations of
fast/canvas/OffscreenCanvas-placeholder-image-source.html to align with
reality. There does not appear to be any kind of guarantee that the
placeholder canvas will be updated within the two scheduler iterations
the test was designed to wait for.

Instead the test now keeps checking the placeholder canvas until it's
updated, which still happens very quickly in practice. If something
breaks, the test will timeout.

Bug: 872076
Change-Id: Idd1a3018e63f5ad2df540d642f5abb17b80410d5
Reviewed-on: https://chromium-review.googlesource.com/c/1292717Reviewed-by: Fernando Serboncini <fserb@chromium.org>
Commit-Queue: Ken Rockot <rockot@google.com>
Cr-Commit-Position: refs/heads/master@{#601591}

third_party/WebKit/LayoutTests/fast/canvas/OffscreenCanvas-placeholder-image-source.html

@@ -13,36 +13,58 @@ var offscreen = canvas.transferControlToOffscreen();
 var ctx = offscreen.getContext('2d');
 ctx.fillStyle = '#0f0';
 ctx.fillRect(0, 0, 100, 100);
-verifyImage(canvas, [0, 0, 0, 0], "Verify that OffscreenCanvas.commit() does not propagate the image synchronously to the placeholder canvas.");
-
-// TODO(junov): Use the Promise returned by commit to schedule after the
-// commit. (crbug.com/709484)
-setTimeout(function() {
-  setTimeout(function() {
-    var green = [0, 255, 0, 255];
-    verifyImage(canvas, green, "verify that drawImage works with placeholder canvas as a source.");
-    var testImage = new Image();
-    testImage.src = canvas.toDataURL();
-    testImage.onload = function() {
-      verifyImage(canvas, green, "verify that toDataURL works on placeholder canvas.");
-      canvas.toBlob(blob => {
-        createImageBitmap(blob).then(image => {
-          verifyImage(image, green, "verify that toBlob works on placeholder canvas.");
-          t.done();
-        })
-      });
-    }
-  }, 0);
-}, 0);
+t.step(() => {
+  assert_true(verifyImage(canvas, [0, 0, 0, 0]),
+              "Verify that OffscreenCanvas.commit() does not propagate the " +
+                  "image synchronously to the placeholder canvas.");
+});
+
+var kGreen = [0, 255, 0, 255];
 
 function verifyImage(image, expectedColor, description) {
   var testCanvas = document.createElement('canvas');
   var testCtx = testCanvas.getContext('2d');
   testCtx.drawImage(image, 0, 0);
 
-  t.step(function() {
   var pixel = testCtx.getImageData(50, 50, 1, 1).data;
-    assert_array_equals(pixel, expectedColor, description);
+  return pixel.every((c, i) => c === expectedColor[i]);
+}
+
+// Returns a Promise that resolves only once the placeholder canvas contents
+// have been updated, which may take an arbitrary number of scheduling
+// iterations.
+function waitForPlaceholderImage() {
+  return new Promise(resolve => {
+    var tryVerifyPlaceholderImage = function() {
+      if (!verifyImage(canvas, kGreen)) {
+        setTimeout(tryVerifyPlaceholderImage, 4);
+        return;
+      }
+
+      resolve();
+    };
+
+    setTimeout(tryVerifyPlaceholderImage);
   });
 }
+
+waitForPlaceholderImage().then(() => {
+  var testImage = new Image;
+  testImage.src = canvas.toDataURL();
+  testImage.onload = function() {
+    t.step(() => {
+      assert_true(verifyImage(canvas, kGreen),
+                  "verify that toDataURL works on placeholder canvas.");
+    });
+    canvas.toBlob(blob => {
+      createImageBitmap(blob).then(image => {
+        t.step(() => {
+          assert_true(verifyImage(image, kGreen),
+                      "verify that toBlob works on placeholder canvas.");
+        });
+        t.done();
+      })
+    });
+  }
+});
 </script>