scrolling-background-with-negative-z-child.html

<!doctype html>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<style>
#container {
  overflow: scroll;
  width: 400px;
  height: 300px;
  background: linear-gradient(black, white);
  background-attachment: local;
  position: relative;
  z-index: 2;
  will-change: transform;
}
#compositedChild {
  height: 1000px;
  width: 10px;
  will-change: transform;
  z-index: -1;
  position: absolute;
}
</style>
<div id="container">
  <div id="compositedChild"></div>
</div>
<script>
  runAfterLayoutAndPaint(function() {
    document.getElementById('container').scrollTop = 1000;
  }, true);
</script>

chromium/third_party/blink/web_tests/paint/background/scrolling-background-with-negative-z-child.html