<!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 style="background: green;"></div><div slot="foo" style="background: red;">FAIL</div></my-host>
<my-host id="host4" style="background: red;"><div style="background: green;"></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 shadow1 = document.getElementById('host1').attachShadow({mode: 'open'});
    shadow1.innerHTML = '<slot></slot>';

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

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

    var shadow4 = document.getElementById('host4').attachShadow({mode: 'open'});
    shadow4.innerHTML = 'FAIL';

    forceLayout();

    shadow1.removeChild(shadow1.firstChild);
    forceLayout();

    shadow2.firstChild.name = 'bar';
    forceLayout();

    shadow3.firstChild.removeAttribute("name");
    forceLayout();

    shadow4.insertBefore(document.createElement('slot'), shadow4.firstChild);

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

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