surface-over-composited-offscreen.html

<!DOCTYPE html>
<style>
    .composited-box {
        position: absolute;
        left: 0;
        top: 1000px;
        height: 300px;
        width: 300px;
        will-change: transform;
        background-color: green;
    }

    .top-box {
        position: absolute;
        left: 200px;
        top: 1200px;
        height: 300px;
        width: 300px;
        background-color: blue;
        z-index: 1;

    }
</style>
<!--
This test ensures that overlap testing to determine compositing requirements
works correctly for layers outside the main frame's viewport. The blue box
should appear on top of the green box.
-->
<div class="composited-box"></div>
<div class="top-box"></div>
<script>
    if ('internals' in window) {
        window.addEventListener('load', () => {
          // Force a compositing update so it happens while the boxes are off
          // screen.
          internals.forceCompositingUpdate(document);

          // Bring them into view, the z-index order should be correct.
          window.scrollTo(0, 1500);
        });
    }
</script>

chromium/third_party/blink/web_tests/compositing/overflow/surface-over-composited-offscreen.html