<!DOCTYPE html>
<!-- there should be four green squares and no visible red -->
<script src="../../resources/run-after-layout-and-paint.js"></script>
<style>
.container {
width: 100px;
height:100px;
background-color: green;
position:absolute;
transform:translateZ(0);
overflow:auto;
}
::-webkit-scrollbar {
background-color: red;
}
::-webkit-resizer {
background-color: red;
}
.content {
transform: translateZ(0);
position:absolute;
width:10px;
height:10px;
}
.tall {
height:200px;
}
.wide {
width:200px;
}
.resizeWidget {
resize: both;
}
</style>
<div class="container">
<div id="vertical" class="content tall"></div>
</div>
<div class="container" style="left: 150px">
<div id="horizontal" class="content wide"></div>
</div>
<div class="container" style="left: 300px">
<div id="both" class="content tall wide"></div>
</div>
<div id="corner" class="container resizeWidget" style="left: 450px">
<div class="content"></div>
</div>
<script>
function finishTest() {
document.getElementById("vertical").classList.remove("tall"); // topmost div loses a vertical scrollbar
document.getElementById("horizontal").classList.remove("wide"); // second div loses a horizontal scrollbar
document.getElementById("both").classList.remove("wide"); // third div loses both
document.getElementById("both").classList.remove("tall"); // vertical and horizontal scrollbars
document.getElementById("corner").classList.remove("resizeWidget"); // bottom div loses a resize corner but no scrollbars
if (window.testRunner)
testRunner.notifyDone();
}
if (window.testRunner) {
testRunner.dumpAsTextWithPixelResults();
testRunner.waitUntilDone();
}
runAfterLayoutAndPaint(finishTest);
</script>