blob: 6cb26d27c0dd7aad5e965734a98c79b5ed22acca [file] [log] [blame]
<!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
<html>
<head>
<style>
::-webkit-scrollbar {
width: 16px;
height: 16px;
background-color: silver;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.container {
display: inline-block;
}
.overflowing {
margin: 20px;
height: 100px;
width: 200px;
border: 1px solid black;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.contents {
width: 200%;
height: 200%;
}
::-webkit-scrollbar {
display: none;
}
.vertical::-webkit-scrollbar:vertical {
display: block;
}
.horizontal::-webkit-scrollbar:horizontal {
display: block;
}
</style>
<script>
if (window.testRunner) {
testRunner.waitUntilDone();
testRunner.dumpAsText();
}
function getScrollingTreeUIScript(x, y)
{
return `(function() {
return uiController.scrollingTreeAsText;
})();`;
}
function doTest()
{
if (!testRunner.runUIScript)
return
testRunner.runUIScript(getScrollingTreeUIScript(), function(scrollingTree) {
document.getElementById('scrolling-tree').textContent = scrollingTree;
testRunner.notifyDone();
});
}
window.addEventListener('load', doTest, false);
</script>
</head>
<body>
<div class="container">
<h2>Both</h2>
<div class="overflowing accelerated horizontal vertical">
<div class="contents">
</div>
</div>
</div>
<div class="container">
<h2>Just horizontal</h2>
<div class="overflowing accelerated horizontal">
<div class="contents">
</div>
</div>
</div>
<div class="container">
<h2>Just vertical</h2>
<div class="overflowing accelerated vertical">
<div class="contents">
</div>
</div>
</div>
<div class="container">
<h2>None visible</h2>
<div class="overflowing accelerated">
<div class="contents">
</div>
</div>
</div>
<pre id="scrolling-tree"></pre>
</body>
</html>