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