72 lines
2.0 KiB
HTML
72 lines
2.0 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"><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>
|