| OLD | NEW |
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <style> |
| 3 .flex-item { |
| 4 flex: 1 1 ; |
| 5 position: relative; |
| 6 } |
| 7 |
| 8 .moving-item { |
| 9 animation-name: moving; |
| 10 animation-duration: 1s; |
| 11 } |
| 12 |
| 13 @keyframes moving { |
| 14 0% { |
| 15 flex: 1 1; |
| 16 opacity: 0.6; |
| 17 } |
| 18 100% { |
| 19 flex: 0.0001 10; |
| 20 } |
| 21 } |
| 22 </style> |
| 23 <div style="display: flex"> |
| 24 <div id="target" class="flex-item moving-item">y</div> |
| 25 <div class="flex-item"> |
| 26 <table> |
| 27 <tr style="background-color: red"> |
| 28 <td style="position: relative"> |
| 29 x |
| 30 </td> |
| 31 </tr> |
| 32 </table> |
| 33 </div> |
| 34 </div> |
| 35 <script> |
| 36 if (window.testRunner) |
| 37 testRunner.waitUntilDone(); |
| 38 target.addEventListener('animationend', function(event) { |
| 39 target.classList.remove('moving-item'); |
| 40 if (window.testRunner) |
| 41 testRunner.notifyDone(); |
| 42 }); |
| 43 </script> |
| OLD | NEW |