anim-change-display-none-for-dynamically-appended-elem.html (1102B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>Test dynamically-appended animation on an element that dynamically becomes 'display:none'</title> 5 </head> 6 <body style="background-color: lime;"> 7 <div> 8 <svg> 9 <rect width="100" height="100" fill="brown" id="rect"> 10 </rect> 11 </svg> 12 </div> 13 <script> 14 document.addEventListener('MozReftestInvalidate', function() { 15 var rect = document.getElementById("rect"); 16 var animate = document.createElementNS('http://www.w3.org/2000/svg', 17 'animate'); 18 animate.setAttribute('attributeName', 'fill'); 19 animate.setAttribute('from', 'blue'); 20 animate.setAttribute('to', 'red'); 21 animate.setAttribute('dur', '100s'); 22 rect.appendChild(animate); 23 24 requestAnimationFrame(function(time) { 25 rect.style.display = 'none'; 26 requestAnimationFrame(function(time) { 27 document.documentElement.removeAttribute("class"); 28 }); 29 }); 30 }); 31 </script> 32 </body> 33 </html>