fixed-position-out-of-view-with-backdrop-filter.html

<!DOCTYPE html>

<html>
<head>
  <style>
    .fixed {
      position: fixed;
      width: 10px;
      height: 10px;
      backdrop-filter: grayscale(100%);
    }
  </style>

  <script type="text/javascript">
    if (window.internals)
      internals.settings.setPreferCompositingToLCDTextEnabled(true);

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

      window.addEventListener("load", function() {
        document.getElementById("layertree").innerText = internals.layerTreeAsText(document);
      }, false);
    }
  </script>
</head>

<body>
  <div style="height: 1000px">
    <pre id="layertree"></pre>
  </div>

  <!-- Neither of the following elements gets its own layer. -->
  <div class="fixed" style="z-index: -1"></div>
  <div class="fixed" style="z-index: -1; top: -100px"></div>
  <div class="fixed" style="z-index: -1; top: 0px; left: 1000px"></div>

  <!-- This element gets its own layer because it intersects with the viewport. -->
  <div class="fixed" style="z-index: -1; top: 0px; left: 0px"></div>
</body>
</html>

chromium/third_party/blink/web_tests/compositing/layer-creation/fixed-position-out-of-view-with-backdrop-filter.html