eae2fb3cb27f0fa28f489db0d841b8d777211a5b
[WebKit-https.git] / LayoutTests / animations / play-state-in-shorthand.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <style>
5     body {
6       margin: 0;
7     }
8
9     #box {
10       position: absolute;
11       left: 0px;
12       top: 100px;
13       height: 100px;
14       width: 100px;
15       background-color: blue;
16       animation: move1 linear 2s;
17     }
18
19     #box.paused {
20         animation: move1 linear 2s paused;
21     }
22
23     @keyframes move1 {
24       from { transform: translateX(0px); }
25       to   { transform: translateX(300px); }
26     }
27   </style>
28   <script src="resources/animation-test-helpers.js" type="text/javascript"></script>
29   <script type="text/javascript">
30     const expectedValues = [
31       // [animation-name, time, element-id, property, expected-value, tolerance]
32       ["move1", 0.5, "box", "transform", [1,0,0,1,75,0], 20],
33       ["move1", 1.0, "box", "transform", [1,0,0,1,150,0], 20],
34       ["move1", 2.5, "box", "transform", [1,0,0,1,150,0], 20],
35     ];
36
37     function pauseAnimation()
38     {
39         document.getElementById("box").classList.add('paused');
40     }
41
42     function setTimers()
43     {
44         setTimeout(pauseAnimation, 1000);
45     }
46
47     runAnimationTest(expectedValues, setTimers, null, true);
48   </script>
49 </head>
50 <body>
51 <div id="box"></div>
52 <div id="result"></div>
53 </div>
54 </body>
55 </html>