|
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" class="reftest-wait" |
|
6 xmlns:xlink="http://www.w3.org/1999/xlink" onload="startTest()"> |
|
7 <title>Testing that dynamic changes to the element for a given ID are reflected in patterns</title> |
|
8 |
|
9 <rect id="u1" x="10%" width="11%" height="100%" fill="url(#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 <pattern id="r1" width="100%" height="100%" patternUnits="userSpaceOnUse"> |
|
16 <rect width="100%" height="100%" fill="lime"/> |
|
17 </pattern> |
|
18 |
|
19 <pattern id="x" width="100%" height="100%" patternUnits="userSpaceOnUse"> |
|
20 <rect width="100%" height="100%" fill="lime"/> |
|
21 </pattern> |
|
22 <rect id="u2" x="20%" width="11%" height="100%" fill="url(#r2)"/> |
|
23 |
|
24 <pattern id="r3" width="100%" height="100%" patternUnits="userSpaceOnUse"> |
|
25 <rect width="100%" height="100%" fill="red"/> |
|
26 </pattern> |
|
27 <pattern id="r3" width="100%" height="100%" patternUnits="userSpaceOnUse"> |
|
28 <rect width="100%" height="100%" fill="lime"/> |
|
29 </pattern> |
|
30 <rect id="u3" x="30%" width="11%" height="100%" fill="url(#r3)"/> |
|
31 |
|
32 <pattern id="r4" width="100%" height="100%" patternUnits="userSpaceOnUse"> |
|
33 <rect width="100%" height="100%" fill="red"/> |
|
34 </pattern> |
|
35 <pattern id="r4" width="100%" height="100%" patternUnits="userSpaceOnUse"> |
|
36 <rect width="100%" height="100%" fill="lime"/> |
|
37 </pattern> |
|
38 <rect id="u4" x="40%" width="11%" height="100%" fill="url(#r4)"/> |
|
39 |
|
40 <pattern id="r5" width="100%" height="100%" patternUnits="userSpaceOnUse"> |
|
41 <rect width="100%" height="100%" fill="red"/> |
|
42 </pattern> |
|
43 <rect id="u5" x="50%" width="11%" height="100%" fill="url(#r5)"/> |
|
44 |
|
45 <pattern id="r6" width="100%" height="100%" patternUnits="userSpaceOnUse"> |
|
46 <rect width="100%" height="100%" fill="red"/> |
|
47 </pattern> |
|
48 <pattern id="r6-2" width="100%" height="100%" patternUnits="userSpaceOnUse"> |
|
49 <rect width="100%" height="100%" fill="lime"/> |
|
50 </pattern> |
|
51 <rect id="u6" x="60%" width="11%" height="100%" fill="url(#r6)"/> |
|
52 |
|
53 <pattern id="r7" width="100%" height="100%" patternUnits="userSpaceOnUse"> |
|
54 <rect width="100%" height="100%" fill="lime"/> |
|
55 </pattern> |
|
56 <pattern id="r7-2" width="100%" height="100%" patternUnits="userSpaceOnUse"> |
|
57 <rect width="100%" height="100%" fill="red"/> |
|
58 </pattern> |
|
59 <rect id="u7" x="70%" width="11%" height="100%" fill="url(#r7)"/> |
|
60 |
|
61 <pattern id="r8-2" width="100%" height="100%" patternUnits="userSpaceOnUse"> |
|
62 <rect width="100%" height="100%" fill="lime"/> |
|
63 </pattern> |
|
64 <pattern id="r8" width="100%" height="100%" patternUnits="userSpaceOnUse"> |
|
65 <rect width="100%" height="100%" fill="red"/> |
|
66 </pattern> |
|
67 <rect id="u8" x="80%" width="11%" height="100%" fill="url(#r8)"/> |
|
68 |
|
69 <rect width="11%" height="100%" fill="lime"/> |
|
70 <rect x="90%" width="11%" height="100%" fill="lime"/> |
|
71 |
|
72 <script> |
|
73 function startTest() { |
|
74 document.addEventListener("MozReftestInvalidate", doTest, false); |
|
75 setTimeout(doTest, 4000); // fallback for running outside reftest |
|
76 } |
|
77 |
|
78 function doTest() { |
|
79 // check that changing an id to "r2" lets u2 find it |
|
80 var r2 = document.getElementById("x"); |
|
81 r2.setAttribute("id", "r2"); |
|
82 |
|
83 var rect = document.getElementById("u3").getBoundingClientRect(); |
|
84 // check that removing the bad r3 lets u3 find the good one |
|
85 var r3 = document.getElementById("r3"); |
|
86 r3.parentNode.removeChild(r3); |
|
87 |
|
88 // check that renaming the bad r4 lets u4 find the good one |
|
89 var r4 = document.getElementById("r4"); |
|
90 r4.removeAttribute("id"); |
|
91 |
|
92 // check that changing u5's reference works |
|
93 var u5 = document.getElementById("u5"); |
|
94 u5.setAttribute("fill", "url(#r1)"); |
|
95 |
|
96 // check that inserting a good element before the bad r6 works |
|
97 var r6 = document.getElementById("r6-2"); |
|
98 r6.parentNode.removeChild(r6); |
|
99 r6.setAttribute("id", "r6"); |
|
100 document.documentElement.insertBefore(r6, document.documentElement.firstChild); |
|
101 |
|
102 // check that inserting a bad element after a good one doesn't break anything |
|
103 var r7 = document.getElementById("r7-2"); |
|
104 r7.parentNode.removeChild(r7); |
|
105 r7.setAttribute("id", "r7"); |
|
106 document.documentElement.appendChild(r7); |
|
107 |
|
108 // check that renaming a good element to r8 works |
|
109 var r8 = document.getElementById("r8-2"); |
|
110 r8.setAttribute("id", "r8"); |
|
111 |
|
112 document.documentElement.removeAttribute("class"); |
|
113 } |
|
114 </script> |
|
115 </svg> |