• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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>