LibWeb: Add animation-effect method tests

mattco98 · awesomekling · commit f0119a818b19 · 2024-03-30T19:26:58.000+01:00
diff --git a/Tests/LibWeb/Text/expected/WebAnimations/animation-effect/get-computed-timing.txt b/Tests/LibWeb/Text/expected/WebAnimations/animation-effect/get-computed-timing.txt
@@ -0,0 +1,18 @@
+   num properties: 13
+delay: 10
+endDelay: 20
+fill: forwards
+iterationStart: 30
+iterations: 40
+duration: 50
+direction: normal
+easing: linear
+endTime: 2030
+activeDuration: 2000
+localTime: 0
+progress: null
+currentIteration: null
+
+localTime: 1200
+progress: 0.20
+currentIteration: 1
diff --git a/Tests/LibWeb/Text/expected/WebAnimations/animation-effect/get-timing.txt b/Tests/LibWeb/Text/expected/WebAnimations/animation-effect/get-timing.txt
@@ -0,0 +1,9 @@
+   num properties: 8
+delay: 10
+endDelay: 20
+fill: forwards
+iterationStart: 30
+iterations: 40
+duration: 50
+direction: alternate-reverse
+easing: linear
diff --git a/Tests/LibWeb/Text/expected/WebAnimations/animation-effect/update-timing.txt b/Tests/LibWeb/Text/expected/WebAnimations/animation-effect/update-timing.txt
@@ -0,0 +1,15 @@
+   num properties: 8
+delay: 10
+endDelay: 20
+fill: forwards
+iterationStart: 30
+iterations: 40
+duration: 50
+direction: alternate-reverse
+easing: linear
+updateTiming() throws if it receives a negative iterationStart value
+updateTiming() throws if it receives a negative iterations value
+updateTiming() throws if it receives a NaN iterations value
+updateTiming() throws if it receives a negative duration value
+updateTiming() throws if it receives a NaN duration value
+updateTiming() throws if it receives an invalid easing function value
diff --git 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>
diff --git 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>
diff --git 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>
