overflow-scrollbar-gutter-layers.html

<!DOCTYPE html>
<style>
  body {
    display: flex;
    flex-wrap: wrap;
  }

  .container {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: green;
    border: solid;
  }

  .content {
    width: 100%;
    height: 105px;
    background-color: orange;
  }

  /* overflow */
  .container.visible { overflow:   visible; }
  .container.hidden  { overflow-y: hidden;  }
  .container.clip    { overflow:   clip;  }

  /* scrollbar-gutter */
  .stable            { scrollbar-gutter: stable; }
  .stable_mirror     { scrollbar-gutter: stable both-edges; }

</style>
<pre id="layerTree"></pre>
<!-- These elements should not create new layers. -->
<div class="container visible stable">
  <div class="content"></div>
</div>
<div class="container visible stable_mirror">
  <div class="content"></div>
</div>
<div class="container hidden stable">
  <div class="content"></div>
</div>
<div class="container hidden stable_mirror">
  <div class="content"></div>
</div>
<div class="container clip stable">
  <div class="content"></div>
</div>
<div class="container clip stable_mirror">
  <div class="content"></div>
</div>
<script>
  if (window.testRunner) {
    testRunner.dumpAsText();
    document.getElementById("layerTree").innerText = internals.layerTreeAsText(document);
  }
</script>
chromium/third_party/blink/web_tests/compositing/overflow/overflow-scrollbar-gutter-layers.html
