notify.html (10487B)
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 let t1 = document.querySelector('#target1'); 26 let t2 = document.querySelector('#target2'); 27 let t3 = document.querySelector('#target3'); 28 let abs = document.querySelector('#absolute'); 29 let inline = document.querySelector('#inline'); 30 31 function test0() { 32 let helper = new ResizeTestHelper( 33 "test0: notification ordering", 34 [ 35 { 36 setup: observer => { 37 observer.observe(t3); 38 observer.observe(t2); 39 observer.observe(t1); 40 t1.style.width = "5px"; 41 t3.style.width = "5px"; 42 t2.style.width = "5px"; 43 }, 44 notify: (entries, observer) => { 45 assert_equals(entries.length, 3, "3 resizes"); 46 assert_equals(entries[0].target, t3, "ordering"); 47 assert_equals(entries[1].target, t2, "ordering"); 48 assert_equals(entries[2].target, t1, "ordering"); 49 observer.disconnect(); 50 t1.style.width = "100px"; 51 t2.style.width = "100px"; 52 t3.style.width = "100px"; 53 } 54 } 55 ]); 56 return helper.start(); 57 } 58 59 function test1() { 60 let helper = new ResizeTestHelper( 61 "test1: display:none triggers notification", 62 [ 63 { 64 setup: observer => { 65 observer.observe(t1); 66 }, 67 notify: (entries, observer) => { 68 return true; // Delay next step 69 } 70 }, 71 { 72 setup: observer => { 73 t1.style.display = "none"; 74 }, 75 notify: (entries, observer) => { 76 t1.style.display = ""; 77 } 78 } 79 ]); 80 return helper.start(); 81 } 82 83 84 function test2() { 85 let helper = new ResizeTestHelper( 86 "test2: remove/appendChild trigger notification", 87 [ 88 { 89 setup: observer => { 90 observer.observe(t1); 91 }, 92 notify: (entries, observer) => { 93 return true; // Delay next step 94 } 95 }, 96 { // "removeChild triggers notification" 97 setup: observer => { 98 t1.parentNode.removeChild(t1); 99 }, 100 notify: (entries, observer) => { 101 assert_equals(entries[0].target, t1); 102 return true; // Delay next step 103 } 104 }, 105 { // "appendChild triggers notification", 106 setup: observer => { 107 document.body.appendChild(t1); 108 }, 109 notify: (entries, observer) => { 110 assert_equals(entries[0].target, t1) 111 } 112 } 113 ]); 114 return helper.start(); 115 } 116 117 118 function test3() { 119 let helper = new ResizeTestHelper( 120 "test3: dimensions match", 121 [ 122 { 123 setup: observer => { 124 observer.observe(t1); 125 t1.style.width = "200.5px"; 126 t1.style.height = "100px"; 127 t1.style.paddingLeft = "20px"; 128 t1.style.paddingTop = "10px"; 129 }, 130 notify: (entries, observer) => { 131 assert_equals(entries[0].contentRect.left,20); 132 assert_equals(entries[0].contentRect.top,10); 133 assert_between_inclusive(entries[0].contentRect.width, 200.4, 200.6, "width is not rounded"); 134 assert_equals(entries[0].contentRect.height, 100); 135 } 136 } 137 ]); 138 return helper.start(); 139 } 140 141 function test4() { 142 let helper = new ResizeTestHelper( 143 "test4: transform do not cause notifications", 144 [ 145 { 146 setup: observer => { 147 observer.observe(t2); 148 }, 149 notify: (entries, observer) => { 150 return true; // Delay next step 151 } 152 }, 153 { 154 setup: observer => { 155 t2.classList.add("transform"); 156 }, 157 notify: (entries, observer) => { 158 assert_unreached("transform must not trigger notifications"); 159 }, 160 timeout: () => { 161 t2.classList.remove("transform"); 162 } 163 } 164 ]); 165 return helper.start(); 166 } 167 168 function test5() { 169 let helper = new ResizeTestHelper( 170 "test5: moving an element does not trigger notifications", 171 [ 172 { 173 setup: observer => { 174 observer.observe(abs); 175 }, 176 notify: (entries, observer) => { 177 return true; // Delay next step 178 } 179 }, 180 { 181 setup: observer => { 182 abs.style.top = "20.33px"; 183 abs.style.left = "20.33px"; 184 }, 185 notify: (entries, observer) => { 186 assert_unreached("movement should not cause resize notifications"); 187 }, 188 timeout: () => { 189 } 190 } 191 ]); 192 return helper.start(); 193 } 194 195 function test6() { 196 let helper = new ResizeTestHelper( 197 "test6: inline element notifies once with 0x0.", 198 [ 199 { 200 setup: observer => { 201 observer.observe(inline); 202 }, 203 notify: (entries, observer) => { 204 assert_equals(entries.length, 1, "observing inline element triggers notification"); 205 assert_equals(entries[0].target, inline, "observing inline element triggers notification"); 206 assert_equals(entries[0].contentRect.width, 0); 207 assert_equals(entries[0].contentRect.height, 0); 208 return true; // Delay next step 209 } 210 }, 211 { 212 setup: observer => { 213 inline.style.width = "66px"; 214 }, 215 notify: (entries, observer) => { 216 assert_unreached("resizing inline element should not cause resize notifications"); 217 }, 218 timeout: () => { 219 // expected 220 } 221 }, 222 { // "inline element that becomes block should notify", 223 setup: observer => { 224 inline.style.display = "block"; 225 }, 226 notify: (entries, observer) => { 227 assert_equals(entries.length, 1, "inline element becoming a non-zero sized block triggers a notification"); 228 assert_equals(entries[0].target, inline, "inline element becoming a non-zero sized block triggers a notification"); 229 } 230 } 231 ]); 232 return helper.start(); 233 } 234 235 function test7() { 236 let helper = new ResizeTestHelper( 237 "test7: unobserve inside notify callback", 238 [ 239 { 240 setup: observer => { 241 observer.observe(t1); 242 observer.observe(t2); 243 }, 244 notify: (entries, observer) => { 245 t1.style.width = "777px"; 246 t2.style.width = "777px"; 247 observer.unobserve(t1); 248 return true; // Delay next step 249 } 250 }, 251 { 252 setup: observer => { 253 }, 254 notify: (entries, observer) => { 255 assert_equals(entries.length, 1, "only t2 is observed"); 256 assert_equals(entries[0].target, t2, "only t2 is observed"); 257 } 258 } 259 ]); 260 return helper.start(); 261 } 262 263 function test8() { 264 let helper = new ResizeTestHelper( 265 "test8: observe inside notify callback", 266 [ 267 { 268 setup: observer => { 269 observer.observe(t1); 270 }, 271 notify: (entries, observer) => { 272 observer.observe(t2); 273 t2.style.width = "888px"; 274 return true; // Delay next step 275 } 276 }, 277 { 278 setup: observer => { 279 }, 280 notify: (entries, observer) => { 281 assert_equals(entries.length, 1, "only t2 is observed"); 282 assert_equals(entries[0].target, t2, "only t2 is observed"); 283 } 284 } 285 ]); 286 return helper.start(); 287 } 288 289 function test9() { 290 let helper = new ResizeTestHelper( 291 "test9: disconnect inside notify callback", 292 [ 293 { 294 setup: observer => { 295 observer.observe(t1); 296 }, 297 notify: (entries, observer) => { 298 t1.style.width = "999px"; 299 observer.disconnect(); 300 return true; // Delay next step 301 } 302 }, 303 { 304 setup: observer => { 305 }, 306 notify: (entries, observer) => { 307 assert_unreached("there should be no notifications after disconnect"); 308 }, 309 timeout: () => { 310 } 311 } 312 ]); 313 return helper.start(); 314 } 315 316 function test10() { 317 var parent = t1.parentNode; 318 let helper = new ResizeTestHelper( 319 "test10: element notifies when parent removed", 320 [ 321 { 322 setup: observer => { 323 observer.observe(t3); 324 }, 325 notify: (entries, observer) => { 326 return true; // Delay next step 327 } 328 }, 329 { 330 setup: observer => { 331 t1.parentNode.removeChild(t1); 332 }, 333 notify: (entries, observer) => { 334 assert_equals(entries.length, 1); 335 assert_equals(entries[0].target, t3); 336 parent.appendChild(t1); 337 } 338 } 339 ]); 340 return helper.start(); 341 } 342 343 function test11() { 344 let t = createAndAppendElement("div"); 345 t.style.display = "none"; 346 347 let helper = new ResizeTestHelper( 348 "test11: display:none element should be notified", 349 [ 350 { 351 setup: observer => { 352 observer.observe(t); 353 }, 354 notify: entries => { 355 assert_equals(entries.length, 1, "1 pending notification"); 356 assert_equals(entries[0].target, t, "target is t"); 357 assert_equals(entries[0].contentRect.width, 0, "target width"); 358 assert_equals(entries[0].contentRect.height, 0, "target height"); 359 } 360 } 361 ]); 362 return helper.start(() => t.remove()); 363 } 364 365 function test12() { 366 let t = createAndAppendElement("div"); 367 t.style.width = "0px"; 368 369 let helper = new ResizeTestHelper( 370 "test12: element sized 0x0 should be notified", 371 [ 372 { 373 setup: observer => { 374 observer.observe(t); 375 }, 376 notify: entries => { 377 assert_equals(entries.length, 1, "1 pending notification"); 378 assert_equals(entries[0].target, t, "target is t"); 379 assert_equals(entries[0].contentRect.width, 0, "target width"); 380 assert_equals(entries[0].contentRect.height, 0, "target height"); 381 } 382 } 383 ]); 384 return helper.start(() => t.remove()); 385 } 386 387 let guard; 388 test(_ => { 389 assert_own_property(window, "ResizeObserver"); 390 guard = async_test('guard'); 391 }, "ResizeObserver implemented") 392 393 test0() 394 .then(() => { return test1(); }) 395 .then(() => { return test2(); }) 396 .then(() => { return test3(); }) 397 .then(() => { return test4(); }) 398 .then(() => { return test5(); }) 399 .then(() => { return test6(); }) 400 .then(() => { return test7(); }) 401 .then(() => { return test8(); }) 402 .then(() => { return test9(); }) 403 .then(() => { return test10(); }) 404 .then(() => { return test11(); }) 405 .then(() => { return test12(); }) 406 .then(() => { guard.done(); }); 407 408 </script>