[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / compositing / contents-scale / animating.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2
3 <html>
4 <head>
5 <style>
6     #box {
7         width: 100px;
8         height: 100px;
9         margin: 10px;
10         padding: 10px;
11         box-sizing: border-box;
12         background-color: silver;
13         -webkit-transform-origin: top left;
14     }
15     
16     .animating {
17         -webkit-animation: scale 100000000s infinite linear;
18     }
19     
20     @-webkit-keyframes scale {
21         from { -webkit-transform: scale(1.5); }
22         to   { -webkit-transform: scale(3); }
23     }
24 </style>
25     <script>
26         if (window.testRunner) {
27             testRunner.dumpAsText();
28             testRunner.waitUntilDone();
29         }
30
31         function dumpLayers()
32         {
33             if (window.internals)
34                 document.getElementById('layers').innerText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_VISIBLE_RECTS)
35
36             if (window.testRunner)
37                 testRunner.notifyDone();
38         }
39         
40         function doTest()
41         {
42             var box = document.getElementById('box');
43             box.addEventListener('webkitAnimationStart', dumpLayers, false);
44             box.classList.add('animating');
45         }
46         window.addEventListener('load', doTest, false);
47     </script>
48 </head>
49 <body>
50
51     <div id="box">Box</div>
52
53     <pre id="layers">Layer tree goes here when testing</pre>
54 </body>
55 </html>