<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>