[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / compositing / layer-creation / animation-overlap-with-children.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2
3 <html>
4 <head>
5   <style>
6     
7     .animating {
8       -webkit-animation: slide 10s alternate linear infinite;
9     }
10     
11     .container {
12       height: 200px;
13       width: 250px;
14       padding: 5px;
15       border: 1px solid black;
16     }
17     
18     .banner {
19       width: 100%;
20       height: 50px;
21       background-color: silver;
22     }
23     
24     .box {
25       position: relative;
26       height: 100px;
27       width: 100px;
28       margin: 10px;
29       background-color: blue;
30     }
31     
32     .test1 {
33       position: absolute;
34       left: 0;
35       top: 10px;
36       background-color: orange;
37     }
38
39     .test2 {
40       position: absolute;
41       top: 60px;
42       left: 120px;
43       background-color: orange;
44     }
45     
46     .composited {
47       -webkit-transform: translateZ(0);
48     }
49     
50     @-webkit-keyframes slide {
51       from { -webkit-transform: none; }
52       to { -webkit-transform: translateX(100px); }
53     }
54   </style>
55   <script>
56     if (window.testRunner) {
57       testRunner.dumpAsText();
58       testRunner.waitUntilDone();
59     }
60       
61     function runTest()
62     {
63       var box = document.getElementById('to-animate');
64       box.addEventListener('webkitAnimationStart', animationStarted, false);
65       box.classList.add('animating');
66     }
67     
68     function animationStarted()
69     {
70       if (window.testRunner) {
71         document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
72         testRunner.notifyDone();
73       }
74     }
75     window.addEventListener('load', runTest, false);
76   </script>
77 </head>
78 <body>
79
80   <div id="to-animate" class="container">
81     <div class="composited banner"></div>
82     <div class="test1 box">Should be composited</div>
83     <div class="test2 box">Should not be composited</div>
84   </div>
85
86   <div class="box">Should be composited</div>
87   <pre id="layers">Layer tree goes here in DRT</pre>
88
89 </body>
90 </html>