1 files changed, 50 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-transitions/events-007.html b/testing/web-platform/tests/css/css-transitions/events-007.html
new file mode 100644
index 0000000000..610df6e85d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-transitions/events-007.html
@@ -0,0 +1,50 @@
+<!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>