[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / animations / play-state-start-paused.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <style>
5         .container {
6             height: 100px;
7             width: 500px;
8             margin: 4px;
9             border: 1px solid black;
10         }
11         .box {
12             position: relative;
13             width: 100px;
14             height: 100px;
15             background-color: green;
16         }
17         
18         /* For manual testing. */
19         .container:hover .box {
20             animation-play-state: running;
21         }
22         
23         .mover {
24             animation: move 1s linear -0.5s paused;
25         }
26         
27         .slider {
28             animation: slide 1s linear -0.5s paused;
29         }
30         
31         @keyframes move {
32             from { left: 0; }
33             to   { left: 400px; }
34         }
35
36         @keyframes slide {
37             from { transform: translate3d(0, 0, 0); }
38             to   { transform: translate3d(400px, 0, 0); }
39         }
40     </style>
41 </head>
42 <body>
43     <div class="container">
44         <div class="mover box"></div>
45     </div>
46     <div class="container">
47         <div class="slider box"></div>
48     </div>
49 </body>
50 </html>