Header parsing for experimental and internal debug features
[WebKit-https.git] / LayoutTests / compositing / layer-creation / translate-transition-overlap.html
1 <!DOCTYPE html><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=false ] -->
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             transition: -webkit-transform 10s;
14             -webkit-transform: translateX(0);
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             -webkit-transform: translateX(100px);
28         }
29     </style>
30     <script>
31         if (window.testRunner) {
32             testRunner.dumpAsText();
33             testRunner.waitUntilDone();
34         }
35
36         function dumpLayers()
37         {
38             if (window.testRunner) {
39                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
40                 testRunner.notifyDone();
41             }
42         }
43
44         function makeDots()
45         {
46             const width = 40;
47             const height = 20;
48             
49             const spacing = 10;
50             
51             for (var row = 0; row < height; ++row) {
52                 for (var col = 0; col < width; ++col) {
53                     var dot = document.createElement('div');
54                     dot.className = 'dot';
55                     dot.style.left = spacing * col + 'px';
56                     dot.style.top = spacing * row + 'px';
57                     document.body.appendChild(dot);
58                 }
59             }
60             
61             window.setTimeout(function() {
62                 document.body.classList.add('changed');
63                 window.setTimeout(dumpLayers, 0);
64             }, 0);
65         }
66         
67         window.addEventListener('load', makeDots, false);
68     </script>
69 </head>
70 <body>
71
72     <div class="box">
73     </div>
74 <pre id="layers"></pre>
75 </body>
76 </html>