scrollIntoView-svg-shape.html (1389B)
1 <!DOCTYPE HTML> 2 <title>scrollIntoView on an SVG shape element</title> 3 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview"> 4 <meta name="viewport" content="user-scalable=no"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <svg width="8000" height="8000"> 8 <rect width="100" height="100" fill="blue" y="1950" id="geometry"/> 9 <rect width="100" height="100" fill="blue" transform="translate(0, 2950)" 10 id="translated"/> 11 <rect width="100" height="100" fill="blue" transform="rotate(45, 50, 3950)" 12 id="rotated"/> 13 </svg> 14 <script> 15 add_completion_callback(() => { 16 document.querySelector("svg").remove(); 17 window.scrollTo(0, 0); 18 }); 19 20 for (let id of [ "geometry", "translated", "rotated" ]) { 21 test(t => { 22 let target = document.getElementById(id); 23 window.scrollTo(0, 0); 24 let bounds = target.getBoundingClientRect(); 25 let expected = { x: bounds.left, y: bounds.top }; 26 assert_not_equals(window.scrollX, expected.x, "x before scroll"); 27 assert_not_equals(window.scrollY, expected.y, "y before scroll"); 28 target.scrollIntoView({ block: "start", inline: "start" }); 29 assert_approx_equals(window.scrollX, expected.x, 1, "x after scroll"); 30 assert_approx_equals(window.scrollY, expected.y, 1, "y after scroll"); 31 }, document.title + ", " + id); 32 } 33 </script>