| <!DOCTYPE html> |
| <script src="../../../resources/js-test.js"></script> |
| <script src="resources/shadow-dom.js"></script> |
| <style> |
| :host { |
| background-color: red; |
| } |
| </style> |
| <body class='mytheme'> |
| <div> |
| <div id='sandbox'></div> |
| </div> |
| <pre id='console'></pre> |
| <script> |
| description('Test whether :host matches a shadow host correctly.'); |
| |
| var sandbox = document.getElementById('sandbox'); |
| |
| function cleanUp() { |
| sandbox.innerHTML = ''; |
| } |
| |
| debug(':host out of shadow tree should not match any shadow hosts.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug(':host with * should not match any shadow hosts.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('*:host { background-color: green; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug(':host with tag selector should not match any shadow hosts.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('div:host { background-color: green; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug(':host with class selector should not match any shadow hosts.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host', 'class': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('.host:host { background-color: green; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug(':host with id selector should not match any shadow hosts.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('#host:host { background-color: green; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug(':host with attribute selector should not match any shadow hosts.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host', 'foo': 'bar'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('[foo=bar]:host { background-color: green; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug(':host in a shadow tree should match its shadow host.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host', 'class': 'foobar'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host(div.foobar) { background-color: green; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| debug(':host with :host-context in a shadow tree should match its shadow host.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host', 'class': 'foobar'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host(:host-context(body.mytheme)) { background-color: green; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| debug(':host takes simple selectors and matches when one of the simple selectors matches.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host(body:not(.mytheme), span, div#host) { background-color: green; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| debug(':host matches a shadow host in just a nested shadow tree, not all enclosing shadow trees.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host1'}, |
| createShadowRoot( |
| createDOM('div', {'id': 'host2'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host { background-color: green; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))))); |
| |
| backgroundColorShouldBe('host1', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host1/host2', 'rgb(0, 128, 0)'); |
| |
| debug(':host is updated when its matched host changes className or id.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host', 'class': 'sometheme' }, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host(.sometheme) { background-color: green; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
| document.getElementById('host').className = 'mytheme'; |
| backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| |
| cleanUp(); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host', 'class': 'sometheme'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host(div#host.sometheme) { background-color: green; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
| var host = document.getElementById('host'); |
| host.id = 'host2'; |
| backgroundColorShouldBe('host2', 'rgba(0, 0, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug('Compare :host with :host.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host(div:host, div#sandbox) { background-color: green; }')), |
| createDOM('style', {}, |
| document.createTextNode(':host(body.mytheme) { background-color: red; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| // :host(div:host, div#sandbox) wins, because div#sandbox > body.mytheme. |
| backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host', 'class': 'foobar' }, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host(div:host, div#nomatch) { background-color: green; }')), |
| createDOM('style', {}, |
| document.createTextNode(':host(div.foobar) { background-color: red; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| // :host(div.foobar) wins, because div:host < div.foobar. |
| backgroundColorShouldBe('host', 'rgb(255, 0, 0)'); |
| |
| cleanUp(); |
| |
| // Test for specificiy of ":host(...) > ...". |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host', 'class': 'foobar' }, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host(div:host, div#host:host) > div { background-color: green; }')), |
| createDOM('style', {}, |
| document.createTextNode(':host(div.foobar) > div { background-color: red; }')), |
| createDOM('div', {'id': 'target'}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host', 'class': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host(div:host, div#host.host:host) > div { background-color: green; }')), |
| createDOM('style', {}, |
| document.createTextNode(':host(div) > div#target { background-color: red; }')), |
| createDOM('div', {'id': 'target'}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host', 'class': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host(div:host(div:host(div:host(div:host)))) > div { background-color: green; }')), |
| createDOM('style', {}, |
| document.createTextNode(':host(div) > div { background-color: red; }')), |
| createDOM('div', {'id': 'target'}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| // :host.foo {} should never match (whereas :host(.foo) {} should). |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host', 'class': 'foo'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host.foo { background-color: green; }'))))); |
| |
| backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| |
| cleanUp(); |
| |
| </script> |
| </body> |
