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