restyle-after-display-none.html (1231B)
1 <!doctype html> 2 <html class="reftest-wait reftest-no-flush"> 3 <head> 4 <meta charset=utf-8> 5 <title>Check for animation restyling on an element's initial restyling after leaving a display:none subtree</title> 6 <style> 7 #target { 8 width: 0px; 9 height: 100px; 10 background: green; 11 display: none; 12 } 13 </style> 14 </head> 15 <body> 16 <div id="target"></div> 17 <script> 18 // Wait for a steady state before beginning so that style flushes from the 19 // initial restyling don't interfere with the results. 20 document.addEventListener('MozReftestInvalidate', () => { 21 requestAnimationFrame(() => { 22 // Get target element -- computed style should be display: none by now. 23 const target = document.getElementById('target'); 24 25 // Update specified style but don't flush 26 target.style.display = 'block'; 27 28 // Trigger an animation on the element. 29 // 30 // animate() won't flush styles so we are testing that it still correctly 31 // marks the element as needing an animation restyle even when it doesn't have 32 // style data. 33 target.animate( 34 { width: ['0px', '100px'] }, 35 { duration: 100 * 1000, easing: 'step-start' } 36 ); 37 38 document.documentElement.classList.remove('reftest-wait'); 39 }); 40 }); 41 </script> 42 </body> 43 </html>