| OLD | NEW |
|---|
| (Empty) | |
| 1 <!doctype html> |
| 2 <head> |
| 3 <script src="../resources/testharness.js"></script> |
| 4 <script src="../resources/testharnessreport.js"></script> |
| 5 <script src="./resources/resizeTestHelper.js"></script> |
| 6 <style> |
| 7 div { |
| 8 border: 1px dotted gray |
| 9 } |
| 10 .transform { |
| 11 transform: scale(2,2) rotate(90deg) |
| 12 } |
| 13 </style> |
| 14 </head> |
| 15 <body> |
| 16 <p>ResizeObserver tests</p> |
| 17 <div id="target1" style="width:100px;height:100px;">t1 |
| 18 <div id="target2" style="width:100px;height:100px;">t2 |
| 19 <div id="target3" style="width:100px;height:100px;">t3 |
| 20 <span id="inline">inline</span> |
| 21 </div> |
| 22 </div> |
| 23 </div> |
| 24 <div id="absolute" style="width:100.5px;height:100.5px;position:absolute;top:10.
3px;left:10.3px"></div> |
| 25 <script> |
| 26 'use strict'; |
| 27 |
| 28 var helper = new ResizeTestHelper(); |
| 29 |
| 30 let t1 = document.querySelector('#target1'); |
| 31 let t2 = document.querySelector('#target2'); |
| 32 let t3 = document.querySelector('#target3'); |
| 33 let abs = document.querySelector('#absolute'); |
| 34 let inline = document.querySelector('#inline'); |
| 35 |
| 36 function test0() { |
| 37 helper.createTest( |
| 38 "test0: notification ordering", |
| 39 setup => { |
| 40 helper.observer.observe(t3); |
| 41 helper.observer.observe(t2); |
| 42 helper.observer.observe(t1); |
| 43 t1.style.width = "5px"; |
| 44 t3.style.width = "5px"; |
| 45 t2.style.width = "5px"; |
| 46 |
| 47 }, |
| 48 entries => { |
| 49 assert_equals(entries.length, 3, "3 resizes"); |
| 50 assert_equals(entries[0].target, t3, "ordering"); |
| 51 assert_equals(entries[1].target, t2, "ordering"); |
| 52 assert_equals(entries[2].target, t1, "ordering"); |
| 53 helper.observer.disconnect(); |
| 54 t1.style.width = "100px"; |
| 55 t2.style.width = "100px"; |
| 56 t3.style.width = "100px"; |
| 57 test1(); |
| 58 } |
| 59 ); |
| 60 helper.nextTestRaf(); |
| 61 } |
| 62 |
| 63 function test1() { |
| 64 helper.createTest( |
| 65 "test1: display:none triggers notification", |
| 66 setup => { |
| 67 helper.observer.disconnect(); |
| 68 helper.observer.observe(t1); |
| 69 }, |
| 70 entries => { |
| 71 // initial observation happens here |
| 72 helper.nextTestRaf(); |
| 73 } |
| 74 ); |
| 75 helper.createTest( |
| 76 "display:none triggers notification, part 2", |
| 77 setup => { |
| 78 t1.style.display = "none"; |
| 79 }, |
| 80 entries => { |
| 81 helper.observer.disconnect(); |
| 82 t1.style.display = ""; |
| 83 test2(); |
| 84 } |
| 85 ); |
| 86 helper.nextTestRaf(); |
| 87 } |
| 88 |
| 89 |
| 90 function test2() { |
| 91 helper.createTest( |
| 92 "test2: remove/reinsert", |
| 93 setup => { |
| 94 helper.observer.disconnect(); |
| 95 helper.observer.observe(t1); |
| 96 }, |
| 97 entries => { |
| 98 // initial observation |
| 99 helper.nextTestRaf(); |
| 100 } |
| 101 ); |
| 102 helper.createTest( |
| 103 "removeChild triggers notification", |
| 104 setup => { |
| 105 t1.parentNode.removeChild(t1); |
| 106 }, |
| 107 entries => { |
| 108 assert_equals(entries[0].target, t1); |
| 109 helper.nextTestRaf(); |
| 110 } |
| 111 ); |
| 112 helper.createTest( |
| 113 "appendChild triggers notification", |
| 114 setup => { |
| 115 document.body.appendChild(t1); |
| 116 }, |
| 117 entries => { |
| 118 assert_equals(entries[0].target, t1); |
| 119 test3(); |
| 120 } |
| 121 ); |
| 122 helper.nextTestRaf(); |
| 123 } |
| 124 |
| 125 |
| 126 function test3() { |
| 127 helper.createTest( |
| 128 "test3: dimensions match", |
| 129 setup => { |
| 130 helper.observer.disconnect(); |
| 131 helper.observer.observe(t1); |
| 132 t1.style.width = "200.5px"; |
| 133 t1.style.height = "100px"; |
| 134 t1.style.paddingLeft = "20px"; |
| 135 t1.style.paddingTop = "10px"; |
| 136 }, |
| 137 entries => { |
| 138 assert_equals(entries[0].contentRect.left,20); |
| 139 assert_equals(entries[0].contentRect.top,10); |
| 140 assert_between_inclusive(entries[0].contentRect.width, 200.4, 200.6, "widt
h is not rounded"); |
| 141 assert_equals(entries[0].contentRect.height, 100); |
| 142 test4(); |
| 143 } |
| 144 ); |
| 145 helper.nextTestRaf(); |
| 146 } |
| 147 |
| 148 function test4() { |
| 149 helper.createTest( |
| 150 "test4: transform do not cause notifications", |
| 151 setup => { |
| 152 helper.observer.disconnect(); |
| 153 helper.observer.observe(t2); |
| 154 }, |
| 155 entries => { |
| 156 // initial notification |
| 157 helper.nextTestRaf(); |
| 158 } |
| 159 ); |
| 160 helper.createTest( |
| 161 "transform do not cause notification, part 2", |
| 162 setup => { |
| 163 t2.classList.add("transform"); |
| 164 }, |
| 165 entries => { |
| 166 assert_unreached("transform must not trigger notifications"); |
| 167 }, |
| 168 timeout => { |
| 169 t2.classList.remove("transform"); |
| 170 test5(); |
| 171 } |
| 172 ); |
| 173 helper.nextTestRaf(); |
| 174 |
| 175 } |
| 176 |
| 177 |
| 178 function test5() { |
| 179 helper.createTest( |
| 180 "test5: moving an element does not trigger notifications", |
| 181 setup => { |
| 182 helper.observer.disconnect(); |
| 183 helper.observer.observe(abs); |
| 184 }, |
| 185 entries => { |
| 186 // initial observation |
| 187 helper.nextTest(); |
| 188 } |
| 189 ); |
| 190 helper.createTest( |
| 191 "moving an element does not trigger notifications, part 2", |
| 192 setup => { |
| 193 abs.style.top = "20.33px"; |
| 194 abs.style.left = "20.33px"; |
| 195 }, |
| 196 entries => { |
| 197 assert_unreached("movement should not cause resize notifications"); |
| 198 }, |
| 199 timeout => { |
| 200 test6(); |
| 201 } |
| 202 ); |
| 203 helper.nextTestRaf(); |
| 204 } |
| 205 |
| 206 function test6() { |
| 207 helper.createTest( |
| 208 "test6: inline element does not notify", |
| 209 setup => { |
| 210 helper.observer.disconnect(); |
| 211 helper.observer.observe(inline); |
| 212 helper.observer.observe(t1); |
| 213 t1.style.width = "66px"; |
| 214 inline.style.width = "66px"; |
| 215 }, |
| 216 entries => { |
| 217 assert_equals(entries.length, 1, "inline elements must not trigger notific
ations"); |
| 218 assert_equals(entries[0].target, t1, "inline elements must not trigger no
tifications"); |
| 219 helper.nextTestRaf(); |
| 220 } |
| 221 ); |
| 222 helper.createTest( |
| 223 "inline element that becomes block should notify", |
| 224 setup => { |
| 225 inline.style.display = "block"; |
| 226 }, |
| 227 entries => { |
| 228 assert_equals(entries[0].target, inline); |
| 229 helper.observer.disconnect(); |
| 230 test7(); |
| 231 } |
| 232 ); |
| 233 helper.nextTestRaf(); |
| 234 } |
| 235 |
| 236 function test7() { |
| 237 let test = async_test("test7: unobserve inside notify callback"); |
| 238 |
| 239 let notifyStep = 0; |
| 240 let notify = entries => { |
| 241 switch(notifyStep) { |
| 242 case 0: |
| 243 // initial setup |
| 244 window.requestAnimationFrame( _ => { |
| 245 t1.style.width = "777px"; |
| 246 t2.style.width = "777px"; |
| 247 ro.unobserve(t1); |
| 248 }); |
| 249 break; |
| 250 case 1: |
| 251 test.step(_ => { |
| 252 assert_equals(entries.length, 1, "only t2 is observed"); |
| 253 assert_equals(entries[0].target, t2, "only t2 is observed"); |
| 254 test8(); |
| 255 ro.disconnect(); |
| 256 test.done(); |
| 257 }); |
| 258 break; |
| 259 } |
| 260 notifyStep++; |
| 261 } |
| 262 |
| 263 var ro; |
| 264 window.requestAnimationFrame( _ => { |
| 265 ro = new ResizeObserver(notify); |
| 266 ro.observe(t1); |
| 267 ro.observe(t2); |
| 268 }); |
| 269 } |
| 270 |
| 271 function test8() { |
| 272 let test = async_test("test8: observe inside notify callback"); |
| 273 |
| 274 let notifyStep = 0; |
| 275 let notify = entries => { |
| 276 switch(notifyStep) { |
| 277 case 0: |
| 278 // intial setup |
| 279 window.requestAnimationFrame( _ => { |
| 280 ro.observe(t2); |
| 281 t2.style.width = "888px"; |
| 282 }); |
| 283 break; |
| 284 case 1: |
| 285 test.step( _ => { |
| 286 assert_equals(entries.length, 1, "only t2 is observed"); |
| 287 assert_equals(entries[0].target, t2, "only t2 is observed"); |
| 288 ro.disconnect(); |
| 289 test9(); |
| 290 test.done(); |
| 291 }); |
| 292 break; |
| 293 } |
| 294 notifyStep++; |
| 295 } |
| 296 var ro; |
| 297 window.requestAnimationFrame( _ => { |
| 298 ro = new ResizeObserver(notify); |
| 299 ro.observe(t1); |
| 300 }); |
| 301 } |
| 302 |
| 303 function test9() { |
| 304 let test = async_test("test9: disconnect inside notify callback"); |
| 305 |
| 306 let notifyStep = 0; |
| 307 let timeoutId = 0; |
| 308 let notify = entries => { |
| 309 switch(notifyStep) { |
| 310 case 0: |
| 311 // initial setup |
| 312 t1.style.width = "888px"; |
| 313 ro.disconnect(); |
| 314 timeoutId = test.step_timeout(_ => { |
| 315 test10(); |
| 316 test.done(); |
| 317 }, ResizeTestHelper.TIMEOUT); |
| 318 break; |
| 319 case 1: |
| 320 window.clearTimeout(timeoutId); |
| 321 test.step( _ => { |
| 322 assert_unreached("there should be no notifications after disconnect"); |
| 323 }); |
| 324 break; |
| 325 } |
| 326 notifyStep++; |
| 327 } |
| 328 |
| 329 var ro; |
| 330 window.requestAnimationFrame( _ => { |
| 331 ro = new ResizeObserver(notify); |
| 332 ro.observe(t1); |
| 333 }); |
| 334 } |
| 335 |
| 336 function test10() { |
| 337 var parent = t1.parentNode; |
| 338 helper.createTest( |
| 339 "test10: element notifies when parent removed", |
| 340 setup => { |
| 341 helper.observer.observe(t3); |
| 342 }, |
| 343 entries => { |
| 344 helper.nextTestRaf(); |
| 345 } |
| 346 ); |
| 347 helper.createTest( |
| 348 "test10, part 2: element notifies when parent removed", |
| 349 setup => { |
| 350 t1.parentNode.removeChild(t1); |
| 351 }, |
| 352 entries => { |
| 353 assert_equals(entries.length, 1); |
| 354 assert_equals(entries[0].target, t3); |
| 355 helper.observer.disconnect(); |
| 356 parent.appendChild(t1); |
| 357 } |
| 358 ); |
| 359 helper.nextTestRaf(); |
| 360 } |
| 361 |
| 362 test0(); |
| 363 |
| 364 </script> |
| 365 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2204503002:
ResizeObserver pt6: integration (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master