display-none-no-animations.html (703B)
1 <!DOCTYPE html> 2 <link rel=help href="mailto:jarhar@chromium.org"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 6 <div id=target>target</div> 7 <style> 8 #target { 9 display: none; 10 transition: 1s; 11 color: red; 12 } 13 #target.animated { 14 transition: 1s; 15 color: green; 16 } 17 </style> 18 19 <script> 20 test(() => { 21 target.addEventListener('transitionstart', () => { 22 assert_unreached('transitionstart should not be fired.'); 23 }); 24 target.classList.add('animated'); 25 assert_equals(target.getAnimations().length, 0, 26 'There should not be any animations running.'); 27 }, 'Transitions and animations should not occur on display:none elements.'); 28 </script>