Attempt to deflake webgl-composite-modes-tabswitching.html

The test is failing because it is performing a compositor frame while
hidden. The test uses runAfterLayoutAndPaint() in ways it does not need
to, so move it to use requestAnimationFrame() directly to see if that
helps. While doing so, I noticed that the triangles drawn while hidden
are not lost if a requestAnimationFrame() draws while inside the event
listener for page visibility. That is now documented in a comment, with
a double call to requestAnimationFrame() to work around it.

R=kbr@chromium.org

Bug: 1083585
Change-Id: Iefb9a49f7ef337b86f9de898fa71a96cf65d0513
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2209331Reviewed-by: Kenneth Russell <kbr@chromium.org>
Commit-Queue: danakj <danakj@chromium.org>
Cr-Commit-Position: refs/heads/master@{#770286}

third_party/blink/web_tests/fast/webgl/webgl-composite-modes-tabswitching.html

@@ -43,7 +43,6 @@ void main() {
 }
 </script>
 <script src="resources/webgl-test-utils.js"></script>
-<script src="../../resources/run-after-layout-and-paint.js"></script>
 <script>
 
 var ctxs = []
@@ -53,8 +52,11 @@ document.getElementById("description").style.top = "-5000px";
 
 for (var i=0; i<8; ++i) {
     var attrs = {
+        // The bottom row has 'alpha': true.
         'alpha': (i >= 4),
+        // The 3rd and 4th column has 'preserveDrawingBuffer': true.
         'preserveDrawingBuffer': (i % 4) >= 2,
+        // The 2nd and 4th column has 'antialias': true.
         'antialias': (i % 2) == 1
     };
     var can = document.createElement('canvas');
@@ -115,26 +117,38 @@ function repaintOnVisiblePage() {
     // Check if WebGL draws this frame correctly, because WebGL implementation
     // clears temporary cache when page is hidden.
     drawAll(60);
+
     if (window.testRunner) {
         testRunner.notifyDone();
     }
 }
 
 function repaintOnHiddenPage() {
-    setMainWindowHidden(true).then(() => {
-        // Although page is hidden, WebGL must draw this frame.
-        drawAll(30);
-        setMainWindowHidden(false).then(() => {
-            runAfterLayoutAndPaint(repaintOnVisiblePage);
-        });
+    // Although page is hidden, WebGL must draw this frame.
+    drawAll(30);
+
+    setMainWindowHidden(false).then(() => {
+        // If we requestAnimationFrame() here and draw, the triangles drawn
+        // while hidden end up being preserved even when preserveDrawingBuffer
+        // is false. That seems like it may be a bug? If we request a 2nd frame
+        // before we draw, then the triangles drawn while hidden are lost.
+        requestAnimationFrame(() => requestAnimationFrame(repaintOnVisiblePage));
     });
 }
 
-function runRepaintTest() {
+function firstPaintOnVisiblePage() {
     drawAll(0);
+
+    // We can't requestAnimationFrame() here because the window will be hidden
+    // so it won't happen. Instead, we draw without that request.
+    setMainWindowHidden(true).then(repaintOnHiddenPage);
+}
+
+function runRepaintTest() {
     if (window.testRunner) {
         testRunner.waitUntilDone();
     }
-    runAfterLayoutAndPaint(repaintOnHiddenPage);
+
+  requestAnimationFrame(firstPaintOnVisiblePage);
 }
 </script>

third_party/blink/web_tests/resources/visibility.js

 'use strict';
 
 function setMainWindowHidden(hidden) {
-  if (window.testRunner)
-    testRunner.setMainWindowHidden(hidden);
   return new Promise((resolve, reject) => {
-    if (document.visibilityState == (hidden ? "hidden" : "visible"))
+    if (!window.testRunner) {
+      reject("no window.testRunner present");
+      return;
+    }
+    if (document.visibilityState == (hidden ? "hidden" : "visible")) {
       reject("setMainWindowHidden(" + hidden + ") called but already " + hidden);
+      return;
+    }
     document.addEventListener("visibilitychange", resolve, {once:true});
+    testRunner.setMainWindowHidden(hidden);
   });
 }