Header parsing for experimental and internal debug features
[WebKit-https.git] / LayoutTests / compositing / layer-creation / overlap-animation.html
1 <!DOCTYPE html><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=true ] -->
2
3 <html>
4 <head>
5   <style>
6     .container {
7       height: 240px;
8       width: 120px;
9       overflow: hidden;
10       position: relative;
11       z-index: 0; /* create stacking context */
12       border: 1px solid black;
13     }
14     
15     .box {
16       position: relative;
17       width: 100px;
18       height: 100px;
19       margin: 10px;
20       background-color: blue;
21     }
22     
23     .animating {
24       -webkit-animation: spin 2s infinite linear;
25     }
26     
27     @-webkit-keyframes spin {
28       from { -webkit-transform: rotate(0); }
29       to   { -webkit-transform: rotate(360deg); }
30     }
31   </style>
32   <script>
33     if (window.testRunner) {
34       testRunner.dumpAsText();
35       testRunner.waitUntilDone();
36     }
37       
38     function runTest()
39     {
40       var box = document.getElementById('to-animate');
41       box.addEventListener('webkitAnimationStart', animationStarted, false);
42       box.className = 'animating box';
43     }
44     
45     function animationStarted()
46     {
47       if (window.testRunner) {
48         document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
49         testRunner.notifyDone();
50       }
51     }
52     window.addEventListener('load', runTest, false);
53   </script>
54 </head>
55 <body>
56   <div class="container">
57     <div id="to-animate" class="box"></div>
58     <!-- This div will get a layer -->
59     <div class="box"></div>
60   </div>
61   <!-- This div should not get a layer -->
62   <div class="box"></div>
63 <pre id="layers">Layer tree goes here in DRT</pre>
64 </body>
65 </html>