deferred-anim-1.xhtml (2552B)
1 <?xml version="1.0" encoding="UTF-8" standalone="no" ?> 2 <html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> 3 <head> 4 <title>Deferred animation</title> 5 <!-- 6 PURPOSE: Although we'd like to disable animation components for those 7 documents that don't use animation, there's always the possibility that an 8 animation element will be added via the DOM after the document is loaded. 9 This test case checks that this case is not neglected. 10 11 OPERATION: There is an un-animated document. Then an <animate> element is 12 attached to the rectangle by script causing it to move to the right. 13 14 EXPECTED RESULTS: The box begins moving from the center. 15 --> 16 <script> 17 var timeoutID; 18 19 function animate() 20 { 21 addAnimation(); 22 var svg = document.getElementsByTagName('svg')[0]; 23 var anim = svg.getElementsByTagName('animate')[0]; 24 // We should pass quickly and fail slowly. 25 // In the pass case, we'll get an end event almost immediately. 26 // In the failure case, wait 30s before giving up. 27 timeoutID = window.setTimeout(giveUp, 30000); 28 anim.addEventListener('endEvent', finish, true); 29 } 30 31 function giveUp() { 32 var svg = document.getElementsByTagName('svg')[0]; 33 var rect = svg.getElementsByTagName('rect')[0]; 34 rect.setAttribute("fill", "red"); 35 var anim = svg.getElementsByTagName('animate')[0]; 36 anim.parentNode.removeChild(anim); 37 timeoutID = null; 38 finish(); 39 } 40 41 function finish() { 42 if (timeoutID) { 43 window.clearTimeout(timeoutID); 44 timeoutID = null; 45 } 46 document.documentElement.removeAttribute('class'); 47 } 48 49 function addAnimation() 50 { 51 const svgns="http://www.w3.org/2000/svg"; 52 var anim = document.createElementNS(svgns,'animate'); 53 anim.setAttribute('attributeName','fill'); 54 anim.setAttribute('from', 'red'); 55 anim.setAttribute('to','green'); 56 anim.setAttribute('begin','0s'); 57 anim.setAttribute('dur','0.001s'); 58 anim.setAttribute('fill','freeze'); 59 var target = document.getElementById('target'); 60 target.appendChild(anim); 61 } 62 </script> 63 </head> 64 65 <body onload="animate()"> 66 <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> 67 <rect width="199" height="199" fill="red" id="target"/> 68 </svg> 69 </body> 70 </html>