| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <style> |
| @keyframes reveal { |
| 0%, 50% { |
| height: 0; |
| } |
| |
| 100% { |
| height: auto; |
| } |
| } |
| |
| .landing { |
| width: 300px; |
| overflow: hidden; |
| border: 1px solid black; |
| animation: reveal 0.01s forwards; |
| } |
| |
| .contents { |
| height: 300px; |
| background-color: gray; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="animated" class="landing"> |
| <div class="contents"></div> |
| </div> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| document.getElementById('animated').addEventListener('animationend', function() { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }) |
| </script> |
| </body> |
| </html> |
