<!DOCTYPE html>
<html>
<style>
    body { margin: 0; }
    iframe {
        width: 300px;
        height: 200px;
    }
    #overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        z-index: 10;
        opacity: 0.8;
        will-change: opacity;

        background-color: #333;
    }
    #nested {
        will-change: transform;
    }
    #faded {
        width: 200px;
        height: 200px;

        will-change: opacity;
        opacity: 0;
    }

</style>
<script src="../resources/ui-helper.js"></script>
<body>
<section id="test">
    <div>
        <button>button</button>
    </div>
    <iframe></iframe>
    <div id="overlay">
        <a href="#">link</a>
        <div id="nested">layered content</div>
    </div>
    <div id="faded">
        <a href="#">Faded link</a>
    </div>
</div>

</section>

<pre id="results"></pre>
<script>
if (window.testRunner) {
    testRunner.waitUntilDone();
    testRunner.dumpAsText();
}

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

    await UIHelper.animationFrame();
    document.querySelector("iframe").srcdoc = "<div style='cursor:pointer;width:100%;height:200px'; onclick='click()'>tappable</div>";

    await UIHelper.ensureStablePresentationUpdate();
    results.textContent = await UIHelper.getCALayerTree();
    document.getElementById('test').remove();

    testRunner.notifyDone();
};
</script>
</body>
</html>

