| <?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> |
