| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test.js"></script> |
| <script src="resources/shadow-dom.js"></script> |
| <style> |
| :host-context(*) { |
| background-color: red; |
| } |
| </style> |
| </head> |
| <body class='mytheme'> |
| <div> |
| <div id='sandbox'></div> |
| </div> |
| <pre id='console'></pre> |
| <script> |
| description('Test whether :host-context matches a shadow host correctly.'); |
| |
| var sandbox = document.getElementById('sandbox'); |
| |
| function cleanUp() { |
| sandbox.innerHTML = ''; |
| } |
| |
| debug(':host-context 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-context with * should not match any shadow hosts.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('*:host-context(*) { background-color: red; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug(':host-context with tag selector should not match any shadow hosts.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('div:host-context(*) { background-color: red; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug(':host-context with class selector should not match any shadow hosts.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host', 'class': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('.host:host-context(*) { background-color: red; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug(':host-context with id selector should not match any shadow hosts.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('#host:host-context(*) { background-color: red; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug(':host-context 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-context(*) { background-color: red; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug(':host-context in a shadow tree should match its shadow host.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host-context(body.mytheme) { background-color: green; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| debug(':host-context with :host in a shadow tree should match its shadow host.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host-context(div:host) { background-color: green; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| debug('crbug.com/552602 :host-context with non-matching selector with :host should not crash.'); |
| |
| sandbox.appendChild( |
| createDOM('host-element', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host-context(div:host) { background-color: green; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug(':host-context takes simple selectors and matches when one of the simple selectors matches.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'parentOfHost'}, |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host-context(body:not(.mytheme), span, div#parentOfHost) { background-color: green; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello')))))); |
| |
| backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| debug(':host-context 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-context(*) { background-color: green; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))))); |
| |
| backgroundColorShouldBe('host1', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host1/host2', 'rgb(0, 128, 0)'); |
| |
| debug(':host-context matches based on a flat tree.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'parentOfHost'}, |
| createShadowRoot( |
| createDOM('span', {'id': 'spanA'}, |
| createDOM('content', {}))), |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host-context(span#spanA) > div { background-color: green; }')), |
| createDOM('div', {'id': 'target'}, |
| document.createTextNode('Hello')))))); |
| |
| backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| debug(':host-context is updated when its matched ancestor changes className or id.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' }, |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host-context(div#parentOfHost.sometheme) { background-color: green; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello')))))); |
| |
| backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
| document.getElementById('parentOfHost').className = 'mytheme'; |
| backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| |
| cleanUp(); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' }, |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host-context(div#parentOfHost.sometheme) { background-color: green; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello')))))); |
| |
| backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
| var parentOfHost = document.getElementById('parentOfHost'); |
| parentOfHost.id = 'differntIdValue'; |
| backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug('Compare :host-context with :host-context.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host-context(div:host-context(*), div#sandbox) { background-color: green; }')), |
| createDOM('style', {}, |
| document.createTextNode(':host-context(body.mytheme) { background-color: red; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| // :host-context(div:host-context(*), div#sandbox) wins, because div#sandbox > body.mytheme. |
| backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host-context(div:host-context(*), div#nomatch) { background-color: green; }')), |
| createDOM('style', {}, |
| document.createTextNode(':host-context(body.mytheme) { background-color: red; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| // :host-context(body.mytheme) wins, because div:host-context(*) < body.mytheme. |
| backgroundColorShouldBe('host', 'rgb(255, 0, 0)'); |
| |
| cleanUp(); |
| |
| // Test for specificiy of ":host-context(...) > ...". |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host-context(div:host-context(*), div#host:host-context(*)) > div { background-color: green; }')), |
| createDOM('style', {}, |
| document.createTextNode(':host-context(body.mytheme) > 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-context(div:host-context(*), div#host.host:host-context(*)) > div { background-color: green; }')), |
| createDOM('style', {}, |
| document.createTextNode(':host-context(body) > 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-context(div:host-context(div:host-context(div:host-context(div:host-context(*))))) > div { background-color: green; }')), |
| createDOM('style', {}, |
| document.createTextNode(':host-context(div) > div { background-color: red; }')), |
| createDOM('div', {'id': 'target'}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| debug(':host-context without functional notation should not match any shadow hosts.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host-context { background-color: red; }')), |
| createDOM('div', {}, |
| document.createTextNode('Hello'))))); |
| |
| backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| |
| cleanUp(); |
| |
| </script> |
| </body> |
