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