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