flex-composited-animated-table-row-background.html

<!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>

chromium/third_party/blink/web_tests/compositing/flex-composited-animated-table-row-background.html