animate-none.html [plain text]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Testing animation-name: none</title>
    
    <style type="text/css" media="screen">
      div {
        width: 300px;
        height: 100px;
        margin: 10px;
        -webkit-animation-name: 'fail';
        -webkit-animation-duration: 3.5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: linear;        
      }

      @-webkit-keyframes 'fail' {
        from {
          -webkit-transform: rotate(-90deg);
        }
        to {
          -webkit-transform: rotate(90deg);
        }
      }

      #box1 {
        position: relative;
        background-color: blue;
        -webkit-animation-name: 'sway1';
        -webkit-animation-duration: 2.5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: linear;
      }
      
      @-webkit-keyframes 'sway1' {
        from {
          -webkit-transform: translate(0, 0);
        }
        to {
          -webkit-transform: translate(200px, 0);
        }
      }
      
      #box2 {
        position: relative;
        background-color: red;
        -webkit-animation-name: 'sway2';
        -webkit-animation-duration: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: linear;
      }
      
      @-webkit-keyframes 'sway2' {
        from {
          -webkit-transform: translate(0px, 0);
        }
        to {
          -webkit-transform: translate(200px, 0);
        }
      }

      #box3 {
        position: relative;
        background-color: green;
        -webkit-animation-name: 'sway3';
        -webkit-animation-duration: 3.5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: linear;
      }

      @-webkit-keyframes 'sway3' {
        from {
          -webkit-transform: translate(0px, 0);
        }
        to {
          -webkit-transform: translate(200px, 0);
        }
      }

      #box4 {
        position: relative;
        background-color: orange;
        -webkit-animation-name: 'none';
        -webkit-animation-duration: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: linear;
      }

      #box5 {
        position: relative;
        background-color: purple;
        -webkit-animation-name: 'none';
        -webkit-animation-duration: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: linear;
      }

      #box6 {
        position: relative;
        background-color: blue;
        -webkit-animation-name: 'fade', 'sway6';
        -webkit-animation-duration: 3s, 4s;
        -webkit-animation-iteration-count: infinite, infinite;
        -webkit-animation-direction: alternate, alternate;
        -webkit-animation-timing-function: linear, linear;
      }

      @-webkit-keyframes 'sway6' {
        from {
          -webkit-transform: translate(0px, 0);
        }
        to {
          -webkit-transform: translate(200px, 0);
        }
      }

      @-webkit-keyframes 'fade' {
        from {
          opacity: 1.0;
        }
        to {
          opacity: 0.1;
        }
      }

      /* set up animation that should never be run */
      @-webkit-keyframes none {
        from {
          -webkit-transform: translate(200px, 0) rotate(-90deg);
        }
        to {
          -webkit-transform: translate(0px, 0) rotate(90deg);
        }
      }

    </style>
    <script type="text/javascript" charset="utf-8">
      function killanims() {
        console.log("click");
        var box1 = document.getElementById("box1");
        box1.style.webkitAnimationName = '';
        var box2 = document.getElementById("box2");
        box2.style.webkitAnimationName = 'none';
        var box3 = document.getElementById("box3");
        box3.style.webkitAnimationName = "'none'";
        var box6 = document.getElementById("box6");
        box6.style.webkitAnimationName = "none, 'sway6'";
      }
      
      setTimeout(killanims, 2000);
    </script>
  </head>
  <body>
    
    <h2>Testing animation: none</h2>
    
      <p>
        After 2 seconds only the blue rectangles should be
        animating.
      Any resulting animation
      that involves rotation or fading means that this test has FAILED.</p>
    
    <div id="box1">
      This rectangle starts with an animation. After 2 seconds a timer
      will set the animation-name on the element to '' (the empty string).
      The CSS rule should cause the animation to continue.
    </div>

    <div id="box2">
      This rectangle starts with an animation. After 2 seconds a timer
      will set the animation-name on the element to 'none' (as an identifier).
      This should cause the animation to stop.
    </div>

    <div id="box3">
      This rectangle starts with an animation. After 2 seconds a timer
      will set the animation-name on the element to 'none' (as a string).
      This should cause the animation to stop.
    </div>

    <div id="box4">
      This rectangle starts with an animation, but animation-name is
      set to 'none' (as an identifier). No animation should run.
    </div>

    <div id="box5">
      This rectangle starts with an animation, but animation-name is
      set to 'none' (as a string). No animation should run.
    </div>

    <div id="box6">
      This rectangle starts with two animations. After 2 seconds a timer
      will set the animation-name on the fade to 'none'. The other
      animation (horizontal) should continue.
    </div>
    
  </body>
</html>