| <!DOCTYPE html> |
| <style> |
| #child { |
| width: 50px; |
| height: 50px; |
| background: red; |
| -webkit-animation: flash 0.2s infinite; |
| } |
| |
| .hideMe { |
| display: none; |
| } |
| |
| @-webkit-keyframes flash { |
| 0% { |
| opacity: 1; |
| } |
| 100% { |
| opacity: 0; |
| } |
| } |
| </style> |
| <div id='container'> |
| <div id='child' class='hideMe'></div> |
| </div> |
| <script> |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| testRunner.dumpAsText(); |
| } |
| var firstCall = true; |
| child.addEventListener('webkitAnimationStart', function(e) { |
| if (firstCall) { |
| container.classList.add('hideMe'); |
| container.offsetTop; |
| container.classList.remove('hideMe'); |
| firstCall = false; |
| return; |
| } |
| document.documentElement.textContent = 'PASS'; |
| if (window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| }); |
| child.classList.remove('hideMe'); |
| </script> |
| |
