| 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 svg tests</p> |
| 6 <svg height="430" width="500"> |
| 7 <circle cx="10" cy="10" r="5" style="fill:orange;stroke:black;stroke-width:1"
/> |
| 8 <ellipse cx="10" cy="30" rx="5" ry="5" style="fill:orange;stroke:black;stroke-
width:1"/> |
| 9 <foreignObject cy="50" width="100" height="20"> |
| 10 <body> |
| 11 <p>Here is a paragraph that requires word wrap</p> |
| 12 </body> |
| 13 </foreignObject> |
| 14 <image xlink:href="" x="0" y="100" height="30" width="100" /> |
| 15 <line x1="0" y1="50" x2="20" y2="70" stroke="black" stroke-width="2"/> |
| 16 <path d="M 0 100 L 100 100 L 50 150 z" |
| 17 style="fill:orange;stroke:black;stroke-width:1" /> |
| 18 <polygon points="0,200 100,200 50,250" style="fill:orange;stroke:black;stroke-
width:1" /> |
| 19 <polyline points="0,300 100,300 50,350" style="fill:orange;stroke:black;stroke
-width:1"/> |
| 20 <rect x="0" y="380" width="10" height="10" style="fill:orange; stroke:black; s
troke-width:1" /> |
| 21 <text x="0" y="400" font-size="20">svg text tag</text> |
| 22 </svg> |
| 23 <script> |
| 24 'use strict'; |
| 25 |
| 26 setup({allow_uncaught_exception: true}); |
| 27 |
| 28 function test0() { |
| 29 let target = document.querySelector('circle'); |
| 30 let helper = new ResizeTestHelper( |
| 31 "test0: observe svg:circle", |
| 32 [ |
| 33 { |
| 34 setup: observer => { |
| 35 observer.observe(target); |
| 36 }, |
| 37 notify: (entries, observer) => { |
| 38 return true; // Delay next step |
| 39 } |
| 40 }, |
| 41 { |
| 42 setup: observer => { |
| 43 target.setAttribute('r', 10); |
| 44 }, |
| 45 notify: (entries, observer) => { |
| 46 assert_equals(entries.length, 1); |
| 47 } |
| 48 } |
| 49 ]); |
| 50 return helper.start(); |
| 51 } |
| 52 |
| 53 function test1() { |
| 54 let target = document.querySelector('ellipse'); |
| 55 let helper = new ResizeTestHelper( |
| 56 "test1: observe svg:ellipse", |
| 57 [ |
| 58 { |
| 59 setup: observer => { |
| 60 observer.observe(target); |
| 61 }, |
| 62 notify: (entries, observer) => { |
| 63 return true; // Delay next step |
| 64 } |
| 65 }, |
| 66 { |
| 67 setup: observer => { |
| 68 target.setAttribute('rx', 10); |
| 69 }, |
| 70 notify: (entries, observer) => { |
| 71 assert_equals(entries.length, 1); |
| 72 assert_equals(entries[0].contentRect.width, 20); |
| 73 assert_equals(entries[0].contentRect.height, 10); |
| 74 } |
| 75 } |
| 76 ]); |
| 77 return helper.start(); |
| 78 } |
| 79 |
| 80 function test2() { |
| 81 let target = document.querySelector('foreignObject'); |
| 82 let helper = new ResizeTestHelper( |
| 83 "test2: observe svg:foreignObject", |
| 84 [ |
| 85 { |
| 86 setup: observer => { |
| 87 observer.observe(target); |
| 88 }, |
| 89 notify: (entries, observer) => { |
| 90 return true; // Delay next step |
| 91 } |
| 92 }, |
| 93 { |
| 94 setup: observer => { |
| 95 target.setAttribute('width', 200); |
| 96 }, |
| 97 notify: (entries, observer) => { |
| 98 assert_equals(entries.length, 1); |
| 99 assert_equals(entries[0].contentRect.width, 200); |
| 100 assert_equals(entries[0].contentRect.height, 20); |
| 101 } |
| 102 } |
| 103 ]); |
| 104 return helper.start(); |
| 105 } |
| 106 |
| 107 function test3() { |
| 108 let target = document.querySelector('image'); |
| 109 let helper = new ResizeTestHelper( |
| 110 "test3: observe svg:image", |
| 111 [ |
| 112 { |
| 113 setup: observer => { |
| 114 observer.observe(target); |
| 115 }, |
| 116 notify: (entries, observer) => { |
| 117 return true; // Delay next step |
| 118 } |
| 119 }, |
| 120 { |
| 121 setup: observer => { |
| 122 target.setAttribute('height', 40); |
| 123 }, |
| 124 notify: (entries, observer) => { |
| 125 assert_equals(entries.length, 1); |
| 126 assert_equals(entries[0].contentRect.width, 100); |
| 127 assert_equals(entries[0].contentRect.height, 40); |
| 128 } |
| 129 } |
| 130 ]); |
| 131 return helper.start(); |
| 132 } |
| 133 |
| 134 function test4() { |
| 135 let target = document.querySelector('line'); |
| 136 let helper = new ResizeTestHelper( |
| 137 "test4: observe svg:line", |
| 138 [ |
| 139 { |
| 140 setup: observer => { |
| 141 observer.observe(target); |
| 142 }, |
| 143 notify: (entries, observer) => { |
| 144 return true; // Delay next step |
| 145 } |
| 146 }, |
| 147 { |
| 148 setup: observer => { |
| 149 target.setAttribute('y2', 80); |
| 150 }, |
| 151 notify: (entries, observer) => { |
| 152 assert_equals(entries.length, 1); |
| 153 assert_equals(entries[0].contentRect.width, 20); |
| 154 assert_equals(entries[0].contentRect.height, 30); |
| 155 } |
| 156 } |
| 157 ]); |
| 158 return helper.start(); |
| 159 } |
| 160 |
| 161 function test5() { |
| 162 let target = document.querySelector('path'); |
| 163 let helper = new ResizeTestHelper( |
| 164 "test5: observe svg:path", |
| 165 [ |
| 166 { |
| 167 setup: observer => { |
| 168 observer.observe(target); |
| 169 }, |
| 170 notify: (entries, observer) => { |
| 171 return true; // Delay next step |
| 172 } |
| 173 }, |
| 174 { |
| 175 setup: observer => { |
| 176 target.setAttribute('d', "M 0 100 L 100 100 L 50 160 z"); |
| 177 }, |
| 178 notify: (entries, observer) => { |
| 179 assert_equals(entries.length, 1); |
| 180 assert_equals(entries[0].contentRect.width, 100); |
| 181 assert_equals(entries[0].contentRect.height, 60); |
| 182 } |
| 183 } |
| 184 ]); |
| 185 return helper.start(); |
| 186 } |
| 187 |
| 188 function test6() { |
| 189 let target = document.querySelector('polygon'); |
| 190 let helper = new ResizeTestHelper( |
| 191 "test6: observe svg:path", |
| 192 [ |
| 193 { |
| 194 setup: observer => { |
| 195 observer.observe(target); |
| 196 }, |
| 197 notify: (entries, observer) => { |
| 198 return true; // Delay next step |
| 199 } |
| 200 }, |
| 201 { |
| 202 setup: observer => { |
| 203 target.setAttribute('points', "0,200 100,200 50,260"); |
| 204 }, |
| 205 notify: (entries, observer) => { |
| 206 assert_equals(entries.length, 1); |
| 207 assert_equals(entries[0].contentRect.width, 100); |
| 208 assert_equals(entries[0].contentRect.height, 60); |
| 209 } |
| 210 } |
| 211 ]); |
| 212 return helper.start(); |
| 213 } |
| 214 |
| 215 function test7() { |
| 216 let target = document.querySelector('polyline'); |
| 217 let helper = new ResizeTestHelper( |
| 218 "test7: observe svg:polyline", |
| 219 [ |
| 220 { |
| 221 setup: observer => { |
| 222 observer.observe(target); |
| 223 }, |
| 224 notify: (entries, observer) => { |
| 225 return true; // Delay next step |
| 226 } |
| 227 }, |
| 228 { |
| 229 setup: observer => { |
| 230 target.setAttribute('points', "0,300 100,300 50,360"); |
| 231 }, |
| 232 notify: (entries, observer) => { |
| 233 assert_equals(entries.length, 1); |
| 234 assert_equals(entries[0].contentRect.width, 100); |
| 235 assert_equals(entries[0].contentRect.height, 60); |
| 236 } |
| 237 } |
| 238 ]); |
| 239 return helper.start(); |
| 240 } |
| 241 |
| 242 function test8() { |
| 243 let target = document.querySelector('rect'); |
| 244 let helper = new ResizeTestHelper( |
| 245 "test8: observe svg:rect", |
| 246 [ |
| 247 { |
| 248 setup: observer => { |
| 249 observer.observe(target); |
| 250 }, |
| 251 notify: (entries, observer) => { |
| 252 return true; // Delay next step |
| 253 } |
| 254 }, |
| 255 { |
| 256 setup: observer => { |
| 257 target.setAttribute('width', "20"); |
| 258 }, |
| 259 notify: (entries, observer) => { |
| 260 assert_equals(entries.length, 1); |
| 261 assert_equals(entries[0].contentRect.width, 20); |
| 262 assert_equals(entries[0].contentRect.height, 10); |
| 263 } |
| 264 } |
| 265 ]); |
| 266 return helper.start(); |
| 267 } |
| 268 |
| 269 function test9() { |
| 270 let target = document.querySelector('text'); |
| 271 let helper = new ResizeTestHelper( |
| 272 "test9: observe svg:text", |
| 273 [ |
| 274 { |
| 275 setup: observer => { |
| 276 observer.observe(target); |
| 277 }, |
| 278 notify: (entries, observer) => { |
| 279 return true; // Delay next step |
| 280 } |
| 281 }, |
| 282 { |
| 283 setup: observer => { |
| 284 target.setAttribute('font-size', "25"); |
| 285 }, |
| 286 notify: (entries, observer) => { |
| 287 assert_equals(entries.length, 1); |
| 288 } |
| 289 } |
| 290 ]); |
| 291 return helper.start(); |
| 292 } |
| 293 let guard = async_test('guard'); |
| 294 test0() |
| 295 .then(() => { return test1(); }) |
| 296 .then(() => { return test2(); }) |
| 297 .then(() => { return test3(); }) |
| 298 .then(() => { return test4(); }) |
| 299 .then(() => { return test5(); }) |
| 300 .then(() => { return test6(); }) |
| 301 .then(() => { return test7(); }) |
| 302 .then(() => { return test8(); }) |
| 303 .then(() => { return test9(); }) |
| 304 .then(() => { guard.done(); }); |
| 305 |
| 306 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2204503002:
ResizeObserver pt6: integration (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master