css/css-transitions/events-007.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transitions Test: no transitionend event after display:none</title>
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
<link rel="help" href="http://www.w3.org/TR/css3-transitions/#transition-events">
<link rel="help" href="https://lists.w3.org/Archives/Public/www-style/2015Apr/0405.html" title="[CSSWG] Minutes Telecon 2015-04-29" data-section-title="AnimationEnd events and display: none">
<meta name="assert" content="Making an element display:none; while it has a transition in progress should prevent a transitionend event from getting fired.">

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="./support/helper.js" type="text/javascript"></script>

</head>
<body>

<div id="log"></div>

<script>
async_test(t => {
  window.addEventListener('load', function () {
    const div = addDiv(t, { 'style': 'transition: background-color 0.4s;' +
                                     'background-color: red' });
    getComputedStyle(div).backgroundColor;
    div.style.backgroundColor = 'blue';

    // Wait until the transition has started before registering the event
    // listener. That way, if the transition finishes before the
    // requestAnimationFrame callback is called and the element is made
    // display:none, we won't report an error if transitionend is dispatched.
    //
    // In that case, there will be no indication that the test didn't test
    // anything. However, that's preferable to having this test fail
    // intermittently on slower automation hardware and end up being disabled
    // as a result.
    requestAnimationFrame(t.step_func(() => {
      div.addEventListener('transitionend', t.step_func(() => {
        assert_unreached('transitionend event didn\'t fire');
      }), false);

      div.style.display = 'none';

      setTimeout(t.done.bind(t), 500);
    }));
  }, false);
}, 'transitionend should not be fired if the element is made display:none during the transition');
</script>
</body>
</html>