Add timeouts for EventWatchers on CSS animation tests

Previously the test harness could timeout while waiting on the event
watcher. In this patch, a timeout was added to the watchers in cases
where the events should fire on the next animation frame. With the
change, we still see timeouts on individual tests, but no longer see
the test harness timing out.

Next steps:

1. Add animationcancel. For some reason, this event got overlooked
   previously and was never implemented. Adding this event resolves
   the majority of timeouts (confirmed in an experimental patch).

2. Reconnect and event delegate after calls to animation.effect.
   Currently, the lack of a delegate on the new effect halts the
   dispatching of subsequent animation events.

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

third_party/blink/web_tests/TestExpectations

@@ -3617,10 +3617,6 @@ crbug.com/626703 external/wpt/css/css-scoping/shadow-directionality-002.tentativ
 crbug.com/626703 external/wpt/css/css-scoping/shadow-directionality-001.tentative.html [ Failure ]
 crbug.com/626703 external/wpt/screen-orientation/orientation-reading.html [ Timeout ]
 crbug.com/626703 external/wpt/html/browsers/browsing-the-web/unloading-documents/prompt-and-unload-script-closeable.html [ Timeout ]
-crbug.com/626703 external/wpt/css/css-animations/CSSAnimation-effect.tentative.html [ Timeout ]
-crbug.com/626703 virtual/threaded/external/wpt/css/css-animations/CSSAnimation-effect.tentative.html [ Timeout ]
-crbug.com/626703 external/wpt/css/css-animations/event-dispatch.tentative.html [ Timeout ]
-crbug.com/626703 virtual/threaded/external/wpt/css/css-animations/event-dispatch.tentative.html [ Timeout ]
 crbug.com/626703 external/wpt/html/infrastructure/urls/resolving-urls/query-encoding/navigation.sub.html?encoding=x-cp1251 [ Timeout ]
 crbug.com/626703 external/wpt/html/infrastructure/urls/resolving-urls/query-encoding/navigation.sub.html?encoding=utf8 [ Timeout ]
 crbug.com/626703 external/wpt/css/css-transforms/transform-box/view-box-mutation.html [ Failure ]

third_party/blink/web_tests/external/wpt/css/css-animations/CSSAnimation-effect.tentative-expected.txt

+This is a testharness.js-based test.
+FAIL Setting a null effect on a running animation fires an animationend event assert_true: Timed out waiting for animationend expected true got false
+PASS Replacing an animation's effect with an effect that targets a different property should update both properties
+PASS Replacing an animation's effect with a shorter one that should have already finished, the animation finishes immediately
+PASS A play-pending animation's effect whose effect is replaced still exits the pending state
+FAIL CSS animation events are dispatched at the original element even after setting an effect with a different target element assert_true: Timed out waiting for animationstart expected true got false
+FAIL After replacing a finished animation's effect with a longer one it fires an animationstart event assert_true: Timed out waiting for animationstart expected true got false
+PASS Replacing the effect of a CSSAnimation causes subsequent changes to corresponding animation-* properties to be ignored
+Harness: the test ran to completion.
+

third_party/blink/web_tests/external/wpt/css/css-animations/CSSAnimation-effect.tentative.html

@@ -26,7 +26,8 @@ promise_test(async t => {
   div.style.animation = 'anim 100s';
 
   const watcher = new EventWatcher(t, div, [ 'animationend',
-                                             'animationcancel' ]);
+                                             'animationcancel' ],
+                                   fastEventsTimeout);
   const animation = div.getAnimations()[0];
   await animation.ready;
 
@@ -90,7 +91,8 @@ promise_test(async t => {
   const div1 = addDiv(t);
   const div2 = addDiv(t);
 
-  const watcher1 = new EventWatcher(t, div1, 'animationstart');
+  const watcher1 = new EventWatcher(t, div1, 'animationstart',
+                                    fastEventsTimeout);
   // Watch |div2| as well to ensure it does *not* get events.
   const watcher2 = new EventWatcher(t, div2, 'animationstart');
 
@@ -114,7 +116,8 @@ promise_test(async t => {
   const div = addDiv(t);
   const watcher = new EventWatcher(t, div, [ 'animationstart',
                                              'animationend',
-                                             'animationcancel' ]);
+                                             'animationcancel' ],
+                                   fastEventsTimeout);
   div.style.animation = 'anim 100s';
   const animation = div.getAnimations()[0];
   animation.finish();

third_party/blink/web_tests/external/wpt/css/css-animations/event-dispatch.tentative-expected.txt

+This is a testharness.js-based test.
+PASS Idle -> Active
+PASS Idle -> After
+PASS Before -> Active
+PASS Before -> After
+FAIL Active -> Idle, display: none assert_true: Timed out waiting for animationcancel expected true got false
+FAIL Active -> Idle, setting Animation.timeline = null promise_test: Unhandled rejection with value: object "TypeError: Cannot assign to read only property 'timeline' of object '#<CSSAnimation>'"
+FAIL Active -> Idle, calling Animation.cancel() assert_true: Timed out waiting for animationcancel expected true got false
+FAIL Active -> Before assert_true: Timed out waiting for animationend expected true got false
+PASS Active -> After
+FAIL After -> Before assert_true: Timed out waiting for animationstart, animationend expected true got false
+FAIL After -> Active assert_true: Timed out waiting for animationstart expected true got false
+FAIL Active -> Active (forwards) assert_equals: expected 200 but got 100
+FAIL Active -> Active (backwards) assert_true: Timed out waiting for animationstart expected true got false
+FAIL Active -> Idle -> Active: animationstart is fired by restarting animation assert_true: Timed out waiting for animationcancel expected true got false
+FAIL Negative playbackRate sanity test(Before -> Active -> Before) assert_true: Timed out waiting for animationstart expected true got false
+PASS Redundant change, before -> active, then back
+PASS Redundant change, before -> after, then back
+PASS Redundant change, active -> before, then back
+PASS Redundant change, active -> after, then back
+PASS Redundant change, after -> before, then back
+PASS Redundant change, after -> active, then back
+FAIL Call Animation.cancel after canceling animation. assert_true: Timed out waiting for animationcancel expected true got false
+FAIL Restart animation after canceling animation immediately. assert_true: Timed out waiting for animationcancel, animationstart expected true got false
+FAIL Call Animation.cancel after restarting animation immediately. assert_true: Timed out waiting for animationcancel expected true got false
+FAIL Set timeline and play transition after clearing the timeline. promise_test: Unhandled rejection with value: object "TypeError: Cannot assign to read only property 'timeline' of object '#<CSSAnimation>'"
+FAIL Set null target effect after canceling the animation. assert_true: Timed out waiting for animationcancel expected true got false
+FAIL Cancel the animation after clearing the target effect. assert_true: Timed out waiting for animationend expected true got false
+Harness: the test ran to completion.
+

third_party/blink/web_tests/external/wpt/css/css-animations/event-dispatch.tentative.html

@@ -21,7 +21,8 @@ const setupAnimation = (t, animationStyle) => {
   const watcher = new EventWatcher(t, div, [ 'animationstart',
                                              'animationiteration',
                                              'animationend',
-                                             'animationcancel' ]);
+                                             'animationcancel' ],
+                                   fastEventsTimeout);
   const animation = div.getAnimations()[0];
 
   return { animation, watcher, div };

third_party/blink/web_tests/external/wpt/css/css-animations/support/testcommon.js

@@ -191,6 +191,15 @@ function waitForAnimationFrames(frameCount, onFrame) {
   });
 }
 
+/**
+ * Timeout function used for tests with EventWatchers when all animation events
+ * should be received on the next animation frame. If two frames pass before
+ * receiving the expected events, then we can immediate fail the test.
+ */
+function fastEventsTimeout() {
+  return waitForAnimationFrames(2);
+};
+
 /**
  * Wrapper that takes a sequence of N animations and returns:
  *