Google Git
Sign in
webkit / WebKit / fbc60e99bf2658416f43c30e4dd66f797d61a01b / . / ManualTests / animate-none.html
blob: 4cb2c8b4fc3d2f95132bb4d9ef3e1209262d0ed7 [file] [log] [blame]
dino@apple.com6b8acf72008-08-08 20:44:14 +0000[diff] [blame]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>