non-rendered-element-004.tentative.html (1462B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>CSS Transitions Test: Transitions do not run for a ::marker-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 addStyle(t, { 21 '.init::marker': 'content: ""; color: red; transition: color 100s;', 22 '.change::marker': 'color: green', 23 }); 24 25 // Create element (and pseudo-element) and attach event listeners 26 const div = addDiv(t, { 'style': 'display: list-item' }); 27 div.classList.add('init'); 28 29 const eventWatcher = new EventWatcher(t, div, [ 30 'transitionrun', 31 'transitioncancel', 32 ]); 33 34 // Trigger transition 35 getComputedStyle(div).color; 36 div.classList.add('change'); 37 getComputedStyle(div).color; 38 39 await eventWatcher.wait_for('transitionrun'); 40 41 // Make the parent element no longer display: list-item so that the pseudo 42 // element no longer renders 43 div.style.display = 'block'; 44 45 await eventWatcher.wait_for('transitioncancel'); 46 }, 'Transitions on ::marker pseudo-elements are canceled when the' 47 + ' parent display type is no longer list-item'); 48 </script> 49 50 </body> 51 </html>