mirror of
https://github.com/servo/servo.git
synced 2025-06-26 01:54:33 +01:00
113 lines
No EOL
3.3 KiB
HTML
113 lines
No EOL
3.3 KiB
HTML
<!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> |