Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / transitions / extra-transition.html
blobca850e0aeb4e7db71f4deafa0552d9712852633d
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;
12 #features {
13 position: relative;
14 width: 400px;
15 list-style: none;
18 #features > li > .picture {
19 -webkit-transition-property: transform;
20 -webkit-transition-duration: 500ms;
21 -webkit-transition-timing-function: ease-in;
22 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;
33 #features > li.enabled > .picture {
34 -webkit-transition-timing-function: ease-out;
35 transform:rotate(10deg);
38 #features > li > .description {
39 -webkit-transition-property: 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;
56 #features > li.enabled > .description {
57 transform:translate3d(100px,0,0);
59 </style>
60 <script>
61 if (window.testRunner) {
62 testRunner.waitUntilDone();
63 testRunner.dumpAsText();
66 function init()
68 document.getElementById("item").className = "enabled";
69 setTimeout(check, 1000);
72 function log(s)
74 var results = document.getElementById('results');
75 results.innerHTML += s + '<br>';
78 function check()
80 var transform = window.getComputedStyle(document.getElementById('description')).transform;
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');
86 if (window.testRunner)
87 testRunner.notifyDone();
89 </script>
90 </head>
91 <body onload="init()">
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>