1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
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>
|
