third_party/WebKit/LayoutTests/fast/events/touch/gesture/gesture-scrollbar.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <script src="../../../../resources/js-test.js"></script>
   5 <style type="text/css">
   6 ::-webkit-scrollbar {
   7   background-color: #ccc;
   8   height: 15px;
   9   width: 15px;
  10 }
  11
  12 ::-webkit-scrollbar-button {
  13   display: none;
  14 }
  15
  16 ::-webkit-scrollbar-thumb {
  17   background-color: #777;
  18   height: 15px;
  19   width: 15px;
  20 }
  21
  22 #scrollable {
  23     height: 300px;
  24     width: 300px;
  25     overflow: scroll;
  26 }
  27
  28 .large {
  29     height: 600px;
  30     width: 600px;
  31 }
  32 </style>
  33 </head>
  34 <body onload="runTest();">
  35 <div id="scrollable">
  36   <div class="large">
  37   </div>
  38 </div>
  39 <div id="console"></div>
  40
  41 <script type="text/javascript">
  42
  43 var movingDiv;
  44
  45 function scrollTest() {
  46     movingDiv = document.getElementById('scrollable');
  47
  48     // Ensure the div is a target for touch adjustment.
  49     movingDiv.addEventListener('click', function() {});
  50
  51     var scrollbarX = movingDiv.offsetLeft + movingDiv.offsetWidth - 5;
  52     var scrollThumbSafeOffset = 80;
  53     var scrollbarY = movingDiv.offsetTop + scrollThumbSafeOffset;
  54
  55     // Ensure we use a touch with an area to test under touch adjustment
  56     var touchWidth = 25;
  57     var touchHeight = 25;
  58
  59     shouldBe('movingDiv.scrollTop', '0');
  60     eventSender.gestureTapDown(scrollbarX, scrollbarY, touchWidth, touchHeight);
  61     eventSender.gestureShowPress(scrollbarX, scrollbarY, touchWidth, touchHeight);
  62     eventSender.gestureScrollBegin(scrollbarX + 20, scrollbarY, touchWidth, touchHeight);
  63     eventSender.gestureTapCancel(scrollbarX, scrollbarY);
  64     shouldBe('movingDiv.scrollTop', '0');
  65     eventSender.gestureScrollUpdate(0, 20);
  66     shouldBeGreaterThanOrEqual('movingDiv.scrollTop', '20');
  67     eventSender.gestureScrollUpdate(0, 60);
  68     shouldBeGreaterThanOrEqual('movingDiv.scrollTop', '85');
  69     eventSender.gestureScrollEnd(0, 0);
  70     shouldBeGreaterThanOrEqual('movingDiv.scrollTop', '85');
  71
  72     // Test horizontal scrollbar too
  73     scrollbarY = movingDiv.offsetTop + movingDiv.offsetHeight - 5;
  74     scrollbarX = movingDiv.offsetLeft + scrollThumbSafeOffset;
  75     shouldBe('movingDiv.scrollLeft', '0');
  76     eventSender.gestureTapDown(scrollbarX, scrollbarY, touchWidth, touchHeight);
  77     eventSender.gestureShowPress(scrollbarX, scrollbarY, touchWidth, touchHeight);
  78     eventSender.gestureScrollBegin(scrollbarX, scrollbarY + 20, touchWidth, touchHeight);
  79     eventSender.gestureTapCancel(scrollbarX, scrollbarY);
  80     shouldBe('movingDiv.scrollLeft', '0');
  81     eventSender.gestureScrollUpdate(20, 0);
  82     shouldBeGreaterThanOrEqual('movingDiv.scrollLeft', '20');
  83     eventSender.gestureScrollUpdate(60, 0);
  84     shouldBeGreaterThanOrEqual('movingDiv.scrollLeft', '85');
  85     eventSender.gestureScrollEnd(0, 0);
  86     shouldBeGreaterThanOrEqual('movingDiv.scrollLeft', '85');
  87
  88     // If we've got here, we've passed.
  89     isSuccessfullyParsed();
  90 }
  91
  92 function exitIfNecessary()
  93 {
  94     debug('Gesture events not implemented on this platform or broken');
  95     isSuccessfullyParsed();
  96 }
  97
  98 function runTest()
  99 {
 100     internals.settings.setMockScrollbarsEnabled(true);
 101
 102     if (window.testRunner)
 103         window.testRunner.dumpAsText();
 104
 105     if (window.eventSender) {
 106         description('This tests scroll gesture events on a scroll bar. ' +
 107             'The scrollable div below should be slightly scrolled down ' +
 108             'if successful.');
 109
 110         if (eventSender.clearTouchPoints)
 111             scrollTest();
 112         else
 113             exitIfNecessary();
 114     } else {
 115         debug("This test requires DumpRenderTree.");
 116     }
 117 }
 118 </script>
 119 </body>
 120 </html>