[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / animations / duplicate-keys.html
1 <style>
2 .box {
3     height: 100px;
4     width: 0px;
5     border-width: 0;
6     border-left-width: 200px;
7     border-right-width: 200px;
8     border-style: solid;
9     border-color: blue;
10     animation: foo 200ms forwards;
11 }
12 @keyframes foo {
13     0% {
14         border-left-color: orange;
15         border-right-color: green;
16     }
17     50% {
18         border-left-color: red;
19     }
20     50%, to {
21         border-right-color: green;
22     }
23     to {
24         border-left-color: orange;
25     }
26 }
27
28 </style>
29 <script>
30 if (window.testRunner) {
31     testRunner.waitUntilDone();
32     window.addEventListener("load", function () {
33         const animations = document.querySelector(".box").getAnimations();
34         for (let animation of animations) {
35             if (animation instanceof CSSAnimation && animation.animationName == "foo") {
36                 animation.currentTime = 100;
37                 animation.pause();
38                 break;
39             }
40         }
41         testRunner.notifyDone();
42     }, false);
43 }
44 </script>
45 <p>Left side should go orange -> red -> orange, right side should stay green at the end.</p>
46 <div class="box">
47 </div>
48