74bc84f74b4747f52b7b72f614a6470ecbd87ed0
[WebKit-https.git] / LayoutTests / fast / events / touch / gesture / touch-gesture-noscroll-body-xhidden.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link rel="stylesheet" href="../../../js/resources/js-test-style.css">
5 <script src="../../../js/resources/js-test-pre.js"></script>
6 <script src="resources/gesture-helpers.js"></script>
7 <style type="text/css">
8 #touchtarget {
9   width: 100px;
10   height: 100px;
11   background: white;
12   overflow:hidden;
13 }
14
15 ::-webkit-scrollbar {
16     width: 0px;
17     height: 0px;
18 }
19
20 #greenbox {
21   width: 100px;
22   height: 100px;
23   background: green;
24   padding: 0px;
25   margin: 0px;
26 }
27
28 #redbox {
29   width: 100px;
30   height: 100px;
31   background: red;
32   padding: 0px;
33   margin: 0px;
34 }
35
36 td {
37   padding: 0px;
38 }
39 </style>
40 </head>
41 <body style="margin:0; overflow-x:hidden;" onload="runTest();">
42
43 <table id="horizontal_table_to_fill">
44   <tr id="firstrow">
45     <td><div id="redbox"></div></td>
46     <td><div id="greenbox"></div></td>
47   </tr>
48 </table>
49
50 <table id="vertical_table_to_fill">
51     <tr><td><div id="greenbox"></div></td></tr>
52     <tr><td><div id="redbox"></div></td></tr>
53 </table>
54
55 <p id="description"></p>
56 <div id="console"></div>
57 <script type="text/javascript">
58
59 var expectedGesturesTotal = 2;
60 var gesturesOccurred = 0;
61 var scrollAmountX = ['0', '0'];
62 var scrollAmountY = ['110', '205'];
63 var wheelEventsOccurred = 0;
64 var expectedWheelEventsOccurred = ['0', '0'];
65 var scrollEventsOccurred = 0;
66 var expectedScrollEventsOccurred = '1';
67 var scrolledElement = 'document.body'
68
69 // Always construct a page larger than the vertical height of the window.
70 function buildPage()
71 {
72     // build vertical table
73     var table = document.getElementById('vertical_table_to_fill');
74     var targetHeight = document.body.offsetHeight;
75     var cellPairHeight = table.offsetHeight;
76     var numberOfReps = targetHeight / cellPairHeight * 2;
77     var i;
78     for (i = 0; i < numberOfReps; i++) {
79         var p = document.createElement('tr');
80         p.innerHTML = '<td><div id="greenbox"></div></td>';
81         table.appendChild(p);
82         var p = document.createElement('tr');
83         p.innerHTML = '<td><div id="redbox"></div></td>';
84         table.appendChild(p);
85     }
86
87     // build horizontal table
88     var horizontalTable = document.getElementById('horizontal_table_to_fill');
89     var tableRow = document.getElementById('firstrow');
90     var targetWidth = document.body.offsetWidth;
91     var cellPairWidth = horizontalTable.offsetWidth;
92     numberOfReps = targetWidth / cellPairWidth * 2;
93     for (i = 0; i < numberOfReps; i++) {
94         var p = document.createElement('td');
95         p.innerHTML = '<div id="redbox"></div>';
96         tableRow.appendChild(p);
97         var p = document.createElement('td');
98         p.innerHTML = '<div id="greenbox"></div>';
99         tableRow.appendChild(p);
100     }
101
102     window.addEventListener("scroll", recordScroll);
103     window.addEventListener("mousewheel", recordWheel);
104 }
105
106 function firstGestureScroll()
107 {
108     debug("first gesture");
109     eventSender.gestureScrollBegin(95, 12);
110     eventSender.gestureScrollUpdate(-55, -110);
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, 97);
121     eventSender.gestureScrollUpdate(-42, -95);
122     eventSender.gestureScrollEnd(0, 0);
123
124     // Wait for layout.
125     checkScrollOffset();
126 }
127
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 horizontally with touch ' +
136                     '(but can still be scrolled vertically) if its body has style overflow-x: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>