Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- Manifest: layout/reftests/svg/reftest.list
SVG Preview (Scaled)
<!--
Any copyright is dedicated to the Public Domain.
-->
<title>Testing that dynamic changes to the element for a given ID are reflected in patterns</title>
<rect id="u1" x="10%" width="11%" height="100%" fill="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>
<pattern id="r1" width="100%" height="100%" patternUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="lime"/>
</pattern>
<pattern id="x" width="100%" height="100%" patternUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="lime"/>
</pattern>
<rect id="u2" x="20%" width="11%" height="100%" fill="url(#r2)"/>
<pattern id="r3" width="100%" height="100%" patternUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="red"/>
</pattern>
<pattern id="r3" width="100%" height="100%" patternUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="lime"/>
</pattern>
<rect id="u3" x="30%" width="11%" height="100%" fill="url(#r3)"/>
<pattern id="r4" width="100%" height="100%" patternUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="red"/>
</pattern>
<pattern id="r4" width="100%" height="100%" patternUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="lime"/>
</pattern>
<rect id="u4" x="40%" width="11%" height="100%" fill="url(#r4)"/>
<pattern id="r5" width="100%" height="100%" patternUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="red"/>
</pattern>
<rect id="u5" x="50%" width="11%" height="100%" fill="url(#r5)"/>
<pattern id="r6" width="100%" height="100%" patternUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="red"/>
</pattern>
<pattern id="r6-2" width="100%" height="100%" patternUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="lime"/>
</pattern>
<rect id="u6" x="60%" width="11%" height="100%" fill="url(#r6)"/>
<pattern id="r7" width="100%" height="100%" patternUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="lime"/>
</pattern>
<pattern id="r7-2" width="100%" height="100%" patternUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="red"/>
</pattern>
<rect id="u7" x="70%" width="11%" height="100%" fill="url(#r7)"/>
<pattern id="r8-2" width="100%" height="100%" patternUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="lime"/>
</pattern>
<pattern id="r8" width="100%" height="100%" patternUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="red"/>
</pattern>
<rect id="u8" x="80%" width="11%" height="100%" fill="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("fill", "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>