scrollbar-layer-placement.html | Explore in Territory

<!DOCTYPE html>
<!--
Scrollbar layer geometry stress test.

A is a stacking context; its scrollbars are not re-parented.

B gets re-parented, but isn't clipped by any ancestor.

C and D are re-parented, and clipped by two non-stacking ancestors.

One of D's clipping ancestors is positioned, triggering the
"compositingStackingContext != compositingContainer" path
in CLM::updateOverflowControlsHostLayerGeometry.

The scrollers, stacking contexts, and outer clipping ancestors
all have borders (creating non-zero clip offsets) and box shadows
(causing main GraphicsLayer to be offset from its LayoutObject),
with varying thicknesses.
-->
<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;
  }
  .C, .D { top: 312px; }
  .B, .D { left: 370px; }
  .clipper {
    overflow: hidden;
    margin-left: 11px;
    margin-top: 11px;
    width: 272px;
    height: 180px;
    border: 3px solid #aaa;
    box-shadow: 0 0 0 7px #afa;
  }
  .D .clipper {
    position: relative;
  }
  .clipper2 {
    overflow: hidden;
    margin-left: 3px;
    margin-top: 3px;
    width: 260px;
    height: 100px;
    border: 3px solid #fac;
  }
  .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;
  }
  .clipper .scroller {
    margin-left: 15px;
    margin-top: 15px;
  }
  .A .scroller {
    position: relative;
    z-index: 0;
  }
  .content {
    position: relative;
    height: 200px;
    margin: 12px;
    padding: 6px;
    background-color: #ddd;
  }
</style>
<div class="outer A">
<div class="scroller">
<div class="content"></div>
</div>
</div>
<div class="outer B">
<div class="scroller">
<div class="content"></div>
</div>
</div>
<div class="outer C">
<div class="clipper">
<div class="clipper2">
<div class="scroller">
<div class="content"></div>
</div>
</div>
</div>
</div>
<div class="outer D">
<div class="clipper">
<div class="clipper2">
<div class="scroller">
<div class="content"></div>
</div>
</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.html
