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