scrollIntoView-svg-shape.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/cssom-view/scrollIntoView-svg-shape.html - WPT Dashboard Interop Dashboard

<!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>