third_party/WebKit/LayoutTests/fast/events/touch/gesture/touch-gesture-scroll-div-twice-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 #yellowbox {
  38   width: 100px;
  39   height: 100px;
  40   background: yellow;
  41   padding: 0px;
  42   margin: 0px;
  43 }
  44
  45 #innerdiv {
  46     width: 200px;
  47     height: 200px;
  48     overflow-y: scroll;
  49     overflow-x: scroll;
  50 }
  51
  52 #outerdiv {
  53     width: 250px;
  54     height: 250px;
  55     overflow-y: scroll;
  56     overflow-x: scroll;
  57 }
  58
  59 #outermostdiv {
  60     width: 300px;
  61     height: 300px;
  62     overflow-y: scroll;
  63     overflow-x: scroll;
  64 }
  65
  66 td {
  67   padding: 0px;
  68 }
  69
  70 </style>
  71 </head>
  72 <body style="margin:0" onload="runTest();">
  73
  74 <div id="outermostdiv">
  75   <table border="0" cellspacing="0px" >
  76     <tr><td>
  77       <div id="outerdiv">
  78         <table border="0" cellspacing="0px" >
  79           <tr><td>
  80             <div id="innerdiv">
  81               <table border="0" cellspacing="0px" >
  82                 <tr><td><div id="greenbox"></div></td></tr>
  83                 <tr><td><div id="redbox"></div></td></tr>
  84                 <tr><td><div id="greenbox"></div></td></tr>
  85                 <tr><td><div id="redbox"></div></td></tr>
  86               </table>
  87             </div>
  88           </td></tr>
  89           <tr><td>
  90             <div id="bluebox"></div>
  91           </td></tr>
  92         </table>
  93       </div>
  94     </td></tr>
  95     <tr><td>
  96       <div id="yellowbox"></div>
  97     </td></tr>
  98   </table>
  99 </div>
 100
 101 <p id="description"></p>
 102 <div id="console"></div>
 103 <script type="text/javascript">
 104
 105 var movedbox;
 106 var touchtarget;
 107 var expectedGesturesTotal = 2;
 108 var gesturesOccurred = 0;
 109 var scrollAmountX = ['0', '0'];
 110 var scrollAmountY = ['0', '25'];
 111 var wheelEventsOccurred = 0;
 112 var expectedWheelEventsOccurred = ['0', '0'];
 113 var scrollEventsOccurred = 0;
 114 var scrolledElement = 'movedbox'
 115 var scrollEventsOccurred = 0;
 116 var expectedScrollEventsOccurred = '1';
 117
 118 function firstGestureScroll()
 119 {
 120     debug("first gesture");
 121     eventSender.gestureScrollBegin(10, 72);
 122     eventSender.gestureScrollUpdate(0, -200);
 123     eventSender.gestureScrollUpdate(0, -30);
 124     eventSender.gestureScrollEnd(0, 0);
 125
 126     // Wait for layout.
 127     checkScrollOffset();
 128 }
 129
 130 function secondGestureScroll()
 131 {
 132     debug("second gesture");
 133     eventSender.gestureScrollBegin(12, 40);
 134     eventSender.gestureScrollUpdate(0, -20);
 135     eventSender.gestureScrollUpdate(0, -25);
 136     eventSender.gestureScrollEnd(0, 0);
 137
 138     // Wait for layout.
 139     checkScrollOffset();
 140 }
 141
 142 if (window.testRunner)
 143     testRunner.waitUntilDone();
 144
 145 function runTest()
 146 {
 147     movedbox = document.getElementById("outermostdiv");
 148     touchtarget = document.getElementById("innerdiv");
 149     touchtarget.addEventListener("scroll", recordScroll);
 150     touchtarget.addEventListener("mousewheel", recordWheel);
 151
 152     if (window.eventSender) {
 153         description('This tests that a gesture scroll is propagated from an ' +
 154                 'inner div to an outer div twice when the scrolled divs have no ' +
 155                 'remaining scroll offset.');
 156         if (checkTestDependencies())
 157             firstGestureScroll();
 158         else
 159             exitIfNecessary();
 160     } else {
 161         debug("This test requires DumpRenderTree.  Gesture-scroll the page to validate the implementation.");
 162     }
 163 }
 164 </script>
 165
 166
 167
 168 </body>
 169 </html>