| 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 |
|---|
Chromium Code Reviews
Issue 2242773003:
Revert of ResizeObserver pt6: integration (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master