svg.html (18347B)
1 <!doctype html> 2 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="./resources/resizeTestHelper.js"></script> 6 <p>ResizeObserver svg tests</p> 7 <svg height="430" width="500" > 8 <circle cx="10" cy="10" r="5" style="fill:orange;stroke:black;stroke-width:1" /> 9 <ellipse cx="10" cy="30" rx="5" ry="5" style="fill:orange;stroke:black;stroke-width:1"/> 10 <foreignObject cy="50" width="100" height="20"> 11 <body> 12 <p>Here is a paragraph that requires word wrap</p> 13 </body> 14 </foreignObject> 15 <image xlink:href="" x="0" y="100" height="30" width="100" /> 16 <line x1="0" y1="50" x2="20" y2="70" stroke="black" stroke-width="2"/> 17 <path d="M 0 100 L 100 100 L 50 150 z" 18 style="fill:orange;stroke:black;stroke-width:1" /> 19 <polygon points="0,200 100,200 50,250" style="fill:orange;stroke:black;stroke-width:1" /> 20 <polyline points="0,300 100,300 50,350" style="fill:orange;stroke:black;stroke-width:1"/> 21 <rect x="0" y="380" width="10" height="10" style="fill:orange; stroke:black; stroke-width:1" /> 22 <text x="0" y="400" font-size="20" font-family="Ahem">svg text tag</text> 23 <g fill="white" stroke="green" stroke-width="5"> 24 <rect x="0" y="380" width="50" height="20" id="g_rect" /> 25 </g> 26 </svg> 27 <script> 28 'use strict'; 29 30 setup({allow_uncaught_exception: true}); 31 32 function test0() { 33 let target = document.querySelector('circle'); 34 let helper = new ResizeTestHelper( 35 "test0: observe svg:circle", 36 [ 37 { 38 setup: observer => { 39 observer.observe(target); 40 }, 41 notify: (entries, observer) => { 42 return true; // Delay next step 43 } 44 }, 45 { 46 setup: observer => { 47 target.setAttribute('r', 10); 48 }, 49 notify: (entries, observer) => { 50 assert_equals(entries.length, 1); 51 } 52 } 53 ]); 54 return helper.start(); 55 } 56 57 function test1() { 58 let target = document.querySelector('ellipse'); 59 let helper = new ResizeTestHelper( 60 "test1: observe svg:ellipse", 61 [ 62 { 63 setup: observer => { 64 observer.observe(target); 65 }, 66 notify: (entries, observer) => { 67 return true; // Delay next step 68 } 69 }, 70 { 71 setup: observer => { 72 target.setAttribute('rx', 10); 73 }, 74 notify: (entries, observer) => { 75 assert_equals(entries.length, 1); 76 assert_equals(entries[0].contentRect.width, 20); 77 assert_equals(entries[0].contentRect.height, 10); 78 } 79 } 80 ]); 81 return helper.start(); 82 } 83 84 function test2() { 85 let target = document.querySelector('foreignObject'); 86 let helper = new ResizeTestHelper( 87 "test2: observe svg:foreignObject", 88 [ 89 { 90 setup: observer => { 91 observer.observe(target); 92 }, 93 notify: (entries, observer) => { 94 return true; // Delay next step 95 } 96 }, 97 { 98 setup: observer => { 99 target.setAttribute('width', 200); 100 }, 101 notify: (entries, observer) => { 102 assert_equals(entries.length, 1); 103 assert_equals(entries[0].contentRect.width, 200); 104 assert_equals(entries[0].contentRect.height, 20); 105 } 106 } 107 ]); 108 return helper.start(); 109 } 110 111 function test3() { 112 let target = document.querySelector('image'); 113 let helper = new ResizeTestHelper( 114 "test3: observe svg:image", 115 [ 116 { 117 setup: observer => { 118 observer.observe(target); 119 }, 120 notify: (entries, observer) => { 121 return true; // Delay next step 122 } 123 }, 124 { 125 setup: observer => { 126 target.setAttribute('height', 40); 127 }, 128 notify: (entries, observer) => { 129 assert_equals(entries.length, 1); 130 assert_equals(entries[0].contentRect.width, 100); 131 assert_equals(entries[0].contentRect.height, 40); 132 } 133 } 134 ]); 135 return helper.start(); 136 } 137 138 function test4() { 139 let target = document.querySelector('line'); 140 let helper = new ResizeTestHelper( 141 "test4: observe svg:line", 142 [ 143 { 144 setup: observer => { 145 observer.observe(target); 146 }, 147 notify: (entries, observer) => { 148 return true; // Delay next step 149 } 150 }, 151 { 152 setup: observer => { 153 target.setAttribute('y2', 80); 154 }, 155 notify: (entries, observer) => { 156 assert_equals(entries.length, 1); 157 assert_equals(entries[0].contentRect.width, 20); 158 assert_equals(entries[0].contentRect.height, 30); 159 } 160 } 161 ]); 162 return helper.start(); 163 } 164 165 function test5() { 166 let target = document.querySelector('path'); 167 let helper = new ResizeTestHelper( 168 "test5: observe svg:path", 169 [ 170 { 171 setup: observer => { 172 observer.observe(target); 173 }, 174 notify: (entries, observer) => { 175 return true; // Delay next step 176 } 177 }, 178 { 179 setup: observer => { 180 target.setAttribute('d', "M 0 100 L 100 100 L 50 160 z"); 181 }, 182 notify: (entries, observer) => { 183 assert_equals(entries.length, 1); 184 assert_equals(entries[0].contentRect.width, 100); 185 assert_equals(entries[0].contentRect.height, 60); 186 } 187 } 188 ]); 189 return helper.start(); 190 } 191 192 function test6() { 193 let target = document.querySelector('polygon'); 194 let helper = new ResizeTestHelper( 195 "test6: observe svg:polygon", 196 [ 197 { 198 setup: observer => { 199 observer.observe(target); 200 }, 201 notify: (entries, observer) => { 202 return true; // Delay next step 203 } 204 }, 205 { 206 setup: observer => { 207 target.setAttribute('points', "0,200 100,200 50,260"); 208 }, 209 notify: (entries, observer) => { 210 assert_equals(entries.length, 1); 211 assert_equals(entries[0].contentRect.width, 100); 212 assert_equals(entries[0].contentRect.height, 60); 213 } 214 } 215 ]); 216 return helper.start(); 217 } 218 219 function test7() { 220 let target = document.querySelector('polyline'); 221 let helper = new ResizeTestHelper( 222 "test7: observe svg:polyline", 223 [ 224 { 225 setup: observer => { 226 observer.observe(target); 227 }, 228 notify: (entries, observer) => { 229 return true; // Delay next step 230 } 231 }, 232 { 233 setup: observer => { 234 target.setAttribute('points', "0,300 100,300 50,360"); 235 }, 236 notify: (entries, observer) => { 237 assert_equals(entries.length, 1); 238 assert_equals(entries[0].contentRect.width, 100); 239 assert_equals(entries[0].contentRect.height, 60); 240 } 241 } 242 ]); 243 return helper.start(); 244 } 245 246 function test8() { 247 let target = document.querySelector('rect'); 248 let helper = new ResizeTestHelper( 249 "test8: observe svg:rect", 250 [ 251 { 252 setup: observer => { 253 observer.observe(target); 254 }, 255 notify: (entries, observer) => { 256 return true; // Delay next step 257 } 258 }, 259 { 260 setup: observer => { 261 target.setAttribute('width', "20"); 262 }, 263 notify: (entries, observer) => { 264 assert_equals(entries.length, 1); 265 assert_equals(entries[0].contentRect.width, 20); 266 assert_equals(entries[0].contentRect.height, 10); 267 } 268 } 269 ]); 270 return helper.start(); 271 } 272 273 function test9() { 274 let target = document.querySelector('text'); 275 let helper = new ResizeTestHelper( 276 "test9: observe svg:text", 277 [ 278 { 279 setup: observer => { 280 observer.observe(target); 281 }, 282 notify: (entries, observer) => { 283 return true; // Delay next step 284 } 285 }, 286 { 287 setup: observer => { 288 target.setAttribute('font-size', "25"); 289 }, 290 notify: (entries, observer) => { 291 assert_equals(entries.length, 1); 292 } 293 } 294 ]); 295 return helper.start(); 296 } 297 298 299 function test10() { 300 let target = document.querySelector('svg'); 301 let helper = new ResizeTestHelper( 302 "test10: observe svg:svg, top/left is 0 even with padding", 303 [ 304 { 305 setup: observer => { 306 observer.observe(target); 307 }, 308 notify: (entries, observer) => { 309 assert_equals(entries.length, 1); 310 assert_equals(entries[0].contentRect.top, 0); 311 assert_equals(entries[0].contentRect.left, 0); 312 } 313 } 314 ]); 315 return helper.start(); 316 } 317 318 function test11() { 319 // <svg> 320 // <view></view> 321 // <defs> 322 // <linearGradient> 323 // <stop></stop> 324 // </linearGradient> 325 // </defs> 326 // </svg> 327 const svgNS = "http://www.w3.org/2000/svg"; 328 let svg = document.createElementNS(svgNS, 'svg'); 329 document.body.appendChild(svg); 330 331 let view = document.createElementNS(svgNS, 'view'); 332 svg.appendChild(view); 333 334 let defs = document.createElementNS(svgNS, 'defs'); 335 let linearGradient = document.createElementNS(svgNS, 'linearGradient'); 336 let stop = document.createElementNS(svgNS, 'stop'); 337 linearGradient.appendChild(stop); 338 defs.appendChild(linearGradient); 339 svg.appendChild(defs); 340 341 let helper = new ResizeTestHelper( 342 "test11: observe svg non-displayable element", 343 [ 344 { 345 setup: observer => { 346 observer.observe(view); 347 }, 348 notify: (entries, observer) => { 349 assert_equals(entries.length, 1); 350 assert_equals(entries[0].target, view); 351 assert_equals(entries[0].contentRect.width, 0); 352 assert_equals(entries[0].contentRect.height, 0); 353 } 354 }, 355 { 356 setup: observer => { 357 observer.observe(stop); 358 }, 359 notify: (entries, observer) => { 360 assert_equals(entries.length, 1); 361 assert_equals(entries[0].target, stop); 362 assert_equals(entries[0].contentRect.width, 0); 363 assert_equals(entries[0].contentRect.height, 0); 364 } 365 }, 366 ]); 367 return helper.start(() => svg.remove()); 368 } 369 370 function test12() { 371 let target = document.querySelector('rect'); 372 let helper = new ResizeTestHelper( 373 "test12: observe svg:rect content box", 374 [ 375 { 376 setup: observer => { 377 observer.observe(target); 378 }, 379 notify: (entries, observer) => { 380 return true; // Delay next step 381 } 382 }, 383 { 384 setup: observer => { 385 target.setAttribute('width', 45); 386 }, 387 notify: (entries, observer) => { 388 assert_equals(entries.length, 1); 389 assert_equals(entries[0].contentRect.width, 45); 390 assert_equals(entries[0].contentRect.height, 10); 391 assert_equals(entries[0].contentBoxSize[0].inlineSize, 45); 392 assert_equals(entries[0].contentBoxSize[0].blockSize, 10); 393 } 394 } 395 ]); 396 return helper.start(); 397 } 398 399 function test13() { 400 let target = document.querySelector('rect'); 401 let helper = new ResizeTestHelper( 402 "test13: observe svg:rect border box", 403 [ 404 { 405 setup: observer => { 406 observer.observe(target); 407 }, 408 notify: (entries, observer) => { 409 return true; // Delay next step 410 } 411 }, 412 { 413 setup: observer => { 414 target.setAttribute('width', 20); 415 target.setAttribute('height', 20); 416 }, 417 notify: (entries, observer) => { 418 assert_equals(entries.length, 1); 419 assert_equals(entries[0].contentRect.width, 20); 420 assert_equals(entries[0].contentRect.height, 20); 421 assert_equals(entries[0].contentBoxSize[0].inlineSize, 20); 422 assert_equals(entries[0].contentBoxSize[0].blockSize, 20); 423 assert_equals(entries[0].borderBoxSize[0].inlineSize, 20); 424 assert_equals(entries[0].borderBoxSize[0].blockSize, 20); 425 } 426 } 427 ]); 428 return helper.start(); 429 } 430 431 function test14() { 432 let target = document.querySelector('#g_rect'); 433 let helper = new ResizeTestHelper( 434 "test14: observe g:rect content and border box", 435 [ 436 { 437 setup: observer => { 438 observer.observe(target); 439 }, 440 notify: (entries, observer) => { 441 assert_equals(entries.length, 1); 442 assert_equals(entries[0].contentRect.width, 50); 443 assert_equals(entries[0].contentRect.height, 20); 444 assert_equals(entries[0].contentBoxSize[0].inlineSize, 50); 445 assert_equals(entries[0].contentBoxSize[0].blockSize, 20); 446 assert_equals(entries[0].borderBoxSize[0].inlineSize, 50); 447 assert_equals(entries[0].borderBoxSize[0].blockSize, 20); 448 return true; // Delay next step 449 } 450 }, 451 { 452 setup: observer => { 453 target.setAttribute('width', 15); 454 }, 455 notify: (entries, observer) => { 456 assert_equals(entries.length, 1); 457 assert_equals(entries[0].contentRect.width, 15); 458 assert_equals(entries[0].contentRect.height, 20); 459 assert_equals(entries[0].contentBoxSize[0].inlineSize, 15); 460 assert_equals(entries[0].contentBoxSize[0].blockSize, 20); 461 assert_equals(entries[0].borderBoxSize[0].inlineSize, 15); 462 assert_equals(entries[0].borderBoxSize[0].blockSize, 20); 463 } 464 } 465 ]); 466 return helper.start(); 467 } 468 469 function test15() { 470 let target = document.querySelector('text'); 471 let helper = new ResizeTestHelper( 472 "test15: observe svg:text content and border box", 473 [ 474 { 475 setup: observer => { 476 observer.observe(target); 477 }, 478 notify: (entries, observer) => { 479 return true; // Delay next step 480 } 481 }, 482 { 483 setup: observer => { 484 target.setAttribute('font-size', "30"); 485 }, 486 notify: (entries, observer) => { 487 assert_equals(entries.length, 1); 488 assert_equals(entries[0].contentRect.width, 360); 489 assert_equals(entries[0].contentRect.height, 30); 490 assert_equals(entries[0].contentBoxSize[0].inlineSize, 360); 491 assert_equals(entries[0].contentBoxSize[0].blockSize, 30); 492 assert_equals(entries[0].borderBoxSize[0].inlineSize, 360); 493 assert_equals(entries[0].borderBoxSize[0].blockSize, 30); 494 } 495 } 496 ]); 497 return helper.start(); 498 } 499 500 function test16() { 501 let target = document.querySelector('#g_rect'); 502 let helper = new ResizeTestHelper( 503 "test16: observe g:rect content, border and device-pixel-content boxes", 504 [ 505 { 506 setup: observer => { 507 observer.observe(target, {box: "device-pixel-content-box"}); 508 target.setAttribute('width', 50); 509 }, 510 notify: (entries, observer) => { 511 assert_equals(entries.length, 1); 512 assert_equals(entries[0].contentRect.width, 50); 513 assert_equals(entries[0].contentRect.height, 20); 514 assert_equals(entries[0].contentBoxSize[0].inlineSize, 50); 515 assert_equals(entries[0].contentBoxSize[0].blockSize, 20); 516 assert_equals(entries[0].borderBoxSize[0].inlineSize, 50); 517 assert_equals(entries[0].borderBoxSize[0].blockSize, 20); 518 assert_equals(entries[0].devicePixelContentBoxSize[0].inlineSize, 50); 519 assert_equals(entries[0].devicePixelContentBoxSize[0].blockSize, 20); 520 return true; // Delay next step 521 } 522 }, 523 { 524 setup: observer => { 525 target.setAttribute('height', 30); 526 }, 527 notify: (entries, observer) => { 528 assert_equals(entries.length, 1); 529 assert_equals(entries[0].contentRect.width, 50); 530 assert_equals(entries[0].contentRect.height, 30); 531 assert_equals(entries[0].contentBoxSize[0].inlineSize, 50); 532 assert_equals(entries[0].contentBoxSize[0].blockSize, 30); 533 assert_equals(entries[0].borderBoxSize[0].inlineSize, 50); 534 assert_equals(entries[0].borderBoxSize[0].blockSize, 30); 535 assert_equals(entries[0].devicePixelContentBoxSize[0].inlineSize, 50); 536 assert_equals(entries[0].devicePixelContentBoxSize[0].blockSize, 30); 537 } 538 } 539 ]); 540 return helper.start(); 541 } 542 543 function test17() { 544 // zoom is not a standard css property, so we should check it first. If the 545 // browser doesn't support it, we skip this test. 546 if (!CSS.supports("zoom", "0.1")) { 547 return Promise.resolve(); 548 } 549 550 let target = document.querySelector('#g_rect'); 551 let helper = new ResizeTestHelper( 552 "test17: observe g:rect content, border and device-pixel-content boxes with zoom", 553 [ 554 { 555 setup: observer => { 556 observer.observe(target, {box: "device-pixel-content-box"}); 557 target.setAttribute('width', 50); 558 target.setAttribute('height', 30); 559 document.body.style.zoom = 0.1; 560 }, 561 notify: (entries, observer) => { 562 assert_equals(entries.length, 1); 563 assert_equals(entries[0].contentRect.width, 50); 564 assert_equals(entries[0].contentRect.height, 30); 565 assert_equals(entries[0].contentBoxSize[0].inlineSize, 50); 566 assert_equals(entries[0].contentBoxSize[0].blockSize, 30); 567 assert_equals(entries[0].borderBoxSize[0].inlineSize, 50); 568 assert_equals(entries[0].borderBoxSize[0].blockSize, 30); 569 assert_equals(entries[0].devicePixelContentBoxSize[0].inlineSize, 5); 570 assert_equals(entries[0].devicePixelContentBoxSize[0].blockSize, 3); 571 return true; // Delay next step 572 } 573 }, 574 { 575 setup: observer => { 576 document.body.style.zoom = 10; 577 }, 578 notify: (entries, observer) => { 579 assert_equals(entries.length, 1); 580 assert_equals(entries[0].contentRect.width, 50); 581 assert_equals(entries[0].contentRect.height, 30); 582 assert_equals(entries[0].contentBoxSize[0].inlineSize, 50); 583 assert_equals(entries[0].contentBoxSize[0].blockSize, 30); 584 assert_equals(entries[0].borderBoxSize[0].inlineSize, 50); 585 assert_equals(entries[0].borderBoxSize[0].blockSize, 30); 586 assert_equals(entries[0].devicePixelContentBoxSize[0].inlineSize, 500); 587 assert_equals(entries[0].devicePixelContentBoxSize[0].blockSize, 300); 588 }, 589 } 590 ]); 591 return helper.start(); 592 } 593 594 let guard; 595 test(_ => { 596 assert_own_property(window, "ResizeObserver"); 597 guard = async_test('guard'); 598 }, "ResizeObserver implemented") 599 600 document.fonts.ready 601 .then(() => { return test0(); }) 602 .then(() => { return test1(); }) 603 .then(() => { return test2(); }) 604 .then(() => { return test3(); }) 605 .then(() => { return test4(); }) 606 .then(() => { return test5(); }) 607 .then(() => { return test6(); }) 608 .then(() => { return test7(); }) 609 .then(() => { return test8(); }) 610 .then(() => { return test9(); }) 611 .then(() => { return test10(); }) 612 .then(() => { return test11(); }) 613 .then(() => { return test12(); }) 614 .then(() => { return test13(); }) 615 .then(() => { return test14(); }) 616 .then(() => { return test15(); }) 617 .then(() => { return test16(); }) 618 .then(() => { return test17(); }) 619 .then(() => { guard.done(); }); 620 621 </script>