| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| .test { | |
| width: 100px; | |
| height: 25px; | |
| background: red; | |
| color: red; | |
| } | |
| #host1, #host2 { | |
| color: green; | |
| } | |
| #host3 div, #host4 div { | |
| width: 50%; | |
| height: 100%; | |
| background: green; | |
| display: inline-block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p>Test passes if you see a single 100px by 100px green box below.</p> | |
| <div id="host1" class="test"></div> | |
| <div id="host2" class="test"></div> | |
| <div id="host3" class="test"><div>text</div></div> | |
| <div id="host4" class="test"><div>text</div></div> | |
| <script> | |
| host1.attachShadow({mode: 'closed'}).innerHTML = `<style> | |
| :host::before, :host::after { | |
| background: green; | |
| width: 50%; | |
| height: 100%; | |
| background: green; | |
| display: inline-block; | |
| content: "test"; | |
| } | |
| </style>`; | |
| host2.attachShadow({mode: 'closed'}).innerHTML = `<style> | |
| :host(.green)::before, :host(.green)::after { | |
| background: green; | |
| width: 50%; | |
| height: 100%; | |
| background: green; | |
| display: inline-block; | |
| content: "test"; | |
| } | |
| </style>`; | |
| getComputedStyle(host2).backgroundColor; | |
| host2.classList.add('green'); | |
| host3.attachShadow({mode: 'closed'}).innerHTML = `<style> | |
| :host { | |
| color: green !important; | |
| } | |
| :host::before { | |
| background: green; | |
| width: 50%; | |
| height: 100%; | |
| background: green; | |
| display: inline-block; | |
| content: "test"; | |
| } | |
| </style><slot></slot>`; | |
| host4.attachShadow({mode: 'closed'}).innerHTML = `<style> | |
| :host(.green) { | |
| color: green !important; | |
| } | |
| :host(.green)::after { | |
| background: green; | |
| width: 50%; | |
| height: 100%; | |
| background: green; | |
| display: inline-block; | |
| content: "test"; | |
| } | |
| </style><slot></slot>`; | |
| getComputedStyle(host4).backgroundColor; | |
| host4.classList.add('green'); | |
| </script> | |
| </body> | |
| </html> |