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 |