Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-animations/animation-composition-keyframes.html - WPT Dashboard Interop Dashboard
<!doctype html>
<meta charset=utf-8>
<title>animation-composition test in keyframes</title>
<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>