Use a canvas to check pixels in offscreen canvas printing tests

Recent mojo changes have caused flakiness in ofscreen canvas printing
tests because the test can finish before the canvas has been able to
draw to the screen. Instead of asking the offscreen canvas for a pixel
directly, draw that canvas to an onscreen one and test that for
completion.

We're still testing the ability of an offscreen canvas to print, the on-
screen version is only used to solve a race condition.

Bug: 921719
Change-Id: I2725c309a9878f7ba74d126f03a7d2a1f39b435b
Reviewed-on: https://chromium-review.googlesource.com/c/1470526
Commit-Queue: Aaron Krajeski <aaronhk@chromium.org>
Reviewed-by: Fernando Serboncini <fserb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#631827}
diff --git a/third_party/blink/web_tests/TestExpectations b/third_party/blink/web_tests/TestExpectations
index 030d4fb..15d2542 100644
--- a/third_party/blink/web_tests/TestExpectations
+++ b/third_party/blink/web_tests/TestExpectations
@@ -5911,14 +5911,8 @@
 # production code. Because such timing bugs are relatively common in tests and it would thus be very
 # difficult to land the dispatch change without some temporary breakage, these tests are disabled
 # while they can be investigated.
-crbug.com/921719 printing/offscreencanvas-2d-printing.html  [ Skip ]
-crbug.com/921719 printing/offscreencanvas-webgl-printing.html  [ Skip ]
 crbug.com/921719 scrollbars/mock-scrollbars.html [ Skip ]
-crbug.com/921719 virtual/layout_ng_experimental/printing/offscreencanvas-2d-printing.html [ Skip ]
-crbug.com/921719 virtual/layout_ng_experimental/printing/offscreencanvas-webgl-printing.html [ Skip ]
 crbug.com/921719 virtual/prefer_compositing_to_lcd_text/scrollbars/mock-scrollbars.html [ Skip ]
-crbug.com/921719 virtual/threaded/printing/offscreencanvas-2d-printing.html [ Skip ]
-crbug.com/921719 virtual/threaded/printing/offscreencanvas-webgl-printing.html [ Skip ]
 crbug.com/922951 animations/direction-and-fill/fill-mode-iteration-count-non-integer.html [ Skip ]
 crbug.com/922951 animations/direction-and-fill/fill-mode-missing-from-to-keyframes.html [ Skip ]
 crbug.com/922951 animations/direction-and-fill/fill-mode-transform.html [ Skip ]
diff --git a/third_party/blink/web_tests/printing/offscreencanvas-2d-printing.html b/third_party/blink/web_tests/printing/offscreencanvas-2d-printing.html
index 5622ba0..ac9d9e3 100644
--- a/third_party/blink/web_tests/printing/offscreencanvas-2d-printing.html
+++ b/third_party/blink/web_tests/printing/offscreencanvas-2d-printing.html
@@ -1,37 +1,41 @@
 <!DOCTYPE html>
 <canvas id='canvas'></canvas>
 <script>
-  var canvas = document.getElementById('canvas');
-  canvas.width = canvas.height = 100;
-  var offscreenContext = canvas.transferControlToOffscreen().getContext("2d");
-  offscreenContext.fillStyle = "green";
-  offscreenContext.fillRect(0, 0, 100, 100);
+var documentCanvas = document.getElementById('canvas');
+documentCanvas.width = documentCanvas.height = 100;
+var offscreenContext = documentCanvas.transferControlToOffscreen().getContext(
+  "2d");
+offscreenContext.fillStyle = "green";
+offscreenContext.fillRect(0, 0, 100, 100);
 
-  // Make sure that the canvas has been drawn to before capturing
-  function waitForCanvasToDraw() {
-    return new Promise(resolve => {
-      var testPixel = function() {
-        var pixel = offscreenContext.getImageData(0, 0, 1, 1).data;
-        var greenChannel = pixel[1];
-        if (greenChannel != 128) {
-          requestAnimationFrame(testPixel);
-          return;
-        } else {
-          resolve();
-        }
+// For testing that the offscreen canvas has drawn
+var testCanvas = document.createElement("canvas");
+var testContext = testCanvas.getContext("2d");
+
+// Make sure that the canvas has been drawn to before capturing
+function waitForCanvasToDraw() {
+  return new Promise(resolve => {
+    var testPixel = function() {
+      testContext.drawImage(documentCanvas, 0, 0);
+      // Get the pixel in the upper left corner
+      var pixel = testContext.getImageData(0, 0, 1, 1).data;
+      if (pixel[0] === 0 && pixel[1] === 0 && pixel[2] === 0) {
+        // pixel is still empty, wait
+        requestAnimationFrame(testPixel);
+        return;
+      } else {
+        resolve();
       }
-      testPixel();
-    });
-  }
+    }
+    testPixel();
+  });
+}
 
-  if (window.testRunner) {
-    testRunner.setPrinting();
-    testRunner.waitUntilDone();
-    waitForCanvasToDraw().then(() => {
-      // Wait for all testRunner javascript to complete
-      window.setTimeout(() => {
-        testRunner.notifyDone()
-      }, 0);
-    });
-  }
+if (window.testRunner) {
+  testRunner.setPrinting();
+  testRunner.waitUntilDone();
+  waitForCanvasToDraw().then(() => {
+    testRunner.notifyDone()
+  });
+}
 </script>
diff --git a/third_party/blink/web_tests/printing/offscreencanvas-webgl-printing.html b/third_party/blink/web_tests/printing/offscreencanvas-webgl-printing.html
index 0376385..6581587 100644
--- a/third_party/blink/web_tests/printing/offscreencanvas-webgl-printing.html
+++ b/third_party/blink/web_tests/printing/offscreencanvas-webgl-printing.html
@@ -1,41 +1,42 @@
 <!DOCTYPE html>
 <canvas id='canvas'></canvas>
 <script>
-  var canvas = document.getElementById('canvas');
-  canvas.width = canvas.height = 100;
-  var offscreenContext = canvas.transferControlToOffscreen().getContext(
-    "webgl", {preserveDrawingBuffer: true});
-  offscreenContext.clearColor(0, 1, 0, 1);
-  offscreenContext.clear(offscreenContext.COLOR_BUFFER_BIT);
-  var pixel = new Uint8Array(4);
+var documentCanvas = document.getElementById('canvas');
+documentCanvas.width = documentCanvas.height = 100;
+var offscreenContext = documentCanvas.transferControlToOffscreen().getContext(
+  "webgl", {preserveDrawingBuffer: true});
+offscreenContext.clearColor(0, 1, 0, 1);
+offscreenContext.clear(offscreenContext.COLOR_BUFFER_BIT);
+var pixel = new Uint8Array(4);
 
-  // Make sure that the canvas has been drawn to before capturing
-  function waitForCanvasToDraw() {
-    return new Promise(resolve => {
-      var testPixel = function() {
-        offscreenContext.readPixels(0, 0, 1, 1,
-          offscreenContext.RGBA, offscreenContext.UNSIGNED_BYTE, pixel);
-        var greenChannel = pixel[1];
-        if (greenChannel != 255) { // The green channel
-          requestAnimationFrame(testPixel);
-          return;
-        } else {
-          resolve();
-        }
+// For testing that the offscreen canvas has drawn
+var testCanvas = document.createElement("canvas");
+var testContext = testCanvas.getContext("2d");
+
+// Make sure that the canvas has been drawn to before capturing
+function waitForCanvasToDraw() {
+  return new Promise(resolve => {
+    var testPixel = function() {
+      testContext.drawImage(documentCanvas, 0, 0);
+      // Get the pixel in the upper left corner
+      var pixel = testContext.getImageData(0, 0, 1, 1).data;
+      if (pixel[0] === 0 && pixel[1] === 0 && pixel[2] === 0) {
+        // pixel is still empty, wait
+        requestAnimationFrame(testPixel);
+        return;
+      } else {
+        resolve();
       }
-      testPixel();
-    });
-  }
+    }
+    testPixel();
+  });
+}
 
-  if (window.testRunner)
-  {
-    testRunner.setPrinting();
-    testRunner.waitUntilDone();
-    waitForCanvasToDraw().then(() => {
-      // Wait for all testRunner javascript to complete
-      window.setTimeout(() => {
-        testRunner.notifyDone()
-      }, 0);
-    });
-  }
+if (window.testRunner) {
+  testRunner.setPrinting();
+  testRunner.waitUntilDone();
+  waitForCanvasToDraw().then(() => {
+    testRunner.notifyDone()
+  });
+}
 </script>
\ No newline at end of file