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>
