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

Side by Side Diff: third_party/WebKit/LayoutTests/resize-observer/eventloop.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
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/resize-observer/notify.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 </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
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/resize-observer/notify.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698