blob: 8e33aa9f6a0fa446cdf2da9bfab1afe89fcbb370 [file] [log] [blame]
<!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncFrameScrollingEnabled=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();
}
function getScrollingTreeUIScript(x, y)
{
return `(function() {
return uiController.scrollingTreeAsText;
})();`;
}
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 Visible</h2>
<iframe srcdoc="
<style>
::-webkit-scrollbar {
display: block;
background-color: gray;
}
</style>
<body>
<div style='width: 1000px; height: 1000px'>Content</div>
<body>"></iframe>
</div>
<div class="container">
<h2>Horizontal visible</h2>
<iframe srcdoc="
<style>
::-webkit-scrollbar {
display: block;
background-color: gray;
}
::-webkit-scrollbar:vertical {
display: none;
}
</style>
<body>
<div style='width: 1000px; height: 1000px'>Content</div>
<body>"></iframe>
</div>
<div class="container">
<h2>Vertical visible</h2>
<iframe srcdoc="
<style>
::-webkit-scrollbar {
display: block;
background-color: gray;
}
::-webkit-scrollbar:horizontal {
display: none;
}
</style>
<body>
<div style='width: 1000px; height: 1000px'>Content</div>
<body>"></iframe>
</div>
<div class="container">
<h2>None visible</h2>
<iframe srcdoc="
<style>
::-webkit-scrollbar {
display: none
}
</style>
<body>
<div style='width: 1000px; height: 1000px'>Content</div>
<body>"></iframe>
</div>
<pre id="scrolling-tree"></pre>
</body>
</html>