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 </style> | |
10 <p>ResizeObserver notification event loop tests</p> | |
11 <div id="target1" style="width:100px;height:100px;">t1 | |
12 </div> | |
13 <div id="container"> | |
14 <div id="a1" style="width:100px;height:100px"> | |
15 <div id="a2" style="width:100px;height:100px"> | |
16 </div> | |
17 </div> | |
18 <div id="b1" style="width:100px;height:100px"> | |
19 <div id="b2" style="width:100px;height:100px"> | |
20 </div> | |
21 </div> | |
22 </div> | |
23 <script> | |
24 'use strict'; | |
25 | |
26 var helper = new ResizeTestHelper(); | |
27 | |
28 let t1 = document.querySelector('#target1'); | |
29 | |
30 // allow uncaught exception because ResizeObserver posts exceptions | |
31 // to window error handler when limit is exceeded. | |
32 // This codepath is tested in this file. | |
33 | |
34 setup({allow_uncaught_exception: true}); | |
35 | |
36 var onErrorCalled = false; | |
37 | |
38 window.onerror = err => { | |
39 onErrorCalled = true; | |
40 } | |
41 | |
42 function test0() { | |
43 | |
44 let divs = [t1]; | |
45 | |
46 helper.createTest( | |
47 "test0: multiple notifications inside same event loop", | |
48 setup => { | |
49 onErrorCalled = false; | |
50 helper.observer.disconnect(); | |
51 let t2 = document.createElement('div'); | |
52 let t3 = document.createElement('div'); | |
53 t2.appendChild(t3); | |
54 t1.appendChild(t2); | |
55 divs.push(t2); | |
56 divs.push(t3); | |
57 helper.observer.observe(t1); | |
58 helper.observer.observe(t2); | |
59 helper.observer.observe(t3); | |
60 }, | |
61 entries => { | |
62 assert_equals(entries.length, 3, "3 notifications"); | |
63 helper.nextTest(); | |
64 } | |
65 ); | |
66 let rAF = 0; | |
67 | |
68 // This test happens in the same Resize notification loop, | |
69 // only t2 and t3 get notified | |
70 helper.createTest( | |
71 "test0: multiple notifications pt 2", | |
72 setup => { | |
73 divs.forEach( el => { el.style.width = "101px";}); | |
74 window.requestAnimationFrame(_ => { rAF++; }); | |
75 }, | |
76 entries => { | |
77 // t1 is not delivered | |
78 assert_equals(entries.length, 2, "2 notifications"); | |
79 helper.nextTest(); | |
80 } | |
81 ); | |
82 // Only t3 gets notified, t2 and t1 are not deep enough | |
83 helper.createTest( | |
84 "test0: multiple notifications pt 3", | |
85 setup => { | |
86 divs.forEach( el => { el.style.width = "102px";}); | |
87 }, | |
88 entries => { | |
89 assert_equals(entries.length, 1, "1 notifications"); | |
90 assert_equals(rAF, 0, "same loop"); | |
91 helper.nextTest(); | |
92 } | |
93 ); | |
94 // t1 and t2 get notified | |
95 helper.createTest( | |
96 "test0: multiple notifications pt 4, new loop", | |
97 setup => { | |
98 }, | |
99 entries => { | |
100 assert_equals(entries.length, 2, "2 notifications"); | |
101 assert_equals(rAF, 1, "new loop"); | |
102 assert_equals(onErrorCalled, true, "error was fired"); | |
103 helper.observer.disconnect(); | |
104 while (t1.childNodes.length > 0) | |
105 t1.removeChild(t1.childNodes[0]); | |
106 test1(); | |
107 } | |
108 ); | |
109 | |
110 helper.nextTestRaf(); | |
111 } | |
112 | |
113 function test1() { | |
114 | |
115 var resizers = [t1]; | |
116 // Testing depths of shadow roots | |
117 // DOM: t1 <- t2 <- t3 <-shadow- t4 <- t5 | |
118 helper.createTest( | |
119 "test1: limit with shadowRoot", | |
120 setup => { | |
121 onErrorCalled = false; | |
122 | |
123 let t2 = document.createElement('div'); | |
124 t1.appendChild(t2); | |
125 resizers.push(t2); | |
126 let t3 = document.createElement('div'); | |
127 resizers.push(t3); | |
128 t2.appendChild(t3); | |
129 let shadow = t3.createShadowRoot(); | |
130 let t4 = document.createElement('div'); | |
131 resizers.push(t4); | |
132 shadow.appendChild(t4); | |
133 let t5 = document.createElement('div'); | |
134 resizers.push(t5); | |
135 t4.appendChild(t5); | |
136 resizers.forEach( el => helper.observer.observe(el) ); | |
137 }, | |
138 entries => { | |
139 assert_equals(entries.length, 5, "all entries resized"); | |
140 helper.nextTest(); | |
141 } | |
142 ); | |
143 | |
144 helper.createTest( | |
145 "test1: limit with shadowRoot", | |
146 setup => { | |
147 resizers.forEach( el => el.style.width = "111px" ); | |
148 }, | |
149 entries => { | |
150 assert_equals(entries.length, 4, "depth limited"); | |
151 helper.nextTest(); | |
152 } | |
153 ); | |
154 | |
155 helper.createTest( | |
156 "test1: limit with shadowRoot", | |
157 setup => { | |
158 resizers.forEach( el => el.style.width = "112px" ); | |
159 }, | |
160 entries => { | |
161 assert_equals(entries.length, 3, "depth limited"); | |
162 helper.nextTest(); | |
163 } | |
164 ); | |
165 | |
166 helper.createTest( | |
167 "test1: limit with shadowRoot", | |
168 setup => { | |
169 resizers.forEach( el => el.style.width = "113px" ); | |
170 }, | |
171 entries => { | |
172 assert_equals(entries.length, 2, "depth limited"); | |
173 helper.nextTest(); | |
174 } | |
175 ); | |
176 | |
177 helper.createTest( | |
178 "test1: limit with shadowRoot", | |
179 setup => { | |
180 resizers.forEach( el => el.style.width = "114px" ); | |
181 }, | |
182 entries => { | |
183 assert_equals(entries.length, 1, "depth limited"); | |
184 helper.nextTestRaf(); | |
185 } | |
186 ); | |
187 | |
188 helper.createTest( | |
189 "test1: limit with shadowRoot end", | |
190 setup => { | |
191 }, | |
192 entries => { | |
193 assert_equals(entries.length, 4, "limit notifications"); | |
194 assert_equals(onErrorCalled, true, "breached limit"); | |
195 helper.observer.disconnect(); | |
196 t1.removeChild(t1.firstChild); | |
197 test2(); | |
198 } | |
199 ); | |
200 | |
201 helper.nextTestRaf(); | |
202 } | |
203 | |
204 function test2() { | |
205 let container = document.querySelector('#container'); | |
206 let a1 = document.querySelector('#a1'); | |
207 let a2 = document.querySelector('#a2'); | |
208 let b1 = document.querySelector('#b1'); | |
209 let b2 = document.querySelector('#b2'); | |
210 let targets = [a1, a2, b1, b2]; | |
211 helper.createTest( | |
212 "test2: move target in dom while inside event loop", | |
213 setup => { | |
214 for (let t of targets) | |
215 helper.observer.observe(t); | |
216 }, | |
217 entries => { | |
218 helper.nextTestRaf(); | |
219 } | |
220 ); | |
221 helper.createTest( | |
222 "test2, pt2: resize them all", | |
223 setup => { | |
224 for (let t of targets) | |
225 t.style.width = "110px"; | |
226 }, | |
227 entries => { | |
228 assert_equals(entries.length, targets.length); | |
229 helper.nextTest(); | |
230 } | |
231 ); | |
232 helper.createTest( | |
233 "test2, pt3: resize all, move dom upwardsa", | |
234 setup => { | |
235 // still in same event loop as pt2 | |
236 for (let t of targets) | |
237 t.style.width = "120px"; | |
238 container.appendChild(b2); | |
239 }, | |
240 entries => { | |
241 assert_equals(entries.length, 1); | |
242 assert_equals(entries[0].target, a2); | |
243 helper.nextTest(); | |
244 } | |
245 ); | |
246 helper.createTest( | |
247 "test2, pt4, resize all, move dom downwards", | |
248 setup => { | |
249 for (let t of targets) | |
250 t.style.width = "130px"; | |
251 a2.appendChild(b2); | |
252 }, | |
253 entries => { | |
254 assert_equals(entries.length, 1); | |
255 assert_equals(entries[0].target, b2); | |
256 a1.appendChild(a2); | |
257 helper.observer.disconnect(); | |
258 } | |
259 ); | |
260 helper.nextTestRaf(); | |
261 } | |
262 | |
263 test0(); | |
264 | |
265 </script> | |
266 | |
OLD | NEW |