| OLD | NEW |
| (Empty) |
| 1 <!doctype html> | |
| 2 <script src="../resources/js-test.js"></script> | |
| 3 <script src="../fast/dom/shadow/resources/shadow-dom.js"></script> | |
| 4 <style id="style1"> | |
| 5 </style> | |
| 6 <body></body> | |
| 7 <script> | |
| 8 function prepareShadowTree(hostId, mode1, mode2, div1, div2, div3) { | |
| 9 var parent = document.body; | |
| 10 parent.appendChild( | |
| 11 createDOM('div', {'id': hostId}, | |
| 12 attachShadow({'mode': mode1}, | |
| 13 createDOM('div', {'id': div1}, | |
| 14 attachShadow({'mode': mode2}, | |
| 15 createDOM('div', {'id': div2})), | |
| 16 createDOM('div', {'id': div3}))))); | |
| 17 } | |
| 18 | |
| 19 var results; | |
| 20 var expected; | |
| 21 var node; | |
| 22 function queryResultsShouldBe(host, query, expectedArgument) { | |
| 23 results = host.querySelectorAll(query); | |
| 24 expected = expectedArgument; | |
| 25 shouldBe('results.length', '' + expected.length); | |
| 26 for (var i = 0; i < expected.length; ++i) { | |
| 27 node = results[i]; | |
| 28 shouldBeEqualToString.bind(this)('node.id', expected[i]); | |
| 29 } | |
| 30 } | |
| 31 | |
| 32 prepareShadowTree('host_open_open', 'open', 'open', 'div1', 'div2', 'div1b'); | |
| 33 prepareShadowTree('host_open_closed', 'open', 'closed', 'div3', 'div4', 'div3b')
; | |
| 34 prepareShadowTree('host_closed_open', 'closed', 'open', 'div5', 'div6', 'div5b')
; | |
| 35 prepareShadowTree('host_closed_closed', 'closed', 'closed', 'div7', 'div8', 'div
7b'); | |
| 36 | |
| 37 debug('(1/6) /deep/ style rule on top-level document.'); | |
| 38 var styleElement = document.getElementById('style1'); | |
| 39 styleElement.textContent = 'div /deep/ div { background-color: blue; }'; | |
| 40 | |
| 41 backgroundColorShouldBe('host_open_open', 'rgba(0, 0, 0, 0)'); | |
| 42 backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)'); | |
| 43 backgroundColorShouldBe('host_open_open/div1/div2', 'rgba(0, 0, 0, 0)'); | |
| 44 backgroundColorShouldBe('host_open_open/div1b', 'rgba(0, 0, 0, 0)'); | |
| 45 backgroundColorShouldBe('host_open_closed', 'rgba(0, 0, 0, 0)'); | |
| 46 backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)'); | |
| 47 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)'); | |
| 48 backgroundColorShouldBe('host_open_closed/div3b', 'rgba(0, 0, 0, 0)'); | |
| 49 backgroundColorShouldBe('host_closed_open', 'rgba(0, 0, 0, 0)'); | |
| 50 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)'); | |
| 51 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)'); | |
| 52 backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)'); | |
| 53 backgroundColorShouldBe('host_closed_closed', 'rgba(0, 0, 0, 0)'); | |
| 54 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)'); | |
| 55 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)'); | |
| 56 backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)'); | |
| 57 | |
| 58 debug('(2/6) ::shadow style rule on top-level document.'); | |
| 59 styleElement.innerHTML = 'div::shadow div { background-color: green; }'; | |
| 60 | |
| 61 backgroundColorShouldBe('host_open_open', 'rgba(0, 0, 0, 0)'); | |
| 62 backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)'); | |
| 63 backgroundColorShouldBe('host_open_open/div1/div2', 'rgba(0, 0, 0, 0)'); | |
| 64 backgroundColorShouldBe('host_open_open/div1b', 'rgba(0, 0, 0, 0)'); | |
| 65 backgroundColorShouldBe('host_open_closed', 'rgba(0, 0, 0, 0)'); | |
| 66 backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)'); | |
| 67 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)'); | |
| 68 backgroundColorShouldBe('host_open_closed/div3b', 'rgba(0, 0, 0, 0)'); | |
| 69 backgroundColorShouldBe('host_closed_open', 'rgba(0, 0, 0, 0)'); | |
| 70 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)'); | |
| 71 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)'); | |
| 72 backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)'); | |
| 73 backgroundColorShouldBe('host_closed_closed', 'rgba(0, 0, 0, 0)'); | |
| 74 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)'); | |
| 75 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)'); | |
| 76 backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)'); | |
| 77 | |
| 78 debug('(3/6) /deep/ style on shadow tree.'); | |
| 79 styleElement.innerHTML = ''; | |
| 80 var div1 = getNodeInComposedTree('host_open_open/div1'); | |
| 81 div1.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color:
blue; }</style>'); | |
| 82 backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)'); | |
| 83 backgroundColorShouldBe('host_open_open/div1/div2', 'rgba(0, 0, 0, 0)'); | |
| 84 backgroundColorShouldBe('host_open_open/div1b', 'rgb(0, 0, 255)'); | |
| 85 div1.removeChild(div1.firstElementChild); | |
| 86 | |
| 87 var div3 = getNodeInComposedTree('host_open_closed/div3'); | |
| 88 div3.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color:
blue; }</style>'); | |
| 89 backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)'); | |
| 90 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)'); | |
| 91 backgroundColorShouldBe('host_open_closed/div3b', 'rgb(0, 0, 255)'); | |
| 92 div3.removeChild(div3.firstElementChild); | |
| 93 | |
| 94 var div5 = getNodeInComposedTree('host_closed_open/div5'); | |
| 95 div5.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color:
blue; }</style>'); | |
| 96 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)'); | |
| 97 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)'); | |
| 98 backgroundColorShouldBe('host_closed_open/div5b', 'rgb(0, 0, 255)'); | |
| 99 div5.removeChild(div5.firstElementChild); | |
| 100 | |
| 101 var div7 = getNodeInComposedTree('host_closed_closed/div7'); | |
| 102 div7.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color:
blue; }</style>'); | |
| 103 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)'); | |
| 104 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)'); | |
| 105 backgroundColorShouldBe('host_closed_closed/div7b', 'rgb(0, 0, 255)'); | |
| 106 div7.removeChild(div7.firstElementChild); | |
| 107 | |
| 108 debug('(4/6) ::shadow style on shadow tree.'); | |
| 109 div1.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color
: green; }</style>'); | |
| 110 backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)'); | |
| 111 backgroundColorShouldBe('host_open_open/div1/div2', 'rgba(0, 0, 0, 0)'); | |
| 112 backgroundColorShouldBe('host_open_open/div1b', 'rgba(0, 0, 0, 0)'); | |
| 113 div1.removeChild(div1.firstElementChild); | |
| 114 | |
| 115 div3.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color
: green; }</style>'); | |
| 116 backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)'); | |
| 117 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)'); | |
| 118 backgroundColorShouldBe('host_open_closed/div3b', 'rgba(0, 0, 0, 0)'); | |
| 119 div3.removeChild(div3.firstElementChild); | |
| 120 | |
| 121 div5.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color
: green; }</style>'); | |
| 122 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)'); | |
| 123 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)'); | |
| 124 backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)'); | |
| 125 div5.removeChild(div5.firstElementChild); | |
| 126 | |
| 127 div7.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color
: green; }</style>'); | |
| 128 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)'); | |
| 129 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)'); | |
| 130 backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)'); | |
| 131 div7.removeChild(div7.firstElementChild); | |
| 132 | |
| 133 debug('(5/6) /deep/ selector in querySelectorAll()'); | |
| 134 shouldBe('host_open_open.querySelectorAll("div /deep/ div").length', '0'); | |
| 135 shouldBe('host_open_closed.querySelectorAll("div /deep/ div").length', '0'); | |
| 136 shouldBe('host_closed_open.querySelectorAll("div /deep/ div").length', '0'); | |
| 137 shouldBe('host_closed_closed.querySelectorAll("div /deep/ div").length', '0'); | |
| 138 | |
| 139 queryResultsShouldBe(div1, 'div /deep/ div', ['div1b']); | |
| 140 queryResultsShouldBe(div3, 'div /deep/ div', ['div3b']); | |
| 141 queryResultsShouldBe(div5, 'div /deep/ div', ['div5b']); | |
| 142 queryResultsShouldBe(div7, 'div /deep/ div', ['div7b']); | |
| 143 | |
| 144 debug('(6/6) ::shadow selector in querySelectorAll()'); | |
| 145 shouldBe('host_open_open.querySelectorAll("div::shadow div").length', '0'); | |
| 146 shouldBe('host_open_closed.querySelectorAll("div::shadow div").length', '0'); | |
| 147 shouldBe('host_closed_open.querySelectorAll("div::shadow div").length', '0'); | |
| 148 shouldBe('host_closed_closed.querySelectorAll("div::shadow div").length', '0'); | |
| 149 | |
| 150 shouldBe('div1.querySelectorAll("div::shadow div").length', '0'); | |
| 151 shouldBe('div3.querySelectorAll("div::shadow div").length', '0'); | |
| 152 shouldBe('div5.querySelectorAll("div::shadow div").length', '0'); | |
| 153 shouldBe('div7.querySelectorAll("div::shadow div").length', '0'); | |
| 154 </script> | |
| OLD | NEW |