| 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 </head> |
| 7 <p>ResizeObserver tests</p> |
| 8 <div id="target1" style="width:100px;height:100px;">t1</div> |
| 9 <div id="target2" style="width:100px;height:100px;">t2</div> |
| 10 <svg height="100" width="100"> |
| 11 <circle id="target3" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fi
ll="red" /> |
| 12 Sorry, your browser does not support inline SVG. |
| 13 </svg> |
| 14 <img id="target4" style="width:100px;height:100px;"> |
| 15 <script> |
| 16 'use strict'; |
| 17 |
| 18 var helper = new ResizeTestHelper(); |
| 19 |
| 20 let t1 = document.querySelector('#target1'); |
| 21 let t2 = document.querySelector('#target2'); |
| 22 |
| 23 // allow uncaught exception because ResizeObserver posts exceptions |
| 24 // to window error handler when limit is exceeded. |
| 25 setup({allow_uncaught_exception: true}); |
| 26 |
| 27 function test0() { |
| 28 helper.createTest( |
| 29 "simple observation", |
| 30 _ => { |
| 31 helper.observer.disconnect(); |
| 32 helper.observer.observe(t1); |
| 33 t1.style.width = "5px"; |
| 34 }, |
| 35 entries => { |
| 36 assert_equals(entries.length, 1, "1 pending notification"); |
| 37 assert_equals(entries[0].target, t1, "target is t1"); |
| 38 assert_equals(entries[0].contentRect.width, 5, "target width"); |
| 39 test1(); |
| 40 } |
| 41 ); |
| 42 helper.nextTest(); |
| 43 } |
| 44 |
| 45 function test1() { |
| 46 helper.createTest( |
| 47 "multiple observation on same element trigger only one", |
| 48 _ => { |
| 49 helper.observer.observe(t1); |
| 50 helper.observer.observe(t1); |
| 51 t1.style.width = "10px"; |
| 52 }, |
| 53 entries => { |
| 54 assert_equals(entries.length, 1, "1 pending notification"); |
| 55 helper.observer.disconnect(); |
| 56 test2(); |
| 57 } |
| 58 ); |
| 59 helper.nextTestRaf(); |
| 60 } |
| 61 |
| 62 function test2() { |
| 63 test(_ => { |
| 64 assert_throws(null, _=> { |
| 65 helper.observer.observe({}); |
| 66 }); |
| 67 test3(); |
| 68 }, |
| 69 "throw exception when observing non-element" |
| 70 ); |
| 71 } |
| 72 |
| 73 function test3() { |
| 74 helper.createTest( |
| 75 "disconnect stops all notifications", |
| 76 _ => { |
| 77 helper.observer.observe(t1); |
| 78 helper.observer.observe(t2); |
| 79 helper.observer.disconnect(); |
| 80 t1.style.width = "30px"; |
| 81 }, |
| 82 entries => { |
| 83 assert_unreached("no entries should happen"); |
| 84 }, |
| 85 _ => { |
| 86 // timeout happened, all is well. |
| 87 test4(); |
| 88 } |
| 89 ); |
| 90 helper.nextTestRaf(); |
| 91 } |
| 92 |
| 93 function test4() { |
| 94 helper.createTest( |
| 95 "unobserve target stops notifications, unobserve non-observed does nothing", |
| 96 _ => { |
| 97 helper.observer.observe(t1); |
| 98 helper.observer.observe(t2); |
| 99 helper.observer.unobserve(t1); |
| 100 helper.observer.unobserve(document.body); |
| 101 t1.style.width = "40px"; |
| 102 t2.style.width = "40px"; |
| 103 }, |
| 104 entries => { |
| 105 assert_equals(entries.length, 1, "only t2"); |
| 106 assert_equals(entries[0].target, t2, "t2 was observed"); |
| 107 helper.observer.disconnect(); |
| 108 test5(); |
| 109 } |
| 110 ); |
| 111 helper.nextTestRaf(); |
| 112 } |
| 113 |
| 114 function test5() { |
| 115 let circle = document.querySelector('#target3'); |
| 116 helper.createTest( |
| 117 "observe svg", |
| 118 setup => { |
| 119 helper.observer.observe(circle); |
| 120 }, |
| 121 entries => { |
| 122 helper.nextTest(); |
| 123 } |
| 124 ); |
| 125 helper.createTest( |
| 126 "observe svg, part 2", |
| 127 setup => { |
| 128 circle.setAttribute('r', 50); |
| 129 }, |
| 130 entries => { |
| 131 assert_equals(entries.length, 1); |
| 132 assert_equals(entries[0].contentRect.width, 100); |
| 133 assert_equals(entries[0].contentRect.height, 100); |
| 134 helper.observer.disconnect(); |
| 135 test6(); |
| 136 } |
| 137 ); |
| 138 helper.nextTestRaf(); |
| 139 } |
| 140 |
| 141 function test6() { |
| 142 let t4 = document.querySelector('#target4'); |
| 143 helper.createTest( |
| 144 "observe img", |
| 145 setup => { |
| 146 helper.observer.observe(t4); |
| 147 }, |
| 148 entries => { |
| 149 helper.nextTest(); |
| 150 } |
| 151 ); |
| 152 helper.createTest( |
| 153 "observe img, part 2", |
| 154 setup => { |
| 155 t4.style.width = "100.5px"; |
| 156 }, |
| 157 entries => { |
| 158 assert_equals(entries.length, 1); |
| 159 assert_equals(entries[0].contentRect.width, 100.5); |
| 160 helper.observer.disconnect(); |
| 161 } |
| 162 ); |
| 163 helper.nextTestRaf(); |
| 164 } |
| 165 |
| 166 test0(); |
| 167 |
| 168 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2204503002:
ResizeObserver pt6: integration (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master