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