| <!doctype html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test.js"></script> |
| <script src="resources/shadow-dom.js"></script> |
| </head> |
| <body> |
| <div id='sandbox'></div> |
| <pre id='console'></pre> |
| </body> |
| <script> |
| description('Test for issue 247275: shadow tree styles selects shadow host.'); |
| |
| var sandbox = document.getElementById('sandbox'); |
| |
| function borderColorOf(selector) { |
| return window.getComputedStyle(getNodeInComposedTree(selector)).borderColor; |
| } |
| |
| function shouldHaveBorderColor(selector, color) { |
| shouldBeEqualToString('borderColorOf(\'' + selector + '\')', color); |
| } |
| |
| function shouldNotHaveBorderColor(selector, color) { |
| var text = 'borderColorOf(\'' + selector + '\')'; |
| var unevaledString = '"' + color.replace(/\\/g, "\\\\").replace(/"/g, "\"") + '"'; |
| shouldNotBe(text, unevaledString); |
| } |
| |
| function cleanUp() { |
| sandbox.innerHTML = ''; |
| } |
| |
| debug('Test that tag selectors in a shadow tree cannot match without :host.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('div { border: 1px solid green; }')), |
| createDOM('content', {})), |
| createDOM('div', {'id': 'host-child'}, |
| document.createTextNode('Hello, Host!')))); |
| |
| shouldHaveBorderColor('host', 'rgb(0, 0, 0)'); |
| shouldHaveBorderColor('host-child', 'rgb(0, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug('Test that * in a shadow tree cannot match without :host.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('* { border: 1px solid green; }')), |
| createDOM('content', {})), |
| createDOM('div', {'id': 'host-child'}, |
| document.createTextNode('Hello, Host!')))); |
| |
| shouldNotHaveBorderColor('host', 'rgb(0, 128, 0)'); |
| shouldHaveBorderColor('host-child', 'rgb(0, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug('Test that :not(*) in a shadow tree cannot match without :host.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':not(*) { border: 1px solid green; }')), |
| createDOM('content', {})), |
| createDOM('div', {'id': 'host-child'}, |
| document.createTextNode('Hello, Host!')))); |
| |
| shouldHaveBorderColor('host', 'rgb(0, 0, 0)'); |
| shouldHaveBorderColor('host-child', 'rgb(0, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug('Test that :first-child in a shadow tree cannot match without :host.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':first-child { border: 1px solid green; }')), |
| createDOM('content', {})), |
| createDOM('div', {'id': 'host-child'}, |
| document.createTextNode('Hello, Host!')))); |
| |
| shouldHaveBorderColor('host', 'rgb(0, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug('Test that styles in a containing treescope wins if specificities are the same.'); |
| |
| sandbox.appendChild( |
| createDOM('style', {}, |
| document.createTextNode(':last-child { border: 1px solid green; }'))); |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host { border: 1px solid red; }')), |
| createDOM('content', {})), |
| createDOM('div', {'id': 'host-child'}, |
| document.createTextNode('Hello, Host!')))); |
| |
| shouldHaveBorderColor('host', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| debug('Test that rules which has higher specificity win.'); |
| |
| sandbox.appendChild( |
| createDOM('style', {}, |
| document.createTextNode('div { border: 1px solid red; }'))); |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host { border: 1px solid green; }')), |
| createDOM('content', {})), |
| createDOM('div', {'id': 'host-child'}, |
| document.createTextNode('Hello, Host!')))); |
| |
| shouldHaveBorderColor('host', 'rgb(255, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug('Test that child selector with a shadow host and children of a shadow root of the shadow host works.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'divA'}, |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('div { border: 1px solid green; } div > div { border: 1px solid red; }')), |
| createDOM('div', {'id': 'divC'}), |
| createDOM('content')), |
| createDOM('div', {'id': 'host-child'}, |
| document.createTextNode('Hello, HostB!'))), |
| createDOM('div', {'id': 'divA-child'}, |
| document.createTextNode('Hello, HostA!')))); |
| |
| shouldHaveBorderColor('divA', 'rgb(0, 0, 0)'); |
| shouldHaveBorderColor('divA-child', 'rgb(0, 0, 0)'); |
| shouldHaveBorderColor('host', 'rgb(0, 0, 0)'); |
| shouldHaveBorderColor('host/divC', 'rgb(0, 128, 0)'); |
| shouldHaveBorderColor('host-child', 'rgb(0, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug('Test that descendant selector with a shadow host and descendants of a shadow root of the shadow host works.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'divA'}, |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode('div { border: 1px solid green; } div span { border: 1px solid red; }')), |
| createDOM('div', {'id': 'divC'}, |
| createDOM('span', {'id': 'spanD'})), |
| createDOM('content')), |
| createDOM('div', {'id': 'host-child'}, |
| document.createTextNode('Hello, HostB!'))), |
| createDOM('div', {'id': 'divA-child'}, |
| document.createTextNode('Hello, HostA!')))); |
| |
| shouldHaveBorderColor('host/spanD', 'rgb(255, 0, 0)'); |
| |
| cleanUp(); |
| |
| debug('Test the case where there are no styles in a contanining treescope.'); |
| |
| sandbox.appendChild( |
| createDOM('style', {}, |
| document.createTextNode('div { border: 1px solid red; }'))); |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('div', {'id': 'target'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host { border: 1px solid green; }')), |
| createDOM('content', {})), |
| createDOM('div', {'id': 'host-child'}, |
| document.createTextNode('Hello, Host!')))))); |
| |
| shouldHaveBorderColor('host/target', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| |
| debug('Test that style sharing is disabled when styles in shadow trees would match shadow hosts.'); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'hostA'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host { border: 1px solid red; }')), |
| createDOM('content', {})), |
| createDOM('div', {}))); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'hostB'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode(':host { border: 1px solid green; }')), |
| createDOM('content', {})), |
| createDOM('div', {}))); |
| |
| // for checking style sharing |
| shouldHaveBorderColor('hostA', 'rgb(255, 0, 0)'); |
| shouldHaveBorderColor('hostB', 'rgb(0, 128, 0)'); |
| |
| cleanUp(); |
| </script> |
| </html> |
