nested-overlay-scrollbars.html | Explore in Territory

<!DOCTYPE HTML>
<script>
if (window.internals) {
    internals.useMockOverlayScrollbars();
    internals.settings.setPreferCompositingToLCDTextEnabled(true);
}
</script>
<style>
#outer {
    position: absolute;
    z-index: 0;
    width: 400px;
    height: 400px;
    border: 2px solid black;
    overflow: scroll;
}

#inner {
    top: 500px;
    width: 200px;
    height: 200px;
    border: 2px solid black;
    overflow-y: scroll;
    position: absolute;
}

#scrolled {
    width: 2000px;
    height: 9000px;
    color: papayawhip;
}

#grey {
    position: absolute;
    background: grey;
    width: 100px; 
    height: 800px;
}

#spacer {
    width: 5000px;
    height: 1000px;
    position: absolute;
    top: 2000px;
}
</style>
<script>
if (window.testRunner)
    testRunner.dumpAsTextWithPixelResults();

onload = function() {
    document.getElementById("outer").scrollTop = 600;
    if (window.internals && window.testRunner)
        testRunner.setCustomTextOutput(internals.layerTreeAsText(document));
};
</script>
<div id="outer">
  <div id="inner">
    <div id="scrolled">
    <div id="grey"></div>
  </div>
  <div id="spacer"></div>
</div>

chromium/third_party/blink/web_tests/compositing/scrollbars/nested-overlay-scrollbars.html