<!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>
Codebase Browser
chromium