| <!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: green;"><div style="background: red;">FAIL</div></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><div slot="foo" style="background: red;">FAIL</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 { |
| var shadow1 = document.getElementById('host1').attachShadow({mode: 'open'}); |
| shadow1.innerHTML = '<slot></slot>'; |
| |
| var shadow2 = document.getElementById('host2').attachShadow({mode: 'open'}); |
| shadow2.innerHTML = '<slot name="foo"></slot>'; |
| |
| var shadow3 = document.getElementById('host3').attachShadow({mode: 'open'}); |
| shadow3.innerHTML = '<slot name="foo"></slot>'; |
| |
| var shadow4 = document.getElementById('host4').attachShadow({mode: 'open'}); |
| shadow4.innerHTML = 'FAIL'; |
| |
| forceLayout(); |
| |
| shadow1.removeChild(shadow1.firstChild); |
| forceLayout(); |
| |
| shadow2.firstChild.name = 'bar'; |
| forceLayout(); |
| |
| shadow3.firstChild.removeAttribute("name"); |
| forceLayout(); |
| |
| shadow4.insertBefore(document.createElement('slot'), shadow4.firstChild); |
| |
| } catch (exception) { |
| document.body.appendChild(document.createTextNode(exception)); |
| } |
| |
| </script> |
| </body> |
| </html> |
