Speculative deflake of pointerevent test

pointerevent_iframe-touch-action-none_touch.html could timeout.
An explanation for the timeout is that it was only waiting on the
subframe to load, and it was possible to start the injection of
synthetic events before the subframe has had a chance to add event
listeners.  If the child frame fails to catch the events, it won't
send the results back to the parent and a timeout results.

Added loadFrameAndExecuteScript to a support file for standardization
of handling subframes with script. Cleaned up implementation to make
better use of shared code.

The tes

Bug: 40770210
Change-Id: I5fe6983190810fde072cb3968419aa3f26af4d48
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7901957
Reviewed-by: Mustaq Ahmed <mustaq@chromium.org>
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1643870}

Author: kevers-google

pointerevents/pointerevent_iframe-touch-action-none_touch.html

@@ -25,32 +25,14 @@ <h2 id="pointerTypeDescription"></h2>
   <script>
     'use strict';
 
-    function loadFrame() {
-      return new Promise(resolve => {
-        const frame = document.getElementById('target');
-        frame.onload = resolve;
-        frame.src = 'resources/iframe-touch-action-none-subframe.html';
-      });
-    }
-
-    function messageReceived() {
-      return new Promise(resolve => {
-        window.addEventListener('message', (event) => {
-          if (event.source != target.contentWindow) {
-            return;
-          }
-          if (event.data && event.data.type == "subframe-event") {
-            resolve(event.data.eventType);
-          }
-        });
-      });
-    }
-
     promise_test(async t => {
       const target = document.getElementById("target");
-      await loadFrame();
+      await loadFrameAndExcecuteScript(
+          document.getElementById('target'),
+          'resources/iframe-touch-action-none-subframe.html');
 
-      const messagePromise = messageReceived();
+      const messagePromise =
+          getMessageData('subframe-event', frames[0]);
 
       await new test_driver.Actions()
             .addPointer("pointer1", "touch")
@@ -60,8 +42,8 @@ <h2 id="pointerTypeDescription"></h2>
             .pointerUp()
             .send();
 
-      const eventType = await messagePromise;
-      assert_equals(eventType, 'pointercancel');
+      const result = await messagePromise;
+      assert_equals(result.eventType, 'pointercancel');
     }, 'touch iframe received pointercancel');
   </script>
 </html>

pointerevents/pointerevent_support.js

@@ -499,6 +499,22 @@ function getEvent(event_type, target, test) {
   });
 }
 
+// Returns a promise that resolves when a child frame posts a subframe-ready
+// message back to the parent and style rules have been applied. When the child
+// frame needs to execute script, such as setting up listeners, it is
+// insufficient to wait for the frame to be loaded, as the load event is
+// received once the child frame's document has been parsed, which is before
+// script execution or style update.
+function loadFrameAndExcecuteScript(frame, src) {
+  return new Promise(async resolve => {
+    const ready =  getMessageData('subframe-ready', frame.contentWindow);
+    frame.src = src;
+    await ready;
+    // Ensure that the child frame has been properly styled.
+    requestAnimationFrame(() => requestAnimationFrame(resolve));
+  });
+}
+
 // Returns a |Promise| that gets resolved with |event.data| when |window|
 // receives from |source| a "message" event whose |event.data.type| matches the
 // string |message_data_type|.

pointerevents/resources/iframe-touch-action-none-subframe.html

@@ -22,5 +22,7 @@
             eventType,
             handler);
     });
+
+    parent.postMessage({ type: 'subframe-ready' }, '*');
   </script>
 </html>