Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/paint/invalidation/repaint-overlay/layers.html 

<!DOCTYPE html>
<style>
  ::-webkit-scrollbar { display: none }
</style>
<div style="height: 2000px"></div>
<div id="container"
     style="position: absolute; will-change: transform;
            top: 50px; left: 40px;
            width: 100px; height: 100px; background-color: rgba(0, 0, 255, 0.5)">
  <div id="child1"
       style="position: relative; top: 20px; left: 20px;
              width: 10px; height: 10px; background-color: red">
  <div id="scrollable"
       style="overflow: scroll; will-change: transform;
              position: relative; top: 33px; left: 44px;
              width: 300px; height: 300px; border: 1px solid black">
    <div id="transform"
         style="position: relative; will-change: transform;
                top: 77px; left: 88px;
                transform: scale(5) rotate(45deg); transform-origin: 0 0;
                width: 200px; height: 200px; background: yellow">
      <div id="child2"
           style="position: relative; top: 20px; left: 20px;
                  width: 10px; height: 10px; background-color: red">
      </div>
    </div>
  </div>
</div>
<script src="../resources/text-based-repaint.js"></script>
<script>
onload = function() {
  window.scrollTo(0, 20);
  scrollable.scrollTop = 30;
  runRepaintTest();
};
function repaintTest() {
  child1.style.backgroundColor = 'green';
  child2.style.backgroundColor = 'green';
}
</script>