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