Chromium Code Reviews Chromium Code Reviews
Issue 2204503002:
ResizeObserver pt6: integration (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!doctype html> | |
| 2 <head> | |
|
esprehn
2016/08/10 04:27:09
I'd leave out the <head> and <body> in all of your
atotic1
2016/08/10 18:25:32
Done.
| |
| 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 </style> | |
| 11 </head> | |
| 12 <p>ResizeObserver notification event loop tests</p> | |
| 13 <div id="target1" style="width:100px;height:100px;">t1 | |
| 14 </div> | |
| 15 <div id="container"> | |
| 16 <div id="a1" style="width:100px;height:100px"> | |
| 17 <div id="a2" style="width:100px;height:100px"> | |
| 18 </div> | |
| 19 </div> | |
| 20 <div id="b1" style="width:100px;height:100px"> | |
| 21 <div id="b2" style="width:100px;height:100px"> | |
| 22 </div> | |
| 23 </div> | |
| 24 </div> | |
| 25 <script> | |
| 26 'use strict'; | |
| 27 | |
| 28 var helper = new ResizeTestHelper(); | |
| 29 | |
| 30 let t1 = document.querySelector('#target1'); | |
| 31 | |
| 32 // allow uncaught exception because ResizeObserver posts exceptions | |
| 33 // to window error handler when limit is exceeded. | |
| 34 // This codepath is tested in this file. | |
| 35 | |
| 36 setup({allow_uncaught_exception: true}); | |
| 37 | |
| 38 var onErrorCalled = false; | |
| 39 | |
| 40 window.onerror = err => { | |
| 41 onErrorCalled = true; | |
| 42 } | |
| 43 | |
| 44 function test0() { | |
| 45 | |
| 46 let divs = [t1]; | |
| 47 | |
| 48 helper.createTest( | |
| 49 "test0: multiple notifications inside same event loop", | |
| 50 setup => { | |
| 51 onErrorCalled = false; | |
| 52 helper.observer.disconnect(); | |
| 53 let t2 = document.createElement('div'); | |
| 54 let t3 = document.createElement('div'); | |
| 55 t2.appendChild(t3); | |
| 56 t1.appendChild(t2); | |
| 57 divs.push(t2); | |
| 58 divs.push(t3); | |
| 59 helper.observer.observe(t1); | |
| 60 helper.observer.observe(t2); | |
| 61 helper.observer.observe(t3); | |
| 62 }, | |
| 63 entries => { | |
| 64 assert_equals(entries.length, 3, "3 notifications"); | |
| 65 helper.nextTest(); | |
| 66 } | |
| 67 ); | |
| 68 let rAF = 0; | |
| 69 | |
| 70 // This test happens in the same Resize notification loop, | |
| 71 // only t2 and t3 get notified | |
| 72 helper.createTest( | |
| 73 "test0: multiple notifications pt 2", | |
| 74 setup => { | |
| 75 divs.forEach( el => { el.style.width = "101px";}); | |
| 76 window.requestAnimationFrame(_ => { rAF++; }); | |
| 77 }, | |
| 78 entries => { | |
| 79 // t1 is not delivered | |
| 80 assert_equals(entries.length, 2, "2 notifications"); | |
| 81 helper.nextTest(); | |
| 82 } | |
| 83 ); | |
| 84 // Only t3 gets notified, t2 and t1 are not deep enough | |
| 85 helper.createTest( | |
| 86 "test0: multiple notifications pt 3", | |
| 87 setup => { | |
| 88 divs.forEach( el => { el.style.width = "102px";}); | |
| 89 }, | |
| 90 entries => { | |
| 91 assert_equals(entries.length, 1, "1 notifications"); | |
| 92 assert_equals(rAF, 0, "same loop"); | |
| 93 helper.nextTest(); | |
| 94 } | |
| 95 ); | |
| 96 // t1 and t2 get notified | |
| 97 helper.createTest( | |
| 98 "test0: multiple notifications pt 4, new loop", | |
| 99 setup => { | |
| 100 }, | |
| 101 entries => { | |
| 102 assert_equals(entries.length, 2, "2 notifications"); | |
| 103 assert_equals(rAF, 1, "new loop"); | |
| 104 assert_equals(onErrorCalled, true, "error was fired"); | |
| 105 helper.observer.disconnect(); | |
| 106 while (t1.childNodes.length > 0) | |
| 107 t1.removeChild(t1.childNodes[0]); | |
| 108 test1(); | |
| 109 } | |
| 110 ); | |
| 111 | |
| 112 helper.nextTestRaf(); | |
| 113 } | |
| 114 | |
| 115 function test1() { | |
| 116 | |
| 117 var resizers = [t1]; | |
| 118 // Testing depths of shadow roots | |
| 119 // DOM: t1 <- t2 <- t3 <-shadow- t4 <- t5 | |
| 120 helper.createTest( | |
| 121 "test1: limit with shadowRoot", | |
| 122 setup => { | |
| 123 onErrorCalled = false; | |
| 124 | |
| 125 let t2 = document.createElement('div'); | |
| 126 t1.appendChild(t2); | |
| 127 resizers.push(t2); | |
| 128 let t3 = document.createElement('div'); | |
| 129 resizers.push(t3); | |
| 130 t2.appendChild(t3); | |
| 131 let shadow = t3.createShadowRoot(); | |
| 132 let t4 = document.createElement('div'); | |
| 133 resizers.push(t4); | |
| 134 shadow.appendChild(t4); | |
| 135 let t5 = document.createElement('div'); | |
| 136 resizers.push(t5); | |
| 137 t4.appendChild(t5); | |
| 138 resizers.forEach( el => helper.observer.observe(el) ); | |
| 139 }, | |
| 140 entries => { | |
| 141 assert_equals(entries.length, 5, "all entries resized"); | |
| 142 helper.nextTest(); | |
| 143 } | |
| 144 ); | |
| 145 | |
| 146 helper.createTest( | |
| 147 "test1: limit with shadowRoot", | |
| 148 setup => { | |
| 149 resizers.forEach( el => el.style.width = "111px" ); | |
| 150 }, | |
| 151 entries => { | |
| 152 assert_equals(entries.length, 4, "depth limited"); | |
| 153 helper.nextTest(); | |
| 154 } | |
| 155 ); | |
| 156 | |
| 157 helper.createTest( | |
| 158 "test1: limit with shadowRoot", | |
| 159 setup => { | |
| 160 resizers.forEach( el => el.style.width = "112px" ); | |
| 161 }, | |
| 162 entries => { | |
| 163 assert_equals(entries.length, 3, "depth limited"); | |
| 164 helper.nextTest(); | |
| 165 } | |
| 166 ); | |
| 167 | |
| 168 helper.createTest( | |
| 169 "test1: limit with shadowRoot", | |
| 170 setup => { | |
| 171 resizers.forEach( el => el.style.width = "113px" ); | |
| 172 }, | |
| 173 entries => { | |
| 174 assert_equals(entries.length, 2, "depth limited"); | |
| 175 helper.nextTest(); | |
| 176 } | |
| 177 ); | |
| 178 | |
| 179 helper.createTest( | |
| 180 "test1: limit with shadowRoot", | |
| 181 setup => { | |
| 182 resizers.forEach( el => el.style.width = "114px" ); | |
| 183 }, | |
| 184 entries => { | |
| 185 assert_equals(entries.length, 1, "depth limited"); | |
| 186 helper.nextTestRaf(); | |
| 187 } | |
| 188 ); | |
| 189 | |
| 190 helper.createTest( | |
| 191 "test1: limit with shadowRoot end", | |
| 192 setup => { | |
| 193 }, | |
| 194 entries => { | |
| 195 assert_equals(entries.length, 4, "limit notifications"); | |
| 196 assert_equals(onErrorCalled, true, "breached limit"); | |
| 197 helper.observer.disconnect(); | |
| 198 t1.removeChild(t1.firstChild); | |
| 199 test2(); | |
| 200 } | |
| 201 ); | |
| 202 | |
| 203 helper.nextTestRaf(); | |
| 204 } | |
| 205 | |
| 206 function test2() { | |
| 207 let container = document.querySelector('#container'); | |
| 208 let a1 = document.querySelector('#a1'); | |
| 209 let a2 = document.querySelector('#a2'); | |
| 210 let b1 = document.querySelector('#b1'); | |
| 211 let b2 = document.querySelector('#b2'); | |
| 212 let targets = [a1, a2, b1, b2]; | |
| 213 helper.createTest( | |
| 214 "test2: move target in dom while inside event loop", | |
| 215 setup => { | |
| 216 for (let t of targets) | |
| 217 helper.observer.observe(t); | |
| 218 }, | |
| 219 entries => { | |
| 220 helper.nextTestRaf(); | |
| 221 } | |
| 222 ); | |
| 223 helper.createTest( | |
| 224 "test2, pt2: resize them all", | |
| 225 setup => { | |
| 226 for (let t of targets) | |
| 227 t.style.width = "110px"; | |
| 228 }, | |
| 229 entries => { | |
| 230 assert_equals(entries.length, targets.length); | |
| 231 helper.nextTest(); | |
| 232 } | |
| 233 ); | |
| 234 helper.createTest( | |
| 235 "test2, pt3: resize all, move dom upwardsa", | |
| 236 setup => { | |
| 237 // still in same event loop as pt2 | |
| 238 for (let t of targets) | |
| 239 t.style.width = "120px"; | |
| 240 container.appendChild(b2); | |
| 241 }, | |
| 242 entries => { | |
| 243 assert_equals(entries.length, 1); | |
| 244 assert_equals(entries[0].target, a2); | |
| 245 helper.nextTest(); | |
| 246 } | |
| 247 ); | |
| 248 helper.createTest( | |
| 249 "test2, pt4, resize all, move dom downwards", | |
| 250 setup => { | |
| 251 for (let t of targets) | |
| 252 t.style.width = "130px"; | |
| 253 a2.appendChild(b2); | |
| 254 }, | |
| 255 entries => { | |
| 256 assert_equals(entries.length, 1); | |
| 257 assert_equals(entries[0].target, b2); | |
| 258 a1.appendChild(a2); | |
| 259 helper.observer.disconnect(); | |
| 260 } | |
| 261 ); | |
| 262 helper.nextTestRaf(); | |
| 263 } | |
| 264 | |
| 265 test0(); | |
| 266 | |
| 267 </script> | |
| 268 | |
| OLD | NEW |
