blob: 8ce2443acdde2ef18d3738c114b5374c9fb538dc [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 src="../../../resources/ui-helper.js"></script>
<script>
if (window.testRunner) {
testRunner.waitUntilDone();
testRunner.dumpAsText();
}
async function doTest()
{
if (!testRunner.runUIScript)
return
document.getElementById('scrolling-tree').textContent = await UIHelper.getScrollingTree();
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>