[animation worklet] Fix tests to not rely on the console log from worklet

For worklet animations that run via the main thread, the console log
from the worklet may not get back to the main thread within 2 frames.
To fix this, we can either wait longer, i.e. wait an extra frame, or not
rely on the console log from the worklet as what we do in this patch.

Bug: 887659
Change-Id: Ifb8619f571f51a7f5abe132a2c65d7a58f59d600
Reviewed-on: https://chromium-review.googlesource.com/c/1289430Reviewed-by: Majid Valipour <majidvp@chromium.org>
Commit-Queue: Yi Gu <yigu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#601293}

third_party/WebKit/LayoutTests/TestExpectations

@@ -5301,8 +5301,6 @@ crbug.com/886566 http/tests/csspaint/invalidation-content-image.html [ Pass Time
 
 # Enable AnimationWorklet tests for mainthread
 crbug.com/887659 animations/animationworklet/animation-worklet-inside-iframe.html [ Failure ]
-crbug.com/887659 animations/animationworklet/animator-animate.html [ Failure ]
-crbug.com/887659 animations/animationworklet/animator-with-options.html [ Failure ]
 crbug.com/887659 animations/animationworklet/worklet-animation-currentTime.html [ Failure ]
 crbug.com/887659 animations/animationworklet/worklet-animation-local-time-after-duration.html [ Failure ]
 

third_party/WebKit/LayoutTests/animations/animationworklet/animator-animate-expected.txt

-CONSOLE MESSAGE: line 4: test animator constructor called.
-CONSOLE MESSAGE: line 8: test animator animate called.
+CONSOLE MESSAGE: line 36: opacity of target is 0.5
 

third_party/WebKit/LayoutTests/animations/animationworklet/animator-animate.html

@@ -8,14 +8,8 @@
 </style>
 <script id="simple_animate" type="text/worklet">
 registerAnimator("test_animator", class {
-  constructor() {
-    console.log("test animator constructor called.");
-  }
   animate(currentTime, effect) {
-    if (!this.animated)
-        console.log("test animator animate called.");
-    effect.localTime = 0;
-    this.animated = true;
+    effect.localTime = 500;
   }
 });
 </script>
@@ -32,12 +26,14 @@ if (window.testRunner) {
 runInAnimationWorklet(
   document.getElementById('simple_animate').textContent
 ).then(_ => {
-  const effect = new KeyframeEffect(document.getElementById("target"), [{ opacity: 0 }], { duration: 1000 });
+  const target = document.getElementById('target');
+  const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 });
   const animation = new WorkletAnimation('test_animator', [effect], document.timeline, {});
   animation.play();
 
   if (window.testRunner) {
     waitTwoAnimationFrames( _ => {
+      console.log(`opacity of target is ${getComputedStyle(target).opacity}`);
       testRunner.notifyDone();
     });
   }

third_party/WebKit/LayoutTests/animations/animationworklet/animator-with-options-expected.txt

-CONSOLE MESSAGE: line 4: animator constructor with options called.
-CONSOLE MESSAGE: line 5: options.dict.id = 1
-CONSOLE MESSAGE: line 6: options.dict.name = test_name
-CONSOLE MESSAGE: line 7: options.string = test_string
-CONSOLE MESSAGE: line 11: test animator animate called.
+CONSOLE MESSAGE: line 44: opacity of target is 0.5
 

third_party/WebKit/LayoutTests/animations/animationworklet/animator-with-options.html

@@ -10,15 +10,10 @@
 <script id="animate_with_options" type="text/worklet">
 registerAnimator("test_animator", class {
   constructor(options) {
-    console.log("animator constructor with options called.");
-    console.log("options.dict.id = " + options.dict.id);
-    console.log("options.dict.name = " + options.dict.name);
-    console.log("options.string = " + options.string);
+    this.time_ = options.time;
   }
   animate(currentTime, effect) {
-    if (!this.animated)
-        console.log("test animator animate called.");
-    this.animated = true;
+    effect.localTime = this.time_;
   }
 });
 </script>
@@ -35,10 +30,10 @@ if (window.testRunner) {
 runInAnimationWorklet(
   document.getElementById('animate_with_options').textContent
 ).then(_ => {
-  const effect = new KeyframeEffect(document.getElementById("target"), [{ opacity: 0 }], { duration: 1000 });
+  const target = document.getElementById('target');
+  const effect = new KeyframeEffect(target, [{ opacity: 0 }], { duration: 1000 });
   const options = {
-    dict: { 'name': 'test_name', 'id': 1 },
-    string: 'test_string'
+    'time': 500
   };
   const animation = new WorkletAnimation('test_animator', [effect],
       document.timeline, options);
@@ -46,6 +41,7 @@ runInAnimationWorklet(
 
   if (window.testRunner) {
     waitTwoAnimationFrames( _ => {
+      console.log(`opacity of target is ${getComputedStyle(target).opacity}`);
       testRunner.notifyDone();
     });
   }