<!DOCTYPE html>
<html>
<head>
<style>
.layerized {
    transform: translateZ(0);
    width: 100px;
    height: 5000px;
    background-color: silver;
}

#out {
    position: absolute;
}
</style>
<script>
if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}

window.onload = function() {
    if (!window.testRunner)
        return;

    let beforeScrollLayers = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_TILE_CACHES);
    
    requestAnimationFrame(() => {
        window.scrollTo(0, 3000);

        let uiScript = `(function() {
            uiController.doAfterNextStablePresentationUpdate(function() {
                uiController.uiScriptComplete();
            });
        })()`
        
        testRunner.runUIScript(uiScript, () => {
            let afterLayers = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_TILE_CACHES);
            let out = document.getElementById('out');
            out.textContent = `Before\n${beforeScrollLayers}\n\nAfter\n${afterLayers}`
            testRunner.notifyDone();
        });
    });
};
</script>
</head>
<body>
<pre id="out"></pre>
    <div class="layerized">Tall tiled layer</div>
</body>
</html>