| 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 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, "wi
dth 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 does not notify", |
| 198 [ |
| 199 { |
| 200 setup: observer => { |
| 201 observer.observe(inline); |
| 202 observer.observe(t1); |
| 203 t1.style.width = "66px"; |
| 204 inline.style.width = "66px"; |
| 205 }, |
| 206 notify: (entries, observer) => { |
| 207 assert_equals(entries.length, 1, "inline elements must not trigger notif
ications"); |
| 208 assert_equals(entries[0].target, t1, "inline elements must not trigger n
otifications"); |
| 209 return true; // Delay next step |
| 210 } |
| 211 }, |
| 212 { // "inline element that becomes block should notify", |
| 213 setup: observer => { |
| 214 inline.style.display = "block"; |
| 215 }, |
| 216 notify: (entries, observer) => { |
| 217 assert_equals(entries[0].target, inline); |
| 218 } |
| 219 } |
| 220 ]); |
| 221 return helper.start(); |
| 222 } |
| 223 |
| 224 function test7() { |
| 225 let helper = new ResizeTestHelper( |
| 226 "test7: unobserve inside notify callback", |
| 227 [ |
| 228 { |
| 229 setup: observer => { |
| 230 observer.observe(t1); |
| 231 observer.observe(t2); |
| 232 }, |
| 233 notify: (entries, observer) => { |
| 234 t1.style.width = "777px"; |
| 235 t2.style.width = "777px"; |
| 236 observer.unobserve(t1); |
| 237 return true; // Delay next step |
| 238 } |
| 239 }, |
| 240 { |
| 241 setup: observer => { |
| 242 }, |
| 243 notify: (entries, observer) => { |
| 244 assert_equals(entries.length, 1, "only t2 is observed"); |
| 245 assert_equals(entries[0].target, t2, "only t2 is observed"); |
| 246 } |
| 247 } |
| 248 ]); |
| 249 return helper.start(); |
| 250 } |
| 251 |
| 252 function test8() { |
| 253 let helper = new ResizeTestHelper( |
| 254 "test8: observe inside notify callback", |
| 255 [ |
| 256 { |
| 257 setup: observer => { |
| 258 observer.observe(t1); |
| 259 }, |
| 260 notify: (entries, observer) => { |
| 261 observer.observe(t2); |
| 262 t2.style.width = "888px"; |
| 263 return true; // Delay next step |
| 264 } |
| 265 }, |
| 266 { |
| 267 setup: observer => { |
| 268 }, |
| 269 notify: (entries, observer) => { |
| 270 assert_equals(entries.length, 1, "only t2 is observed"); |
| 271 assert_equals(entries[0].target, t2, "only t2 is observed"); |
| 272 } |
| 273 } |
| 274 ]); |
| 275 return helper.start(); |
| 276 } |
| 277 |
| 278 function test9() { |
| 279 let helper = new ResizeTestHelper( |
| 280 "test9: disconnect inside notify callback", |
| 281 [ |
| 282 { |
| 283 setup: observer => { |
| 284 observer.observe(t1); |
| 285 }, |
| 286 notify: (entries, observer) => { |
| 287 t1.style.width = "999px"; |
| 288 observer.disconnect(); |
| 289 return true; // Delay next step |
| 290 } |
| 291 }, |
| 292 { |
| 293 setup: observer => { |
| 294 }, |
| 295 notify: (entries, observer) => { |
| 296 assert_unreached("there should be no notifications after disconnect"); |
| 297 }, |
| 298 timeout: () => { |
| 299 } |
| 300 } |
| 301 ]); |
| 302 return helper.start(); |
| 303 } |
| 304 |
| 305 function test10() { |
| 306 var parent = t1.parentNode; |
| 307 let helper = new ResizeTestHelper( |
| 308 "test10: element notifies when parent removed", |
| 309 [ |
| 310 { |
| 311 setup: observer => { |
| 312 observer.observe(t3); |
| 313 }, |
| 314 notify: (entries, observer) => { |
| 315 return true; // Delay next step |
| 316 } |
| 317 }, |
| 318 { |
| 319 setup: observer => { |
| 320 t1.parentNode.removeChild(t1); |
| 321 }, |
| 322 notify: (entries, observer) => { |
| 323 assert_equals(entries.length, 1); |
| 324 assert_equals(entries[0].target, t3); |
| 325 parent.appendChild(t1); |
| 326 } |
| 327 } |
| 328 ]); |
| 329 return helper.start(); |
| 330 } |
| 331 |
| 332 let guard = async_test('guard'); |
| 333 test0() |
| 334 .then(() => { return test1(); }) |
| 335 .then(() => { return test2(); }) |
| 336 .then(() => { return test3(); }) |
| 337 .then(() => { return test4(); }) |
| 338 .then(() => { return test5(); }) |
| 339 .then(() => { return test6(); }) |
| 340 .then(() => { return test7(); }) |
| 341 .then(() => { return test8(); }) |
| 342 .then(() => { return test9(); }) |
| 343 .then(() => { return test10(); }) |
| 344 .then(() => { guard.done(); }); |
| 345 |
| 346 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2204503002:
ResizeObserver pt6: integration (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master