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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=help href="https://drafts.csswg.org/css-display-4/#display-animation">
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/6429">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/css-animations/support/testcommon.js"></script>
<div id=target1>hello</div>
<style>
@keyframes display1 {
0% { display: none; }
100% { display: inline; }
}
.animate1 {
animation: display1 1s infinite;
}
</style>
<script>
promise_test(async () => {
let numAnimationstartFired = 0;
target1.addEventListener('animationstart', () => numAnimationstartFired++);
await waitForAnimationFrames(1);
target1.classList.add('animate1');
await waitForAnimationFrames(2);
assert_equals(getComputedStyle(target1).display, 'inline',
'The display should be inline during the animation.');
assert_equals(numAnimationstartFired, 1,
'Only one animation should start.');
}, 'display:none animating to display:inline should be inline for the whole animation.');
</script>
<div id=target2>hello</div>
<style>
@keyframes display2 {
0% { display: var(--none-value); }
100% { display: inline; }
}
.animate2 {
animation: display2 1s infinite;
}
#target2 {
--none-value: none;
}
</style>
<script>
promise_test(async () => {
let numAnimationstartFired = 0;
target2.addEventListener('animationstart', () => numAnimationstartFired++);
await waitForAnimationFrames(1);
target2.classList.add('animate2');
await waitForAnimationFrames(2);
assert_equals(getComputedStyle(target2).display, 'inline',
'The display should be inline during the animation.');
assert_equals(numAnimationstartFired, 1,
'Only one animation should start.');
}, 'A CSS variable of display:none animating to display:inline should be inline for the whole animation.');
</script>
<div id=target3>hello</div>
<style>
@keyframes display3 {
0% { display: none; }
100% { display: none; }
}
.animate3 {
animation: display3 1s infinite;
}
</style>
<script>
promise_test(async () => {
let numAnimationstartFired = 0;
target3.addEventListener('animationstart', () => numAnimationstartFired++);
await waitForAnimationFrames(1);
target3.classList.add('animate3');
await waitForAnimationFrames(2);
assert_equals(getComputedStyle(target3).display, 'none',
'The display should be none and the animation should keep running.');
assert_equals(numAnimationstartFired, 1,
'Only one animation should start.');
}, 'Animating from display:none to display:none should not cancel the animation.');
</script>
<div id=target4>hello</div>
<style>
@keyframes display4 {
0% { display: var(--none-value); }
100% { display: var(--none-value); }
}
.animate4 {
animation: display4 1s infinite;
}
#target4 {
--none-value: none;
}
</style>
<script>
promise_test(async () => {
let numAnimationstartFired = 0;
target4.addEventListener('animationstart', () => numAnimationstartFired++);
await waitForAnimationFrames(1);
target4.classList.add('animate4');
await waitForAnimationFrames(2);
assert_equals(getComputedStyle(target4).display, 'none',
'The display should be none and the animation should keep running.');
assert_equals(numAnimationstartFired, 1,
'Only one animation should start.');
}, 'Animating from display:none to display:none with an intermediate variable should not cancel the animation.');
</script>
<div id=target5>hello</div>
<style>
@keyframes display5 {
0% { --display: none; }
100% { --display: none; }
}
.animate5 {
animation: display5 1s infinite;
}
#target5 {
display: var(--display, block);
}
</style>
<script>
promise_test(async () => {
let numAnimationstartFired = 0;
target5.addEventListener('animationstart', () => numAnimationstartFired++);
await waitForAnimationFrames(1);
target5.classList.add('animate5');
await waitForAnimationFrames(2);
assert_equals(getComputedStyle(target5).display, 'none',
'The display should be none and the animation should keep running.');
assert_equals(numAnimationstartFired, 1,
'Only one animation should start.');
}, 'Animating a variable of "none" which gets set to display elsewhere should not cancel the animation.');
</script>
|
