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