blob: a642ff3288510acd256b9d3d81085cd778aa53a5 [file] [log] [blame]
<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 () {
var box = document.querySelector(".box");
internals.pauseAnimationAtTimeOnElement("foo", 0.1, box);
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>