blob: af480da26c6cba9bcc904376796d1d793663514c [file] [log] [blame]
<style>
div {
background-color: rebeccapurple;
width: 100px;
height: 100px;
}
#test{
position: absolute;
top: 200px;
left: 200px;
}
.animate-class {
animation: 1s linear 0s 1 normal scale;
}
.first-letter::first-letter {
color:red;
}
@keyframes scale {
0% {
transform: scale(0);
}
10% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
</style>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
window.onload = async function() {
const element = document.body.appendChild(document.createElement("div"));
element.className = "animate-class";
element.id = "test";
const animation = element.getAnimations()[0];
await animation.ready;
await new Promise(resolve => requestAnimationFrame(resolve));
await new Promise(resolve => requestAnimationFrame(resolve));
// Force render tree rebuild in the middle of the animation.
document.body.classList.add("first-letter");
// See that the accelerated animation still progresses.
while (animation.currentTime < 100)
await new Promise(resolve => requestAnimationFrame(resolve));
if (window.testRunner)
testRunner.notifyDone();
}
</script>