Bug 1771177 [wpt PR 34202] - Replace setTimeout with rAF in the selec…

…t-event.html test, a=testonly

Automatic update from web-platform-tests
Replace setTimeout with rAF in the select-event.html  test

The previous code used a 200ms timeout to let events fire, but that made
the test take a very long time (~34s for all browsers). Two rAF() loops
are now used instead, which helped reduce the total test time to ~3.4s.

Another change in this CL is to use `element.addEventListener` to make
it easier to handle events only once, and use more modern syntax.

Changing the event listener code exposed more failures that
weren't caught by the prior test. crbug.com/1329942 tracks work
to fix these failures.

Fixed: 1161590
Bug: 1329942
Change-Id: I150dfbe0b381599f3d24da94a2e2f4af6a6b6f75
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3665518
Reviewed-by: Mason Freed <[email protected]>
Commit-Queue: Mason Freed <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1008419}

--

wpt-commits: 113fc44bf3186a6aafc3262ce9aa1b4ba7a0c5fe
wpt-pr: 34202

testing/web-platform/tests/html/semantics/forms/textfieldselection/select-event.html

@@ -59,12 +59,14 @@
   }
 ];
 
- function initialize(el, t) {
+function waitForRender() {
+  return new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+}
+
+function initialize(el) {
   el.setRangeText("foobar", 0, el.value.length, "start");
   // Make sure to flush async dispatches
-  return new Promise(resolve => {
-    t.step_timeout(resolve, 200);
-  });
+  return waitForRender();
 }
 
 els.forEach((el) => {
@@ -74,7 +76,7 @@
     // promise_test instead of async_test is important because these need to happen in sequence (to test that events
     // fire if and only if the selection changes).
     promise_test(async t => {
-      await initialize(el, t);
+      await initialize(el);
 
       const watcher = new EventWatcher(t, el, "select");
 
@@ -89,59 +91,52 @@
       return promise;
     }, `${elLabel}: ${action.label}`);
 
-    promise_test(t => {
+    promise_test(async t => {
       el.onselect = t.unreached_func("the select event must not fire the second time");
 
       action.action(el);
 
-      return new Promise(resolve => {
-        t.step_timeout(() => {
-          el.onselect = null;
-          resolve();
-        }, 200);
-      });
+      await waitForRender();
+      el.onselect = null;
     }, `${elLabel}: ${action.label} a second time (must not fire select)`);
 
     promise_test(async t => {
       const element = el.cloneNode(true);
-
-      element.onselect = e => {
-        element.onselect = null;
-      };
+      let fired = false;
+      element.addEventListener('select', () => fired = true, { once: true });
 
       action.action(element);
 
-      // step_wait properly timeouts before the whole test collapses
-      await t.step_wait(() => !element.onselect, "event didn't fire", 200, 10);
+      await waitForRender();
+      assert_true(fired, "event didn't fire");
+
     }, `${elLabel}: ${action.label} disconnected node`);
 
     // Intentionally still using promise_test, as assert_unreachable does not
     // make the test fail inside a listener while t.unreached_func() does.
     promise_test(async t => {
       const element = el.cloneNode(true);
       let fired = false;
+      element.addEventListener('select', () => fired = true, { once: true });
 
-      element.onselect = () => fired = true;
       action.action(element);
-      assert_false(fired, "the select event must not fire synchronously")
 
-      await t.step_wait(() => fired, "event didn't fire", 200, 10);
+      assert_false(fired, "the select event must not fire synchronously");
+      await waitForRender();
+      assert_true(fired, "event didn't fire");
     }, `${elLabel}: ${action.label} event queue`);
 
-    promise_test(t => {
+    promise_test(async t => {
       const element = el.cloneNode(true);
+      let selectCount = 0;
+      element.addEventListener('select', () => ++selectCount);
       assert_equals(element.selectionEnd, 0);
 
-      element.onselect = () => {
-        element.onselect = t.unreached_func("the select event must not fire twice");
-      };
-
       action.action(element);
       action.action(element);
 
-      return new Promise(resolve => {
-        t.step_timeout(resolve, 200);
-      });
+      await waitForRender();
+      assert_equals(selectCount, 1, "the select event must not fire twice");
     }, `${elLabel}: ${action.label} twice in disconnected node (must fire select only once)`);
   });
 });