<!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: red;">FAIL</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></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 {
    forceLayout();

    var shadow1 = document.getElementById('host1').attachShadow({mode: 'open'});
    shadow1.innerHTML = '<div style="width: 100%; height: 100%; background: green;"></div>';

    var shadow2 = document.getElementById('host2').attachShadow({mode: 'open'});

    var shadow3 = document.getElementById('host3').attachShadow({mode: 'open'});
    shadow3.appendChild(document.createElement('slot'));

    var shadow4 = document.getElementById('host4').attachShadow({mode: 'open'});
    shadow4.innerHTML = '<div style="width: 100%; height: 100%; background: red;">'
        + '<div style="width: 100%; height: 100%; background: red;"></div><slot slot="foo"></slot></div>';

    var shadow5 = shadow4.firstChild.attachShadow({mode: 'closed'});
    var innerSlot = document.createElement('slot');
    innerSlot.name = 'foo';
    shadow5.appendChild(innerSlot);

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

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