third_party/WebKit/LayoutTests/fast/events/touch/gesture/touch-gesture-scroll-input-field.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="width: 500px; height: 200px; overflow-y: scroll; overflow-x: scroll">
  11           <form>
  12               <input id="box" size="10" style="height:100px; font-size:xx-large" type="text" value="asasd;flkajsd;flkasjdf;alksdjf;alskdfja;lksdja;sdlfjkas;ldkf"></input>
  13           </form>
  14           <div style="background: green; height: 1000px; width: 1000px"></div>
  15       </div>
  16
  17       <p id="description"></p>
  18       <div id="console"></div>
  19
  20       <script type="text/javascript">
  21         var gestureX = 100;
  22         var gestureY = 50;
  23         var box;
  24         var container;
  25         var fullyScrolled;
  26
  27         function calculateFullScroll()
  28         {
  29             fullyScrolled = box.scrollWidth - box.clientWidth;
  30
  31             // FIXME: Mac has a quirk where the text box text can actually be scrolled a little bit
  32             // past the end. That is, scrollLeft = (scrollWidth - clientWidth) + 2 on Mac. Once
  33             // this is fixed we can remove this adjustment.
  34             box.scrollLeft = 100000;
  35             fullyScrolled += box.scrollLeft - fullyScrolled;
  36
  37             resetScroll();
  38         }
  39
  40         function resetScroll()
  41         {
  42           container.scrollLeft = 0;
  43           box.scrollLeft = 0;
  44           container.scrollTop = 0;
  45           box.scrollTop = 0;
  46         }
  47
  48         function testFlingGestureScroll()
  49         {
  50             debug("===Testing fling behavior===");
  51             resetScroll();
  52
  53             shouldBe('box.scrollLeft', '0');
  54             shouldBe('container.scrollLeft', '0');
  55
  56             eventSender.gestureScrollBegin(gestureX, gestureY);
  57             // Prevent scroll to propagate by passing true for third parameter
  58             eventSender.gestureScrollUpdate(-10, 0, true);
  59             eventSender.gestureScrollUpdate(-10, 0, true);
  60             eventSender.gestureScrollUpdate(-10, 0, true);
  61             eventSender.gestureScrollUpdate(-10, 0, true);
  62             eventSender.gestureScrollEnd(0, 0);
  63
  64             debug("Flinging input text should scroll text by the specified amount");
  65             shouldBe('box.scrollLeft', '40');
  66             shouldBe('container.scrollLeft', '0');
  67
  68             resetScroll();
  69
  70             eventSender.gestureScrollBegin(gestureX, gestureY);
  71             eventSender.gestureScrollUpdate(-fullyScrolled, 0, true);
  72             eventSender.gestureScrollUpdate(-100, 0, true);
  73             eventSender.gestureScrollUpdate(-100, 0, true);
  74             eventSender.gestureScrollUpdate(-300, 0, true);
  75             eventSender.gestureScrollEnd(0, 0);
  76
  77             debug("Flinging input text past the scrollable width shouldn't scroll containing div");
  78
  79             shouldBe('box.scrollLeft', 'fullyScrolled');
  80             shouldBe('container.scrollLeft', '0');
  81
  82             eventSender.gestureScrollBegin(gestureX, gestureY);
  83             eventSender.gestureScrollUpdate(-30, 0, true);
  84             eventSender.gestureScrollUpdate(-30, 0, true);
  85             eventSender.gestureScrollEnd(0, 0);
  86
  87             debug("Flinging fully scrolled input text should fling containing div");
  88             shouldBe('box.scrollLeft', 'fullyScrolled');
  89             shouldBe('container.scrollLeft', '60');
  90         }
  91
  92         function testGestureScroll()
  93         {
  94             debug("===Testing scroll behavior===");
  95             resetScroll();
  96
  97             shouldBe('box.scrollLeft', '0');
  98             shouldBe('container.scrollLeft', '0');
  99
 100             eventSender.gestureScrollBegin(gestureX, gestureY);
 101             eventSender.gestureScrollUpdate(-30, 0);
 102             eventSender.gestureScrollUpdate(-30, 0);
 103             eventSender.gestureScrollEnd(0, 0);
 104
 105             debug("Gesture scrolling input text should scroll text the specified amount");
 106             shouldBe('box.scrollLeft', '60');
 107             shouldBe('container.scrollLeft', '0');
 108
 109             resetScroll();
 110
 111             eventSender.gestureScrollBegin(gestureX, gestureY);
 112             eventSender.gestureScrollUpdate(-fullyScrolled, 0);
 113             eventSender.gestureScrollUpdate(-50, 0);
 114             eventSender.gestureScrollEnd(0, 0);
 115
 116             debug("Gesture scrolling input text past scroll width should scroll container div");
 117             shouldBe('box.scrollLeft', 'fullyScrolled');
 118             shouldBe('container.scrollLeft', '50');
 119         }
 120
 121         function testVerticalScroll()
 122         {
 123             debug("===Testing vertical scroll behavior===");
 124             resetScroll();
 125
 126             shouldBe('box.scrollTop', '0');
 127             shouldBe('container.scrollTop', '0');
 128
 129             eventSender.gestureScrollBegin(gestureX, gestureY);
 130             eventSender.gestureScrollUpdate(0, -30);
 131             eventSender.gestureScrollUpdate(0, -30);
 132             eventSender.gestureScrollEnd(0, 0);
 133
 134             debug("Vertically gesture scrolling input text should scroll containing div the specified amount");
 135             shouldBe('box.scrollTop', '0');
 136             shouldBe('container.scrollTop', '60');
 137
 138             resetScroll();
 139
 140             shouldBe('box.scrollTop', '0');
 141             shouldBe('container.scrollTop', '0');
 142
 143             eventSender.gestureScrollBegin(gestureX, gestureY);
 144             eventSender.gestureScrollUpdate(0, -30, true);
 145             eventSender.gestureScrollUpdate(0, -30, true);
 146             eventSender.gestureScrollEnd(0, 0);
 147
 148             debug("Vertically flinging input text should scroll the containing div the specified amount");
 149             shouldBe('box.scrollTop', '0');
 150             shouldBe('container.scrollTop', '60');
 151         }
 152
 153         function testNonOverflowingText()
 154         {
 155             debug("===Testing non-overflow scroll behavior===");
 156             box.value = "short";
 157
 158             debug("Input box without overflow should not scroll");
 159             shouldBe('box.scrollLeft', '0');
 160             shouldBe('container.scrollLeft', '0');
 161             shouldBeGreaterThanOrEqual('box.clientWidth', 'box.scrollWidth');
 162
 163             eventSender.gestureScrollBegin(gestureX, gestureY);
 164             eventSender.gestureScrollUpdate(-30, 0);
 165             eventSender.gestureScrollUpdate(-30, 0, true);
 166             eventSender.gestureScrollEnd(0, 0);
 167
 168             shouldBe('box.scrollLeft', '0');
 169             shouldBe('container.scrollLeft', '60');
 170         }
 171
 172         if (window.testRunner)
 173             testRunner.waitUntilDone();
 174
 175         function runTest()
 176         {
 177             box = document.getElementById("box");
 178             container = document.getElementById("container");
 179
 180             if (window.eventSender) {
 181                 description('This tests that an input text field can be properly scrolled with touch gestures');
 182
 183                 if (checkTestDependencies() && window.eventSender.gestureScrollUpdate) {
 184                     calculateFullScroll();
 185                     testFlingGestureScroll();
 186                     testGestureScroll();
 187                     testVerticalScroll();
 188                     testNonOverflowingText();
 189                     testRunner.notifyDone();
 190                 } else
 191                     exitIfNecessary();
 192             } else {
 193                 debug("This test requires DumpRenderTree.  Gesture-scroll the page to validate the implementation.");
 194             }
 195         }
 196       </script>
 197     </body>
 198 </html>