fixed-pos-inside-composited-intermediate-layer.html

<!DOCTYPE html>
<html>

<head>
<script src="../resources/text-based-repaint.js"></script>
<style>

.compositedBehind {
  width: 500px;
  height: 500px;
  will-change: transform;
  background-color: cyan;
}

.containerOverlapsComposited {
  position: absolute;
  z-index: 2; /* Creates a stacking context so that the fixed-pos layer is contained instead of a sibling */
  top: 20px;
  left: 20px;
  width: 100px;
  height: 30000px;
  background-color: green;
}

.fixed {
  position: fixed;
  top: 45px;
  left: 45px;
  background-color: lime;
  width: 50px;
  height: 50px;
}

</style>

<script>
        function repaintTest() {
             window.scrollTo(0, 100);
        }
</script>

</head>



<body onload="runRepaintAndPixelTest()">
  <!--
       Among other duplicate bugs: https://code.google.com/p/chromium/issues/detail?id=128375
       A non-composited fixed-position element can get grouped into a composited container.
       In this case, repaint invalidations were incorrectly going to the LayoutView instead
       of the composited container.  The incorrect result was that the fixed-position element
       never repainted, and it appeared to scroll along with the composited container.
    -->
  <div class="compositedBehind"> </div>

  <div class="containerOverlapsComposited">
    <div class="fixed"></div>
  </div>
</body>

</html>

chromium/third_party/blink/web_tests/paint/invalidation/compositing/fixed-pos-inside-composited-intermediate-layer.html