68 lines
1.2 KiB
HTML
68 lines
1.2 KiB
HTML
<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>
|
|
|