third_party/WebKit/LayoutTests/fast/events/touch/gesture/touch-gesture-noscroll-body-yhidden.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 #touchtarget {
   8   width: 100px;
   9   height: 100px;
  10   background: white;
  11   overflow:hidden;
  12 }
  13
  14 ::-webkit-scrollbar {
  15     width: 0px;
  16     height: 0px;
  17 }
  18
  19 #greenbox {
  20   width: 100px;
  21   height: 100px;
  22   background: green;
  23   padding: 0px;
  24   margin: 0px;
  25 }
  26
  27 #redbox {
  28   width: 100px;
  29   height: 100px;
  30   background: red;
  31   padding: 0px;
  32   margin: 0px;
  33 }
  34
  35 td {
  36   padding: 0px;
  37 }
  38 </style>
  39 </head>
  40 <body style="margin:0; overflow-y:hidden;" onload="runTest();">
  41
  42 <table id="horizontal_table_to_fill">
  43   <tr id="firstrow">
  44     <td><div id="redbox"></div></td>
  45     <td><div id="greenbox"></div></td>
  46   </tr>
  47 </table>
  48
  49 <table id="vertical_table_to_fill">
  50     <tr><td><div id="greenbox"></div></td></tr>
  51     <tr><td><div id="redbox"></div></td></tr>
  52 </table>
  53
  54 <p id="description"></p>
  55 <div id="console"></div>
  56 <script type="text/javascript">
  57
  58 var expectedGesturesTotal = 2;
  59 var gesturesOccurred = 0;
  60 var scrollAmountX = ['55', '97'];
  61 var scrollAmountY = ['0', '0'];
  62 var wheelEventsOccurred = 0;
  63 var expectedWheelEventsOccurred = ['0', '0'];
  64 var scrollEventsOccurred = 0;
  65 var expectedScrollEventsOccurred = '1';
  66 var scrolledElement = 'document.scrollingElement'
  67
  68 // Always construct a page larger than the vertical height of the window.
  69 function buildPage()
  70 {
  71     // build vertical table
  72     var table = document.getElementById('vertical_table_to_fill');
  73     var targetHeight = document.body.offsetHeight;
  74     var cellPairHeight = table.offsetHeight;
  75     var numberOfReps = targetHeight / cellPairHeight * 2;
  76     var i;
  77     for (i = 0; i < numberOfReps; i++) {
  78         var p = document.createElement('tr');
  79         p.innerHTML = '<td><div id="greenbox"></div></td>';
  80         table.appendChild(p);
  81         var p = document.createElement('tr');
  82         p.innerHTML = '<td><div id="redbox"></div></td>';
  83         table.appendChild(p);
  84     }
  85
  86     // build horizontal table
  87     var horizontalTable = document.getElementById('horizontal_table_to_fill');
  88     var tableRow = document.getElementById('firstrow');
  89     var targetWidth = document.body.offsetWidth;
  90     var cellPairWidth = horizontalTable.offsetWidth;
  91     numberOfReps = targetWidth / cellPairWidth * 2;
  92     for (i = 0; i < numberOfReps; i++) {
  93         var p = document.createElement('td');
  94         p.innerHTML = '<div id="redbox"></div>';
  95         tableRow.appendChild(p);
  96         var p = document.createElement('td');
  97         p.innerHTML = '<div id="greenbox"></div>';
  98         tableRow.appendChild(p);
  99     }
 100
 101     window.addEventListener("scroll", recordScroll);
 102     window.addEventListener("mousewheel", recordWheel);
 103 }
 104
 105 function firstGestureScroll()
 106 {
 107     debug("first gesture");
 108     eventSender.gestureScrollBegin(195, 12);
 109     eventSender.gestureScrollUpdate(-55, -110);
 110     eventSender.gestureScrollEnd(0, 0);
 111
 112     // Wait for layout.
 113     checkScrollOffset();
 114 }
 115
 116 function secondGestureScroll()
 117 {
 118     debug("second gesture");
 119     eventSender.gestureScrollBegin(120, 255);
 120     eventSender.gestureScrollUpdate(-42, -95);
 121     eventSender.gestureScrollEnd(0, 0);
 122
 123     // Wait for layout.
 124     checkScrollOffset();
 125 }
 126
 127 window.jsTestIsAsync = true;
 128 if (window.testRunner)
 129     testRunner.waitUntilDone();
 130
 131 function runTest()
 132 {
 133     buildPage();
 134     if (window.eventSender) {
 135         description('This tests that a page cannot be scrolled vertically with touch ' +
 136                     '(but can still be scrolled horizontally) if its body has style overflow-y:hidden. ' +
 137                     'The scroll events in this test have both an x and y component.');
 138
 139         if (checkTestDependencies())
 140             firstGestureScroll();
 141         else
 142             exitIfNecessary();
 143     } else {
 144         debug("This test requires DumpRenderTree.  Touch scroll the red rect to log.");
 145     }
 146 }
 147 </script>
 148 </body>
 149 </html>