fd058b9a4907c3a36b6ba8599bbe743ce535ae51
[WebKit-https.git] / LayoutTests / http / wpt / css / css-animations / start-animation-001.html
1 <!DOCTYPE html>
2 <html>
3   <head>
4     <meta charset="utf-8">
5     <title>Verify that animations properly start</title>
6     <style>
7       #container {
8         position: absolute;
9         left: 0;
10         top: 3em;
11       }
12       #squareLinear, #squareSteps, #squareNonAccelerated  {
13         width: 100px;
14         height: 100px;
15         background: lightblue;
16         position: absolute;
17       }
18       /* Avoid animation-fill-mode, to make sure that the move is done by the animation code. */
19       #squareLinear {
20         top: 0px;
21         animation: moveByTransform 10s linear;
22       }
23       #squareSteps {
24         top: 150px;
25         animation: moveByTransform 10s steps(1000);
26       }
27       #squareNonAccelerated  {
28         top: 300px;
29         animation: moveByLeft 10s steps(100);
30       }
31       @keyframes moveByTransform
32       {
33         100% {
34           transform: translate(5000px);
35         }
36       }
37       @keyframes moveByLeft
38       {
39         0% {
40           left: 0px;
41         }
42         100% {
43           left: 5000px;
44         }
45       }
46       #coveringRect {
47         background: blue;
48         position: absolute;
49         top: -10px;
50         left: 90px;
51         width: 5000px;
52         height: 500px;
53       }
54     </style>
55     <script>
56       function squareLeft(id) {
57           var element = document.getElementById(id);
58           if (id === "squareNonAccelerated")
59               return element.getBoundingClientRect().left;
60           var transform = window.getComputedStyle(element).getPropertyValue("transform");
61           var match = /matrix\(1, 0, 0, 1, (.*), 0\)/.exec(transform);
62           return match ? parseFloat(match[1]) : 0;
63       }
64       function shouldBeHiddenByCoveringRect(id) {
65           var coveringRectLeft = document.getElementById("coveringRect").getBoundingClientRect().left;
66           return squareLeft(id) > coveringRectLeft;
67       }
68       // We wait until all the squares are moved behind the blue rectangle.
69       if (window.testRunner)
70           testRunner.waitUntilDone();
71       function step() {
72           if (["squareLinear", "squareSteps", "squareNonAccelerated"].every(shouldBeHiddenByCoveringRect)) {
73               if (window.testRunner)
74                   testRunner.notifyDone();
75               return;
76           }
77           window.requestAnimationFrame(step);
78       }
79       window.requestAnimationFrame(step);
80     </script>
81   </head>
82   <body>
83     <p>This test passes if green squares are moved behind the blue rectangle.</p>
84     <div id="container">
85       <div id="squareLinear"><tt>transform</tt> (linear)</div>
86       <div id="squareSteps"><tt>transform</tt> (steps)</div>
87       <div id="squareNonAccelerated"><tt>left</tt> (steps)</div>
88       <div id="coveringRect"></div>
89     </div>
90   </body>
91 </html>