<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>