Home | History | Annotate | Download | only in ManualTests
      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>