<?xml version="1.0" encoding="UTF-8" standalone="no" ?> <html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> <head> <title>Moving sub-trees</title> <!-- PURPOSE: This case tests moving an animated sub-tree from one SVG document fragment to another. Different document fragments have different time containers and so this test ensures the animation is correctly transferred from one time container to the other. OPERATION: Both animations contain a moving box. The first animation also contains a circle. Both this circle and its child animation element are removed from the first animation and added to the second animation. EXPECTED RESULTS: The circle appears in the second box at the appropriate offset. --> <script> function move() { var svgs = document.getElementsByTagName('svg'); for (var i = 0; i < svgs.length; i++) { var svg = svgs[i]; svg.pauseAnimations(); svg.setCurrentTime(1.5); } doMove(); setTimeout('document.documentElement.removeAttribute("class")', 0); } function doMove() { var circle = document.getElementById('circle-to-move'); circle.parentNode.removeChild(circle); var target = document.getElementById('new-parent'); target.appendChild(circle); } </script> </head> <body onload="move()"> <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> <rect x="0" y="0" width="199" height="199" style="fill: none; stroke: black"/> <g> <!-- background rect to track progress --> <rect x="0" y="80" width="0" height="40" fill="royalblue" stroke="black" stroke-width="1"> <animate attributeName="width" from="0" to="200" begin="0s" dur="3s" fill="freeze"/> </rect> <!-- circle to transfer --> <circle cx="0" cy="100" r="15" fill="skyblue" stroke="black" stroke-width="1" id="circle-to-move"> <animate attributeName="cx" from="0" to="200" begin="0s" dur="3s" fill="freeze"/> </circle> </g> </svg> <!-- Second animation --> <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> <rect x="0" y="0" width="199" height="199" style="fill: none; stroke: black"/> <g id="new-parent"> <!-- background rect to track progress --> <rect x="0" y="80" width="0" height="40" fill="greenyellow" stroke="black" stroke-width="1"> <animate attributeName="width" from="0" to="200" begin="0s" dur="3s" fill="freeze"/> </rect> </g> </svg> </body> </html>