third_party/WebKit/LayoutTests/fast/scroll-behavior/overflow-scroll-scroll.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 = testCase.x;
  25       else
  26         endPosition.x = startPosition.x;
  27
  28       if (testCase.y)
  29         endPosition.y = testCase.y;
  30       else
  31         endPosition.y = startPosition.y;
  32
  33       return endPosition;
  34     }
  35
  36     function jsScroll(testCase) {
  37       if (testCase.js) {
  38         var scrollToOptions = {behavior: testCase.js};
  39         if (testCase.x)
  40           scrollToOptions.left = testCase.x;
  41         if (testCase.y)
  42           scrollToOptions.top = testCase.y;
  43         document.getElementById("container").scroll(scrollToOptions);
  44       } else {
  45         document.getElementById("container").scroll(testCase.x, testCase.y);
  46       }
  47     }
  48
  49     const testScrolls = [
  50       {js: "instant", css: "auto", x: 1, y: 2},
  51       {js: "instant", css: "smooth", x: 2, y: 3},
  52       {js: "auto", css: "auto", x: 3, y: 4},
  53       {js: "", css: "auto", x: 4, y: 5},
  54       {js: "auto", css: "auto", x: 3},
  55       {js: "auto", css: "auto", y: 4},
  56       {js: "auto", css: "auto"},
  57       {js: "smooth", css: "auto", waitForEnd: true, x: 10, y: 15},
  58       {js: "smooth", css: "smooth", waitForEnd: true, x: 20, y: 25},
  59       {js: "auto", css: "smooth", waitForEnd: true, x: 30, y: 35},
  60       {js: "", css: "smooth", waitForEnd: true, x: 40, y: 45},
  61       {js: "auto", css: "smooth", waitForEnd: true, x: 45},
  62       {js: "auto", css: "smooth", waitForEnd: true, y: 40},
  63       {js: "smooth", css: "auto", waitForEnd: false, x: 4000, y: 4100},
  64       {js: "smooth", css: "smooth", waitForEnd: false, x: 15, y: 20},
  65       {js: "auto", css: "smooth", waitForEnd: false, x: 4100, y: 4000},
  66       {js: "", css: "smooth", waitForEnd: false, x: 10, y: 5},
  67     ];
  68
  69     function doTest()
  70     {
  71       var testCases = [];
  72       for (var i = 0; i < testScrolls.length; i++) {
  73         testCases.push(new ScrollBehaviorTestCase(testScrolls[i]));
  74       }
  75
  76       var element = document.getElementById("container");
  77       var scrollBehaviorTest = new ScrollBehaviorTest(element,
  78                                                       element,
  79                                                       testCases,
  80                                                       getEndPosition,
  81                                                       jsScroll);
  82       scrollBehaviorTest.run();
  83     }
  84
  85     window.addEventListener('load', doTest, false);
  86   </script>
  87 </head>
  88
  89 <body>
  90   <p>Test that calling scroll on an overflow:scroll element works with both scroll behaviors</p>
  91   <div id="container">
  92     <div id="content"></div>
  93   </div>
  94 </body>
  95 </html>