60 lines
1.8 KiB
HTML
60 lines
1.8 KiB
HTML
<!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>
|