| <html> |
| <style> |
| div#styled::-webkit-scrollbar { |
| width:17px; |
| height:17px; |
| } |
| |
| div#styled::-webkit-scrollbar-button { |
| display:block; |
| width: 17px; |
| height: 17px; |
| } |
| |
| div#styled::-webkit-scrollbar-button:vertical { |
| background-color:lightblue; |
| border:2px solid black; |
| } |
| |
| div#styled::-webkit-scrollbar-button:horizontal { |
| background-color:#208020; |
| border:2px solid black; |
| } |
| |
| div#styled::-webkit-scrollbar-thumb { |
| min-width:20px; |
| min-height:20px; |
| background-color: navy; |
| border:2px solid #cccccc; |
| } |
| |
| div#styled::-webkit-scrollbar-thumb:horizontal { |
| background-color: #004000; |
| } |
| |
| div#styled::-webkit-scrollbar-button:disabled { |
| display:none |
| } |
| |
| div#styled::-webkit-scrollbar-track { |
| background-color: #2060a0; |
| } |
| |
| div#styled::-webkit-scrollbar-track:horizontal { |
| background-color: #40a040; |
| } |
| </style> |
| <body style="margin:0"> |
| <script> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| </script> |
| <div id="overflow" style="border:2px solid black;overflow:auto;height:200px;width:200px; left: 0px; top: 100px; position: absolute;"> |
| <div style="background-color:green;width:1000px;height:1000px;"></div> |
| <div style="background-color:red;width:1000px;height:1000px;"></div> |
| </div> |
| <div id="styled" style="width:200px; height:200px; overflow-y:scroll; overflow-x:scroll; position: absolute; left: 450px; top: 100px;"> |
| Hello<br> |
| Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> |
| Hello<br>Hello<br>Hello<br>Hello<br> |
| Hello<br>Hello<br>Hello<br>Hello<br> |
| <span style="white-space:nowrap">Hello world this is a long string and will not wrap.</span> |
| Hello<br>Hello<br>Hello<br>Hello<br> |
| Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> |
| Hello<br>Hello<br>Hello<br>Hello<br> |
| Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br> |
| Hello<br>Hello<br>Hello<br>Hello<br> |
| Hello<br>Hello<br>Hello<br> |
| </div> |
| <p>Test |
| for <a href="https://bugs.webkit.org/show_bug.cgi?id=29348">bug |
| 29348</a>: This tests that using the mouse wheel while having the |
| pointer in a horizontal scrollbar makes it scroll horizontally, also |
| with styled scrollbars. On success, the vertical offset for both divs |
| should be 80, and the horizonta 40.<p/> |
| <div id="console"></div> |
| <script> |
| function failed() { |
| document.getElementById('console').innerHTML = "FAILED"; |
| window.testRunner.notifyDone(); |
| } |
| |
| if (window.eventSender) { |
| var overflow = document.getElementById('overflow'); |
| |
| // Scroll inside the div |
| var x = overflow.offsetLeft + overflow.offsetWidth - 50; |
| var y = overflow.offsetTop + overflow.offsetHeight - 50; |
| eventSender.mouseMoveTo(x, y); |
| eventSender.mouseScrollBy(0, -1); |
| |
| if (overflow.scrollTop != 40 || overflow.scrollLeft != 0) |
| failed(); |
| |
| // Scroll on top of the horizontal scrollbar |
| var x = overflow.offsetLeft + overflow.offsetWidth - 50; |
| var y = overflow.offsetTop + overflow.offsetHeight - 6; |
| eventSender.mouseMoveTo(x, y);
|
| eventSender.mouseScrollBy(0, -1); |
| |
| if (overflow.scrollTop != 40 || overflow.scrollLeft != 40) |
| failed(); |
| |
| // Scroll on top of the vertical scrollbar |
| var x = overflow.offsetLeft + overflow.offsetWidth - 6; |
| var y = overflow.offsetTop + overflow.offsetHeight - 50; |
| eventSender.mouseMoveTo(x, y);
|
| eventSender.mouseScrollBy(0, -1); |
| |
| if (overflow.scrollTop != 80 || overflow.scrollLeft != 40) |
| failed(); |
| |
| var styled = document.getElementById('styled'); |
| |
| // Scroll inside the div |
| var x = styled.offsetLeft + styled.offsetWidth - 50; |
| var y = styled.offsetTop + styled.offsetHeight - 50; |
| eventSender.mouseMoveTo(x, y);
|
| eventSender.mouseScrollBy(0, -1); |
| |
| if (styled.scrollTop != 40 || styled.scrollLeft != 0) |
| failed(); |
| |
| // Scroll on top of the horizontal scrollbar |
| var x = styled.offsetLeft + styled.offsetWidth - 50; |
| var y = styled.offsetTop + styled.offsetHeight - 6; |
| eventSender.mouseMoveTo(x, y);
|
| eventSender.mouseScrollBy(0, -1); |
| |
| if (styled.scrollTop != 40 || styled.scrollLeft != 40) |
| failed(); |
| |
| // Scroll on top of the vertical scrollbar |
| var x = styled.offsetLeft + styled.offsetWidth - 6; |
| var y = styled.offsetTop + styled.offsetHeight - 50; |
| eventSender.mouseMoveTo(x, y);
|
| eventSender.mouseScrollBy(0, -1); |
| |
| if (styled.scrollTop != 80 || styled.scrollLeft != 40) |
| failed(); |
| |
| setTimeout(finished, 500); |
| } |
| |
| function finished() |
| { |
| var msg = "Scroll offset for 'overflow' is " + document.getElementById('overflow').scrollTop + " and " + document.getElementById('overflow').scrollLeft; |
| msg += "<br/>"; |
| msg += "Scroll offset for 'styled' is " + document.getElementById('styled').scrollTop + " and " + document.getElementById('styled').scrollLeft; |
| |
| document.getElementById('console').innerHTML = msg; |
| |
| // Just to cleanup the test results page |
| document.getElementById('styled').style.display = 'none'; |
| |
| window.testRunner.notifyDone(); |
| } |
| |
| </script> |
| </body> |
| </html> |
