Sandbox::https://github.com/web-platform-tests/wpt/blob/master/css/cssom-view/scrollIntoView-svg-shape.html

Repository navigation

<!DOCTYPE HTML>

<title>scrollIntoView on an SVG shape element</title>

<rect width="100" height="100" fill="blue" transform="translate(0, 2950)"

id="translated"/>

<rect width="100" height="100" fill="blue" transform="rotate(45, 50, 3950)"

id="rotated"/>

</svg>

add_completion_callback(() => {

document.querySelector("svg").remove();

window.scrollTo(0, 0);

});

for (let id of [ "geometry", "translated", "rotated" ]) {

test(t => {

let target = document.getElementById(id);

window.scrollTo(0, 0);

let bounds = target.getBoundingClientRect();

let expected = { x: bounds.left, y: bounds.top };

assert_not_equals(window.scrollX, expected.x, "x before scroll");

assert_not_equals(window.scrollY, expected.y, "y before scroll");

target.scrollIntoView({ block: "start", inline: "start" });

assert_approx_equals(window.scrollX, expected.x, 1, "x after scroll");

assert_approx_equals(window.scrollY, expected.y, 1, "y after scroll");

}, document.title + ", " + id);

}

</script>