| <!DOCTYPE html> |
| <style> |
| .flex-item { |
| flex: 1 1 ; |
| position: relative; |
| } |
| |
| .moving-item { |
| animation-name: moving; |
| animation-duration: 1s; |
| } |
| |
| @keyframes moving { |
| 0% { |
| flex: 1 1; |
| opacity: 0.6; |
| } |
| 100% { |
| flex: 0.0001 10; |
| } |
| } |
| </style> |
| <div style="display: flex"> |
| <div id="target" class="flex-item moving-item">y</div> |
| <div class="flex-item"> |
| <table> |
| <tr style="background-color: red"> |
| <td style="position: relative"> |
| x |
| </td> |
| </tr> |
| </table> |
| </div> |
| </div> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| target.addEventListener('animationend', function(event) { |
| target.classList.remove('moving-item'); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }); |
| </script> |
