non-rendered-element-002.html (1574B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>CSS Transitions Test: Transitions do not run for a pseudo-element that is not being rendered</title> 6 <link rel="help" title="Starting transitions" 7 href="https://drafts.csswg.org/css-transitions/#starting"> 8 9 <script src="/resources/testharness.js" type="text/javascript"></script> 10 <script src="/resources/testharnessreport.js" type="text/javascript"></script> 11 <script src="./support/helper.js" type="text/javascript"></script> 12 13 </head> 14 <body> 15 <div id="log"></div> 16 17 <script> 18 19 promise_test(async t => { 20 for (const pseudoType of ['before', 'after']) { 21 const style = addStyle(t, { 22 [`.init::${pseudoType}`]: 'content: ""; width: 0px; transition: width 100s;', 23 [`.change::${pseudoType}`]: 'width: 100px;', 24 [`.cancel::${pseudoType}`]: 'content: none', 25 }); 26 27 // Create element (and pseudo-element) and attach event listeners 28 const div = addDiv(t); 29 div.classList.add('init'); 30 31 const eventWatcher = new EventWatcher(t, div, [ 32 'transitionrun', 33 'transitioncancel', 34 ]); 35 36 // Trigger transition 37 getComputedStyle(div).width; 38 div.classList.add('change'); 39 getComputedStyle(div).width; 40 41 await eventWatcher.wait_for('transitionrun'); 42 43 // Make the pseudo-element no longer rendered 44 div.classList.add('cancel'); 45 46 await eventWatcher.wait_for('transitioncancel'); 47 48 div.remove(); 49 style.remove(); 50 } 51 }, 'Transitions on ::before/::after pseudo-elements are canceled when the' 52 + ' content property is cleared'); 53 54 </script> 55 56 </body> 57 </html>