Home | History | Annotate | Download | only in ManualTests
      1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      2    "http://www.w3.org/TR/html4/loose.dtd">
      3 
      4 <html lang="en">
      5 <head>
      6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      7   <title>Overriding Animations</title>
      8   <script src="../../shared/javascript/utils.js" type="text/javascript" charset="utf-8"></script>
      9   <style type="text/css" media="screen">
     10 
     11   .container {
     12      position: relative;
     13      width: 400px;
     14      height: 120px;
     15      border: 1px solid black;
     16      margin: 10px;
     17    }
     18    .box {
     19      position: relative;
     20      width: 100px;
     21      height: 100px;
     22      margin: 10px;
     23      background-color: blue;
     24      z-index: 0;
     25      -webkit-animation-name: "slide";
     26      -webkit-animation-duration: 1s;
     27      -webkit-animation-direction: alternate;
     28      -webkit-animation-timing-function: ease-in-out;
     29      -webkit-animation-iteration-count: infinite;
     30    }  
     31 
     32    .one {
     33      -webkit-animation-duration: 0s;
     34    }
     35 
     36    .two {
     37      -webkit-animation-duration: 0;
     38    }
     39    
     40    @-webkit-keyframes slide {
     41      from { -webkit-transform: translateX(0);      }
     42      to   { -webkit-transform: translateX(280px);  }
     43    }
     44 
     45   </style>
     46 </head>
     47 <body>
     48   <p>Single anim (should keep animating)</p>
     49   <div class="container" onclick="toggleClassName(this, 'highlighted')">
     50     <div class="box none">
     51     </div>
     52   </div>
     53   <p>duration: "0s" (should not animate)</p>
     54   <div class="container" onclick="toggleClassName(this, 'highlighted')">
     55     <div class="box one">
     56     </div>
     57   </div>
     58   <p>duration: "0" (should animate since inherits valid duration)</p>
     59   <div class="container" onclick="toggleClassName(this, 'highlighted')">
     60     <div class="box two">
     61     </div>
     62   </div>
     63 
     64 </body>
     65 </html>