125 lines
3.1 KiB
HTML
125 lines
3.1 KiB
HTML
<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> |