LibWeb: Implement the animation-composition property

Author: https://github.com/tcl3
Commit: e502f19fa7
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6233
Reviewed-by: https://github.com/AtkinsSJ ✅

Libraries/LibWeb/CSS/Keywords.json

@@ -67,6 +67,7 @@
   "absolute",
   "accentcolor",
   "accentcolortext",
+  "accumulate",
   "active",
   "activeborder",
   "activecaption",
@@ -424,6 +425,7 @@
   "repeat",
   "repeat-x",
   "repeat-y",
+  "replace",
   "reverse",
   "revert",
   "revert-layer",

Libraries/LibWeb/CSS/Properties.json

@@ -209,6 +209,17 @@
       "animation-fill-mode"
     ]
   },
+  "animation-composition": {
+    "affects-layout": false,
+    "animation-type": "none",
+    "inherited": false,
+    "initial": "replace",
+    "valid-identifiers": [
+      "replace",
+      "add",
+      "accumulate"
+    ]
+  },
   "animation-delay": {
     "affects-layout": false,
     "animation-type": "none",

Libraries/LibWeb/CSS/StyleComputer.cpp

@@ -1243,6 +1243,20 @@ static void apply_animation_properties(DOM::Document& document, CascadedProperti
     if (auto timing_property = cascaded_properties.property(PropertyID::AnimationTimingFunction); timing_property && timing_property->is_easing())
         timing_function = timing_property->as_easing().function();
 
+    Bindings::CompositeOperation composite_operation { Bindings::CompositeOperation::Replace };
+    if (auto composite_property = cascaded_properties.property(PropertyID::AnimationComposition); composite_property) {
+        switch (composite_property->to_keyword()) {
+        case Keyword::Add:
+            composite_operation = Bindings::CompositeOperation::Add;
+            break;
+        case Keyword::Accumulate:
+            composite_operation = Bindings::CompositeOperation::Accumulate;
+            break;
+        default:
+            break;
+        }
+    }
+
     auto iteration_duration = duration.has_value()
         ? Variant<double, String> { duration.release_value().to_milliseconds() }
         : "auto"_string;
@@ -1252,6 +1266,7 @@ static void apply_animation_properties(DOM::Document& document, CascadedProperti
     effect.set_timing_function(move(timing_function));
     effect.set_fill_mode(Animations::css_fill_mode_to_bindings_fill_mode(fill_mode));
     effect.set_playback_direction(Animations::css_animation_direction_to_bindings_playback_direction(direction));
+    effect.set_composite(composite_operation);
 
     if (play_state != effect.last_css_animation_play_state()) {
         if (play_state == CSS::AnimationPlayState::Running && animation.play_state() != Bindings::AnimationPlayState::Running) {

Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt

@@ -75,6 +75,7 @@ All properties associated with getComputedStyle(document.body):
     "align-content",
     "align-items",
     "align-self",
+    "animation-composition",
     "animation-delay",
     "animation-direction",
     "animation-duration",

Tests/LibWeb/Text/expected/css/CSSStyleProperties-all-supported-properties-and-default-values.txt

@@ -157,6 +157,8 @@ All supported properties and their default values exposed from CSSStylePropertie
 'align-self': 'auto'
 'all': ''
 'animation': 'none'
+'animationComposition': 'replace'
+'animation-composition': 'replace'
 'animationDelay': '0s'
 'animation-delay': '0s'
 'animationDirection': 'normal'

Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt

@@ -73,6 +73,7 @@ writing-mode: horizontal-tb
 align-content: normal
 align-items: normal
 align-self: auto
+animation-composition: replace
 animation-delay: 0s
 animation-direction: normal
 animation-duration: 0s
@@ -94,7 +95,7 @@ background-position-x: 0%
 background-position-y: 0%
 background-repeat: repeat
 background-size: auto
-block-size: 1440px
+block-size: 1455px
 border-block-end-color: rgb(0, 0, 0)
 border-block-end-style: none
 border-block-end-width: 0px
@@ -171,7 +172,7 @@ grid-row-start: auto
 grid-template-areas: none
 grid-template-columns: none
 grid-template-rows: none
-height: 2595px
+height: 2610px
 inline-size: 784px
 inset-block-end: auto
 inset-block-start: auto

Tests/LibWeb/Text/expected/wpt-import/css/css-animations/CSSAnimation-effect.tentative.txt

@@ -2,13 +2,13 @@ Harness status: OK
 
 Found 8 tests
 
-4 Pass
+5 Pass
-4 Fail
+3 Fail
 Fail	Setting a null effect on a running animation fires an animationend event
 Pass	Replacing an animation's effect with an effect that targets a different property should update both properties
 Pass	Replacing an animation's effect with a shorter one that should have already finished, the animation finishes immediately
 Pass	A play-pending animation's effect whose effect is replaced still exits the pending state
 Fail	CSS animation events are dispatched at the original element even after setting an effect with a different target element
 Pass	After replacing a finished animation's effect with a longer one it fires an animationstart event
-Fail	Setting animation-composition sets the composite property on the effect
+Pass	Setting animation-composition sets the composite property on the effect
 Fail	Replacing the effect of a CSSAnimation causes subsequent changes to corresponding animation-* properties to be ignored

Tests/LibWeb/Text/expected/wpt-import/css/css-animations/animation-composition.txt

@@ -0,0 +1,12 @@
+Harness status: OK
+
+Found 6 tests
+
+4 Pass
+2 Fail
+Pass	animation-composition: replace of property filter
+Fail	animation-composition: add of property filter
+Fail	animation-composition: accumulate of property filter
+Pass	animation-composition: replace of property width
+Pass	animation-composition: add of property width
+Pass	animation-composition: accumulate of property width

Tests/LibWeb/Text/expected/wpt-import/css/css-animations/parsing/animation-composition-invalid.tentative.txt

@@ -0,0 +1,9 @@
+Harness status: OK
+
+Found 4 tests
+
+4 Pass
+Pass	e.style['animation-composition'] = "auto" should not set the property value
+Pass	e.style['animation-composition'] = "add replace" should not set the property value
+Pass	e.style['animation-composition'] = "add, initial" should not set the property value
+Pass	e.style['animation-composition'] = "initial, add" should not set the property value

Tests/LibWeb/Text/expected/wpt-import/css/css-animations/parsing/animation-composition-valid.tentative.txt

@@ -0,0 +1,10 @@
+Harness status: OK
+
+Found 4 tests
+
+3 Pass
+1 Fail
+Pass	e.style['animation-composition'] = "replace" should set the property value
+Pass	e.style['animation-composition'] = "add" should set the property value
+Pass	e.style['animation-composition'] = "accumulate" should set the property value
+Fail	e.style['animation-composition'] = "replace, add, accumulate" should set the property value

Tests/LibWeb/Text/expected/wpt-import/css/css-cascade/all-prop-revert-layer.txt

@@ -1,8 +1,8 @@
 Harness status: OK
 
-Found 260 tests
+Found 261 tests
 
-253 Pass
+254 Pass
 7 Fail
 Pass	accent-color
 Pass	border-collapse
@@ -76,6 +76,7 @@ Pass	word-wrap
 Pass	writing-mode
 Pass	align-items
 Pass	align-self
+Pass	animation-composition
 Pass	animation-delay
 Pass	animation-direction
 Pass	animation-duration

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>

Tests/LibWeb/Text/input/wpt-import/css/css-animations/parsing/animation-composition-invalid.tentative.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-composition with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-composition">
+<meta name="assert" content="animation-composition supports only the grammar '<single-animation-composition> #'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("animation-composition", "auto");
+test_invalid_value("animation-composition", "add replace");
+
+test_invalid_value("animation-composition", "add, initial");
+test_invalid_value("animation-composition", "initial, add");
+</script>
+</body>
+</html>

Tests/LibWeb/Text/input/wpt-import/css/css-animations/parsing/animation-composition-valid.tentative.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation-composition with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations-2/#propdef-animation-composition">
+<meta name="assert" content="animation-composition supports the full grammar '<single-animation-composition> #'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("animation-composition", "replace");
+test_valid_value("animation-composition", "add");
+test_valid_value("animation-composition", "accumulate");
+test_valid_value("animation-composition", "replace, add, accumulate");
+</script>
+</body>
+</html>