<!DOCTYPE html>
<html>
<body>
<p>Test passes if you see a single 100px by 100px green box below.</p> 
<my-host id="host1" style="background: green;"><span>FAIL</span></my-host>
<my-host id="host2" style="background: red;"></my-host>
<my-host id="host3" style="background: green;">FAIL</my-host>
<my-host id="host4" style="background: green;">FAIL</my-host>
<style>

my-host {
    display: block;
    width: 100px;
    height: 25px;
    overflow: hidden;
    font-size: 30px;
}

</style>
<script>

function forceLayout() {
    if (window.internals)
        internals.updateLayoutIgnorePendingStylesheetsAndRunPostLayoutTasks();
    else
        document.querySelector('p').getBoundingClientRect();
}

try {
    var host1 = document.getElementById('host1');
    host1.attachShadow({mode: 'open'}).innerHTML = '<slot></slot>';

    var host2 = document.getElementById('host2');
    host2.attachShadow({mode: 'open'}).innerHTML = '<slot></slot>FAIL';

    var host3 = document.getElementById('host3');
    host3.attachShadow({mode: 'open'}).innerHTML = '<slot></slot>';

    var host4 = document.getElementById('host4');
    host4.attachShadow({mode: 'open'}).innerHTML = '<slot></slot>';

    forceLayout();

    host1.removeChild(host1.firstChild);

    forceLayout();

    var greenChild = document.createElement('div');
    greenChild.style.width = '100%';
    greenChild.style.height = '100%';
    greenChild.style.backgroundColor = 'green';
    host2.appendChild(greenChild);

    forceLayout();

    host3.removeChild(host3.firstChild);

    forceLayout();

    host4.insertBefore(document.createTextNode('________'), host4.firstChild);

} catch (exception) {
    document.body.appendChild(document.createTextNode(exception));
}

</script>
</body>
</html>