148c23e7a7bbede67f415885f5d6d4e8dc1a9d4c
[WebKit-https.git] / LayoutTests / compositing / layer-creation / multiple-keyframes-animation-overlap.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
2
3 <html>
4 <head>
5     <style>
6         .box {
7             width: 200px;
8             height: 100px;
9             background-color: blue;
10             margin: 80px 40px;
11             position: relative;
12             box-shadow: 0 0 10px black;
13             -webkit-transform-origin: bottom left;
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             
35             30% {
36                 -webkit-transform: translateX(150px) scale(1.3);
37             }
38
39             60% {
40                 -webkit-transform: translateX(-20px) scale(0.5);
41             }
42
43             to {
44                 -webkit-transform: translateX(100px) scale(1.3);
45             }
46         }
47     </style>
48     <script>
49         if (window.testRunner) {
50             testRunner.dumpAsText();
51             testRunner.waitUntilDone();
52         }
53
54         function dumpLayers()
55         {
56             if (window.testRunner) {
57                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
58                 testRunner.notifyDone();
59             }
60         }
61
62         function makeDots()
63         {
64             const width = 50;
65             const height = 23;
66             
67             const spacing = 10;
68             
69             for (var row = 0; row < height; ++row) {
70                 for (var col = 0; col < width; ++col) {
71                     var dot = document.createElement('div');
72                     dot.className = 'dot';
73                     dot.style.left = spacing * col + 'px';
74                     dot.style.top = spacing * row + 'px';
75                     document.body.appendChild(dot);
76                 }
77             }
78             
79             window.setTimeout(function() {
80                 document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
81                 document.body.classList.add('changed');
82             }, 0);
83         }
84         
85         window.addEventListener('load', makeDots, false);
86     </script>
87 </head>
88 <body>
89
90     <div id="target" class="box">
91     </div>
92 <pre id="layers"></pre>
93 </body>
94 </html>