third_party/WebKit/LayoutTests/fast/scroll-behavior/overflow-scroll-scrollBy.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     #container {
   6       width: 200px;
   7       height: 200px;
   8       overflow: scroll;
   9     }
  10
  11     #content {
  12       width: 7500px;
  13       height: 7500px;
  14       background-color: blue;
  15     }
  16   </style>
  17   <script src="../../resources/testharness.js"></script>
  18   <script src="../../resources/testharnessreport.js"></script>
  19   <script src="resources/scroll-behavior-test.js"></script>
  20   <script type="text/javascript">
  21     function getEndPosition(testCase, startPosition) {
  22       var endPosition = {};
  23       if (testCase.x)
  24         endPosition.x = startPosition.x + testCase.x;
  25       else
  26         endPosition.x = startPosition.x;
  27
  28       if (testCase.y)
  29         endPosition.y = startPosition.y + testCase.y;
  30       else
  31         endPosition.y = startPosition.y;
  32       return endPosition;
  33     }
  34
  35     function jsScroll(testCase) {
  36       if (testCase.js) {
  37         var scrollToOptions = {behavior: testCase.js};
  38         if (testCase.x)
  39           scrollToOptions.left = testCase.x;
  40         if (testCase.y)
  41           scrollToOptions.top = testCase.y;
  42         document.getElementById("container").scrollBy(scrollToOptions);
  43       } else {
  44         document.getElementById("container").scrollBy(testCase.x, testCase.y);
  45       }
  46     }
  47
  48     const testScrolls = [
  49       {js: "instant", css: "auto", x: 1, y: 2},
  50       {js: "instant", css: "smooth", x: 2, y: 3},
  51       {js: "auto", css: "auto", x: 3, y: 4},
  52       {js: "", css: "auto", x: 4, y: 5},
  53       {js: "auto", css: "auto", x: 3},
  54       {js: "auto", css: "auto", y: 4},
  55       {js: "auto", css: "auto"},
  56       {js: "smooth", css: "auto", waitForEnd: true, x: 10, y: 15},
  57       {js: "smooth", css: "smooth", waitForEnd: true, x: 20, y: 25},
  58       {js: "auto", css: "smooth", waitForEnd: true, x: 30, y: 35},
  59       {js: "", css: "smooth", waitForEnd: true, x: 40, y: 45},
  60       {js: "auto", css: "smooth", waitForEnd: true, x: -30},
  61       {js: "auto", css: "smooth", waitForEnd: true, y: -35},
  62       {js: "smooth", css: "auto", waitForEnd: false, x: 4000, y: 4100},
  63       {js: "smooth", css: "smooth", waitForEnd: false, x: -3900, y: -3850},
  64       {js: "auto", css: "smooth", waitForEnd: false, x: 4050, y: 4000},
  65       {js: "", css: "smooth", waitForEnd: false, x: -4000, y: -4100},
  66     ];
  67
  68     function doTest()
  69     {
  70       var testCases = [];
  71       for (var i = 0; i < testScrolls.length; i++) {
  72         testCases.push(new ScrollBehaviorTestCase(testScrolls[i]));
  73       }
  74
  75       var element = document.getElementById("container");
  76       var scrollBehaviorTest = new ScrollBehaviorTest(element,
  77                                                       element,
  78                                                       testCases,
  79                                                       getEndPosition,
  80                                                       jsScroll);
  81       scrollBehaviorTest.run();
  82     }
  83
  84     window.addEventListener('load', doTest, false);
  85   </script>
  86 </head>
  87
  88 <body>
  89   <p>Test that calling scrollBy on an overflow:scroll element works with both scroll behaviors</p>
  90   <div id="container">
  91     <div id="content"></div>
  92   </div>
  93 </body>
  94 </html>