content-gains-scrollbars.html | Explore in Territory

<!DOCTYPE html>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<style>
.container {
width: 100px;
height:100px;
position:absolute;
will-change: transform;
overflow:auto;
}

.content {
will-change:transform;
position:absolute;
width:10px;
height:10px;
}

.tall {
height:200px;
}

.wide {
width:200px;
}

.resizeWidget {
resize: both;
}

</style>
<pre id="layerTree"></pre>
<div class="container">
  <div id="vertical" class="content"></div>
</div>
<div class="container">
  <div id="horizontal" class="content"></div>
</div>
<div class="container">
  <div id="both" class="content"></div>
</div>
<div id="corner" class="container">
  <div class="content"></div>
</div>
<script>
function finishTest() {
    document.getElementById("vertical").classList.add("tall"); // topmost div gets a vertical scrollbar
    document.getElementById("horizontal").classList.add("wide"); // second div gets a horizontal scrollbar
    document.getElementById("both").classList.add("wide"); // third div gets both
    document.getElementById("both").classList.add("tall"); // vertical and horizontal scrollbars
    document.getElementById("corner").classList.add("resizeWidget"); // bottom div gets a resize corner but no scrollbars
    if (window.testRunner) {
        document.getElementById("layerTree").innerText = internals.layerTreeAsText(document);
        testRunner.notifyDone();
    }
}

if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}

runAfterLayoutAndPaint(finishTest);
</script>
chromium/third_party/blink/web_tests/compositing/overflow/content-gains-scrollbars.html
