LibWeb: Add animation-effect method tests

Author: https://github.com/mattco98 Commit: f0119a818b Pull-request: https://github.com/SerenityOS/serenity/pull/23774
2025-09-24 10:18:59 +00:00 · 2024-03-29 16:58:16 +00:00 · 2024-03-29 16:58:16 +00:00 · f0119a818b · 2024-07-16 23:52:10 +09:00
commit f0119a818b
parent e298e8af5a
6 changed files with 170 additions and 0 deletions
--- a/Tests/LibWeb/Text/input/WebAnimations/animation-effect/get-computed-timing.html
+++ b/Tests/LibWeb/Text/input/WebAnimations/animation-effect/get-computed-timing.html
@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<div id="foo"></div>
+<script src="../../include.js"></script>
+<script>
+    const foo = document.getElementById("foo");
+
+    promiseTest(async () => {
+        const timeline = internals.createInternalAnimationTimeline();
+        let anim = foo.animate({}, {
+            delay: 10,
+            endDelay: 20,
+            fill: "forwards",
+            iterationStart: 30,
+            iterations: 40,
+            duration: 50,
+            direction: "normal",
+            easing: "linear",
+            timeline,
+        });
+
+        await animationFrame();
+        let timing = anim.effect.getComputedTiming();
+        println(`num properties: ${Object.getOwnPropertyNames(timing).length}`);
+        println(`delay: ${timing.delay}`);
+        println(`endDelay: ${timing.endDelay}`);
+        println(`fill: ${timing.fill}`);
+        println(`iterationStart: ${timing.iterationStart}`);
+        println(`iterations: ${timing.iterations}`);
+        println(`duration: ${timing.duration}`);
+        println(`direction: ${timing.direction}`);
+        println(`easing: ${timing.easing}`);
+        println(`endTime: ${timing.endTime}`);
+        println(`activeDuration: ${timing.activeDuration}`);
+        println(`localTime: ${timing.localTime}`);
+        println(`progress: ${timing.progress}`);
+        println(`currentIteration: ${timing.currentIteration}`);
+
+        // Test with some progress
+        anim = foo.animate({}, {
+            duration: 1000,
+            iterations: 3,
+            timeline,
+        });
+        timeline.setTime(1200);
+        await animationFrame();
+        timing = anim.effect.getComputedTiming();
+        println("");
+        println(`localTime: ${timing.localTime}`);
+        println(`progress: ${timing.progress.toFixed(2)}`);
+        println(`currentIteration: ${timing.currentIteration}`);
+    });
+</script>
--- a/Tests/LibWeb/Text/input/WebAnimations/animation-effect/get-timing.html
+++ b/Tests/LibWeb/Text/input/WebAnimations/animation-effect/get-timing.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<div id="foo"></div>
+<script src="../../include.js"></script>
+<script>
+    const foo = document.getElementById("foo");
+
+    test(() => {
+        const anim = foo.animate({}, {
+            delay: 10,
+            endDelay: 20,
+            fill: "forwards",
+            iterationStart: 30,
+            iterations: 40,
+            duration: 50,
+            direction: "alternate-reverse",
+            easing: "linear",
+        });
+
+        const timing = anim.effect.getTiming();
+        println(`num properties: ${Object.getOwnPropertyNames(timing).length}`);
+        println(`delay: ${timing.delay}`);
+        println(`endDelay: ${timing.endDelay}`);
+        println(`fill: ${timing.fill}`);
+        println(`iterationStart: ${timing.iterationStart}`);
+        println(`iterations: ${timing.iterations}`);
+        println(`duration: ${timing.duration}`);
+        println(`direction: ${timing.direction}`);
+        println(`easing: ${timing.easing}`);
+    });
+</script>
--- a/Tests/LibWeb/Text/input/WebAnimations/animation-effect/update-timing.html
+++ b/Tests/LibWeb/Text/input/WebAnimations/animation-effect/update-timing.html
@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<div id="foo"></div>
+<script src="../../include.js"></script>
+<script>
+    const foo = document.getElementById("foo");
+
+    test(() => {
+        const anim = foo.animate({}, {});
+        anim.effect.updateTiming({
+            delay: 10,
+            endDelay: 20,
+            fill: "forwards",
+            iterationStart: 30,
+            iterations: 40,
+            duration: 50,
+            direction: "alternate-reverse",
+            easing: "linear",
+        });
+
+        const timing = anim.effect.getTiming();
+        println(`num properties: ${Object.getOwnPropertyNames(timing).length}`);
+        println(`delay: ${timing.delay}`);
+        println(`endDelay: ${timing.endDelay}`);
+        println(`fill: ${timing.fill}`);
+        println(`iterationStart: ${timing.iterationStart}`);
+        println(`iterations: ${timing.iterations}`);
+        println(`duration: ${timing.duration}`);
+        println(`direction: ${timing.direction}`);
+        println(`easing: ${timing.easing}`);
+
+        function expectThrows(obj, message) {
+            try {
+                anim.updateTiming(obj);
+            } catch {
+                println(message);
+            }
+        }
+
+        expectThrows({ iterationStart: -10 }, "updateTiming() throws if it receives a negative iterationStart value");
+        expectThrows({ iterations: -10 }, "updateTiming() throws if it receives a negative iterations value");
+        expectThrows({ iterations: NaN }, "updateTiming() throws if it receives a NaN iterations value");
+        expectThrows({ duration: -10 }, "updateTiming() throws if it receives a negative duration value");
+        expectThrows({ duration: NaN }, "updateTiming() throws if it receives a NaN duration value");
+        expectThrows({ easing: "abcd" }, "updateTiming() throws if it receives an invalid easing function value");
+    });
+</script>