[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / compositing / visible-rect / animated.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2
3 <html>
4 <head>
5     <style>
6         .container {
7             position: relative;
8             height: 200px;
9             width: 500px;
10             border: 1px solid black;
11             overflow: hidden;
12             z-index: 0;
13         }
14         
15         .box {
16             position: absolute;
17             width: 200px;
18             height: 200px;
19             background-color: blue;
20             -webkit-animation: move 20000000s linear;
21         }
22         
23         @-webkit-keyframes move {
24             from { -webkit-transform: translateX(-100px); }
25             to   { -webkit-transform: translateX(300px); }
26         }
27     </style>
28     <script>
29         if (window.testRunner) {
30             testRunner.dumpAsText();
31             testRunner.waitUntilDone();
32         }
33
34         function doTest()
35         {
36             document.getElementById('animated').addEventListener('webkitAnimationStart', function() {
37                 if (window.internals)
38                     document.getElementById('layers').innerText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_VISIBLE_RECTS)
39
40                 if (window.testRunner)
41                     testRunner.notifyDone();
42             }, false);
43         }
44         window.addEventListener('load', doTest, false);
45     </script>
46 </head>
47 <body>
48
49     <div class="container">
50         <div id="animated" class="box"></div>
51     </div>
52
53 <pre id="layers">Layer tree goes here when testing</pre>
54 </body>
55 </html>