scrollbar-layer-placement-negative-z-index-child.html

<!DOCTYPE html>
<!--
The scrollbar gets re-parented overflow controls, but has only a negative
z-index child.
-->
<script>
if (window.internals) {
    internals.useMockOverlayScrollbars();
    internals.settings.setPreferCompositingToLCDTextEnabled(true);
}
</script>
<style>
  .outer {
    position: absolute;
    z-index: 0;
    will-change: transform;
    left: 21px;
    top: 21px;
    width: 300px;
    height: 242px;
    box-shadow: 0 0 12px 3px #feb;
    border: 5px solid #eda;
  }

  .scroller {
    overflow: auto;
    margin-left: 36px;
    margin-top: 36px;
    width: 220px;
    height: 160px;
    box-shadow: 0 0 12px 12px #aaf;
    border: 5px solid blue;
    background-color: white;
  }

  .content {
    position: relative;
    z-index: -1;
    height: 200px;
    margin: 12px;
    padding: 6px;
    background-color: #ddd;
  }
</style>
<div class="outer">
  <div class="scroller">
    <div class="content"></div>
  </div>
</div>
<script>
if (window.testRunner) {
    testRunner.dumpAsTextWithPixelResults();
    testRunner.setCustomTextOutput(internals.layerTreeAsText(document));
}
</script>

chromium/third_party/blink/web_tests/compositing/overflow/scrollbar-layer-placement-negative-z-index-child.html