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