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