| <!DOCTYPE html> |
| <style> |
| #child { |
| width: 50px; |
| height: 50px; |
| background: red; |
| animation: flash 0.2s infinite; |
| } |
| |
| .hideMe { |
| display: none; |
| } |
| |
| @keyframes flash { |
| 0% { |
| opacity: 1; |
| } |
| 100% { |
| opacity: 0; |
| } |
| } |
| </style> |
| <div id='container'> |
| <div id='child' class='hideMe'></div> |
| </div> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script> |
| var test = async_test("Test if display none cancels nested animations"); |
| |
| var firstCall = true; |
| child.addEventListener('animationstart', test.step_func((e) => { |
| if (firstCall) { |
| container.classList.add('hideMe'); |
| container.offsetTop; |
| container.classList.remove('hideMe'); |
| firstCall = false; |
| return; |
| } |
| test.done(); |
| })); |
| child.classList.remove('hideMe'); |
| </script> |
| |
