| <!doctype html> |
| <html> |
| <head> |
| <script src="resources/shadow-dom.js"></script> |
| <script src="../../../resources/js-test.js"></script> |
| </head> |
| <body class="bodyClass"> |
| <div id="sandbox"></div> |
| <pre id="console"></pre> |
| </body> |
| <script> |
| description("Test for ::content with ::shadow and :host."); |
| |
| var sandbox = document.getElementById('sandbox'); |
| |
| function cleanUp() |
| { |
| sandbox.innerHTML = ''; |
| } |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host1'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode( |
| ':host(#host1)::shadow #content1::content > .content { color: green; }')), |
| createDOM('div', {}, |
| createDOM('div', {'id': 'host2'}, |
| createShadowRoot( |
| createDOM('content', {'id': 'content2'})), |
| createDOM('div', {'id': 'parentOfContent1'}, |
| createDOM('content', {'id': 'content1'}))))), |
| createDOM('div', {'class': 'content'}, |
| document.createTextNode('content')))); |
| |
| shouldBe('window.getComputedStyle(document.querySelector("#host1 > .content")).color', '"rgb(0, 128, 0)"'); |
| |
| cleanUp(); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host1'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode( |
| '#host2::shadow #content2::content > #parentOfContent1 > #content1::content > .content { color: green; }')), |
| createDOM('div', {}, |
| createDOM('div', {'id': 'host2'}, |
| createShadowRoot( |
| createDOM('content', {'id': 'content2'})), |
| createDOM('div', {'id': 'parentOfContent1'}, |
| createDOM('content', {'id': 'content1'}))))), |
| createDOM('div', {'class': 'content'}, |
| document.createTextNode('content')))); |
| |
| shouldBe('window.getComputedStyle(document.querySelector("#host1 > .content")).color', '"rgb(0, 128, 0)"'); |
| |
| cleanUp(); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host1'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode( |
| ':host::shadow #content2::content > #shadow1::content > #content1::content > .content { color: red; }')), |
| createDOM('content', {'id': 'content1'})), |
| createShadowRoot( |
| createDOM('div', {}, |
| createDOM('div', {'id': 'host2'}, |
| createShadowRoot( |
| createDOM('content', {'id': 'content2'})), |
| createDOM('div', {'id': 'parentOfShadow1'}, |
| createDOM('shadow', {'id': 'shadow1'}))))), |
| createDOM('div', {'class': 'content'}, |
| document.createTextNode('content')))); |
| |
| shouldNotBe('window.getComputedStyle(document.querySelector("#host1 > .content")).color', '"rgb(255, 0, 0)"'); |
| |
| cleanUp(); |
| |
| sandbox.appendChild( |
| createDOM('div', {'id': 'host1'}, |
| createShadowRoot( |
| createDOM('style', {}, |
| document.createTextNode( |
| ':host::shadow #content2::content > #parentOfContent1 > #content1::content > .content { color: red; }')), |
| createDOM('div', {}, |
| createDOM('div', {'id': 'host2'}, |
| createShadowRoot( |
| createDOM('content', {'id': 'content2'})), |
| createDOM('div', {'id': 'parentOfContent1'}, |
| createDOM('content', {'id': 'content1'}))))), |
| createDOM('div', {'class': 'content'}, |
| document.createTextNode('content')))); |
| |
| shouldNotBe('window.getComputedStyle(document.querySelector("#host1 > .content")).color', '"rgb(255, 0, 0)"'); |
| |
| cleanUp(); |
| |
| </script> |
| </html> |
