[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / compositing / layer-creation / mismatched-rotated-transform-animation-overlap.html
1 <!DOCTYPE html>
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             animation: move 10s linear;
29         }
30         
31         @keyframes move {
32             from {
33                 -webkit-transform: translatex(10px);
34             }
35             to {
36                 -webkit-transform: scale(1.3) rotate(1deg);
37             }
38         }
39     </style>
40     <script>
41         if (window.testRunner) {
42             testRunner.dumpAsText();
43             testRunner.waitUntilDone();
44         }
45
46         function dumpLayers()
47         {
48             if (window.testRunner) {
49                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
50                 testRunner.notifyDone();
51             }
52         }
53
54         function makeDots()
55         {
56             const width = 30;
57             const height = 30;
58             
59             const spacing = 10;
60             
61             for (var row = 0; row < height; ++row) {
62                 for (var col = 0; col < width; ++col) {
63                     var dot = document.createElement('div');
64                     dot.className = 'dot';
65                     dot.style.left = spacing * col + 'px';
66                     dot.style.top = spacing * row + 'px';
67                     document.body.appendChild(dot);
68                 }
69             }
70             
71             window.setTimeout(function() {
72                 document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
73                 document.body.classList.add('changed');
74             }, 0);
75         }
76         
77         window.addEventListener('load', makeDots, false);
78     </script>
79 </head>
80 <body>
81
82     <div id="target" class="box">
83     </div>
84 <pre id="layers"></pre>
85 </body>
86 </html>