Caps lock indicator should not be shown in read-only or disabled field
[WebKit-https.git] / ManualTests / animate-duration.html
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>