<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            box-sizing: border-box;
        }
        
        .container {
            transform: translate3d(200px, 0px, 0px);
            border: 2px solid black;
            width: 200px;
            height: 300px;
        }

        .projecting {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 100%;
            background-color: silver;
        }
        
        .projecting.left {
            transform: translate3d(-102%, 0, 0);
        }

        .projecting.right {
            transform: translate3d(202%, 0, 0);
        }
        
        .tiling-trigger {
            position: absolute;
            left: 0;
            top: 2600px;
        }
    </style>
    <script>
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }

        window.addEventListener('load', () => {
            setTimeout(() => {
                document.getElementById('layers').innerText = "Testing..."; // Trigger a first flush.
                setTimeout(() => {
                    if (window.internals)
                        document.getElementById('layers').innerText = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_BACKING_STORE_ATTACHED);
                    if (window.testRunner)
                        testRunner.notifyDone();
                }, 0);
            }, 0);
        }, false);
    </script>
</head>
<body>
    <div class="container">
        <div class="tiling-trigger">trigger</div>
        <div class="projecting left">
           This should be visible
        </nav>
        <div class="projecting right">
           This should be visible
        </nav>
    </div>
</div>
<pre id="layers"></pre>
</body>
</html>