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