Kill suspendAnimation(), resumeAnimation() and numberOfActiveAnimations() from DRT...
[WebKit-https.git] / LayoutTests / transitions / extra-transition.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <style>
5   body {
6       background: url('resources/Aurora.jpg');
7       -webkit-background-size: 100% 100%;
8       font-family: "Lucida Grande";
9       height: 800px;
10   }
11
12   #features {
13       position: relative;
14       width: 400px;
15       list-style: none;
16   }
17
18   #features > li > .picture {
19       -webkit-transition-property: -webkit-transform;
20       -webkit-transition-duration: 500ms;
21       -webkit-transition-timing-function: ease-in;
22       -webkit-transform: rotate(-5deg);
23       opacity: 0.2;
24       border: 5px solid white;
25       background-color: gray;
26       position: absolute;
27       left: 20%;
28       width: 380px;
29       height: 180px;
30       top: 30px;
31   }
32
33   #features > li.enabled > .picture {
34       -webkit-transition-timing-function: ease-out;
35       -webkit-transform:rotate(10deg);
36   }
37
38   #features > li > .description {
39       -webkit-transition-property: -webkit-transform;
40       -webkit-transition-duration: 560ms;
41       -webkit-transition-timing-function: ease-in;
42       line-height: 1.4em;
43       position: absolute;
44       background-color: black;
45       color: white;
46       margin: 10px;
47       padding: 10px;
48       border: 3px solid white;
49       -webkit-border-radius: 9px;
50       font-size: 16px;
51       left: 20%;
52       top: 330px;
53       width: 350px;
54   }
55
56   #features > li.enabled > .description {
57       -webkit-transform:translate3d(100px,0,0);
58   }
59   </style>
60   <script>
61   if (window.testRunner) {
62     testRunner.waitUntilDone();
63     testRunner.dumpAsText();
64   }
65
66   function init()
67   {
68       document.getElementById("item").className = "enabled";
69       setTimeout(check, 1000);
70   }
71   
72   function log(s)
73   {
74     var results = document.getElementById('results');
75     results.innerHTML += s + '<br>';
76   }
77
78   function check()
79   {
80       var transform = window.getComputedStyle(document.getElementById('description')).webkitTransform;
81       if (transform == "matrix(1, 0, 0, 1, 100, 0)")
82           log('transform="'+transform+'" as expected: PASS');
83         else
84         log('transform="'+transform+'", expected "matrix(1, 0, 0, 1, 100, 0)": FAIL');
85
86       if (window.testRunner)
87         testRunner.notifyDone();
88   }
89   </script>
90 </head>
91 <body onload="init()">
92
93 <ul id="features">
94 <li id="item">
95     <div class="picture"></div>
96   <div id="description" class="description">
97     <b>Spaces</b> lets you group your application windows and banish
98     clutter completely. Leopard gives you a space for everything and
99     makes it easy to switch between your spaces. Start by simply
100     clicking the Spaces icon in the Dock.
101   </div>
102 </li>
103 </ul>
104 <div id="results"></div>
105 </body>
106 </html>