Device motion and orientation should only be visible from the main frame's security...
[WebKit-https.git] / ManualTests / animate-none.html
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>