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