770f327c681d1814a4382e8fc8cc42d841b67259
[WebKit-https.git] / LayoutTests / fast / events / touch / gesture / touch-gesture-scroll-sideways.html
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
2 <html>
3 <head>
4 <script src="../../../js/resources/js-test-pre.js"></script>
5 <script src="resources/gesture-helpers.js"></script>
6 <style type="text/css">
7 #touchtarget {
8   width: 100px;
9   height: 100px;
10   position: relative;
11   background: white;
12 }
13
14 /*
15     Make sure that scrollbar has a known size and
16     shape so that events can hit on it more reliably
17     across multiple platforms.
18 */
19 ::-webkit-scrollbar {
20     width: 20px;
21     height: 20px;
22 }
23
24 ::-webkit-scrollbar-track {
25     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
26 }
27  
28 #movingbox {
29   width: 100%;
30   height: 100%;
31   position: absolute;
32   word-wrap: break-word;
33   overflow-y: scroll;
34   overflow-x: scroll;
35   display: block;
36 }
37
38 #greenbox {
39   width: 100px;
40   height: 100px;
41   background: green;
42   padding: 0px;
43   margin: 0px;
44 }
45
46 #redbox {
47   width: 100px;
48   height: 100px;
49   background: red;
50   padding: 0px;
51   margin: 0px;
52 }
53
54 td {
55   padding: 0px;
56 }
57 </style>
58 </head>
59 <body style="margin:0" onload="runTest();">
60 <div id="touchtarget">
61   <div id="movingbox">
62     <table border="0" cellspacing="0px" id="tablefoo">
63       <tr>
64         <td><div id="redbox"></div></td>
65         <td><div id="greenbox"></div></td>
66       </tr>
67       <tr>
68         <td><div id="greenbox"></div></td>
69         <td><div id="greenbox"></div></td>
70       </tr>
71     </table>
72   </div>
73 </div>
74
75 <p id="description"></p>
76 <div id="console"></div>
77 <script type="text/javascript">
78
79 var movingdiv;
80 var expectedGesturesTotal = 2;
81 var gesturesOccurred = 0;
82 var scrollAmountX = ['0', '0'];
83 var scrollAmountY = ['19', '44'];
84 var wheelEventsOccurred = 0;
85 var expectedWheelEventsOccurred = ['1', '2'];
86 var scrollEventsOccurred = 0;
87 var expectedScrollEventsOccurred = '1';
88 var scrolledElement = 'movingdiv'
89
90 function checkWheelScrollOffset()
91 {
92     if (!window.eventSender)
93         return;
94                 
95     if (gesturesOccurred == 0) {
96         shouldBe(scrolledElement + '.' + 'scrollTop', scrollAmountY[gesturesOccurred]);
97         shouldBe(scrolledElement + '.' + 'scrollLeft', scrollAmountX[gesturesOccurred]);
98         shouldBe('wheelEventsOccurred', expectedWheelEventsOccurred[gesturesOccurred]);
99         gesturesOccurred++;
100         secondWheelScroll();
101         return;
102     }
103
104     if (gesturesOccurred == 1) {
105         debug("without precise deltas, scrollLeft: " + movingdiv.scrollLeft + " scrollTop: " + movingdiv.scrollTop);
106         shouldBe('wheelEventsOccurred', expectedWheelEventsOccurred[gesturesOccurred]);         
107         gesturesOccurred++;
108         return;
109     }
110         
111     if (gesturesOccurred == expectedGesturesTotal) {
112         successfullyParsed = true;
113         isSuccessfullyParsed();
114         if (window.testRunner)
115         testRunner.notifyDone();
116     }
117 }
118
119 function firstWheelScroll()
120 {
121     debug("first wheel event");
122     eventSender.mouseMoveTo(3, 90); // Over Scrollbar
123     eventSender.continuousMouseScrollBy(0, -19, false, true);
124     checkWheelScrollOffset();
125 }
126
127 function secondWheelScroll()
128 {
129     debug("second wheel event");
130     eventSender.continuousMouseScrollBy(0, -25, false, false);
131     checkWheelScrollOffset();
132 }
133
134 if (window.testRunner)
135     testRunner.waitUntilDone();
136
137 function runTest()
138 {
139     movingdiv = document.getElementById('movingbox');
140     movingdiv.addEventListener("scroll", recordScroll);
141     window.addEventListener("mousewheel", recordWheel);
142
143     if (window.eventSender) {
144         description('This tests that precise scrolls on a horizontal scroll bar move vertically.');
145
146         if (checkTestDependencies())
147             firstWheelScroll();
148         else
149             exitIfNecessary();
150     } else {
151         debug("This test requires DumpRenderTree.  Touchpad scroll the red rect to log.");
152     }
153 }
154 </script>
155 </body>
156 </html>