Fix timeout failure for wpt select-event.html

WPT select-event.html test needs to wait for rendering in an
interopability manner before doing select event assertions.

The previous implementation of using 2 requestAnimationFrame()
causes Firefox test to be flaky as there wasn't a guarantee that
the rendering will be done before by then [1]. However, using
setTimeout(resolve, 0) breaks chrome as it doesn't guarantee
two frames are processed as chrome schedules through the next
animation frame. By having both, we should fix this flakiness
for all browsers.

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=1785615

Fixed: 1420110
Change-Id: Iaeaffbb04786b94b11daa3ed816d8679e0593d0d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4296974
Reviewed-by: Mason Freed <masonf@chromium.org>
Commit-Queue: Di Zhang <dizhangg@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1112425}

third_party/blink/web_tests/TestExpectations

@@ -2695,7 +2695,6 @@ crbug.com/1012242 external/wpt/webvtt/rendering/cues-with-video/processing-model
 # Flaky tests (see also crbug.com/626703)
 crbug.com/1088475 external/wpt/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries.html [ Failure Pass Timeout ]
 crbug.com/1088475 external/wpt/webvtt/rendering/cues-with-video/processing-model/embedded_style_media_queries_resized.html [ Failure Pass Timeout ]
-crbug.com/626703 external/wpt/html/semantics/forms/textfieldselection/select-event.html [ Failure Pass Timeout ]
 
 # FontFace object failures detected by WPT test
 crbug.com/965409 external/wpt/css/css-font-loading/fontface-descriptor-updates.html [ Failure ]

third_party/blink/web_tests/external/wpt/common/rendering-utils.js

@@ -7,12 +7,14 @@
  */
 function waitForAtLeastOneFrame() {
   return new Promise(resolve => {
-    // Different web engines work slightly different on this area but waiting
-    // for two requestAnimationFrames() to happen, one after another, should be
+    // Different web engines work slightly different on this area but 1) waiting
+    // for two requestAnimationFrames() to happen one after another and 2)
+    // adding a step_timeout(0) to guarantee events have finished should be
     // sufficient to ensure at least one frame has been generated anywhere.
+    // See https://bugzilla.mozilla.org/show_bug.cgi?id=1785615
     window.requestAnimationFrame(() => {
       window.requestAnimationFrame(() => {
-        resolve();
+        setTimeout(resolve, 0);
       });
     });
   });

third_party/blink/web_tests/external/wpt/html/semantics/forms/textfieldselection/select-event.html

@@ -6,6 +6,7 @@
 <link rel=help href="https://html.spec.whatwg.org/multipage/#textFieldSelection">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="/common/rendering-utils.js"></script>
 <div id="log"></div>
 
 <textarea>foobar</textarea>
@@ -59,14 +60,10 @@
   }
 ];
 
-function waitForRender() {
-  return new Promise(resolve => setTimeout(resolve, 0));
-}
-
 function initialize(el) {
   el.setRangeText("foobar", 0, el.value.length, "start");
   // Make sure to flush async dispatches
-  return waitForRender();
+  return waitForAtLeastOneFrame();
 }
 
 els.forEach((el) => {
@@ -96,7 +93,7 @@
 
       action.action(el);
 
-      await waitForRender();
+      await waitForAtLeastOneFrame();
       el.onselect = null;
     }, `${elLabel}: ${action.label} a second time (must not fire select)`);
 
@@ -107,7 +104,7 @@
 
       action.action(element);
 
-      await waitForRender();
+      await waitForAtLeastOneFrame();
       assert_true(fired, "event didn't fire");
 
     }, `${elLabel}: ${action.label} disconnected node`);
@@ -122,7 +119,7 @@
       action.action(element);
 
       assert_false(fired, "the select event must not fire synchronously");
-      await waitForRender();
+      await waitForAtLeastOneFrame();
       assert_true(fired, "event didn't fire");
     }, `${elLabel}: ${action.label} event queue`);
 
@@ -135,7 +132,7 @@
       action.action(element);
       action.action(element);
 
-      await waitForRender();
+      await waitForAtLeastOneFrame();
       assert_equals(selectCount, 1, "the select event must not fire twice");
     }, `${elLabel}: ${action.label} twice in disconnected node (must fire select only once)`);
   });