<!-- 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" class="reftest-wait" onload="startTest()" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Testing that dynamic changes to the element for a given ID are reflected in clip-path</title> <defs> <svg id="d"> <rect width="100%" height="50%" fill="lime"/> <rect y="50%" width="100%" height="50%" fill="red"/> </svg> </defs> <rect y="30%" width="100%" height="70%" fill="lime"/> <use xlink:href="#d" id="u1" x="10%" width="11%" height="100%" clip-path="url(#r1)"/> <script> // force frame construction; test that parsing "r1" after frame construction // is still bound to "u1" eventually var rect = document.getElementById("u1").getBoundingClientRect(); </script> <clipPath id="r1"> <rect width="100%" height="40%"/> </clipPath> <clipPath id="x"> <rect width="100%" height="40%"/> </clipPath> <use xlink:href="#d" id="u2" x="20%" width="11%" height="100%" clip-path="url(#r2)"/> <clipPath id="r3"> <rect width="100%" height="100%"/> </clipPath> <clipPath id="r3"> <rect width="100%" height="40%"/> </clipPath> <use xlink:href="#d" id="u3" x="30%" width="11%" height="100%" clip-path="url(#r3)"/> <clipPath id="r4"> <rect width="100%" height="100%"/> </clipPath> <clipPath id="r4"> <rect width="100%" height="40%"/> </clipPath> <use xlink:href="#d" id="u4" x="40%" width="11%" height="100%" clip-path="url(#r4)"/> <clipPath id="r5"> <rect width="100%" height="100%"/> </clipPath> <use xlink:href="#d" id="u5" x="50%" width="11%" height="100%" clip-path="url(#r5)"/> <clipPath id="r6"> <rect width="100%" height="100%"/> </clipPath> <clipPath id="r6-2"> <rect width="100%" height="40%"/> </clipPath> <use xlink:href="#d" id="u6" x="60%" width="11%" height="100%" clip-path="url(#r6)"/> <clipPath id="r7"> <rect width="100%" height="40%"/> </clipPath> <clipPath id="r7-2"> <rect width="100%" height="100%"/> </clipPath> <use xlink:href="#d" id="u7" x="70%" width="11%" height="100%" clip-path="url(#r7)"/> <clipPath id="r8-2"> <rect width="100%" height="40%"/> </clipPath> <clipPath id="r8"> <rect width="100%" height="100%"/> </clipPath> <use xlink:href="#d" id="u8" x="80%" width="11%" height="100%" clip-path="url(#r8)"/> <rect width="11%" height="100%" fill="lime"/> <rect x="90%" width="11%" height="100%" fill="lime"/> <script> function startTest() { document.addEventListener("MozReftestInvalidate", doTest, false); setTimeout(doTest, 4000); // fallback for running outside reftest } function doTest() { // 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); // check that renaming the bad r4 lets u4 find the good one var r4 = document.getElementById("r4"); r4.removeAttribute("id"); // check that changing u5's reference works var u5 = document.getElementById("u5"); u5.setAttribute("clip-path", "url(#r1)"); // 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); // check that inserting a bad element after a good one doesn't break anything var r7 = document.getElementById("r7-2"); r7.parentNode.removeChild(r7); r7.setAttribute("id", "r7"); document.documentElement.appendChild(r7); // 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>