[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / compositing / layer-creation / translate-scale-animation-overlap.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2
3 <html>
4 <head>
5     <style>
6         .box {
7             width: 200px;
8             height: 100px;
9             background-color: blue;
10             margin: 82px 30px;
11             position: relative;
12             box-shadow: 0 0 10px black;
13             -webkit-transform-origin: 10px bottom;
14             transition: -webkit-transform 10s;
15         }
16         
17         .dot {
18             position: absolute;
19             top: 0;
20             left: 0;
21             height: 4px;
22             width: 4px;
23             background-color: silver;
24         }
25         
26         body.changed .box {
27             animation: move 10s linear;
28         }
29         
30         @keyframes move {
31             from {
32                 -webkit-transform: translatex(10px);
33             }
34             to {
35                 -webkit-transform: translateX(100px) scale(1.3);
36             }
37         }
38     </style>
39     <script>
40         if (window.testRunner) {
41             testRunner.dumpAsText();
42             testRunner.waitUntilDone();
43         }
44
45         function dumpLayers()
46         {
47             if (window.testRunner) {
48                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
49                 testRunner.notifyDone();
50             }
51         }
52
53         function makeDots()
54         {
55             const width = 50;
56             const height = 23;
57             
58             const spacing = 10;
59             
60             for (var row = 0; row < height; ++row) {
61                 for (var col = 0; col < width; ++col) {
62                     var dot = document.createElement('div');
63                     dot.className = 'dot';
64                     dot.style.left = spacing * col + 'px';
65                     dot.style.top = spacing * row + 'px';
66                     document.body.appendChild(dot);
67                 }
68             }
69             
70             window.setTimeout(function() {
71                 document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
72                 document.body.classList.add('changed');
73             }, 0);
74         }
75         
76         window.addEventListener('load', makeDots, false);
77     </script>
78 </head>
79 <body>
80
81     <div id="target" class="box">
82     </div>
83 <pre id="layers"></pre>
84 </body>
85 </html>