<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <g style="fill: blue;">
    <g id="g1">
      <rect id="rect" x="20%" width="4%" height="20%"/>
    </g>
  </g>

  <g style="fill: green;">
    <g id="g2">
      <use x="20%" xlink:href="#g1"/>
    </g>
  </g>

  <g style="fill: red;">
    <use x="20%" xlink:href="#g2"/>
  </g>

  <script>

    function doTest() {
      var rect = document.getElementById("rect");
      rect.setAttribute("height", "100%");
      document.documentElement.removeAttribute('class');
    
      if (window.testRunner)
        testRunner.notifyDone();
    }
    
    if (window.testRunner)
       testRunner.waitUntilDone();

    setTimeout(doTest, 100);
  </script>
  
</svg>