display-none-cancels-nested-animations.html

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

chromium/third_party/blink/web_tests/animations/display-none-cancels-nested-animations.html