OLD | NEW |
---|---|
(Empty) | |
1 <!doctype html> | |
2 <script src="../../../resources/js-test.js"></script> | |
3 <script src="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 createShadowRoot({'mode': mode1}, | |
13 createDOM('div', {'id': div1}, | |
14 createShadowRoot({'mode': mode2}, | |
15 createDOM('div', {'id': div2})), | |
16 createDOM('div', {'id': div3}))))); | |
17 } | |
18 | |
19 prepareShadowTree('host_open_open', 'open', 'open', 'div1', 'div2', 'div1b'); | |
20 prepareShadowTree('host_open_closed', 'open', 'closed', 'div3', 'div4', 'div3b') ; | |
21 prepareShadowTree('host_closed_open', 'closed', 'open', 'div5', 'div6', 'div5b') ; | |
22 prepareShadowTree('host_closed_closed', 'closed', 'closed', 'div7', 'div8', 'div 7b'); | |
23 | |
24 debug('(1/6) /deep/ style rule on top-level document.'); | |
25 var styleElement = document.getElementById('style1'); | |
26 styleElement.textContent = 'div /deep/ div { background-color: blue; }'; | |
27 | |
28 backgroundColorShouldBe('host_open_open', 'rgba(0, 0, 0, 0)'); | |
29 backgroundColorShouldBe('host_open_open/div1', 'rgb(0, 0, 255)'); | |
30 backgroundColorShouldBe('host_open_open/div1/div2', 'rgb(0, 0, 255)'); | |
31 backgroundColorShouldBe('host_open_open/div1b', 'rgb(0, 0, 255)'); | |
32 backgroundColorShouldBe('host_open_closed', 'rgba(0, 0, 0, 0)'); | |
33 backgroundColorShouldBe('host_open_closed/div3', 'rgb(0, 0, 255)'); | |
34 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)'); | |
35 backgroundColorShouldBe('host_open_closed/div3b', 'rgb(0, 0, 255)'); | |
36 backgroundColorShouldBe('host_closed_open', 'rgba(0, 0, 0, 0)'); | |
37 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)'); | |
38 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)'); | |
39 backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)'); | |
40 backgroundColorShouldBe('host_closed_closed', 'rgba(0, 0, 0, 0)'); | |
41 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)'); | |
42 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)'); | |
43 backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)'); | |
44 | |
45 debug('(2/6) ::shadow style rule on top-level document.'); | |
46 styleElement.innerHTML = 'div::shadow div { background-color: green; }'; | |
47 | |
48 backgroundColorShouldBe('host_open_open', 'rgba(0, 0, 0, 0)'); | |
49 backgroundColorShouldBe('host_open_open/div1', 'rgb(0, 128, 0)'); | |
50 backgroundColorShouldBe('host_open_open/div1/div2', 'rgba(0, 0, 0, 0)'); | |
51 backgroundColorShouldBe('host_open_open/div1b', 'rgb(0, 128, 0)'); | |
52 backgroundColorShouldBe('host_open_closed', 'rgba(0, 0, 0, 0)'); | |
53 backgroundColorShouldBe('host_open_closed/div3', 'rgb(0, 128, 0)'); | |
54 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)'); | |
55 backgroundColorShouldBe('host_open_closed/div3b', 'rgb(0, 128, 0)'); | |
56 backgroundColorShouldBe('host_closed_open', 'rgba(0, 0, 0, 0)'); | |
57 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)'); | |
58 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)'); | |
59 backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)'); | |
60 backgroundColorShouldBe('host_closed_closed', 'rgba(0, 0, 0, 0)'); | |
61 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)'); | |
62 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)'); | |
63 backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)'); | |
64 | |
65 debug('(3/6) /deep/ style on shadow tree.'); | |
66 styleElement.innerHTML = ''; | |
67 var div1 = getNodeInTreeOfTrees('host_open_open/div1'); | |
68 div1.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>'); | |
69 backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)'); | |
70 backgroundColorShouldBe('host_open_open/div1/div2', 'rgb(0, 0, 255)'); | |
71 backgroundColorShouldBe('host_open_open/div1b', 'rgb(0, 0, 255)'); | |
72 div1.removeChild(div1.firstElementChild); | |
73 | |
74 var div3 = getNodeInTreeOfTrees('host_open_closed/div3'); | |
75 div3.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>'); | |
76 backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)'); | |
77 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)'); | |
78 backgroundColorShouldBe('host_open_closed/div3b', 'rgb(0, 0, 255)'); | |
79 div3.removeChild(div3.firstElementChild); | |
80 | |
81 var div5 = getNodeInTreeOfTrees('host_closed_open/div5'); | |
82 div5.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>'); | |
83 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)'); | |
84 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgb(0, 0, 255)'); | |
85 backgroundColorShouldBe('host_closed_open/div5b', 'rgb(0, 0, 255)'); | |
86 div5.removeChild(div5.firstElementChild); | |
87 | |
88 var div7 = getNodeInTreeOfTrees('host_closed_closed/div7'); | |
89 div7.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>'); | |
90 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)'); | |
91 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)'); | |
92 backgroundColorShouldBe('host_closed_closed/div7b', 'rgb(0, 0, 255)'); | |
93 div7.removeChild(div7.firstElementChild); | |
94 | |
95 debug('(4/6) ::shadow style on shadow tree.'); | |
96 div1.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color : green; }</style>'); | |
97 backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)'); | |
98 backgroundColorShouldBe('host_open_open/div1/div2', 'rgb(0, 128, 0)'); | |
99 backgroundColorShouldBe('host_open_open/div1b', 'rgba(0, 0, 0, 0)'); | |
100 div1.removeChild(div1.firstElementChild); | |
101 | |
102 div3.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color : green; }</style>'); | |
103 backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)'); | |
104 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)'); | |
105 backgroundColorShouldBe('host_open_closed/div3b', 'rgba(0, 0, 0, 0)'); | |
106 div3.removeChild(div3.firstElementChild); | |
107 | |
108 div5.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color : green; }</style>'); | |
109 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)'); | |
110 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgb(0, 128, 0)'); | |
111 backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)'); | |
112 div5.removeChild(div5.firstElementChild); | |
113 | |
114 div7.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color : green; }</style>'); | |
115 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)'); | |
116 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)'); | |
117 backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)'); | |
118 div7.removeChild(div7.firstElementChild); | |
119 | |
120 debug('(5/6) /deep/ selector in querySelectorAll()'); | |
121 shouldBe('host_open_open.querySelectorAll("div /deep/ div").length', '3'); | |
hayato
2015/08/20 03:47:11
Could you assert the content of the result of quer
kochi
2015/08/20 06:04:26
Done.
| |
122 shouldBe('host_open_closed.querySelectorAll("div /deep/ div").length', '2'); | |
123 shouldBe('host_closed_open.querySelectorAll("div /deep/ div").length', '0'); | |
124 shouldBe('host_closed_closed.querySelectorAll("div /deep/ div").length', '0'); | |
125 | |
126 shouldBe('div1.querySelectorAll("div /deep/ div").length', '2'); | |
127 shouldBe('div3.querySelectorAll("div /deep/ div").length', '1'); | |
128 shouldBe('div5.querySelectorAll("div /deep/ div").length', '2'); | |
129 shouldBe('div7.querySelectorAll("div /deep/ div").length', '1'); | |
130 | |
131 debug('(6/6) ::shadow selector in querySelectorAll()'); | |
132 shouldBe('host_open_open.querySelectorAll("div::shadow div").length', '2'); | |
133 shouldBe('host_open_closed.querySelectorAll("div::shadow div").length', '2'); | |
134 shouldBe('host_closed_open.querySelectorAll("div::shadow div").length', '0'); | |
135 shouldBe('host_closed_closed.querySelectorAll("div::shadow div").length', '0'); | |
136 | |
137 shouldBe('div1.querySelectorAll("div::shadow div").length', '1'); | |
138 shouldBe('div3.querySelectorAll("div::shadow div").length', '0'); | |
139 shouldBe('div5.querySelectorAll("div::shadow div").length', '1'); | |
140 shouldBe('div7.querySelectorAll("div::shadow div").length', '0'); | |
141 </script> | |
OLD | NEW |