LayoutTests/fast/shadow-dom/shadow-layout-after-attach-shadow.html - WebKit - Git at Google

 <!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>
	<!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>