diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
| commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
| tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-animations/animation-composition.html | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip | |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-animations/animation-composition.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-animations/animation-composition.html | 110 |
1 files changed, 110 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-animations/animation-composition.html b/testing/web-platform/tests/css/css-animations/animation-composition.html new file mode 100644 index 0000000000..48e757c598 --- /dev/null +++ b/testing/web-platform/tests/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>
\ No newline at end of file |