dynamic-use-01.svg

Enable keyboard shortcuts

Checkerboard

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

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

     xmlns:xlink="http://www.w3.org/1999/xlink"

     class="reftest-wait">

  <title>Testing that dynamic changes to the element for a given ID are reflected in 'use'</title>

  <use id="u1" x="10%" xlink:href="#r1"/>

  <rect width="11%" height="100%" fill="lime" id="r1"/>

  <rect width="11%" height="100%" fill="lime" id="x"/>

  <use id="u2" x="20%" xlink:href="#r2"/>

  <rect width="10%" height="100%" fill="red" id="r3"/>

  <rect width="11%" height="100%" fill="lime" id="r3"/>

  <use id="u3" x="30%" xlink:href="#r3"/>

  <rect width="10%" height="100%" fill="red" id="r4"/>

  <rect width="11%" height="100%" fill="lime" id="r4"/>

  <use id="u4" x="40%" xlink:href="#r4"/>

  <rect width="10%" height="100%" fill="red" id="r5"/>

  <use id="u5" x="50%" xlink:href="#r5"/>

  <rect width="10%" height="100%" fill="red" id="r6"/>

  <rect width="11%" height="100%" fill="lime" id="r6-2"/>

  <use id="u6" x="60%" xlink:href="#r6"/>

  <rect width="11%" height="100%" fill="lime" id="r7"/>

  <rect width="10%" height="100%" fill="red" id="r7-2"/>

  <use id="u7" x="70%" xlink:href="#r7"/>

  <rect width="11%" height="100%" fill="lime" id="r8-2"/>

  <rect width="10%" height="100%" fill="red" id="r8"/>

  <use id="u8" x="80%" xlink:href="#r8"/>

  <rect width="11%" height="100%" fill="lime"/>

  <rect x="90%" width="11%" height="100%" fill="lime"/>

  <script type="text/javascript">

    document.addEventListener("MozReftestInvalidate", doTest, false);

    setTimeout(doTest, 4000); // fallback for running outside reftest

    function doTest() {

      // force frame construction; test that parsing "r1" after frame construction

      // is still bound to "u1" eventually

      var rect = document.getElementById("u1").getBoundingClientRect();

      var rect = document.getElementById("u2").getBoundingClientRect();

      // check that changing an id to "r2" lets u2 find it

      var r2 = document.getElementById("x");

      r2.setAttribute("id", "r2");

      var rect = document.getElementById("u3").getBoundingClientRect();

      // check that removing the bad r3 lets u3 find the good one

      var r3 = document.getElementById("r3");

      r3.parentNode.removeChild(r3);

      var rect = document.getElementById("u4").getBoundingClientRect();

      // check that renaming the bad r4 lets u4 find the good one

      var r4 = document.getElementById("r4");

      r4.removeAttribute("id");

      var rect = document.getElementById("u5").getBoundingClientRect();

      // check that changing u5's reference works

      var u5 = document.getElementById("u5");

      u5.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#r1");

      var rect = document.getElementById("u6").getBoundingClientRect();

      // check that inserting a good element before the bad r6 works

      var r6 = document.getElementById("r6-2");

      r6.parentNode.removeChild(r6);

      r6.setAttribute("id", "r6");

      document.documentElement.insertBefore(r6, document.documentElement.firstChild);

      var rect = document.getElementById("u7").getBoundingClientRect();

      // check that inserting a bad element after a good one doesn't break anything

      // NOTE: it seems that inserting the bad element before a good one works,

      // but after does not, perhaps it is obscured?  I made this test pass, but

      // I'm not sure it works correctly.

      var u7 = document.getElementById("u7");

      var r7 = document.getElementById("r7-2");

      r7.parentNode.removeChild(r7);

      r7.setAttribute("id", "r7");

      document.documentElement.insertBefore(r7, u7);

      var rect = document.getElementById("u8").getBoundingClientRect();

      // check that renaming a good element to r8 works

      var r8 = document.getElementById("r8-2");

      r8.setAttribute("id", "r8");

      document.documentElement.removeAttribute('class');

  </script>

</svg>