Fix timeout in update-and-send-events-replacment.html

The handling of iframe load events is finicky as indicated in the open
WHATWG issue:

https://github.com/whatwg/html/issues/490

This patch switches the wait mechanism to one that is well behaved
across browsers.  The new process arms the listener before inserting the
iframe into the document.

Bug: 1059963
Change-Id: I372d4fdae3b270699aedf2c5a4de4429e62f42a5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2096782Reviewed-by: Yi Gu <yigu@chromium.org>
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#748853}

third_party/blink/web_tests/TestExpectations

@@ -3239,7 +3239,6 @@ crbug.com/626703 [ Mac10.13 ] external/wpt/preload/download-resources.html [ Fai
 crbug.com/626703 [ Retina ] external/wpt/preload/download-resources.html [ Failure Timeout ]
 crbug.com/626703 [ Mac10.10 ] external/wpt/preload/download-resources.html [ Failure Timeout ]
 crbug.com/626703 external/wpt/css/css-writing-modes/text-combine-upright-digits-001-manual.html [ Skip ]
-crbug.com/626703 external/wpt/web-animations/timing-model/timelines/update-and-send-events-replacement.html [ Timeout ]
 crbug.com/626703 external/wpt/webrtc/RTCRtpTransceiver.https.html [ Crash Timeout ]
 crbug.com/626703 external/wpt/css/css-writing-modes/text-combine-upright-all-001-manual.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-writing-modes/text-combine-upright-digits-002-manual.html [ Skip ]

third_party/blink/web_tests/external/wpt/web-animations/interfaces/DocumentOrShadowRoot/getAnimations.html

@@ -13,16 +13,6 @@
 
 const gKeyFrames = { 'marginLeft': ['100px', '200px'] };
 
-async function insert_frame_and_await_load(test, iframe, document) {
-  const eventWatcher = new EventWatcher(test, iframe, ['load']);
-  const event_promise = eventWatcher.wait_for('load');
-
-  document.body.appendChild(iframe);
-  test.add_cleanup(() => { document.body.removeChild(iframe); });
-
-  await event_promise;
-}
-
 test(t => {
   assert_equals(document.getAnimations().length, 0,
                 'getAnimations returns an empty sequence for a document ' +
@@ -78,7 +68,7 @@ test(t => {
 
 promise_test(async t => {
   const iframe = document.createElement('iframe');
-  insert_frame_and_await_load(t, iframe, document)
+  insertFrameAndAwaitLoad(t, iframe, document)
 
   const div = createDiv(t, iframe.contentDocument)
   const effect = new KeyframeEffect(div, null, 100 * MS_PER_SEC);
@@ -98,8 +88,8 @@ promise_test(async t => {
   const iframe1 = document.createElement('iframe');
   const iframe2 = document.createElement('iframe');
 
-  insert_frame_and_await_load(t, iframe1, document);
-  insert_frame_and_await_load(t, iframe2, document);
+  insertFrameAndAwaitLoad(t, iframe1, document);
+  insertFrameAndAwaitLoad(t, iframe2, document);
 
   const div_frame1 = createDiv(t, iframe1.contentDocument)
   const div_main_frame = createDiv(t)

third_party/blink/web_tests/external/wpt/web-animations/testcommon.js

@@ -180,6 +180,16 @@ function waitForNextFrame() {
   });
 }
 
+async function insertFrameAndAwaitLoad(test, iframe, document) {
+  const eventWatcher = new EventWatcher(test, iframe, ['load']);
+  const event_promise = eventWatcher.wait_for('load');
+
+  document.body.appendChild(iframe);
+  test.add_cleanup(() => { document.body.removeChild(iframe); });
+
+  await event_promise;
+}
+
 // Returns 'matrix()' or 'matrix3d()' function string generated from an array.
 function createMatrixFromArray(array) {
   return (array.length == 16 ? 'matrix3d' : 'matrix') + `(${array.join()})`;

third_party/blink/web_tests/external/wpt/web-animations/timing-model/timelines/update-and-send-events-replacement-expected.txt

+This is a testharness.js-based test.
+PASS Removes an animation when another covers the same properties
+PASS Removes an animation after another animation finishes
+PASS Removes an animation after multiple other animations finish
+PASS Removes an animation after it finishes
+PASS Removes an animation after seeking another animation
+PASS Removes an animation after seeking it
+PASS Removes an animation after updating the fill mode of another animation
+PASS Removes an animation after updating its fill mode
+PASS Removes an animation after updating another animation's effect to one with different timing
+PASS Removes an animation after updating its effect to one with different timing
+FAIL Removes an animation after updating another animation's timeline promise_test: Unhandled rejection with value: object "TypeError: Cannot assign to read only property 'timeline' of object '#<Animation>'"
+FAIL Removes an animation after updating its timeline promise_test: Unhandled rejection with value: object "TypeError: Cannot assign to read only property 'timeline' of object '#<Animation>'"
+PASS Removes an animation after updating another animation's effect's properties
+PASS Removes an animation after updating its effect's properties
+PASS Removes an animation after updating another animation's effect to one with different properties
+PASS Removes an animation after updating its effect to one with different properties
+PASS Removes an animation when another animation uses a shorthand
+PASS Removes an animation that uses a shorthand
+FAIL Removes an animation by another animation using logical properties assert_equals: expected "removed" but got "active"
+FAIL Removes an animation using logical properties assert_equals: expected "removed" but got "active"
+FAIL Removes an animation by another animation using logical properties after updating the context assert_equals: expected "removed" but got "active"
+PASS Removes an animation after updating another animation's effect's target
+PASS Removes an animation after updating its effect's target
+PASS Removes an animation after updating another animation's effect to one with a different target
+PASS Removes an animation after updating its effect to one with a different target
+PASS Does NOT remove a CSS animation tied to markup
+FAIL Removes a CSS animation no longer tied to markup assert_equals: expected "removed" but got "active"
+PASS Does NOT remove a CSS transition tied to markup
+FAIL Removes a CSS transition no longer tied to markup assert_equals: expected "removed" but got "active"
+PASS Dispatches an event when removing
+PASS Does NOT dispatch a remove event twice
+PASS Does NOT remove an animation after making a redundant change to another animation's current time
+PASS Does NOT remove an animation after making a redundant change to its current time
+FAIL Does NOT remove an animation after making a redundant change to another animation's timeline promise_test: Unhandled rejection with value: object "TypeError: Cannot assign to read only property 'timeline' of object '#<Animation>'"
+FAIL Does NOT remove an animation after making a redundant change to its timeline promise_test: Unhandled rejection with value: object "TypeError: Cannot assign to read only property 'timeline' of object '#<Animation>'"
+PASS Does NOT remove an animation after making a redundant change to another animation's effect's properties
+PASS Does NOT remove an animation after making a redundant change to its effect's properties
+FAIL Updates ALL timelines before checking for replacement promise_test: Unhandled rejection with value: object "TypeError: Cannot assign to read only property 'timeline' of object '#<Animation>'"
+FAIL Dispatches remove events after finish events assert_array_equals: lengths differ, expected array ["animA:finish", "animB:finish", "animA:remove"] length 3, got ["animA:finish", "animB:finish", "animA:remove", "animA:finish"] length 4
+FAIL Fires remove event before requestAnimationFrame assert_true: Not expecting event, but got remove event expected true got false
+PASS Queues all remove events before running them
+PASS Performs removal in deeply nested iframes
+Harness: the test ran to completion.
+

third_party/blink/web_tests/external/wpt/web-animations/timing-model/timelines/update-and-send-events-replacement.html

@@ -988,18 +988,16 @@ promise_test(async t => {
 }, 'Queues all remove events before running them');
 
 promise_test(async t => {
-  const outerIframe = createElement(t, 'iframe');
+  const outerIframe = document.createElement('iframe');
+  insertFrameAndAwaitLoad(t, outerIframe, document);
   outerIframe.width = 10;
   outerIframe.height = 10;
 
-  await new Promise(resolve => outerIframe.addEventListener('load', resolve));
-
-  const innerIframe = createElement(t, 'iframe', outerIframe.contentDocument);
+  const innerIframe = document.createElement('iframe');
+  insertFrameAndAwaitLoad(t, innerIframe, outerIframe.contentDocument);
   innerIframe.width = 10;
   innerIframe.height = 10;
 
-  await new Promise(resolve => innerIframe.addEventListener('load', resolve));
-
   const div = createDiv(t, innerIframe.contentDocument);
 
   const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });