<!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;"><div style="background: red;">FAIL</div></my-host>
<my-host id="host2" style="background: green;"><div slot="foo" style="background: red;">FAIL</div></my-host>
<my-host id="host3" style="background: red;"><div slot="foo" style="background: red;">FAIL</div><div slot="foo" style="background: green;"></div></my-host>
<my-host id="host4" style="background: red;"><div style="background: red;">FAIL</div></my-host>
<style>

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

my-host > div {
    width: 100%;
    height: 100%;
}

</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 name="foo"></slot>';

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

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

    forceLayout();

    host1.removeChild(host1.firstChild);

    forceLayout();

    host2.firstChild.slot = 'bar';

    forceLayout();

    host3.firstChild.slot = null;

    forceLayout();

    var greenBox = document.createElement('div');
    greenBox.style.backgroundColor = 'green';
    host4.insertBefore(greenBox, host4.firstChild);

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

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