scroll-into-view-scrolls-viewport.html

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
  // All of the rects in this test are in document/page coordinates.
  function rectFromElement(element) {
    var rect = {};
    rect.left = element.getBoundingClientRect().left + window.scrollX;
    rect.top = element.getBoundingClientRect().top + window.scrollY;
    rect.right = element.getBoundingClientRect().right + window.scrollX;
    rect.bottom = element.getBoundingClientRect().bottom + window.scrollY;
    return rect;
  }

  function visualViewportRect() {
    var rect = {};
    rect.left = window.visualViewport.pageLeft;
    rect.top = window.visualViewport.pageTop;
    rect.right = window.visualViewport.pageLeft + window.visualViewport.width;
    rect.bottom = window.visualViewport.pageTop + window.visualViewport.height;
    return rect;
  }

  function layoutViewportRect() {
    var rect = {};
    rect.left = window.scrollX;
    rect.top = window.scrollY;
    rect.right = window.scrollX + window.innerWidth;
    rect.bottom = window.scrollY + window.innerHeight;
    return rect;
  }

  function isContainedBy(rect1, rect2) {
    return rect1.left >= rect2.left && rect1.top >= rect2.top &&
           rect1.right <= rect2.right && rect1.bottom <= rect2.bottom;
  }

  function runTest() {
    test( () => {
      assert_true(typeof(window.internals) !== 'undefined',
                  "This test requires window.internals");

      internals.setPageScaleFactor(2.0);
      const target = document.getElementById("box");

      window.scrollTo(0, 0);
      internals.setVisualViewportOffset(0, 0);
      assert_false(isContainedBy(rectFromElement(target),
                                 visualViewportRect()));
      assert_false(isContainedBy(rectFromElement(target),
                                 layoutViewportRect()));

      target.scrollIntoView();
      assert_true(isContainedBy(rectFromElement(target), visualViewportRect()));
      assert_true(isContainedBy(rectFromElement(target), layoutViewportRect()));
    }, "Test that element.scrollIntoView() scrolls the layout viewport and visual viewport.");

    test( () => {
      assert_true(typeof(window.internals) !== 'undefined',
                  "This test requires window.internals");

      internals.setPageScaleFactor(2.0);
      const target = document.getElementById("box");

      window.scrollTo(0, 0);
      internals.setVisualViewportOffset(0, 0);
      assert_false(isContainedBy(rectFromElement(target),
                                 visualViewportRect()));
      assert_false(isContainedBy(rectFromElement(target),
                                 layoutViewportRect()));

      target.scrollIntoViewIfNeeded();
      assert_true(isContainedBy(rectFromElement(target), visualViewportRect()));
      assert_true(isContainedBy(rectFromElement(target), layoutViewportRect()));
    }, "Test that element.scrollIntoViewIfNeeded() scrolls the layout viewport and visual viewport.");
  }

  onload = runTest;
</script>

<style>
  body {
    height: 800px;
    width: 800px;
  }
  #box {
    background-color: black;
    top: 700px;
    left: 100px;
    height: 40px;
    width: 40px;
    position: absolute;
  }
</style>

<div id="box"></div>
chromium/third_party/blink/web_tests/fast/scroll-behavior/scroll-into-view-scrolls-viewport.html
