child-in-animating-element-display-none.html (751B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title> 4 Child element in animating element that display property is changed from none 5 </title> 6 <style> 7 #test { 8 display: none; 9 width: 100px; 10 height: 100px; 11 } 12 #child { 13 background-color: green; 14 width: 50px; 15 height: 50px; 16 } 17 </style> 18 <div id="test"> 19 <div id="child"></div> 20 </div> 21 <script> 22 var anim = test.animate({ backgroundColor: [ 'blue', 'blue' ] }, 23 { duration: 1000, 24 iterations: Infinity }); 25 26 requestAnimationFrame(() => { 27 requestAnimationFrame(() => { 28 document.styleSheets[0].cssRules[0].style.setProperty('display', 'block'); 29 document.documentElement.classList.remove('reftest-wait'); 30 }); 31 }); 32 </script> 33 </html>