moved-tree-1.xhtml (2774B)
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>Moving sub-trees</title> 5 <!-- 6 PURPOSE: This case tests moving an animated sub-tree from one SVG document 7 fragment to another. Different document fragments have different time 8 containers and so this test ensures the animation is correctly transferred 9 from one time container to the other. 10 11 OPERATION: Both animations contain a moving box. The first animation also 12 contains a circle. Both this circle and its child animation element are 13 removed from the first animation and added to the second animation. 14 15 EXPECTED RESULTS: The circle appears in the second box at the appropriate 16 offset. 17 --> 18 <script> 19 function move() 20 { 21 var svgs = document.getElementsByTagName('svg'); 22 for (var i = 0; i < svgs.length; i++) { 23 var svg = svgs[i]; 24 svg.pauseAnimations(); 25 svg.setCurrentTime(1.5); 26 } 27 doMove(); 28 setTimeout('document.documentElement.removeAttribute("class")', 0); 29 } 30 31 function doMove() 32 { 33 var circle = document.getElementById('circle-to-move'); 34 circle.parentNode.removeChild(circle); 35 var target = document.getElementById('new-parent'); 36 target.appendChild(circle); 37 } 38 </script> 39 </head> 40 41 <body onload="move()"> 42 <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> 43 <rect x="0" y="0" width="199" height="199" 44 style="fill: none; stroke: black"/> 45 <g> 46 <!-- background rect to track progress --> 47 <rect x="0" y="80" width="0" height="40" fill="royalblue" 48 stroke="black" stroke-width="1"> 49 <animate attributeName="width" from="0" to="200" begin="0s" dur="3s" 50 fill="freeze"/> 51 </rect> 52 <!-- circle to transfer --> 53 <circle cx="0" cy="100" r="15" fill="skyblue" stroke="black" 54 stroke-width="1" id="circle-to-move"> 55 <animate attributeName="cx" from="0" to="200" begin="0s" dur="3s" 56 fill="freeze"/> 57 </circle> 58 </g> 59 </svg> 60 <!-- Second animation --> 61 <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> 62 <rect x="0" y="0" width="199" height="199" 63 style="fill: none; stroke: black"/> 64 <g id="new-parent"> 65 <!-- background rect to track progress --> 66 <rect x="0" y="80" width="0" height="40" fill="greenyellow" 67 stroke="black" stroke-width="1"> 68 <animate attributeName="width" from="0" to="200" begin="0s" dur="3s" 69 fill="freeze"/> 70 </rect> 71 </g> 72 </svg> 73 </body> 74 </html>