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

my-host {
    display: block;
    width: 100px;
    height: 20px;
    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><div style="width: 100%; height: 100%; background-color: green;"></div></slot>';

    var host2 = document.getElementById('host2');
    host2.attachShadow({mode: 'open'}).innerHTML = '<slot name="foo"><div style="width: 100%; height: 100%; background-color: green;"></div></slot>';

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

    forceLayout();

    host1.removeChild(host1.firstChild);
    forceLayout();

    host2.firstChild.slot = 'bar';
    forceLayout();

    var child3 = document.createElement('div');
    child3.style.backgroundColor = 'green';
    host3.appendChild(child3);
    forceLayout();

    var host4 = document.getElementById('host4');
    var child4 = document.createElement('div');
    child4.style.backgroundColor = 'green';
    host4.firstChild.appendChild(child4);

    var host5 = document.getElementById('host5');
    host5.firstChild.removeChild(host5.firstChild.firstChild);

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

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