LibWeb: Implement the animation-composition property

Author: https://github.com/tcl3 Commit: https://github.com/LadybirdBrowser/ladybird/commit/e502f19fa7f Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6233 Reviewed-by: https://github.com/AtkinsSJ ✅
2026-05-03 13:02:09 +02:00 · 2025-09-18 19:59:33 +01:00 · 2025-09-19 09:11:25 +00:00
parent 968a8e618c
commit e502f19fa7
14 changed files with 222 additions and 7 deletions
--- a/Tests/LibWeb/Text/input/wpt-import/css/css-animations/animation-composition.html
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-animations/animation-composition.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>animation-composition test</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-composition">
+<script src=../../resources/testharness.js></script>
+<script src=../../resources/testharnessreport.js></script>
+<script src="support/testcommon.js"></script>
+<style>
+    @keyframes anim {
+        from {
+            filter: blur(10px);
+            width: 100px;
+        }
+        50% {
+            filter: blur(15px);
+            width: 228px;
+        }
+        to {
+            filter: blur(20px);
+            width: 1337px;
+        }
+    }
+
+    .anim-target {
+        animation: anim 1s;
+        animation-fill-mode: forwards;
+        animation-timing-function: linear;
+        filter: blur(5px);
+        width: 50px;
+    }
+
+    .replace {
+        animation-composition: replace;
+    }
+
+    .add {
+        animation-composition: add;
+    }
+
+    .accumulate {
+        animation-composition: accumulate;
+    }
+</style>
+<div id="log"></div>
+<script>
+    function run_test_case(element, property, composite_type, timing_value_map) {
+        element.classList.add(composite_type);
+        const anim = element.getAnimations()[0];
+        for (const [time, value] of Object.entries(timing_value_map)) {
+            anim.currentTime = time;
+            const property_value = getComputedStyle(element).getPropertyValue(property);
+            assert_equals(property_value, value, "at time " + time);
+        }
+        element.classList.remove(composite_type);
+    }
+
+    const test_cases = [
+        ["filter", {
+            "replace": {
+                0: "blur(10px)",
+                250: "blur(12.5px)",
+                500: "blur(15px)",
+                1000: "blur(20px)"
+            },
+            "add": {
+                0: "blur(5px) blur(10px)",
+                250: "blur(5px) blur(12.5px)",
+                500: "blur(5px) blur(15px)",
+                1000: "blur(5px) blur(20px)"
+            },
+            "accumulate": {
+                0: "blur(15px)",
+                250: "blur(17.5px)",
+                500: "blur(20px)",
+                1000: "blur(25px)"
+            }
+        }],
+        ["width", {
+            "replace": {
+                0: "100px",
+                250: "164px",
+                500: "228px",
+                1000: "1337px"
+            },
+            "add": {
+                0: "150px",
+                250: "214px",
+                500: "278px",
+                1000: "1387px"
+            },
+            "accumulate": {
+                0: "150px",
+                250: "214px",
+                500: "278px",
+                1000: "1387px"
+            }
+        }]
+    ]
+
+    for (const test_case of test_cases) {
+        const property = test_case[0];
+        const test_data = test_case[1];
+        for (const [composite_type, expected_values] of Object.entries(test_data)) {
+            test(t => {
+                let elem = addDiv(t, {"class": "anim-target"});
+                run_test_case(elem, property, composite_type, expected_values);
+            }, "animation-composition: " + composite_type + " of property " + property);
+        }
+    }
+</script>