src/third_party/WebKit/LayoutTests/fast/events/touch/gesture/touch-gesture-scroll-listbox.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <script src="../../../../resources/js-test.js"></script>
   5         <script src="resources/gesture-helpers.js"></script>
   6
   7     </head>
   8
   9     <body style="margin:0" onload="runTest()">
  10       <div id="container" style="height: 500px; overflow-x: scroll; overflow-y: scroll">
  11           <select id="box" style="width=200px" size="5">
  12               <option>Option 1</option>
  13               <option>Option 2</option>
  14               <option>Option 3</option>
  15               <option>Option 4</option>
  16               <option>Option 5</option>
  17               <option>Option 6</option>
  18               <option>Option 7</option>
  19               <option>Option 8</option>
  20               <option>Option 9</option>
  21               <option>Option 10</option>
  22               <option>Option 11</option>
  23           </select>
  24           <div style="background: green; height: 1000px; width: 1000px"></div>
  25       </div>
  26
  27       <p id="description"></p>
  28       <div id="console"></div>
  29
  30       <script type="text/javascript">
  31         var gestureX = 30;
  32         var gestureY = 30;
  33         var itemHeight;
  34         var box;
  35         var container;
  36         var fullyScrolled;
  37
  38         function resetScroll()
  39         {
  40           container.scrollTop = 0;
  41           box.scrollTop = 0;
  42           container.scrollLeft = 0;
  43           box.scrollLeft = 0;
  44         }
  45
  46         // Fling to scroll the inner text a little but not all the way
  47         function testFlingGestures()
  48         {
  49             debug("===Testing fling gestures===");
  50             resetScroll();
  51             shouldBe('box.scrollTop', '0');
  52             shouldBe('container.scrollTop', '0');
  53
  54             eventSender.gestureScrollBegin(gestureX, gestureY);
  55             eventSender.gestureScrollUpdateWithoutPropagation(0, -itemHeight);
  56             eventSender.gestureScrollUpdateWithoutPropagation(0, -itemHeight);
  57             eventSender.gestureScrollUpdateWithoutPropagation(0, -10);
  58             eventSender.gestureScrollEnd(0, 0);
  59
  60             debug("Flinging the list box should scroll the list, the scrolls should be locked to item boundaries");
  61             shouldBe('box.scrollTop', '2*itemHeight+10');
  62             shouldBe('container.scrollTop', '0');
  63
  64             resetScroll();
  65
  66             eventSender.gestureScrollBegin(gestureX, gestureY);
  67             eventSender.gestureScrollUpdateWithoutPropagation(0, -fullyScrolled);
  68             eventSender.gestureScrollUpdateWithoutPropagation(0, -300);
  69             eventSender.gestureScrollUpdateWithoutPropagation(0, -100);
  70             eventSender.gestureScrollUpdateWithoutPropagation(0, -100);
  71             eventSender.gestureScrollEnd(0, 0);
  72
  73             debug("Flinging the list past the end shouldn't scroll containing div");
  74             shouldBe('box.scrollTop', 'fullyScrolled');
  75             shouldBe('container.scrollTop', '0');
  76
  77             eventSender.gestureScrollBegin(gestureX, gestureY);
  78             eventSender.gestureScrollUpdateWithoutPropagation(0, -30);
  79             eventSender.gestureScrollUpdateWithoutPropagation(0, -30);
  80             eventSender.gestureScrollEnd(0, 0);
  81
  82             debug("Flinging fully scrolled list should fling containing div");
  83             shouldBe('box.scrollTop', 'fullyScrolled');
  84             shouldBe('container.scrollTop', '60');
  85         }
  86
  87         function testGestureScroll()
  88         {
  89             debug("===Testing gesture scroll===");
  90
  91             resetScroll();
  92             shouldBe('box.scrollTop', '0');
  93             shouldBe('container.scrollTop', '0');
  94
  95             eventSender.gestureScrollBegin(gestureX, gestureY);
  96             eventSender.gestureScrollUpdate(0, -(itemHeight-3));
  97             eventSender.gestureScrollUpdate(0, -3);
  98             eventSender.gestureScrollUpdate(0, -(itemHeight-3));
  99             eventSender.gestureScrollUpdate(0, -3);
 100             eventSender.gestureScrollUpdate(0, -(itemHeight-3));
 101             eventSender.gestureScrollUpdate(0, -3);
 102             eventSender.gestureScrollUpdate(0, -6);
 103             eventSender.gestureScrollEnd(0, 0);
 104
 105             debug("Gesture scrolling list should scroll the list, the scrolls should lock to item boundaries");
 106             shouldBe('box.scrollTop', '3*itemHeight+6');
 107             shouldBe('container.scrollTop', '0');
 108
 109             resetScroll();
 110             shouldBe('box.scrollTop', '0');
 111             shouldBe('container.scrollTop', '0');
 112
 113             eventSender.gestureScrollBegin(gestureX, gestureY);
 114             eventSender.gestureScrollUpdate(0, -fullyScrolled);
 115             eventSender.gestureScrollUpdate(0, -50);
 116             eventSender.gestureScrollEnd(0, 0);
 117
 118             debug("Gesture scrolling list past the end should scroll container div");
 119             shouldBe('box.scrollTop', 'fullyScrolled');
 120             shouldBe('container.scrollTop', '50');
 121         }
 122
 123         function testHorizontalScroll()
 124         {
 125             debug("===Testing horizontal scroll===");
 126
 127             resetScroll();
 128             shouldBe('box.scrollLeft', '0');
 129             shouldBe('container.scrollLeft', '0');
 130
 131             eventSender.gestureScrollBegin(gestureX, gestureY);
 132             eventSender.gestureScrollUpdate(-30, 0);
 133             eventSender.gestureScrollUpdateWithoutPropagation(-30, 0);
 134             eventSender.gestureScrollEnd(0, 0);
 135
 136             debug("Horizontal scrolls should not affect listbox");
 137             shouldBe('box.scrollLeft', '0');
 138             shouldBe('container.scrollLeft', '60');
 139         }
 140
 141         if (window.testRunner)
 142             testRunner.waitUntilDone();
 143
 144         function runTest()
 145         {
 146             box = document.getElementById("box");
 147             container = document.getElementById("container");
 148             itemHeight = box.clientHeight / box.size;
 149
 150             fullyScrolled = box.scrollHeight - box.clientHeight;
 151
 152             if (window.eventSender) {
 153                 description('This tests that an input text field can be properly scrolled with touch gestures');
 154
 155                 if (checkTestDependencies() && window.eventSender.gestureScrollUpdateWithoutPropagation) {
 156                     testFlingGestures();
 157                     testGestureScroll();
 158                     testHorizontalScroll();
 159                     testRunner.notifyDone();
 160                 } else
 161                     exitIfNecessary();
 162             } else {
 163                 debug("This test requires DumpRenderTree.  Gesture-scroll the page to validate the implementation.");
 164             }
 165         }
 166       </script>
 167     </body>
 168 </html>