third_party/WebKit/LayoutTests/fast/scroll-behavior/scroll-customization/touch-scroll-customization.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <title>Scroll customization methods are called appropriately.</title>
   6 <script src="../../../resources/testharness.js"></script>
   7 <script src="../../../resources/testharnessreport.js"></script>
   8 <style>
   9
  10 * {
  11   margin:0;
  12   padding:0;
  13 }
  14
  15 *::-webkit-scrollbar {
  16   width: 0 !important;
  17   height: 0 !important;
  18 }
  19
  20 #a {
  21   height:400px;
  22   width:400px;
  23   overflow:scroll;
  24 }
  25
  26 #b {
  27   height:500px;
  28   width:500px;
  29   background-color:purple;
  30 }
  31
  32 #c {
  33   height:300px;
  34   width:300px;
  35   overflow:scroll;
  36 }
  37
  38 #d {
  39   height:400px;
  40   width:400px;
  41   background-color:green;
  42 }
  43
  44 body {
  45   height:3000px;
  46 }
  47
  48 </style>
  49 </head>
  50 <body>
  51
  52 <div id="a">
  53 <div id="b">
  54 <div id="c">
  55 <div id="d">
  56 </div>
  57 </div>
  58 </div>
  59 </div>
  60
  61 <script>
  62 test(function() {
  63   assert_true('ScrollState' in window, "'ScrollState' in window");
  64 }, "These tests only work with scroll customization enabled.");
  65
  66 internals.settings.setScrollAnimatorEnabled(false);
  67
  68 var originalApplyScrolls = [];
  69 var originalDistributeScrolls = [];
  70 var deltas = [-85, -75, -65, -55, -45];
  71
  72 var elements = [
  73   document.getElementById("d"),
  74   document.getElementById("c"),
  75   document.getElementById("b"),
  76   document.getElementById("a"),
  77   document.scrollingElement];
  78
  79 var scrollableElements = [elements[1], elements[3], elements[4]];
  80
  81 document.scrollingElement.id = "scrollingElement";
  82
  83 function reset() {
  84   for (var i = 0; i < elements.length; ++i) {
  85     elements[i].scrollTop = 0;
  86     elements[i].unappliedDeltaY = [];
  87     elements[i].distributedDeltaY = [];
  88     elements[i].numberOfScrollBegins = 0;
  89     elements[i].numberOfScrollEnds = 0;
  90
  91     elements[i].setApplyScroll((function(scrollState){
  92       if (!scrollState.isEnding && !scrollState.isBeginning)
  93         this.unappliedDeltaY.push(scrollState.deltaY);
  94     }).bind(elements[i]), "perform-after-native-scroll");
  95
  96     elements[i].setDistributeScroll((function(scrollState) {
  97       if (scrollState.isBeginning)
  98         this.numberOfScrollBegins++;
  99       else if (scrollState.isEnding)
 100         this.numberOfScrollEnds++;
 101       else
 102         this.distributedDeltaY.push(scrollState.deltaY);
 103     }).bind(elements[i]), "perform-before-native-scroll");
 104
 105     // Add a gc, to ensure that these callbacks don't get collected.
 106     gc();
 107   }
 108 }
 109
 110 function applyDelta(d) {
 111   eventSender.gestureScrollBegin(10, 10);
 112   eventSender.gestureScrollUpdate(0, d);
 113   eventSender.gestureScrollEnd(0, 0);
 114 }
 115
 116 if ('ScrollState' in window) {
 117   test(function() {
 118     reset();
 119
 120     // Scroll five times, with three scrollable elements.
 121     var cScrollTop = [85, 100, 100, 100, 100];
 122     var aScrollTop = [0, 0, 65, 100, 100];
 123     var scrollingElementScrollTop = [0, 0, 0, 0, 45];
 124
 125     for (var i = 0; i < deltas.length; ++i) {
 126       applyDelta(deltas[i]);
 127       assert_equals(a.scrollTop, aScrollTop[i], "For id 'a' on step " + i);
 128       assert_equals(c.scrollTop, cScrollTop[i], "For id 'c' on step " + i);
 129       assert_equals(document.scrollingElement.scrollTop, scrollingElementScrollTop[i], "For scrollingElement on step " + i);
 130     }
 131   }, "Scroll offsets are modified correctly.");
 132
 133   test(function() {
 134     reset();
 135
 136     // Scroll five times, with five elements.
 137     var unapplied = [
 138       // d, the innermost element, never applies any scroll.
 139       [-85, -75, -65, -55, -45],
 140       // c applies the first two scrolls, and then hits its scroll extents.
 141       [0, 0, -65, -55, -45],
 142       // b doesn't scroll, and so leaves the same deltas unapplied as c.
 143       [0, 0, -65, -55, -45],
 144       // a hits its scroll extent on the second last step.
 145       [0, 0, 0, 0, -45],
 146       // The scrollingElement performs the frame scroll.
 147       [0, 0, 0, 0, 0]];
 148
 149     for (var i = 0; i < deltas.length; ++i)
 150       applyDelta(deltas[i]);
 151
 152     for (var i = 0; i < elements.length; ++i) {
 153       var el = elements[i];
 154       // Every element sees the same deltas being distributed.
 155       assert_array_equals(el.distributedDeltaY, deltas, "distributed delta for " + el.id + ":");
 156       assert_array_equals(el.unappliedDeltaY, unapplied[i], "unapplied delta for " + el.id + ":");
 157     }
 158
 159     // Ensure that the document leaves scroll unapplied when appropriate.
 160     var documentUnapplied = document.scrollingElement.unappliedDeltaY;
 161     applyDelta(-4000);
 162     assert_equals(documentUnapplied[documentUnapplied.length - 1], 0);
 163     applyDelta(-4000);
 164     assert_equals(documentUnapplied[documentUnapplied.length - 1], -4000);
 165   }, "Correct amount of delta is consumed.");
 166
 167   test(function() {
 168     reset();
 169
 170     // Consume one pixel of delta per call to applyScroll.
 171     for (var i = 0; i < elements.length; ++i) {
 172       if (scrollableElements.indexOf(elements[i]) == -1)
 173         continue;
 174       elements[i].setApplyScroll((function(scrollState) {
 175         if (scrollState.deltaY !== 0)
 176           scrollState.consumeDelta(0, -1);
 177       }).bind(elements[i]), "perform-before-native-scroll");
 178     }
 179
 180     // Scroll five times, with three scrollable elements.
 181     // The scroll distance is decreased more the higher up the scroll chain the element is.
 182     var cScrollTop = [85 - 1, 100, 100, 100, 100];
 183     var aScrollTop = [0, 0, 65 - 2, 100, 100];
 184     var scrollingElementScrollTop = [0, 0, 0, 0, 45 - 3];
 185     for (var i = 0; i < deltas.length; ++i) {
 186       applyDelta(deltas[i]);
 187       assert_equals(c.scrollTop, cScrollTop[i], "For id 'c' on step " + i);
 188       assert_equals(a.scrollTop, aScrollTop[i], "For id 'a' on step " + i);
 189       assert_equals(document.scrollingElement.scrollTop, scrollingElementScrollTop[i], "For scrollingElement on step " + i);
 190     }
 191   }, "Consuming deltas prevents scrolling.");
 192
 193   test(function() {
 194     reset();
 195
 196     for (var i = 0; i < deltas.length; ++i)
 197       applyDelta(deltas[i]);
 198
 199     for (var i = 0; i < elements.length; ++i) {
 200       assert_equals(elements[i].numberOfScrollBegins, deltas.length, "Incorrect number of begin events for " + elements[i].id);
 201       assert_equals(elements[i].numberOfScrollEnds, deltas.length, "Incorrect number of end events for " + elements[i].id);
 202     }
 203   }, "Correct number of scroll end and begin events observed.");
 204
 205   {
 206     // NOTE - this async test needs to be run last, as it shares state with the
 207     // other tests. If other tests are run after it, they'll modify the state
 208     // while this test is still running.
 209     var flingTest = async_test("Touchscreen fling doesn't propagate.");
 210     reset();
 211
 212     function assertScrollTops(cTop, aTop, scrollingElementTop, step) {
 213       assert_equals(c.scrollTop, cTop, "For id 'c' on step " + step);
 214       assert_equals(a.scrollTop, aTop, "For id 'a' on step " + step);
 215       assert_equals(document.scrollingElement.scrollTop, scrollingElementTop, "For scrollingElement on step " + step);
 216     };
 217
 218     var frame_actions = [
 219       function() {
 220         eventSender.gestureFlingStart(10, 10, -1000000, -1000000, "touchscreen");
 221       },
 222       flingTest.step_func(function() {
 223         assertScrollTops(0, 0, 0, 1);
 224       }),
 225       flingTest.step_func(function() {
 226         assertScrollTops(100, 0, 0, 2);
 227       }),
 228       flingTest.step_func(function() {
 229         assertScrollTops(100, 0, 0, 3);
 230       }),
 231       flingTest.step_func(function() {
 232         assertScrollTops(100, 0, 0, 4);
 233         flingTest.done();
 234       })
 235     ]
 236
 237     function executeFrameActions(frame_actions) {
 238       var frame = 0;
 239       function raf() {
 240         frame_actions[frame]();
 241         frame++;
 242         if (frame >= frame_actions.length)
 243           return;
 244         window.requestAnimationFrame(raf);
 245       }
 246       window.requestAnimationFrame(raf);
 247     }
 248
 249     executeFrameActions(frame_actions);
 250   }
 251 }
 252
 253 </script>
 254 </body>
 255 </html>