| 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 </style> |
| 11 </head> |
| 12 <p>ResizeObserver notification event loop tests</p> |
| 13 <div id="target1" style="width:100px;height:100px;">t1 |
| 14 </div> |
| 15 <script> |
| 16 'use strict'; |
| 17 |
| 18 var helper = new ResizeTestHelper(); |
| 19 |
| 20 let t1 = document.querySelector('#target1'); |
| 21 |
| 22 // allow uncaught exception because ResizeObserver posts exceptions |
| 23 // to window error handler when limit is exceeded. |
| 24 // This codepath is tested in this file. |
| 25 |
| 26 setup({allow_uncaught_exception: true}); |
| 27 |
| 28 var onErrorCalled = false; |
| 29 |
| 30 window.onerror = err => { |
| 31 onErrorCalled = true; |
| 32 } |
| 33 |
| 34 function test0() { |
| 35 |
| 36 let divs = [t1]; |
| 37 |
| 38 helper.createTest( |
| 39 "test0: multiple notifications inside same event loop", |
| 40 setup => { |
| 41 onErrorCalled = false; |
| 42 helper.observer.disconnect(); |
| 43 let t2 = document.createElement('div'); |
| 44 let t3 = document.createElement('div'); |
| 45 t2.appendChild(t3); |
| 46 t1.appendChild(t2); |
| 47 divs.push(t2); |
| 48 divs.push(t3); |
| 49 helper.observer.observe(t1); |
| 50 helper.observer.observe(t2); |
| 51 helper.observer.observe(t3); |
| 52 }, |
| 53 entries => { |
| 54 assert_equals(entries.length, 3, "3 notifications"); |
| 55 helper.nextTest(); |
| 56 } |
| 57 ); |
| 58 let rAF = 0; |
| 59 |
| 60 // This test happens in the same Resize notification loop, |
| 61 // only t2 and t3 get notified |
| 62 helper.createTest( |
| 63 "test0: multiple notifications pt 2", |
| 64 setup => { |
| 65 divs.forEach( el => { el.style.width = "101px";}); |
| 66 window.requestAnimationFrame(_ => { rAF++; }); |
| 67 }, |
| 68 entries => { |
| 69 // t1 is not delivered |
| 70 assert_equals(entries.length, 2, "2 notifications"); |
| 71 helper.nextTest(); |
| 72 } |
| 73 ); |
| 74 // Only t3 gets notified, t2 and t1 are not deep enough |
| 75 helper.createTest( |
| 76 "test0: multiple notifications pt 3", |
| 77 setup => { |
| 78 divs.forEach( el => { el.style.width = "102px";}); |
| 79 }, |
| 80 entries => { |
| 81 assert_equals(entries.length, 1, "1 notifications"); |
| 82 assert_equals(rAF, 0, "same loop"); |
| 83 helper.nextTest(); |
| 84 } |
| 85 ); |
| 86 // t1 and t2 get notified |
| 87 helper.createTest( |
| 88 "test0: multiple notifications pt 4, new loop", |
| 89 setup => { |
| 90 }, |
| 91 entries => { |
| 92 assert_equals(entries.length, 2, "2 notifications"); |
| 93 assert_equals(rAF, 1, "new loop"); |
| 94 assert_equals(onErrorCalled, true, "error was fired"); |
| 95 helper.observer.disconnect(); |
| 96 while (t1.childNodes.length > 0) |
| 97 t1.removeChild(t1.childNodes[0]); |
| 98 test1(); |
| 99 } |
| 100 ); |
| 101 |
| 102 helper.nextTestRaf(); |
| 103 } |
| 104 |
| 105 function test1() { |
| 106 |
| 107 var resizers = [t1]; |
| 108 // Testing depths of shadow roots |
| 109 // DOM: t1 <- t2 <- t3 <-shadow- t4 <- t5 |
| 110 helper.createTest( |
| 111 "test1: limit with shadowRoot", |
| 112 setup => { |
| 113 onErrorCalled = false; |
| 114 |
| 115 let t2 = document.createElement('div'); |
| 116 t1.appendChild(t2); |
| 117 resizers.push(t2); |
| 118 let t3 = document.createElement('div'); |
| 119 resizers.push(t3); |
| 120 t2.appendChild(t3); |
| 121 let shadow = t3.createShadowRoot(); |
| 122 let t4 = document.createElement('div'); |
| 123 resizers.push(t4); |
| 124 shadow.appendChild(t4); |
| 125 let t5 = document.createElement('div'); |
| 126 resizers.push(t5); |
| 127 t4.appendChild(t5); |
| 128 resizers.forEach( el => helper.observer.observe(el) ); |
| 129 }, |
| 130 entries => { |
| 131 assert_equals(entries.length, 5, "all entries resized"); |
| 132 helper.nextTest(); |
| 133 } |
| 134 ); |
| 135 |
| 136 helper.createTest( |
| 137 "test1: limit with shadowRoot", |
| 138 setup => { |
| 139 resizers.forEach( el => el.style.width = "111px" ); |
| 140 }, |
| 141 entries => { |
| 142 assert_equals(entries.length, 4, "depth limited"); |
| 143 helper.nextTest(); |
| 144 } |
| 145 ); |
| 146 |
| 147 helper.createTest( |
| 148 "test1: limit with shadowRoot", |
| 149 setup => { |
| 150 resizers.forEach( el => el.style.width = "112px" ); |
| 151 }, |
| 152 entries => { |
| 153 assert_equals(entries.length, 3, "depth limited"); |
| 154 helper.nextTest(); |
| 155 } |
| 156 ); |
| 157 |
| 158 helper.createTest( |
| 159 "test1: limit with shadowRoot", |
| 160 setup => { |
| 161 resizers.forEach( el => el.style.width = "113px" ); |
| 162 }, |
| 163 entries => { |
| 164 assert_equals(entries.length, 2, "depth limited"); |
| 165 helper.nextTest(); |
| 166 } |
| 167 ); |
| 168 |
| 169 helper.createTest( |
| 170 "test1: limit with shadowRoot", |
| 171 setup => { |
| 172 resizers.forEach( el => el.style.width = "114px" ); |
| 173 }, |
| 174 entries => { |
| 175 assert_equals(entries.length, 1, "depth limited"); |
| 176 helper.nextTestRaf(); |
| 177 } |
| 178 ); |
| 179 |
| 180 helper.createTest( |
| 181 "test1: limit with shadowRoot end", |
| 182 setup => { |
| 183 }, |
| 184 entries => { |
| 185 assert_equals(entries.length, 4, "limit notifications"); |
| 186 assert_equals(onErrorCalled, true, "breached limit"); |
| 187 helper.observer.disconnect(); |
| 188 t1.removeChild(t1.firstChild); |
| 189 } |
| 190 ); |
| 191 |
| 192 helper.nextTestRaf(); |
| 193 } |
| 194 |
| 195 test0(); |
| 196 |
| 197 </script> |
| 198 |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2204503002:
ResizeObserver pt6: integration (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master