Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(22)

Side by Side Diff: third_party/WebKit/LayoutTests/resize-observer/notify.html

Issue 2242773003: Revert of ResizeObserver pt6: integration (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698