[V8] Use implicit references instead of object groups to keep registered MutationObse...
[WebKit-https.git] / ManualTests / transition-timing-functions.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2   "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4   <head>
5     <meta http-equiv="Content-type" content="text/html; charset=utf-8">
6     <title>Timing Functions for Transitions</title>
7     <style type="text/css" media="screen">
8       
9       body {
10         margin: 10px;
11         padding: 0;
12       }
13       
14       .container div {
15         position: relative;
16         width: 250px;
17         height: 50px;
18         background: #99c;
19         -webkit-transition-property: left;
20         -webkit-transition-duration: 5s;
21         margin-bottom: 10px;
22       }
23       
24       .container:hover .default,
25       .container:hover .ease,
26       .container:hover .linear,
27       .container:hover .ease-in,
28       .container:hover .ease-out,
29       .container:hover .ease-in-out,
30       .container:hover .cubic,
31       .container:hover .error {
32         left: 400px;
33       }
34
35       .container .ease {
36         -webkit-transition-timing-function: ease;
37       }
38
39       .container .linear {
40         -webkit-transition-timing-function: linear;
41       }
42
43       .container .ease-in {
44         -webkit-transition-timing-function: ease-in;
45       }
46
47       .container .ease-out {
48         -webkit-transition-timing-function: ease-out;
49       }
50
51       .container .ease-in-out {
52         -webkit-transition-timing-function: ease-in-out;
53       }
54
55       .container .cubic {
56         -webkit-transition-timing-function: cubic-bezier(.42, .0, .58, 1.0)
57       }
58
59       .container .error {
60         -webkit-transition-timing-function: bananas;
61       }
62
63       #endmarker {
64         position: absolute;
65         width: 10px;
66         left: 400px;
67         top: 100px;
68         height: 500px;
69         background-color: red;
70       }
71
72       
73     </style>
74   </head>
75   <body>
76     <div id="endmarker">
77     </div>
78
79     <h1>Timing functions for transitions</h1>
80     <p>On hover, the elements below should transition using the
81       described timing functions</p>
82       
83     <div class="container">
84       
85       <div class="default">
86         Default (no timing function specified, should be the same as Ease)
87       </div>
88
89       <div class="ease">
90         Ease (the default ease function)
91       </div>
92
93       <div class="linear">
94         Linear
95       </div>
96
97       <div class="ease-in">
98         Ease In
99       </div>
100
101       <div class="ease-out">
102         Ease Out
103       </div>
104
105       <div class="ease-in-out">
106         Ease In Out
107       </div>
108
109       <div class="cubic">
110         Cubic bezier specified the same as Ease In Out
111       </div>
112
113       <div class="error">
114         Bogus definition, should become default of Ease
115       </div>
116       
117     </div>
118     
119     
120     
121   </body>
122 </html>