mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-01 14:45:29 +00:00
127 lines
4.0 KiB
XML
127 lines
4.0 KiB
XML
<!--
|
|
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);
|
|
// in case we're not gecko
|
|
setTimeout(doTest, 5000);
|
|
}
|
|
|
|
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>
|