LibWeb: Use InternalAnimationTimeline in existing tests

Author: https://github.com/mattco98
Commit: 328ad9a2f0
Pull-request: https://github.com/SerenityOS/serenity/pull/23774

Tests/LibWeb/Text/expected/WebAnimations/animation-properties/currentTime.txt

@@ -1,5 +1,6 @@
    Animation with no timeline has null currentTime: true
 Animation that hasn't been played has null currentTime: true
 Played animation has a currentTime of 0: true
+Animation time after 100ms is correct
 New animation has not started animating: true
 Animation with currentTime set to end is finished: true

Tests/LibWeb/Text/input/WebAnimations/animation-properties/currentTime.html

@@ -2,7 +2,7 @@
 <div id="foo"></div>
 <script src="../../include.js"></script>
 <script>
-    promiseTest(async () => {
+    test(() => {
         const foo = document.getElementById("foo");
 
         let animation = new Animation(null, null);
@@ -11,14 +11,13 @@
         animation = new Animation(new KeyframeEffect(foo, []));
         println(`Animation that hasn't been played has null currentTime: ${animation.currentTime === null}`);
 
-        animation = foo.animate({ color: "red" }, { duration: 1000 });
+        const timeline = internals.createInternalAnimationTimeline();
+        animation = foo.animate({ color: "red" }, { duration: 1000, timeline });
         println(`Played animation has a currentTime of 0: ${animation.currentTime === 0}`);
 
-        await timeout(100);
-
-        // FIXME: Figure out how to consistently test timings
-        // if (animation.currentTime > 95 && animation.currentTime < 105)
-        //     println("Animation time after 100ms is correct");
+        timeline.setTime(100);
+        if (animation.currentTime === 100)
+            println("Animation time after 100ms is correct");
 
         animation = foo.animate({ opacity: [0, 1] }, { duration: 1000 });
         println(`New animation has not started animating: ${getComputedStyle(foo).opacity === "0"}`);

Tests/LibWeb/Text/input/WebAnimations/animation-properties/finished.html

@@ -4,15 +4,14 @@
 <script>
     promiseTest(async () => {
         const foo = document.getElementById("foo");
-        let animation = foo.animate({ opacity: [0, 1] }, { duration: 100 });
+        const timeline = internals.createInternalAnimationTimeline();
+        let animation = foo.animate({ opacity: [0, 1] }, { duration: 100, timeline });
         let finishedPromise = animation.finished;
 
-        // FIXME: Figure out how to consistently test timings
-        // const currentTime = performance.now();
+        timeline.setTime(100);
+
+        // This should finish. If not, the test will time out and result in a failure
         await finishedPromise;
-        // const elapsedTime = performance.now() - currentTime;
-        // if (elapsedTime > 95 && elapsedTime < 105)
-        //     println("Animation time after 100ms is correct")
 
         println(`finished promise remains after finishing: ${Object.is(finishedPromise, animation.finished)}`);
 

Tests/LibWeb/Text/input/WebAnimations/animation-properties/replaceState.html

@@ -2,7 +2,7 @@
 <div id="foo"></div>
 <script src="../../include.js"></script>
 <script>
-    // Note: The "persisted" state will be tested in the Animation.persist() test
+    // Note: The "persisted" state is tested in the Animation.persist() test
 
     promiseTest(async () => {
         const foo = document.getElementById("foo");