blob: d7bce92d31a45f95d368329c7210b19e1136a60d [file] [log] [blame]
<!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
<style>
.box {
height: 100px;
width: 0px;
border-width: 0;
border-left-width: 200px;
border-right-width: 200px;
border-style: solid;
border-color: blue;
animation: foo 200ms forwards;
}
@keyframes foo {
0% {
border-left-color: orange;
border-right-color: green;
}
50% {
border-left-color: red;
}
50%, to {
border-right-color: green;
}
to {
border-left-color: orange;
}
}
</style>
<script>
if (window.testRunner) {
testRunner.waitUntilDone();
window.addEventListener("load", function () {
const animations = document.querySelector(".box").getAnimations();
for (let animation of animations) {
if (animation instanceof CSSAnimation && animation.animationName == "foo") {
animation.currentTime = 100;
animation.pause();
break;
}
}
testRunner.notifyDone();
}, false);
}
</script>
<p>Left side should go orange -> red -> orange, right side should stay green at the end.</p>
<div class="box">
</div>