Unreviewed, rolling out r239607.
[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 runTest() {
57         if (!window.testRunner)
58           return;
59         // We wait a bit after the squares are moved behind the blue rectangle. For discontinuous
60         // transforms we have 5000px / 100 steps = 5px/step. Hence this happens after 20 steps i.e.
61         // 20/100*10s = 200ms.
62         testRunner.waitUntilDone();
63         setTimeout(() => { testRunner.notifyDone(); }, 300);
64       }
65     </script>
66   </head>
67   <body onload="runTest()">
68     <p>This test passes if green squares are moved behind the blue rectangle.</p>
69     <div id="container">
70       <div id="squareLinear"><tt>transform</tt> (linear)</div>
71       <div id="squareSteps"><tt>transform</tt> (steps)</div>
72       <div id="squareNonAccelerated"><tt>left</tt> (steps)</div>
73       <div id="coveringRect"></div>
74     </div>
75   </body>
76 </html>