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