| 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 <p>ResizeObserver tests</p> |
| 6 <div id="target1" style="width:100px;height:100px;">t1</div> |
| 7 <div id="target2" style="width:100px;height:100px;">t2</div> |
| 8 <img id="target3" style="width:100px;height:100px;"> |
| 9 <iframe src="./resources/iframe.html" width="300px" height="100px" style="displa
y:block"></iframe> |
| 10 <script> |
| 11 'use strict'; |
| 12 |
| 13 let t1 = document.querySelector('#target1'); |
| 14 let t2 = document.querySelector('#target2'); |
| 15 |
| 16 // allow uncaught exception because ResizeObserver posts exceptions |
| 17 // to window error handler when limit is exceeded. |
| 18 setup({allow_uncaught_exception: true}); |
| 19 |
| 20 function test0() { |
| 21 let helper = new ResizeTestHelper( |
| 22 "test0: simple observation", |
| 23 [ |
| 24 { |
| 25 setup: observer => { |
| 26 observer.observe(t1); |
| 27 t1.style.width = "5px"; |
| 28 }, |
| 29 notify: entries => { |
| 30 assert_equals(entries.length, 1, "1 pending notification"); |
| 31 assert_equals(entries[0].target, t1, "target is t1"); |
| 32 assert_equals(entries[0].contentRect.width, 5, "target width"); |
| 33 } |
| 34 } |
| 35 ]); |
| 36 return helper.start(); |
| 37 } |
| 38 |
| 39 function test1() { |
| 40 let helper = new ResizeTestHelper( |
| 41 "test1: multiple observation on same element trigger only one", |
| 42 [ |
| 43 { |
| 44 setup: observer => { |
| 45 observer.observe(t1); |
| 46 observer.observe(t1); |
| 47 t1.style.width = "10px"; |
| 48 }, |
| 49 notify: entries => { |
| 50 assert_equals(entries.length, 1, "1 pending notification"); |
| 51 } |
| 52 } |
| 53 ]); |
| 54 return helper.start(); |
| 55 } |
| 56 |
| 57 function test2() { |
| 58 test(() => { |
| 59 assert_throws(null, _=> { |
| 60 let ro = new ResizeObserver(() => {}); |
| 61 ro.observe({}); |
| 62 }); |
| 63 }, |
| 64 "test2: throw exception when observing non-element" |
| 65 ); |
| 66 return Promise.resolve(); |
| 67 } |
| 68 |
| 69 function test3() { |
| 70 let helper = new ResizeTestHelper( |
| 71 "test3: disconnect stops all notifications", [ |
| 72 { |
| 73 setup: observer => { |
| 74 observer.observe(t1); |
| 75 observer.observe(t2); |
| 76 observer.disconnect(); |
| 77 t1.style.width = "30px"; |
| 78 }, |
| 79 notify: entries => { |
| 80 assert_unreached("no entries should be observed"); |
| 81 }, |
| 82 timeout: () => { |
| 83 // expected |
| 84 } |
| 85 } |
| 86 ]); |
| 87 return helper.start(); |
| 88 } |
| 89 |
| 90 function test4() { |
| 91 let helper = new ResizeTestHelper( |
| 92 "test4: unobserve target stops notifications, unobserve non-observed does no
thing", [ |
| 93 { |
| 94 setup: observer => { |
| 95 observer.observe(t1); |
| 96 observer.observe(t2); |
| 97 observer.unobserve(t1); |
| 98 observer.unobserve(document.body); |
| 99 t1.style.width = "40px"; |
| 100 t2.style.width = "40px"; |
| 101 }, |
| 102 notify: entries => { |
| 103 assert_equals(entries.length, 1, "only t2"); |
| 104 assert_equals(entries[0].target, t2, "t2 was observed"); |
| 105 } |
| 106 } |
| 107 ]); |
| 108 return helper.start(); |
| 109 } |
| 110 |
| 111 function test5() { |
| 112 let t3 = document.querySelector('#target3'); |
| 113 var helper = new ResizeTestHelper("test5: observe img",[ |
| 114 { |
| 115 setup: observer => { |
| 116 observer.observe(t3); |
| 117 }, |
| 118 notify: entries => { |
| 119 } |
| 120 }, |
| 121 { |
| 122 setup: observer => { |
| 123 t3.style.width = "100.5px"; |
| 124 }, |
| 125 notify: entries => { |
| 126 assert_equals(entries.length, 1); |
| 127 assert_equals(entries[0].contentRect.width, 100.5); |
| 128 } |
| 129 } |
| 130 ]); |
| 131 return helper.start(); |
| 132 } |
| 133 |
| 134 function test6() { |
| 135 let resolvePromise; |
| 136 let promise = new Promise((resolve) => { |
| 137 resolvePromise = resolve; |
| 138 }); |
| 139 let test = async_test('test6: iframe notifications'); |
| 140 let testRequested = false; |
| 141 let iframe = document.querySelector('iframe'); |
| 142 window.addEventListener('message', event => { |
| 143 switch(event.data) { |
| 144 case 'readyToTest': |
| 145 if (!testRequested) { |
| 146 //iframe.contentWindow.postMessage('startTest', '*'); |
| 147 testRequested = true; |
| 148 test.step(()=>{test.done()}); |
| 149 resolvePromise(); |
| 150 } |
| 151 break; |
| 152 case 'success': |
| 153 case 'fail': |
| 154 window.requestAnimationFrame(() => { |
| 155 test.step( () => { |
| 156 assert_equals(event.data, 'success'); |
| 157 test.done(); |
| 158 resolvePromise(); |
| 159 }); |
| 160 }); |
| 161 break; |
| 162 } |
| 163 }, false); |
| 164 return promise; |
| 165 } |
| 166 |
| 167 let guard = async_test('guard'); |
| 168 test0() |
| 169 .then(() => { return test1(); }) |
| 170 .then(() => { return test2(); }) |
| 171 .then(() => { return test3(); }) |
| 172 .then(() => { return test4(); }) |
| 173 .then(() => { return test5(); }) |
| 174 .then(() => { return test6(); }) |
| 175 .then(() => { guard.done(); }); |
| 176 |
| 177 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2204503002:
ResizeObserver pt6: integration (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master