Add wpt tests for animation-composition behavior.

Change-Id: Id7616375344a2a7a51153f2921531c14893cfc02 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4188597 Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Commit-Queue: Daniil Sakhapov <sakhapov@chromium.org> Cr-Commit-Position: refs/heads/main@{#1096115}
chromium · Jan 24, 2023 · ae8352c · ae8352c
1 parent 7be8d98
commit ae8352c
Show file tree

Hide file tree

Showing 2 changed files with 223 additions and 0 deletions.
diff --git a/...arty/blink/web_tests/external/wpt/css/css-animations/animation-composition-keyframes.html b/...arty/blink/web_tests/external/wpt/css/css-animations/animation-composition-keyframes.html
@@ -0,0 +1,113 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>animation-composition test in keyframes</title>
+<link rel="help" href="https://w3c.github.io/csswg-drafts/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 {
+            animation-composition: add;
+            filter: blur(10px);
+            width: 100px;
+        }
+        50% {
+            animation-composition: accumulate;
+            filter: blur(15px);
+            width: 228px;
+        }
+        to {
+            animation-composition: replace;
+            filter: blur(50px);
+            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(5px) blur(10px)",
+                250: "blur(12.5px) blur(5px)",
+                500: "blur(20px)",
+                1000: "blur(50px)"
+            },
+            "add": {
+                0: "blur(5px) blur(10px)",
+                250: "blur(12.5px) blur(5px)",
+                500: "blur(20px)",
+                1000: "blur(50px)"
+            },
+            "accumulate": {
+                0: "blur(5px) blur(10px)",
+                250: "blur(12.5px) blur(5px)",
+                500: "blur(20px)",
+                1000: "blur(50px)"
+            }
+        }],
+        ["width", {
+            "replace": {
+                0: "150px",
+                250: "214px",
+                500: "278px",
+                1000: "1337px"
+            },
+            "add": {
+                0: "150px",
+                250: "214px",
+                500: "278px",
+                1000: "1337px"
+            },
+            "accumulate": {
+                0: "150px",
+                250: "214px",
+                500: "278px",
+                1000: "1337px"
+            }
+        }]
+    ]
+
+    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>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-animations/animation-composition.html b/third_party/blink/web_tests/external/wpt/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://w3c.github.io/csswg-drafts/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>