css/cssom-view/scrollIntoView-svg-shape.html

<!DOCTYPE HTML>
<title>scrollIntoView on an SVG shape element</title>
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
<meta name="viewport" content="user-scalable=no">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<svg width="8000" height="8000">
  <rect width="100" height="100" fill="blue" y="1950" id="geometry"/>
  <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>
<script>
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>