|
1 <!-- |
|
2 Any copyright is dedicated to the Public Domain. |
|
3 http://creativecommons.org/publicdomain/zero/1.0/ |
|
4 --> |
|
5 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" |
|
6 xmlns:xlink="http://www.w3.org/1999/xlink"> |
|
7 <title>Testing that dynamic changes to the element for a given ID are reflected in 'use'</title> |
|
8 |
|
9 <use id="u1" x="10%" xlink:href="#r1"/> |
|
10 <script> |
|
11 // force frame construction; test that parsing "r1" after frame construction |
|
12 // is still bound to "u1" eventually |
|
13 var rect = document.getElementById("u1").getBoundingClientRect(); |
|
14 </script> |
|
15 <rect width="11%" height="100%" fill="lime" id="r1"/> |
|
16 |
|
17 <rect width="11%" height="100%" fill="lime" id="x"/> |
|
18 <use id="u2" x="20%" xlink:href="#r2"/> |
|
19 <script> |
|
20 var rect = document.getElementById("u2").getBoundingClientRect(); |
|
21 // check that changing an id to "r2" lets u2 find it |
|
22 var r2 = document.getElementById("x"); |
|
23 r2.setAttribute("id", "r2"); |
|
24 </script> |
|
25 |
|
26 <rect width="10%" height="100%" fill="red" id="r3"/> |
|
27 <rect width="11%" height="100%" fill="lime" id="r3"/> |
|
28 <use id="u3" x="30%" xlink:href="#r3"/> |
|
29 <script> |
|
30 var rect = document.getElementById("u3").getBoundingClientRect(); |
|
31 // check that removing the bad r3 lets u3 find the good one |
|
32 var r3 = document.getElementById("r3"); |
|
33 r3.parentNode.removeChild(r3); |
|
34 </script> |
|
35 |
|
36 <rect width="10%" height="100%" fill="red" id="r4"/> |
|
37 <rect width="11%" height="100%" fill="lime" id="r4"/> |
|
38 <use id="u4" x="40%" xlink:href="#r4"/> |
|
39 <script> |
|
40 var rect = document.getElementById("u4").getBoundingClientRect(); |
|
41 // check that renaming the bad r4 lets u4 find the good one |
|
42 var r4 = document.getElementById("r4"); |
|
43 r4.removeAttribute("id"); |
|
44 </script> |
|
45 |
|
46 <rect width="10%" height="100%" fill="red" id="r5"/> |
|
47 <use id="u5" x="50%" xlink:href="#r5"/> |
|
48 <script> |
|
49 var rect = document.getElementById("u5").getBoundingClientRect(); |
|
50 // check that changing u5's reference works |
|
51 var u5 = document.getElementById("u5"); |
|
52 u5.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#r1"); |
|
53 </script> |
|
54 |
|
55 <rect width="10%" height="100%" fill="red" id="r6"/> |
|
56 <rect width="11%" height="100%" fill="lime" id="r6-2"/> |
|
57 <use id="u6" x="60%" xlink:href="#r6"/> |
|
58 <script> |
|
59 var rect = document.getElementById("u6").getBoundingClientRect(); |
|
60 // check that inserting a good element before the bad r6 works |
|
61 var r6 = document.getElementById("r6-2"); |
|
62 r6.parentNode.removeChild(r6); |
|
63 r6.setAttribute("id", "r6"); |
|
64 document.documentElement.insertBefore(r6, document.documentElement.firstChild); |
|
65 </script> |
|
66 |
|
67 <rect width="11%" height="100%" fill="lime" id="r7"/> |
|
68 <rect width="10%" height="100%" fill="red" id="r7-2"/> |
|
69 <use id="u7" x="70%" xlink:href="#r7"/> |
|
70 <script> |
|
71 var rect = document.getElementById("u7").getBoundingClientRect(); |
|
72 // check that inserting a bad element after a good one doesn't break anything |
|
73 var r7 = document.getElementById("r7-2"); |
|
74 r7.parentNode.removeChild(r7); |
|
75 r7.setAttribute("id", "r7"); |
|
76 document.documentElement.appendChild(r7); |
|
77 </script> |
|
78 |
|
79 <rect width="11%" height="100%" fill="lime" id="r8-2"/> |
|
80 <rect width="10%" height="100%" fill="red" id="r8"/> |
|
81 <use id="u8" x="80%" xlink:href="#r8"/> |
|
82 <script> |
|
83 var rect = document.getElementById("u8").getBoundingClientRect(); |
|
84 // check that renaming a good element to r8 works |
|
85 var r8 = document.getElementById("r8-2"); |
|
86 r8.setAttribute("id", "r8"); |
|
87 </script> |
|
88 |
|
89 <rect width="11%" height="100%" fill="lime"/> |
|
90 <rect x="90%" width="11%" height="100%" fill="lime"/> |
|
91 </svg> |