OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <script src="../resources/testharness.js"></script> | |
3 <script src="../resources/testharnessreport.js"></script> | |
4 <script src="./resources/resizeTestHelper.js"></script> | |
5 <p>ResizeObserver svg tests</p> | |
6 <svg height="430" width="500"> | |
7 <circle cx="10" cy="10" r="5" style="fill:orange;stroke:black;stroke-width:1"
/> | |
8 <ellipse cx="10" cy="30" rx="5" ry="5" style="fill:orange;stroke:black;stroke-
width:1"/> | |
9 <foreignObject cy="50" width="100" height="20"> | |
10 <body> | |
11 <p>Here is a paragraph that requires word wrap</p> | |
12 </body> | |
13 </foreignObject> | |
14 <image xlink:href="" x="0" y="100" height="30" width="100" /> | |
15 <line x1="0" y1="50" x2="20" y2="70" stroke="black" stroke-width="2"/> | |
16 <path d="M 0 100 L 100 100 L 50 150 z" | |
17 style="fill:orange;stroke:black;stroke-width:1" /> | |
18 <polygon points="0,200 100,200 50,250" style="fill:orange;stroke:black;stroke-
width:1" /> | |
19 <polyline points="0,300 100,300 50,350" style="fill:orange;stroke:black;stroke
-width:1"/> | |
20 <rect x="0" y="380" width="10" height="10" style="fill:orange; stroke:black; s
troke-width:1" /> | |
21 <text x="0" y="400" font-size="20">svg text tag</text> | |
22 </svg> | |
23 <script> | |
24 'use strict'; | |
25 | |
26 var helper = new ResizeTestHelper(); | |
27 setup({allow_uncaught_exception: true}); | |
28 | |
29 function test0() { | |
30 let target = document.querySelector('circle'); | |
31 helper.createTest( | |
32 "observe svg:circle", | |
33 setup => { | |
34 helper.observer.observe(target); | |
35 }, | |
36 entries => { | |
37 helper.nextTestRaf(); | |
38 } | |
39 ); | |
40 helper.createTest( | |
41 "observe svg:circle, part 2", | |
42 setup => { | |
43 target.setAttribute('r', 10); | |
44 }, | |
45 entries => { | |
46 assert_equals(entries.length, 1); | |
47 assert_equals(entries[0].contentRect.width, 20); | |
48 assert_equals(entries[0].contentRect.height, 20); | |
49 helper.observer.disconnect(); | |
50 test1(); | |
51 } | |
52 ); | |
53 helper.nextTestRaf(); | |
54 } | |
55 | |
56 function test1() { | |
57 let target = document.querySelector('ellipse'); | |
58 helper.createTest( | |
59 "observe svg:ellipse", | |
60 setup => { | |
61 helper.observer.observe(target); | |
62 }, | |
63 entries => { | |
64 helper.nextTestRaf(); | |
65 } | |
66 ); | |
67 helper.createTest( | |
68 "observe svg:ellipse, part 2", | |
69 setup => { | |
70 target.setAttribute('rx', 10); | |
71 }, | |
72 entries => { | |
73 assert_equals(entries.length, 1); | |
74 assert_equals(entries[0].contentRect.width, 20); | |
75 assert_equals(entries[0].contentRect.height, 10); | |
76 helper.observer.disconnect(); | |
77 test2(); | |
78 } | |
79 ); | |
80 helper.nextTestRaf(); | |
81 } | |
82 | |
83 function test2() { | |
84 let target = document.querySelector('foreignObject'); | |
85 helper.createTest( | |
86 "observe svg:foreignObject", | |
87 setup => { | |
88 helper.observer.observe(target); | |
89 }, | |
90 entries => { | |
91 helper.nextTestRaf(); | |
92 } | |
93 ); | |
94 helper.createTest( | |
95 "observe svg:foreignObject, part 2", | |
96 setup => { | |
97 target.setAttribute('width', 200); | |
98 }, | |
99 entries => { | |
100 assert_equals(entries.length, 1); | |
101 assert_equals(entries[0].contentRect.width, 200); | |
102 assert_equals(entries[0].contentRect.height, 20); | |
103 helper.observer.disconnect(); | |
104 test3(); | |
105 } | |
106 ); | |
107 helper.nextTestRaf(); | |
108 } | |
109 | |
110 function test3() { | |
111 let target = document.querySelector('image'); | |
112 helper.createTest( | |
113 "observe svg:image", | |
114 setup => { | |
115 helper.observer.observe(target); | |
116 }, | |
117 entries => { | |
118 helper.nextTestRaf(); | |
119 } | |
120 ); | |
121 helper.createTest( | |
122 "observe svg:image, part 2", | |
123 setup => { | |
124 target.setAttribute('height', 40); | |
125 }, | |
126 entries => { | |
127 assert_equals(entries.length, 1); | |
128 assert_equals(entries[0].contentRect.width, 100); | |
129 assert_equals(entries[0].contentRect.height, 40); | |
130 helper.observer.disconnect(); | |
131 test4(); | |
132 } | |
133 ); | |
134 helper.nextTestRaf(); | |
135 } | |
136 | |
137 function test4() { | |
138 let target = document.querySelector('line'); | |
139 helper.createTest( | |
140 "observe svg:line", | |
141 setup => { | |
142 helper.observer.observe(target); | |
143 }, | |
144 entries => { | |
145 helper.nextTestRaf(); | |
146 } | |
147 ); | |
148 helper.createTest( | |
149 "observe svg:line, part 2", | |
150 setup => { | |
151 target.setAttribute('y2', 80); | |
152 }, | |
153 entries => { | |
154 assert_equals(entries.length, 1); | |
155 assert_equals(entries[0].contentRect.width, 20); | |
156 assert_equals(entries[0].contentRect.height, 30); | |
157 helper.observer.disconnect(); | |
158 test5(); | |
159 } | |
160 ); | |
161 helper.nextTestRaf(); | |
162 } | |
163 | |
164 function test5() { | |
165 let target = document.querySelector('path'); | |
166 helper.createTest( | |
167 "observe svg:path", | |
168 setup => { | |
169 helper.observer.observe(target); | |
170 }, | |
171 entries => { | |
172 helper.nextTestRaf(); | |
173 } | |
174 ); | |
175 helper.createTest( | |
176 "observe svg:path, part 2", | |
177 setup => { | |
178 target.setAttribute('d', "M 0 100 L 100 100 L 50 160 z"); | |
179 }, | |
180 entries => { | |
181 assert_equals(entries.length, 1); | |
182 assert_equals(entries[0].contentRect.width, 100); | |
183 assert_equals(entries[0].contentRect.height, 60); | |
184 helper.observer.disconnect(); | |
185 test6(); | |
186 } | |
187 ); | |
188 helper.nextTestRaf(); | |
189 } | |
190 | |
191 function test6() { | |
192 let target = document.querySelector('polygon'); | |
193 helper.createTest( | |
194 "observe svg:polygon", | |
195 setup => { | |
196 helper.observer.observe(target); | |
197 }, | |
198 entries => { | |
199 helper.nextTestRaf(); | |
200 } | |
201 ); | |
202 helper.createTest( | |
203 "observe svg:polygon, part 2", | |
204 setup => { | |
205 target.setAttribute('points', "0,200 100,200 50,260"); | |
206 }, | |
207 entries => { | |
208 assert_equals(entries.length, 1); | |
209 assert_equals(entries[0].contentRect.width, 100); | |
210 assert_equals(entries[0].contentRect.height, 60); | |
211 helper.observer.disconnect(); | |
212 test7(); | |
213 } | |
214 ); | |
215 helper.nextTestRaf(); | |
216 } | |
217 | |
218 function test7() { | |
219 let target = document.querySelector('polyline'); | |
220 helper.createTest( | |
221 "observe svg:polyline", | |
222 setup => { | |
223 helper.observer.observe(target); | |
224 }, | |
225 entries => { | |
226 helper.nextTestRaf(); | |
227 } | |
228 ); | |
229 helper.createTest( | |
230 "observe svg:polyline, part 2", | |
231 setup => { | |
232 target.setAttribute('points', "0,300 100,300 50,360"); | |
233 }, | |
234 entries => { | |
235 assert_equals(entries.length, 1); | |
236 assert_equals(entries[0].contentRect.width, 100); | |
237 assert_equals(entries[0].contentRect.height, 60); | |
238 helper.observer.disconnect(); | |
239 test8(); | |
240 } | |
241 ); | |
242 helper.nextTestRaf(); | |
243 } | |
244 | |
245 function test8() { | |
246 let target = document.querySelector('rect'); | |
247 helper.createTest( | |
248 "observe svg:rect", | |
249 setup => { | |
250 helper.observer.observe(target); | |
251 }, | |
252 entries => { | |
253 helper.nextTestRaf(); | |
254 } | |
255 ); | |
256 helper.createTest( | |
257 "observe svg:rect, part 2", | |
258 setup => { | |
259 target.setAttribute('width', "20"); | |
260 }, | |
261 entries => { | |
262 assert_equals(entries.length, 1); | |
263 assert_equals(entries[0].contentRect.width, 20); | |
264 assert_equals(entries[0].contentRect.height, 10); | |
265 helper.observer.disconnect(); | |
266 test9(); | |
267 } | |
268 ); | |
269 helper.nextTestRaf(); | |
270 } | |
271 | |
272 function test9() { | |
273 let target = document.querySelector('text'); | |
274 helper.createTest( | |
275 "observe svg:text", | |
276 setup => { | |
277 helper.observer.observe(target); | |
278 }, | |
279 entries => { | |
280 helper.nextTestRaf(); | |
281 } | |
282 ); | |
283 helper.createTest( | |
284 "observe svg:text, part 2", | |
285 setup => { | |
286 target.setAttribute('font-size', "25"); | |
287 }, | |
288 entries => { | |
289 assert_equals(entries.length, 1); | |
290 helper.observer.disconnect(); | |
291 } | |
292 ); | |
293 helper.nextTestRaf(); | |
294 } | |
295 test0(); | |
296 | |
297 </script> | |
OLD | NEW |