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