|
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
2 "http://www.w3.org/TR/html4/strict.dtd"> |
|
3 |
|
4 <html> |
|
5 <head> |
|
6 <meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
7 <title>Testing animation-name: none</title> |
|
8 |
|
9 <style type="text/css" media="screen"> |
|
10 div { |
|
11 width: 300px; |
|
12 height: 100px; |
|
13 margin: 10px; |
|
14 -webkit-animation-name: 'fail'; |
|
15 -webkit-animation-duration: 3.5s; |
|
16 -webkit-animation-iteration-count: infinite; |
|
17 -webkit-animation-direction: alternate; |
|
18 -webkit-animation-timing-function: linear; |
|
19 } |
|
20 |
|
21 @-webkit-keyframes 'fail' { |
|
22 from { |
|
23 -webkit-transform: rotate(-90deg); |
|
24 } |
|
25 to { |
|
26 -webkit-transform: rotate(90deg); |
|
27 } |
|
28 } |
|
29 |
|
30 #box1 { |
|
31 position: relative; |
|
32 background-color: blue; |
|
33 -webkit-animation-name: 'sway1'; |
|
34 -webkit-animation-duration: 2.5s; |
|
35 -webkit-animation-iteration-count: infinite; |
|
36 -webkit-animation-direction: alternate; |
|
37 -webkit-animation-timing-function: linear; |
|
38 } |
|
39 |
|
40 @-webkit-keyframes 'sway1' { |
|
41 from { |
|
42 -webkit-transform: translate(0, 0); |
|
43 } |
|
44 to { |
|
45 -webkit-transform: translate(200px, 0); |
|
46 } |
|
47 } |
|
48 |
|
49 #box2 { |
|
50 position: relative; |
|
51 background-color: red; |
|
52 -webkit-animation-name: 'sway2'; |
|
53 -webkit-animation-duration: 3s; |
|
54 -webkit-animation-iteration-count: infinite; |
|
55 -webkit-animation-direction: alternate; |
|
56 -webkit-animation-timing-function: linear; |
|
57 } |
|
58 |
|
59 @-webkit-keyframes 'sway2' { |
|
60 from { |
|
61 -webkit-transform: translate(0px, 0); |
|
62 } |
|
63 to { |
|
64 -webkit-transform: translate(200px, 0); |
|
65 } |
|
66 } |
|
67 |
|
68 #box3 { |
|
69 position: relative; |
|
70 background-color: green; |
|
71 -webkit-animation-name: 'sway3'; |
|
72 -webkit-animation-duration: 3.5s; |
|
73 -webkit-animation-iteration-count: infinite; |
|
74 -webkit-animation-direction: alternate; |
|
75 -webkit-animation-timing-function: linear; |
|
76 } |
|
77 |
|
78 @-webkit-keyframes 'sway3' { |
|
79 from { |
|
80 -webkit-transform: translate(0px, 0); |
|
81 } |
|
82 to { |
|
83 -webkit-transform: translate(200px, 0); |
|
84 } |
|
85 } |
|
86 |
|
87 #box4 { |
|
88 position: relative; |
|
89 background-color: orange; |
|
90 -webkit-animation-name: 'none'; |
|
91 -webkit-animation-duration: 3s; |
|
92 -webkit-animation-iteration-count: infinite; |
|
93 -webkit-animation-direction: alternate; |
|
94 -webkit-animation-timing-function: linear; |
|
95 } |
|
96 |
|
97 #box5 { |
|
98 position: relative; |
|
99 background-color: purple; |
|
100 -webkit-animation-name: 'none'; |
|
101 -webkit-animation-duration: 3s; |
|
102 -webkit-animation-iteration-count: infinite; |
|
103 -webkit-animation-direction: alternate; |
|
104 -webkit-animation-timing-function: linear; |
|
105 } |
|
106 |
|
107 #box6 { |
|
108 position: relative; |
|
109 background-color: blue; |
|
110 -webkit-animation-name: 'fade', 'sway6'; |
|
111 -webkit-animation-duration: 3s, 4s; |
|
112 -webkit-animation-iteration-count: infinite, infinite; |
|
113 -webkit-animation-direction: alternate, alternate; |
|
114 -webkit-animation-timing-function: linear, linear; |
|
115 } |
|
116 |
|
117 @-webkit-keyframes 'sway6' { |
|
118 from { |
|
119 -webkit-transform: translate(0px, 0); |
|
120 } |
|
121 to { |
|
122 -webkit-transform: translate(200px, 0); |
|
123 } |
|
124 } |
|
125 |
|
126 @-webkit-keyframes 'fade' { |
|
127 from { |
|
128 opacity: 1.0; |
|
129 } |
|
130 to { |
|
131 opacity: 0.1; |
|
132 } |
|
133 } |
|
134 |
|
135 /* set up animation that should never be run */ |
|
136 @-webkit-keyframes none { |
|
137 from { |
|
138 -webkit-transform: translate(200px, 0) rotate(-90deg); |
|
139 } |
|
140 to { |
|
141 -webkit-transform: translate(0px, 0) rotate(90deg); |
|
142 } |
|
143 } |
|
144 |
|
145 </style> |
|
146 <script type="text/javascript" charset="utf-8"> |
|
147 function killanims() { |
|
148 console.log("click"); |
|
149 var box1 = document.getElementById("box1"); |
|
150 box1.style.webkitAnimationName = ''; |
|
151 var box2 = document.getElementById("box2"); |
|
152 box2.style.webkitAnimationName = 'none'; |
|
153 var box3 = document.getElementById("box3"); |
|
154 box3.style.webkitAnimationName = "'none'"; |
|
155 var box6 = document.getElementById("box6"); |
|
156 box6.style.webkitAnimationName = "none, 'sway6'"; |
|
157 } |
|
158 |
|
159 setTimeout(killanims, 2000); |
|
160 </script> |
|
161 </head> |
|
162 <body> |
|
163 |
|
164 <h2>Testing animation: none</h2> |
|
165 |
|
166 <p> |
|
167 After 2 seconds only the blue rectangles should be |
|
168 animating. |
|
169 Any resulting animation |
|
170 that involves rotation or fading means that this test has FAILED.</p> |
|
171 |
|
172 <div id="box1"> |
|
173 This rectangle starts with an animation. After 2 seconds a timer |
|
174 will set the animation-name on the element to '' (the empty string). |
|
175 The CSS rule should cause the animation to continue. |
|
176 </div> |
|
177 |
|
178 <div id="box2"> |
|
179 This rectangle starts with an animation. After 2 seconds a timer |
|
180 will set the animation-name on the element to 'none' (as an identifier). |
|
181 This should cause the animation to stop. |
|
182 </div> |
|
183 |
|
184 <div id="box3"> |
|
185 This rectangle starts with an animation. After 2 seconds a timer |
|
186 will set the animation-name on the element to 'none' (as a string). |
|
187 This should cause the animation to stop. |
|
188 </div> |
|
189 |
|
190 <div id="box4"> |
|
191 This rectangle starts with an animation, but animation-name is |
|
192 set to 'none' (as an identifier). No animation should run. |
|
193 </div> |
|
194 |
|
195 <div id="box5"> |
|
196 This rectangle starts with an animation, but animation-name is |
|
197 set to 'none' (as a string). No animation should run. |
|
198 </div> |
|
199 |
|
200 <div id="box6"> |
|
201 This rectangle starts with two animations. After 2 seconds a timer |
|
202 will set the animation-name on the fade to 'none'. The other |
|
203 animation (horizontal) should continue. |
|
204 </div> |
|
205 |
|
206 </body> |
|
207 </html> |