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 <style> | |
6 div { | |
7 border: 1px dotted gray | |
8 } | |
9 .transform { | |
10 transform: scale(2,2) rotate(90deg) | |
11 } | |
12 </style> | |
13 <p>ResizeObserver tests</p> | |
14 <div id="target1" style="width:100px;height:100px;">t1 | |
15 <div id="target2" style="width:100px;height:100px;">t2 | |
16 <div id="target3" style="width:100px;height:100px;">t3 | |
17 <span id="inline">inline</span> | |
18 </div> | |
19 </div> | |
20 </div> | |
21 <div id="absolute" style="width:100.5px;height:100.5px;position:absolute;top:10.
3px;left:10.3px"></div> | |
22 <script> | |
23 'use strict'; | |
24 | |
25 var helper = new ResizeTestHelper(); | |
26 | |
27 let t1 = document.querySelector('#target1'); | |
28 let t2 = document.querySelector('#target2'); | |
29 let t3 = document.querySelector('#target3'); | |
30 let abs = document.querySelector('#absolute'); | |
31 let inline = document.querySelector('#inline'); | |
32 | |
33 function test0() { | |
34 helper.createTest( | |
35 "test0: notification ordering", | |
36 setup => { | |
37 helper.observer.observe(t3); | |
38 helper.observer.observe(t2); | |
39 helper.observer.observe(t1); | |
40 t1.style.width = "5px"; | |
41 t3.style.width = "5px"; | |
42 t2.style.width = "5px"; | |
43 | |
44 }, | |
45 entries => { | |
46 assert_equals(entries.length, 3, "3 resizes"); | |
47 assert_equals(entries[0].target, t3, "ordering"); | |
48 assert_equals(entries[1].target, t2, "ordering"); | |
49 assert_equals(entries[2].target, t1, "ordering"); | |
50 helper.observer.disconnect(); | |
51 t1.style.width = "100px"; | |
52 t2.style.width = "100px"; | |
53 t3.style.width = "100px"; | |
54 test1(); | |
55 } | |
56 ); | |
57 helper.nextTestRaf(); | |
58 } | |
59 | |
60 function test1() { | |
61 helper.createTest( | |
62 "test1: display:none triggers notification", | |
63 setup => { | |
64 helper.observer.disconnect(); | |
65 helper.observer.observe(t1); | |
66 }, | |
67 entries => { | |
68 // initial observation happens here | |
69 helper.nextTestRaf(); | |
70 } | |
71 ); | |
72 helper.createTest( | |
73 "display:none triggers notification, part 2", | |
74 setup => { | |
75 t1.style.display = "none"; | |
76 }, | |
77 entries => { | |
78 helper.observer.disconnect(); | |
79 t1.style.display = ""; | |
80 test2(); | |
81 } | |
82 ); | |
83 helper.nextTestRaf(); | |
84 } | |
85 | |
86 | |
87 function test2() { | |
88 helper.createTest( | |
89 "test2: remove/reinsert", | |
90 setup => { | |
91 helper.observer.disconnect(); | |
92 helper.observer.observe(t1); | |
93 }, | |
94 entries => { | |
95 // initial observation | |
96 helper.nextTestRaf(); | |
97 } | |
98 ); | |
99 helper.createTest( | |
100 "removeChild triggers notification", | |
101 setup => { | |
102 t1.parentNode.removeChild(t1); | |
103 }, | |
104 entries => { | |
105 assert_equals(entries[0].target, t1); | |
106 helper.nextTestRaf(); | |
107 } | |
108 ); | |
109 helper.createTest( | |
110 "appendChild triggers notification", | |
111 setup => { | |
112 document.body.appendChild(t1); | |
113 }, | |
114 entries => { | |
115 assert_equals(entries[0].target, t1); | |
116 test3(); | |
117 } | |
118 ); | |
119 helper.nextTestRaf(); | |
120 } | |
121 | |
122 | |
123 function test3() { | |
124 helper.createTest( | |
125 "test3: dimensions match", | |
126 setup => { | |
127 helper.observer.disconnect(); | |
128 helper.observer.observe(t1); | |
129 t1.style.width = "200.5px"; | |
130 t1.style.height = "100px"; | |
131 t1.style.paddingLeft = "20px"; | |
132 t1.style.paddingTop = "10px"; | |
133 }, | |
134 entries => { | |
135 assert_equals(entries[0].contentRect.left,20); | |
136 assert_equals(entries[0].contentRect.top,10); | |
137 assert_between_inclusive(entries[0].contentRect.width, 200.4, 200.6, "widt
h is not rounded"); | |
138 assert_equals(entries[0].contentRect.height, 100); | |
139 test4(); | |
140 } | |
141 ); | |
142 helper.nextTestRaf(); | |
143 } | |
144 | |
145 function test4() { | |
146 helper.createTest( | |
147 "test4: transform do not cause notifications", | |
148 setup => { | |
149 helper.observer.disconnect(); | |
150 helper.observer.observe(t2); | |
151 }, | |
152 entries => { | |
153 // initial notification | |
154 helper.nextTestRaf(); | |
155 } | |
156 ); | |
157 helper.createTest( | |
158 "transform do not cause notification, part 2", | |
159 setup => { | |
160 t2.classList.add("transform"); | |
161 }, | |
162 entries => { | |
163 assert_unreached("transform must not trigger notifications"); | |
164 }, | |
165 timeout => { | |
166 t2.classList.remove("transform"); | |
167 test5(); | |
168 } | |
169 ); | |
170 helper.nextTestRaf(); | |
171 | |
172 } | |
173 | |
174 | |
175 function test5() { | |
176 helper.createTest( | |
177 "test5: moving an element does not trigger notifications", | |
178 setup => { | |
179 helper.observer.disconnect(); | |
180 helper.observer.observe(abs); | |
181 }, | |
182 entries => { | |
183 // initial observation | |
184 helper.nextTest(); | |
185 } | |
186 ); | |
187 helper.createTest( | |
188 "moving an element does not trigger notifications, part 2", | |
189 setup => { | |
190 abs.style.top = "20.33px"; | |
191 abs.style.left = "20.33px"; | |
192 }, | |
193 entries => { | |
194 assert_unreached("movement should not cause resize notifications"); | |
195 }, | |
196 timeout => { | |
197 test6(); | |
198 } | |
199 ); | |
200 helper.nextTestRaf(); | |
201 } | |
202 | |
203 function test6() { | |
204 helper.createTest( | |
205 "test6: inline element does not notify", | |
206 setup => { | |
207 helper.observer.disconnect(); | |
208 helper.observer.observe(inline); | |
209 helper.observer.observe(t1); | |
210 t1.style.width = "66px"; | |
211 inline.style.width = "66px"; | |
212 }, | |
213 entries => { | |
214 assert_equals(entries.length, 1, "inline elements must not trigger notific
ations"); | |
215 assert_equals(entries[0].target, t1, "inline elements must not trigger no
tifications"); | |
216 helper.nextTestRaf(); | |
217 } | |
218 ); | |
219 helper.createTest( | |
220 "inline element that becomes block should notify", | |
221 setup => { | |
222 inline.style.display = "block"; | |
223 }, | |
224 entries => { | |
225 assert_equals(entries[0].target, inline); | |
226 helper.observer.disconnect(); | |
227 test7(); | |
228 } | |
229 ); | |
230 helper.nextTestRaf(); | |
231 } | |
232 | |
233 function test7() { | |
234 let test = async_test("test7: unobserve inside notify callback"); | |
235 | |
236 let notifyStep = 0; | |
237 let notify = entries => { | |
238 switch(notifyStep) { | |
239 case 0: | |
240 // initial setup | |
241 window.requestAnimationFrame( _ => { | |
242 t1.style.width = "777px"; | |
243 t2.style.width = "777px"; | |
244 ro.unobserve(t1); | |
245 }); | |
246 break; | |
247 case 1: | |
248 test.step(_ => { | |
249 assert_equals(entries.length, 1, "only t2 is observed"); | |
250 assert_equals(entries[0].target, t2, "only t2 is observed"); | |
251 test8(); | |
252 ro.disconnect(); | |
253 test.done(); | |
254 }); | |
255 break; | |
256 } | |
257 notifyStep++; | |
258 } | |
259 | |
260 var ro; | |
261 window.requestAnimationFrame( _ => { | |
262 ro = new ResizeObserver(notify); | |
263 ro.observe(t1); | |
264 ro.observe(t2); | |
265 }); | |
266 } | |
267 | |
268 function test8() { | |
269 let test = async_test("test8: observe inside notify callback"); | |
270 | |
271 let notifyStep = 0; | |
272 let notify = entries => { | |
273 switch(notifyStep) { | |
274 case 0: | |
275 // intial setup | |
276 window.requestAnimationFrame( _ => { | |
277 ro.observe(t2); | |
278 t2.style.width = "888px"; | |
279 }); | |
280 break; | |
281 case 1: | |
282 test.step( _ => { | |
283 assert_equals(entries.length, 1, "only t2 is observed"); | |
284 assert_equals(entries[0].target, t2, "only t2 is observed"); | |
285 ro.disconnect(); | |
286 test9(); | |
287 test.done(); | |
288 }); | |
289 break; | |
290 } | |
291 notifyStep++; | |
292 } | |
293 var ro; | |
294 window.requestAnimationFrame( _ => { | |
295 ro = new ResizeObserver(notify); | |
296 ro.observe(t1); | |
297 }); | |
298 } | |
299 | |
300 function test9() { | |
301 let test = async_test("test9: disconnect inside notify callback"); | |
302 | |
303 let notifyStep = 0; | |
304 let timeoutId = 0; | |
305 let notify = entries => { | |
306 switch(notifyStep) { | |
307 case 0: | |
308 // initial setup | |
309 t1.style.width = "888px"; | |
310 ro.disconnect(); | |
311 timeoutId = test.step_timeout(_ => { | |
312 test10(); | |
313 test.done(); | |
314 }, ResizeTestHelper.TIMEOUT); | |
315 break; | |
316 case 1: | |
317 window.clearTimeout(timeoutId); | |
318 test.step( _ => { | |
319 assert_unreached("there should be no notifications after disconnect"); | |
320 }); | |
321 break; | |
322 } | |
323 notifyStep++; | |
324 } | |
325 | |
326 var ro; | |
327 window.requestAnimationFrame( _ => { | |
328 ro = new ResizeObserver(notify); | |
329 ro.observe(t1); | |
330 }); | |
331 } | |
332 | |
333 function test10() { | |
334 var parent = t1.parentNode; | |
335 helper.createTest( | |
336 "test10: element notifies when parent removed", | |
337 setup => { | |
338 helper.observer.observe(t3); | |
339 }, | |
340 entries => { | |
341 helper.nextTestRaf(); | |
342 } | |
343 ); | |
344 helper.createTest( | |
345 "test10, part 2: element notifies when parent removed", | |
346 setup => { | |
347 t1.parentNode.removeChild(t1); | |
348 }, | |
349 entries => { | |
350 assert_equals(entries.length, 1); | |
351 assert_equals(entries[0].target, t3); | |
352 helper.observer.disconnect(); | |
353 parent.appendChild(t1); | |
354 } | |
355 ); | |
356 helper.nextTestRaf(); | |
357 } | |
358 | |
359 test0(); | |
360 | |
361 </script> | |
OLD | NEW |