deferred-tree-1.xhtml (3446B)
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 tree</title> 5 <!-- 6 PURPOSE: This is similar to the deferred-anim test case. The animation 7 controller is not created for every web page, but only for those pages that 8 contain SMIL animatable content. But, if some SVG content containing 9 animation is added after the page is loaded, the animation should still run. 10 11 OPERATION: There is a plain XHTML document, but later an SVG document is 12 added. This document contains a moving circle. 13 14 EXPECTED RESULTS: The SVG document fragment appears containing a circle that 15 is animated. 16 --> 17 <script> 18 var timeoutID; 19 20 function animate() 21 { 22 makeTree(); 23 var svg = document.getElementById('created-svg'); 24 var anim = svg.getElementsByTagName('animate')[0]; 25 // We should pass quickly and fail slowly. 26 // In the pass case, we'll get an end event almost immediately. 27 // In the failure case, wait 30s before giving up. 28 timeoutID = window.setTimeout(giveUp, 30000); 29 anim.addEventListener('endEvent', finish, true); 30 } 31 32 function giveUp() { 33 var svg = document.getElementById('created-svg'); 34 var rect = svg.getElementsByTagName('rect')[0]; 35 // It's possible we could arrive here after successfully running the 36 // animation but failing to fire the end event. 37 // Technically that's a pass as far as this test is concerned, but it 38 // will mean every test run is taking 30s longer than it should and 39 // we'd like to know about that so we'll make it a failure. 40 rect.setAttribute("fill", "red"); 41 // We'll need to clear the animation for this to take effect 42 var anim = svg.getElementsByTagName('animate')[0]; 43 anim.parentNode.removeChild(anim); 44 timeoutID = null; 45 finish(); 46 } 47 48 function finish() { 49 if (timeoutID) { 50 window.clearTimeout(timeoutID); 51 timeoutID = null; 52 } 53 document.documentElement.removeAttribute('class'); 54 } 55 56 function makeTree() 57 { 58 const svgns="http://www.w3.org/2000/svg"; 59 var svg = document.createElementNS(svgns, 'svg'); 60 svg.setAttribute('xmlns', svgns); 61 svg.setAttribute('width', '200px'); 62 svg.setAttribute('height', '200px'); 63 svg.setAttribute('id', 'created-svg'); 64 var rect = document.createElementNS(svgns, 'rect'); 65 rect.setAttribute('x', '0'); 66 rect.setAttribute('y', '0'); 67 rect.setAttribute('width', '199'); 68 rect.setAttribute('height', '199'); 69 var anim = document.createElementNS(svgns, 'animate'); 70 anim.setAttribute('attributeName', 'fill'); 71 anim.setAttribute('begin', '0s'); 72 anim.setAttribute('from', 'red'); 73 anim.setAttribute('to', 'green'); 74 anim.setAttribute('dur', '0.001s'); 75 anim.setAttribute('fill', 'freeze'); 76 rect.appendChild(anim); 77 svg.appendChild(rect); 78 var target = document.getElementById('tree-container'); 79 target.appendChild(svg); 80 } 81 </script> 82 </head> 83 84 <body onload="animate()"> 85 <p id="tree-container"/> 86 </body> 87 </html>