layout/reftests/svg/dynamic-clipPath-01.svg@925c144e1f1f
layout/reftests/svg/dynamic-clipPath-01.svg
Fri, 16 Jan 2015 18:13:44 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Fri, 16 Jan 2015 18:13:44 +0100
- branch
- TOR_BUG_9701
- changeset 14
- 925c144e1f1f
- permissions
- -rw-r--r--
Integrate suggestion from review to improve consistency with existing code.
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 class="reftest-wait"
7 onload="startTest()"
8 xmlns:xlink="http://www.w3.org/1999/xlink">
9 <title>Testing that dynamic changes to the element for a given ID are reflected in clip-path</title>
10 <defs>
11 <svg id="d">
12 <rect width="100%" height="50%" fill="lime"/>
13 <rect y="50%" width="100%" height="50%" fill="red"/>
14 </svg>
15 </defs>
17 <rect y="30%" width="100%" height="70%" fill="lime"/>
19 <use xlink:href="#d" id="u1" x="10%" width="11%" height="100%" clip-path="url(#r1)"/>
20 <script>
21 // force frame construction; test that parsing "r1" after frame construction
22 // is still bound to "u1" eventually
23 var rect = document.getElementById("u1").getBoundingClientRect();
24 </script>
25 <clipPath id="r1">
26 <rect width="100%" height="40%"/>
27 </clipPath>
29 <clipPath id="x">
30 <rect width="100%" height="40%"/>
31 </clipPath>
32 <use xlink:href="#d" id="u2" x="20%" width="11%" height="100%" clip-path="url(#r2)"/>
34 <clipPath id="r3">
35 <rect width="100%" height="100%"/>
36 </clipPath>
37 <clipPath id="r3">
38 <rect width="100%" height="40%"/>
39 </clipPath>
40 <use xlink:href="#d" id="u3" x="30%" width="11%" height="100%" clip-path="url(#r3)"/>
42 <clipPath id="r4">
43 <rect width="100%" height="100%"/>
44 </clipPath>
45 <clipPath id="r4">
46 <rect width="100%" height="40%"/>
47 </clipPath>
48 <use xlink:href="#d" id="u4" x="40%" width="11%" height="100%" clip-path="url(#r4)"/>
50 <clipPath id="r5">
51 <rect width="100%" height="100%"/>
52 </clipPath>
53 <use xlink:href="#d" id="u5" x="50%" width="11%" height="100%" clip-path="url(#r5)"/>
55 <clipPath id="r6">
56 <rect width="100%" height="100%"/>
57 </clipPath>
58 <clipPath id="r6-2">
59 <rect width="100%" height="40%"/>
60 </clipPath>
61 <use xlink:href="#d" id="u6" x="60%" width="11%" height="100%" clip-path="url(#r6)"/>
63 <clipPath id="r7">
64 <rect width="100%" height="40%"/>
65 </clipPath>
66 <clipPath id="r7-2">
67 <rect width="100%" height="100%"/>
68 </clipPath>
69 <use xlink:href="#d" id="u7" x="70%" width="11%" height="100%" clip-path="url(#r7)"/>
71 <clipPath id="r8-2">
72 <rect width="100%" height="40%"/>
73 </clipPath>
74 <clipPath id="r8">
75 <rect width="100%" height="100%"/>
76 </clipPath>
77 <use xlink:href="#d" id="u8" x="80%" width="11%" height="100%" clip-path="url(#r8)"/>
79 <rect width="11%" height="100%" fill="lime"/>
80 <rect x="90%" width="11%" height="100%" fill="lime"/>
82 <script>
83 function startTest() {
84 document.addEventListener("MozReftestInvalidate", doTest, false);
85 setTimeout(doTest, 4000); // fallback for running outside reftest
86 }
88 function doTest() {
89 // check that changing an id to "r2" lets u2 find it
90 var r2 = document.getElementById("x");
91 r2.setAttribute("id", "r2");
93 var rect = document.getElementById("u3").getBoundingClientRect();
94 // check that removing the bad r3 lets u3 find the good one
95 var r3 = document.getElementById("r3");
96 r3.parentNode.removeChild(r3);
98 // check that renaming the bad r4 lets u4 find the good one
99 var r4 = document.getElementById("r4");
100 r4.removeAttribute("id");
102 // check that changing u5's reference works
103 var u5 = document.getElementById("u5");
104 u5.setAttribute("clip-path", "url(#r1)");
106 // check that inserting a good element before the bad r6 works
107 var r6 = document.getElementById("r6-2");
108 r6.parentNode.removeChild(r6);
109 r6.setAttribute("id", "r6");
110 document.documentElement.insertBefore(r6, document.documentElement.firstChild);
112 // check that inserting a bad element after a good one doesn't break anything
113 var r7 = document.getElementById("r7-2");
114 r7.parentNode.removeChild(r7);
115 r7.setAttribute("id", "r7");
116 document.documentElement.appendChild(r7);
118 // check that renaming a good element to r8 works
119 var r8 = document.getElementById("r8-2");
120 r8.setAttribute("id", "r8");
122 document.documentElement.removeAttribute("class");
123 }
124 </script>
125 </svg>
