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