anim-change-display-block-for-dynamically-appended-elem.html (1315B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>Test dynamically-appended animation in a subtree that dynamically became 'display:none'</title> 5 </head> 6 <body style="background-color: lime;"> 7 <div id="target" style="display: none;"> 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 svg = document.getElementsByTagName("svg")[0]; 16 svg.pauseAnimations(); // pause svg animation. 17 18 var target = document.getElementById("target"); 19 var rect = document.getElementById("rect"); 20 var animate = document.createElementNS('http://www.w3.org/2000/svg', 21 'animate'); 22 animate.setAttribute('attributeName', 'fill'); 23 animate.setAttribute('from', 'blue'); 24 animate.setAttribute('to', 'red'); 25 animate.setAttribute('dur', '100s'); 26 rect.appendChild(animate); 27 28 requestAnimationFrame(function(time) { 29 target.style.display = 'block'; 30 requestAnimationFrame(function(time) { 31 document.documentElement.removeAttribute("class"); 32 }); 33 }); 34 }); 35 </script> 36 </body> 37 </html>