LibWeb: Add some async/animation test utilities

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

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

@@ -2,7 +2,7 @@
 <div id="foo"></div>
 <script src="../../include.js"></script>
 <script>
-    asyncTest(done => {
+    promiseTest(async () => {
         const foo = document.getElementById("foo");
 
         let animation = new Animation(null, null);
@@ -14,16 +14,15 @@
         animation = foo.animate({ color: "red" }, { duration: 1000 });
         println(`Played animation has a currentTime of 0: ${animation.currentTime === 0}`);
 
-        setTimeout(() => {
-            // FIXME: Figure out how to consistently test timings
-            // if (animation.currentTime > 95 && animation.currentTime < 105)
-            //     println("Animation time after 100ms is correct");
+        await timeout(100);
 
-            animation = foo.animate({ opacity: [0, 1] }, { duration: 1000 });
-            println(`New animation has not started animating: ${getComputedStyle(foo).opacity === "0"}`);
-            animation.currentTime = 1000;
-            println(`Animation with currentTime set to end is finished: ${getComputedStyle(foo).opacity === "1"}`);
-            done();
-        }, 100);
+        // FIXME: Figure out how to consistently test timings
+        // if (animation.currentTime > 95 && animation.currentTime < 105)
+        //     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"}`);
+        animation.currentTime = 1000;
+        println(`Animation with currentTime set to end is finished: ${getComputedStyle(foo).opacity === "1"}`);
     });
 </script>

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

@@ -2,7 +2,7 @@
 <div id="foo"></div>
 <script src="../../include.js"></script>
 <script>
-    asyncTest(async done => {
+    promiseTest(async () => {
         const foo = document.getElementById("foo");
         let animation = foo.animate({ opacity: [0, 1] }, { duration: 100 });
         let finishedPromise = animation.finished;
@@ -21,14 +21,13 @@
         finishedPromise = animation.finished;
 
         // Upon cancellation, the finished promise should be rejected
-        finishedPromise.then(() => {
-            println("Unexpected finished promise resolution");
-        }).catch(() => {
-            println("Expected finished promise cancellation");
-        });
         animation.cancel();
-
         println(`cancel() updates finished promise: ${!Object.is(finishedPromise, animation.finished)}`);
-        done();
+        try {
+            await finishedPromise;
+            println("Unexpected finished promise resolution");
+        } catch {
+            println("Expected finished promise cancellation");
+        }
     });
 </script>

Tests/LibWeb/Text/input/WebAnimations/animation-properties/pending-and-ready.html

@@ -2,7 +2,7 @@
 <div id="foo"></div>
 <script src="../../include.js"></script>
 <script>
-    asyncTest(async done => {
+    promiseTest(async () => {
         const foo = document.getElementById("foo");
         const animation = foo.animate({}, { duration: 100 });
 
@@ -17,7 +17,5 @@
 
         await animation.ready;
         println(`Animation is not pending after ready promise resolves: ${!animation.pending}`);
-
-        done();
     });
 </script>

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

@@ -4,7 +4,7 @@
 <script>
     // Note: The "persisted" state will be tested in the Animation.persist() test
 
-    asyncTest(async done => {
+    promiseTest(async () => {
         const foo = document.getElementById("foo");
         const animation1 = foo.animate({ opacity: [0, 1] }, { duration: 10, fill: "forwards" });
         println(`Animation's replaceState is active initially: ${animation1.replaceState === "active"}`);
@@ -17,7 +17,5 @@
 
         await animation2.finished;
         println(`Animation's replaceState is removed after new animation finishes: ${animation1.replaceState === "removed"}`);
-
-        done();
     });
 </script>

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

@@ -2,7 +2,7 @@
 <div id="foo"></div>
 <script src="../../include.js"></script>
 <script>
-    asyncTest(async done => {
+    promiseTest(async () => {
         const foo = document.getElementById("foo");
 
         let animation = foo.animate({ opacity: [0, 1] }, { duration: 1000 });
@@ -32,7 +32,5 @@
         animation = foo.animate({ opacity: [0, 1] }, { duration: 1000, timeline });
         animation.finish();
         println(`Animation's startTime updates after calling finish(): ${animation.startTime === -1000}`);
-
-        done();
     });
 </script>