[macOS WK2 Debug ] Flaky Test: animations/play-state-in-shorthand.html
[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 </head>
29 <body>
30 <div id="box"></div>
31 <div id="result"></div>
32 <script type="text/javascript">
33
34     if (window.testRunner) {
35         testRunner.dumpAsText();
36         testRunner.waitUntilDone();
37     }
38
39     document.getElementById("box").addEventListener("animationstart", event => {
40         const animation = event.target.getAnimations()[0];
41         result.innerHTML += `${animation.playState == "running" ? "PASS" : "FAIL"} - animation is running upon receiving animationstart event<br>`;
42         event.target.classList.add("paused");
43         result.innerHTML += `${animation.playState == "paused" ? "PASS" : "FAIL"} - animation is paused after setting the animation-play-state property to paused through the shorthand`;
44
45         if (window.testRunner)
46             testRunner.notifyDone();
47     });
48 </script>
49 </body>
50 </html>