2010-03-19 Dirk Pranke <dpranke@chromium.org>
[WebKit-https.git] / LayoutTests / platform / gtk / scrollbars / overflow-scrollbar-horizontal-wheel-scroll.html
1 <html>
2 <style>
3 div#styled::-webkit-scrollbar {
4   width:17px;
5   height:17px;
6 }
7
8 div#styled::-webkit-scrollbar-button {
9   display:block;
10   width: 17px;
11   height: 17px;
12 }
13
14 div#styled::-webkit-scrollbar-button:vertical {
15   background-color:lightblue;
16   border:2px solid black;
17 }
18
19 div#styled::-webkit-scrollbar-button:horizontal {
20   background-color:#208020;
21   border:2px solid black;
22 }
23
24 div#styled::-webkit-scrollbar-thumb {
25   min-width:20px;
26   min-height:20px;
27   background-color: navy;
28   border:2px solid #cccccc;
29 }
30
31 div#styled::-webkit-scrollbar-thumb:horizontal {
32   background-color: #004000;
33 }
34
35 div#styled::-webkit-scrollbar-button:disabled {
36   display:none
37 }
38
39 div#styled::-webkit-scrollbar-track {
40   background-color: #2060a0;
41 }
42
43 div#styled::-webkit-scrollbar-track:horizontal {
44   background-color: #40a040;
45 }
46 </style>
47 <body style="margin:0">
48 <script>
49 if (window.layoutTestController) {
50     layoutTestController.dumpAsText();
51     layoutTestController.waitUntilDone();
52 }
53 </script>
54 <div id="overflow" style="border:2px solid black;overflow:auto;height:200px;width:200px; left: 0px; top: 100px; position: absolute;">
55 <div style="background-color:green;width:1000px;height:1000px;"></div>
56 <div style="background-color:red;width:1000px;height:1000px;"></div>
57 </div>
58 <div id="styled" style="width:200px; height:200px; overflow-y:scroll; overflow-x:scroll; position: absolute; left: 450px; top: 100px;">
59 Hello<br>
60 Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
61 Hello<br>Hello<br>Hello<br>Hello<br>
62 Hello<br>Hello<br>Hello<br>Hello<br>
63 <span style="white-space:nowrap">Hello world this is a long string and will not wrap.</span>
64 Hello<br>Hello<br>Hello<br>Hello<br>
65 Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
66 Hello<br>Hello<br>Hello<br>Hello<br>
67 Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
68 Hello<br>Hello<br>Hello<br>Hello<br>
69 Hello<br>Hello<br>Hello<br>
70 </div>
71 <p>Test
72 for <a href="https://bugs.webkit.org/show_bug.cgi?id=29348">bug
73 29348</a>: This tests that using the mouse wheel while having the
74 pointer in a horizontal scrollbar makes it scroll horizontally, also
75 with styled scrollbars. On success, the vertical offset for both divs
76 should be 80, and the horizonta 40.<p/>
77 <div id="console"></div>
78 <script>
79 function failed() {
80     document.getElementById('console').innerHTML = "FAILED";
81     window.layoutTestController.notifyDone();
82 }
83
84 if (window.eventSender) {
85     var overflow = document.getElementById('overflow');
86
87     // Scroll inside the div
88     var x = overflow.offsetLeft + overflow.offsetWidth - 50;
89     var y = overflow.offsetTop + overflow.offsetHeight - 50;
90     eventSender.mouseMoveTo(x, y);
91     eventSender.mouseWheelTo(0, 1);
92
93     if (overflow.scrollTop != 40 || overflow.scrollLeft != 0)
94         failed();
95
96     // Scroll on top of the horizontal scrollbar
97     var x = overflow.offsetLeft + overflow.offsetWidth - 50;
98     var y = overflow.offsetTop + overflow.offsetHeight - 6;
99     eventSender.mouseMoveTo(x, y);
100     eventSender.mouseWheelTo(0, 1);
101
102     if (overflow.scrollTop != 40 || overflow.scrollLeft != 40)
103         failed();
104
105     // Scroll on top of the vertical scrollbar
106     var x = overflow.offsetLeft + overflow.offsetWidth - 6;
107     var y = overflow.offsetTop + overflow.offsetHeight - 50;
108     eventSender.mouseMoveTo(x, y);
109     eventSender.mouseWheelTo(0, 1);
110
111     if (overflow.scrollTop != 80 || overflow.scrollLeft != 40)
112         failed();
113
114     var styled = document.getElementById('styled');
115
116     // Scroll inside the div
117     var x = styled.offsetLeft + styled.offsetWidth - 50;
118     var y = styled.offsetTop + styled.offsetHeight - 50;
119     eventSender.mouseMoveTo(x, y);
120     eventSender.mouseWheelTo(0, 1);
121
122     if (styled.scrollTop != 40 || styled.scrollLeft != 0)
123         failed();
124
125     // Scroll on top of the horizontal scrollbar
126     var x = styled.offsetLeft + styled.offsetWidth - 50;
127     var y = styled.offsetTop + styled.offsetHeight - 6;
128     eventSender.mouseMoveTo(x, y);
129     eventSender.mouseWheelTo(0, 1);
130
131     if (styled.scrollTop != 40 || styled.scrollLeft != 40)
132         failed();
133
134     // Scroll on top of the vertical scrollbar
135     var x = styled.offsetLeft + styled.offsetWidth - 6;
136     var y = styled.offsetTop + styled.offsetHeight - 50;
137     eventSender.mouseMoveTo(x, y);
138     eventSender.mouseWheelTo(0, 1);
139
140     if (styled.scrollTop != 80 || styled.scrollLeft != 40)
141         failed();
142
143     setTimeout(finished, 500);
144 }
145
146 function finished()
147 {
148     var msg = "Scroll offset for 'overflow' is " + document.getElementById('overflow').scrollTop + " and " + document.getElementById('overflow').scrollLeft;
149     msg += "<br/>";
150     msg += "Scroll offset for 'styled' is " + document.getElementById('styled').scrollTop + " and " + document.getElementById('styled').scrollLeft;
151
152     document.getElementById('console').innerHTML = msg;
153
154     // Just to cleanup the test results page
155     document.getElementById('styled').style.display = 'none';
156
157     window.layoutTestController.notifyDone();
158 }
159
160 </script>
161 </body>
162 </html>