<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      height:800px;
      width: 600px;
    }
  </style>
  <script src="../../resources/testharness.js"></script>
  <script src="../../resources/testharnessreport.js"></script>
  <script src="resources/scroll-behavior-test.js"></script>
  <script type="text/javascript">
    var maxScrollHeight;
    var maxScrollWidth;

    function getEndPosition(testCase, startPosition) {
      var endPosition = {};
      // If the pageScaleFactor is set to 1, it means that there is no pinch-zoom,
      // i.e. the endPosition = max scroll.
      if (testCase.x) {
        if (testCase.pageScaleFactor == 1) {
          endPosition.x = maxScrollWidth;
        } else {
          endPosition.x = testCase.x;
        }
      } else {
        endPosition.x = startPosition.x;
      }

      if (testCase.y) {
        if (testCase.pageScaleFactor == 1) {
          endPosition.y = maxScrollHeight;
        } else {
          endPosition.y = testCase.y;
        }
      } else {
        endPosition.y = startPosition.y;
      }

      return endPosition;
    }

    function jsScroll(testCase) {
      if (testCase.js) {
        var scrollToOptions = {behavior: testCase.js};
        if (testCase.x)
          scrollToOptions.left = testCase.x;
        if (testCase.y)
          scrollToOptions.top = testCase.y;
        document.scrollingElement.scrollTo(scrollToOptions);
      } else {
        document.scrollingElement.scrollTo(testCase.x, testCase.y);
      }
    }

    const testScrolls = [
      {js: "smooth", css: "smooth", x: 0, y: 1000, pageScaleFactor: 1},
      {js: "smooth", css: "smooth", x: 10, y: 400, pageScaleFactor: 4},
      {js: "instant", css: "instant", x: 0, y: 1000, pageScaleFactor: 1},
      {js: "instant", css: "instant", x: 10, y: 400, pageScaleFactor: 4},
    ];

    function doTest()
    {
      var testCases = [];
      maxScrollHeight = document.scrollingElement.scrollHeight - window.innerHeight;
      maxScrollWidth = document.scrollingElement.scrollWidth - window.innerWidth;

      for (var i = 0; i < testScrolls.length; i++) {
        testCases.push(new ScrollBehaviorTestCase(testScrolls[i]));
      }

      var scrollBehaviorTest = new ScrollBehaviorTest(document.scrollingElement,
                                                      document,
                                                      testCases,
                                                      getEndPosition,
                                                      jsScroll);
      scrollBehaviorTest.run();
    }

    window.addEventListener('load', doTest, false);
  </script>
</head>

<body>
  <p>Test that scrollTo works on the visual viewport.</p>
  <div id="content"></div>
</body>
</html>