<head>
<style>

body {
  margin: 0;
}
::-webkit-scrollbar {
    width: 20px;
    height: 20px;
}

/* Horizontal Scrollbar Styles */

::-webkit-scrollbar:horizontal {
    -webkit-border-image: url(resources/horizontal-button.png) 0 2 0 2;
    border-color: transparent;
    border-width: 0 2px;
    background-image: url(resources/horizontal-button-background.png);
    background-repeat: repeat-x;
}

::-webkit-scrollbar-thumb:horizontal {
    -webkit-border-image: url(resources/horizontal-thumb.png) 0 20 0 20;
    border-color: transparent;
    border-width: 0 20px;
    min-width: 20px;
}

::-webkit-scrollbar-track-piece:horizontal:decrement {
    -webkit-border-image: url(resources/horizontal-track.png) 0 20 0 20;
    border-color: transparent;
    border-width: 0 0 0 20px;
}

::-webkit-scrollbar-track-piece:horizontal:increment {
    -webkit-border-image: url(resources/horizontal-track.png) 0 20 0 20;
    border-color: transparent;
    border-width: 0 20px 0 0;
}

::-webkit-scrollbar-button:horizontal {
    width: 20px;
    -webkit-border-image: url(resources/horizontal-button.png) 0 2 0 2;
    border-color: transparent;
    border-width: 0 2px;
}

::-webkit-scrollbar-button:horizontal:decrement {
    background-image: url(resources/horizontal-decrement-arrow.png), url(resources/horizontal-button-background.png);
    background-repeat: no-repeat, repeat-x;
    background-position: 2px 3px, 0 0;
}

::-webkit-scrollbar-button:horizontal:increment {
    background-image: url(resources/horizontal-increment-arrow.png), url(resources/horizontal-button-background.png);
    background-repeat: no-repeat, repeat-x;
    background-position: 7px 3px, 0 0;
}

.container {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: silver;
}

.scroller {
  position: absolute;
  top: 50px;
  left: 0;
  width: 300px;
  height: 50px;
  -webkit-box-sizing: border-box;
  border: 1px solid black;
  overflow-x: scroll;
}

.inner {
  width: 400px;
}
</style>
<script>
  function showScroller()
  {
    var scroller = document.createElement('div');
    scroller.className = 'scroller';
    
    var contents = document.createElement('div')
    contents.className = 'inner';
    contents.appendChild(document.createTextNode('inner'));
  
    scroller.appendChild(contents);
    
    document.getElementById('container').appendChild(scroller);
  }
  
  function hideScroller()
  {
    var scroller = document.getElementById('container').querySelectorAll('.scroller')[0];
    scroller.parentNode.removeChild(scroller);
  }
  
  function doTest() {
    if (window.testRunner)
        testRunner.dumpAsText();

    if (window.eventSender) {
        eventSender.dragMode = false;
        eventSender.mouseMoveTo(50, 40);
        eventSender.mouseMoveTo(50, 55);
        eventSender.mouseMoveTo(50, 90);
        eventSender.mouseDown();
        eventSender.mouseUp();
        eventSender.mouseMoveTo(50, 120);
    }
  }

  window.addEventListener('load', doTest, false);
</script>
</head>
<body>
  <div id="container" class="container" onmouseover="showScroller()" onmouseout="hideScroller()">
  </div>
  <p>This test should not crash</p>
</body>