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