<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
<html>
<head>
    <meta name="viewport" content="initial-scale=0.5">
    <style>
        html, body {
            margin: 0;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 0.5;
            background-color: purple;
        }

        .tappable-overlay {
            cursor: pointer;
        }

        .spacer {
            height: 5000px;
        }

        #fixed-overlay {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.3);
        }
    </style>
    <script src="../resources/ui-helper.js"></script>
</head>
<body>
<div class="tappable-overlay overlay"></div>
<div class="spacer">
    <div id="dynamic" class="overlay"></div>
</div>
<div id="fixed-overlay"></div>

<pre id="results"></pre>
<script>
document.body.addEventListener("click", function(e) {
    console.log(e, "event delegation");
});

if (window.testRunner) {
    testRunner.waitUntilDone();
    testRunner.dumpAsText();
}

window.onload = async function () {
    await UIHelper.renderingUpdate();
    let dynamicallySizedOverlay = document.querySelector("#dynamic");
    dynamicallySizedOverlay.style.height = dynamicallySizedOverlay.parentElement.offsetHeight + "px";
    await UIHelper.renderingUpdate();

    if (window.internals)
       results.textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_EVENT_REGION | internals.LAYER_TREE_INCLUDES_ROOT_LAYER_PROPERTIES);
    if (window.testRunner)
        testRunner.notifyDone();
};
</script>
</body>
</html>
