| <!DOCTYPE html> |
| <html> |
| <body> |
| <p>Test passes if you see a single 100px by 100px green box below.</p> |
| <style> |
| |
| #test { |
| width: 100px; |
| height: 100px; |
| background: red; |
| } |
| |
| div[slot=green] { |
| width: 100px; |
| height: 100px; |
| background: green; |
| color: green; |
| } |
| |
| </style> |
| <div id="test"><div slot="green">PASS</div></div> |
| <script> |
| var rootElement = document.getElementById('test'); |
| var root = rootElement.attachShadow({mode:'open'}); |
| root.innerHTML = ` |
| <style> |
| #container { display: none; } |
| #container.visible { display: block; } |
| </style> |
| <div><div id="container"><slot name="green">FAIL</slot></div></div> |
| `; |
| |
| rootElement.getBoundingClientRect(); |
| root.getElementById('container').classList.toggle('visible'); |
| |
| </script> |
| </body> |
| </html> |
