third_party/WebKit/LayoutTests/fast/events/touch/gesture/touch-gesture-scroll-div-not-propagated.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 <style type="text/css">
   7
   8 ::-webkit-scrollbar {
   9     width: 0px;
  10     height: 0px;
  11 }
  12
  13 #greenbox {
  14   width: 100px;
  15   height: 100px;
  16   background: green;
  17   padding: 0px;
  18   margin: 0px;
  19 }
  20
  21 #redbox {
  22   width: 100px;
  23   height: 100px;
  24   background: red;
  25   padding: 0px;
  26   margin: 0px;
  27 }
  28
  29 #bluebox {
  30   width: 100px;
  31   height: 100px;
  32   background: blue;
  33   padding: 0px;
  34   margin: 0px;
  35 }
  36
  37 #innerdiv {
  38     width: 200px;
  39     height: 200px;
  40     overflow-y: scroll;
  41     overflow-x: scroll;
  42 }
  43
  44 #outerdiv {
  45     width: 250px;
  46     height: 250px;
  47     overflow-y: scroll;
  48     overflow-x: scroll;
  49 }
  50
  51 td {
  52   padding: 0px;
  53 }
  54
  55 </style>
  56 </head>
  57 <body style="margin:0" onload="runTest();">
  58
  59 <div id="outerdiv">
  60   <table border="0" cellspacing="0px" >
  61     <tr><td>
  62       <div id="innerdiv">
  63         <table border="0" cellspacing="0px" >
  64           <tr><td><div id="greenbox"></div></td></tr>
  65           <tr><td><div id="redbox"></div></td></tr>
  66           <tr><td><div id="greenbox"></div></td></tr>
  67           <tr><td><div id="redbox"></div></td></tr>
  68         </table>
  69       </div>
  70     </td></tr>
  71     <tr><td>
  72       <div id="bluebox"></div>
  73     </td></tr>
  74   </table>
  75 </div>
  76
  77 <p id="description"></p>
  78 <div id="console"></div>
  79 <script type="text/javascript">
  80
  81 var movedbox;
  82 var touchtarget;
  83 var expectedGesturesTotal = 2;
  84 var gesturesOccurred = 0;
  85 var scrollAmountX = ['0', '0'];
  86 var scrollAmountY = ['0', '0'];
  87 var wheelEventsOccurred = 0;
  88 var expectedWheelEventsOccurred = ['0', '0'];
  89 var scrollEventsOccurred = 0;
  90 var scrolledElement = 'movedbox';
  91 var scrollEventsOccurred = 0;
  92 var expectedScrollEventsOccurred = '1';
  93
  94 function firstGestureScroll()
  95 {
  96     debug("first gesture");
  97     eventSender.gestureScrollBegin(10, 72);
  98     eventSender.gestureScrollUpdate(0, -150, true);
  99     eventSender.gestureScrollEnd(0, 0);
 100
 101     // Wait for layout.
 102     checkScrollOffset();
 103 }
 104
 105 function secondGestureScroll()
 106 {
 107     debug("second gesture");
 108     eventSender.gestureScrollBegin(12, 40);
 109     eventSender.gestureScrollUpdate(0, -50, true);
 110     eventSender.gestureScrollUpdate(0, -10, true);
 111     eventSender.gestureScrollEnd(0, 0);
 112
 113     // Wait for layout.
 114     checkScrollOffset();
 115 }
 116
 117 if (window.testRunner)
 118     testRunner.waitUntilDone();
 119
 120 function runTest()
 121 {
 122     movedbox = document.getElementById("outerdiv");
 123     touchtarget = document.getElementById("innerdiv");
 124     touchtarget.addEventListener("scroll", recordScroll);
 125     touchtarget.addEventListener("mousewheel", recordWheel);
 126
 127     if (window.eventSender) {
 128         description('This tests that a gesture scroll is not propagated from an ' +
 129                 'inner div to an outer div when the inner div has no ' +
 130                 'remaining scroll offset when the preventPropagation flag is set for ' +
 131                 'the GestureScrollUpdate event type.');
 132         if (checkTestDependencies() && window.eventSender.gestureScrollUpdate)
 133             firstGestureScroll();
 134         else
 135             exitIfNecessary();
 136     } else {
 137         debug("This test requires DumpRenderTree.  Gesture-scroll the page to validate the implementation.");
 138     }
 139 }
 140 </script>
 141
 142
 143
 144 </body>
 145 </html>