LibWeb: Parse easing values manually

The values aren't that complex, so it doesn't make much sense to have a dedicated generator for them. Parsing them manually also allows us to have much more control over the produced values, so as a result of this change, EasingStyleValue becomes much more ergonomic.
Author: https://github.com/mattco98 Commit: https://github.com/LadybirdBrowser/ladybird/commit/667e313731 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/173
2026-04-27 18:17:22 +02:00 · 2024-06-14 21:27:23 -07:00 · 2024-07-16 22:51:10 +09:00
parent 6675ef3f24
commit 667e313731
9 changed files with 405 additions and 192 deletions
--- a/Tests/LibWeb/Text/input/WebAnimations/misc/easing-parsing.html
+++ b/Tests/LibWeb/Text/input/WebAnimations/misc/easing-parsing.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<div id="foo"></div>
+<script src="../../include.js"></script>
+<script>
+    test(() => {
+        const div = document.getElementById("foo");
+
+        const validEasings = [
+            "linear",
+            "linear(0, 1)",
+            "linear(0, 0.5, 1)",
+            "linear(0 5%, 0.5 10%, 1 100%)",
+            "linear(5% 0, 10% 0.5, 100% 1)",
+            "linear(5% 0, 1 100%)",
+            "linear(-14, 27 210%)",
+            "ease",
+            "ease-in",
+            "ease-out",
+            "ease-in-out",
+            "cubic-bezier(0, 0, 0, 0)",
+            "cubic-bezier(1, 1, 1, 1)",
+            "cubic-bezier(1, 1000, 1, 1000)",
+            "step-start",
+            "step-end",
+            "steps(1000)",
+            "steps(10, jump-start)",
+            "steps(10, jump-end)",
+            "steps(10, jump-none)",
+            "steps(10, jump-both)",
+            "steps(10, start)",
+            "steps(10, end)",
+        ];
+
+        const invalidEasings = [
+            "abc",
+            "foo()",
+            "linear()",
+            "linear(a, b, c)",
+            "linear(5 10)",
+            "linear(5% 10%)",
+            "linear(0.5 5% 10)",
+            "linear(0.5 5% 10%)",
+            "cubic-bezier(0, 0, 0)",
+            "cubic-bezier(2, 0, 0, 0)",
+            "cubic-bezier(0, 0, 2, 0)",
+            "steps(1.5)",
+            "steps(-1)",
+            "steps(0, jump-none)",
+        ];
+
+        let numFailed = 0;
+
+        for (const easing of validEasings) {
+            try {
+                div.animate(null, { duration: 1, easing });
+            } catch {
+                println(`Failed to parse valid easing ${easing}`);
+                numFailed++;
+            }
+        }
+
+        for (const easing of invalidEasings) {
+            try {
+                div.animate(null, { duration: 1, easing });
+                println(`Successfully parsed invalid easing ${easing}`);
+                numFailed++;
+            } catch {
+            }
+        }
+
+        if (numFailed === 0)
+            println(`PASS`);
+    });
+</script>