| <!doctype html> |
| <script src="../../resources/js-test.js"></script> |
| <script src="../../fast/dom/shadow/resources/shadow-dom.js"></script> |
| <style id="style1"> |
| </style> |
| <body></body> |
| <script> |
| function prepareShadowTree(hostId, mode1, mode2, div1, div2, div3) { |
| var parent = document.body; |
| parent.appendChild( |
| createDOM('div', {'id': hostId}, |
| attachShadow({'mode': mode1}, |
| createDOM('div', {'id': div1}, |
| attachShadow({'mode': mode2}, |
| createDOM('div', {'id': div2})), |
| createDOM('div', {'id': div3}))))); |
| } |
| |
| var results; |
| var expected; |
| var node; |
| function queryResultsShouldBe(host, query, expectedArgument) { |
| results = host.querySelectorAll(query); |
| expected = expectedArgument; |
| shouldBe('results.length', '' + expected.length); |
| for (var i = 0; i < expected.length; ++i) { |
| node = results[i]; |
| shouldBeEqualToString.bind(this)('node.id', expected[i]); |
| } |
| } |
| |
| prepareShadowTree('host_open_open', 'open', 'open', 'div1', 'div2', 'div1b'); |
| prepareShadowTree('host_open_closed', 'open', 'closed', 'div3', 'div4', 'div3b'); |
| prepareShadowTree('host_closed_open', 'closed', 'open', 'div5', 'div6', 'div5b'); |
| prepareShadowTree('host_closed_closed', 'closed', 'closed', 'div7', 'div8', 'div7b'); |
| |
| debug('(1/6) /deep/ style rule on top-level document.'); |
| var styleElement = document.getElementById('style1'); |
| styleElement.textContent = 'div /deep/ div { background-color: blue; }'; |
| |
| backgroundColorShouldBe('host_open_open', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_open/div1/div2', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_open/div1b', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_closed', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_closed/div3b', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_open', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_closed', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)'); |
| |
| debug('(2/6) ::shadow style rule on top-level document.'); |
| styleElement.innerHTML = 'div::shadow div { background-color: green; }'; |
| |
| backgroundColorShouldBe('host_open_open', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_open/div1/div2', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_open/div1b', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_closed', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_closed/div3b', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_open', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_closed', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)'); |
| |
| debug('(3/6) /deep/ style on shadow tree.'); |
| styleElement.innerHTML = ''; |
| var div1 = getNodeInComposedTree('host_open_open/div1'); |
| div1.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>'); |
| backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_open/div1/div2', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_open/div1b', 'rgb(0, 0, 255)'); |
| div1.removeChild(div1.firstElementChild); |
| |
| var div3 = getNodeInComposedTree('host_open_closed/div3'); |
| div3.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>'); |
| backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_closed/div3b', 'rgb(0, 0, 255)'); |
| div3.removeChild(div3.firstElementChild); |
| |
| var div5 = getNodeInComposedTree('host_closed_open/div5'); |
| div5.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>'); |
| backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_open/div5b', 'rgb(0, 0, 255)'); |
| div5.removeChild(div5.firstElementChild); |
| |
| var div7 = getNodeInComposedTree('host_closed_closed/div7'); |
| div7.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>'); |
| backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_closed/div7b', 'rgb(0, 0, 255)'); |
| div7.removeChild(div7.firstElementChild); |
| |
| debug('(4/6) ::shadow style on shadow tree.'); |
| div1.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color: green; }</style>'); |
| backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_open/div1/div2', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_open/div1b', 'rgba(0, 0, 0, 0)'); |
| div1.removeChild(div1.firstElementChild); |
| |
| div3.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color: green; }</style>'); |
| backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_open_closed/div3b', 'rgba(0, 0, 0, 0)'); |
| div3.removeChild(div3.firstElementChild); |
| |
| div5.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color: green; }</style>'); |
| backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)'); |
| div5.removeChild(div5.firstElementChild); |
| |
| div7.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color: green; }</style>'); |
| backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)'); |
| backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)'); |
| div7.removeChild(div7.firstElementChild); |
| |
| debug('(5/6) /deep/ selector in querySelectorAll()'); |
| shouldBe('host_open_open.querySelectorAll("div /deep/ div").length', '0'); |
| shouldBe('host_open_closed.querySelectorAll("div /deep/ div").length', '0'); |
| shouldBe('host_closed_open.querySelectorAll("div /deep/ div").length', '0'); |
| shouldBe('host_closed_closed.querySelectorAll("div /deep/ div").length', '0'); |
| |
| queryResultsShouldBe(div1, 'div /deep/ div', ['div1b']); |
| queryResultsShouldBe(div3, 'div /deep/ div', ['div3b']); |
| queryResultsShouldBe(div5, 'div /deep/ div', ['div5b']); |
| queryResultsShouldBe(div7, 'div /deep/ div', ['div7b']); |
| |
| debug('(6/6) ::shadow selector in querySelectorAll()'); |
| shouldBe('host_open_open.querySelectorAll("div::shadow div").length', '0'); |
| shouldBe('host_open_closed.querySelectorAll("div::shadow div").length', '0'); |
| shouldBe('host_closed_open.querySelectorAll("div::shadow div").length', '0'); |
| shouldBe('host_closed_closed.querySelectorAll("div::shadow div").length', '0'); |
| |
| shouldBe('div1.querySelectorAll("div::shadow div").length', '0'); |
| shouldBe('div3.querySelectorAll("div::shadow div").length', '0'); |
| shouldBe('div5.querySelectorAll("div::shadow div").length', '0'); |
| shouldBe('div7.querySelectorAll("div::shadow div").length', '0'); |
| </script> |
