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>