| <style> |
| @keyframes slidein { |
| from { |
| width: 50px; |
| } |
| |
| to { |
| width: 200px; |
| } |
| } |
| |
| .animate::after { |
| animation-duration: 0.01s; |
| animation-name: slidein; |
| animation-fill-mode: forwards; |
| } |
| |
| child::after { |
| display: block; |
| border: 2px solid green; |
| width: 50px; |
| height: 50px; |
| content: "after"; |
| } |
| </style> |
| |
| <container> |
| <child> |
| </child> |
| </container> |
| <script> |
| var child = document.querySelector("child"); |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| child.addEventListener("animationend", function () { testRunner.notifyDone(); }, false); |
| } |
| child.className = "animate"; |
| </script> |