wpt/css/css-animations/animation-composition-keyframes.html at master · web-platform-tests/wpt · GitHub

Name: wpt/css/css-animations/animation-composition-keyframes.html at master · web-platform-tests/wpt · GitHub
Rating: 4.5 (9195 reviews)
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>
<metacharset=utf-8>
<title>animation-composition test in keyframes</title>
<linkrel="help" href="https://drafts.csswg.org/css-animations-2/#animation-composition">
<scriptsrc=/resources/testharness.js></script>
<scriptsrc=/resources/testharnessreport.js></script>
<scriptsrc="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>
<divid="log"></div>
<script>
functionrun_test_case(element,property,composite_type,timing_value_map){
element.classList.add(composite_type);
constanim=element.getAnimations()[0];
for(const[time,value]ofObject.entries(timing_value_map)){
anim.currentTime=time;
constproperty_value=getComputedStyle(element).getPropertyValue(property);
assert_equals(property_value,value,"at time "+time);
}
element.classList.remove(composite_type);
}

consttest_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(consttest_caseoftest_cases){
constproperty=test_case[0];
consttest_data=test_case[1];
for(const[composite_type,expected_values]ofObject.entries(test_data)){
test(t=>{
letelem=addDiv(t,{"class": "anim-target"});
run_test_case(elem,property,composite_type,expected_values);
},"animation-composition: "+composite_type+" of property "+property);
}
}
</script>