[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / animations / needs-layout.html
1 <style>
2     #overlay {
3         position: absolute;
4         left: 100px;
5         top: 100px;
6         width: 200px;
7         height: 200px;
8         transform: translate(100px);
9         background-color: green;
10     }
11
12     #container .child {
13         position: absolute;
14         left: 150px;
15         top: 150px;
16         width: 100px;
17         height: 100px;
18         background-color: red;
19         animation: 5s anim;
20     }
21
22     @keyframes anim {
23         0% {
24             transform: translate(80%, 0);
25         }
26         100% {
27             transform: translate(80%, 100px);
28         }
29     }
30
31 </style>
32 <script>
33 if (window.testRunner)
34     testRunner.waitUntilDone();
35
36 function test() {
37     var el = document.getElementById("container");
38     var child = document.createElement("div");
39
40     child.classList.add("child");
41     el.appendChild(child);
42     setTimeout(function () {
43         child.style.webkitAnimationPlayState = "paused";
44         if (window.testRunner)
45             testRunner.notifyDone();
46     }, 10);
47 }
48
49 window.addEventListener("load", function () {
50     setTimeout(test, 10);
51 }, false);
52 </script>
53 <body>
54     <div id="container"></div>
55     <div id="overlay"></div>
56 </body>
57 </html>