<!DOCTYPE html>
<html>
<head>
  <style>
    #container {
      width: 200px;
      height: 200px;
      overflow: scroll;
    }

    #content {
      width: 7500px;
      height: 7500px;
      background-color: blue;
    }
  </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">
    function getEndPosition(testCase, startPosition) {
      var endPosition = {};
      if (testCase.x)
        endPosition.x = startPosition.x + testCase.x;
      else
        endPosition.x = startPosition.x;

      if (testCase.y)
        endPosition.y = startPosition.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.getElementById("container").scrollBy(scrollToOptions);
      } else {
        document.getElementById("container").scrollBy(testCase.x, testCase.y);
      }
    }

    const testScrolls = [
      {js: "instant", css: "auto", x: 1, y: 2},
      {js: "instant", css: "smooth", x: 2, y: 3},
      {js: "auto", css: "auto", x: 3, y: 4},
      {js: "", css: "auto", x: 4, y: 5},
      {js: "auto", css: "auto", x: 3},
      {js: "auto", css: "auto", y: 4},
      {js: "auto", css: "auto"},
      {js: "smooth", css: "auto", waitForEnd: true, x: 10, y: 15},
      {js: "smooth", css: "smooth", waitForEnd: true, x: 20, y: 25},
      {js: "auto", css: "smooth", waitForEnd: true, x: 30, y: 35},
      {js: "", css: "smooth", waitForEnd: true, x: 40, y: 45},
      {js: "auto", css: "smooth", waitForEnd: true, x: -30},
      {js: "auto", css: "smooth", waitForEnd: true, y: -35},
      {js: "smooth", css: "auto", waitForEnd: false, x: 4000, y: 4100},
      {js: "smooth", css: "smooth", waitForEnd: false, x: -3900, y: -3850},
      {js: "auto", css: "smooth", waitForEnd: false, x: 4050, y: 4000},
      {js: "", css: "smooth", waitForEnd: false, x: -4000, y: -4100},
    ];

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

      var element = document.getElementById("container");
      var scrollBehaviorTest = new ScrollBehaviorTest(element,
                                                      element,
                                                      testCases,
                                                      getEndPosition,
                                                      jsScroll);
      scrollBehaviorTest.run();
    }

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

<body>
  <p>Test that calling scrollBy on an overflow:scroll element works with both scroll behaviors</p>
  <div id="container">
    <div id="content"></div>
  </div>
</body>
</html>