OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script src="resources/shadow-dom.js"></script> | 4 <script src="resources/shadow-dom.js"></script> |
5 <script src="../../../resources/js-test.js"></script> | 5 <script src="../../../resources/js-test.js"></script> |
6 </head> | 6 </head> |
7 <body> | 7 <body> |
8 <div id='sandbox'></div> | 8 <div id='sandbox'></div> |
9 <pre id='console'></pre> | 9 <pre id='console'></pre> |
10 </body> | 10 </body> |
(...skipping 70 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
81 | 81 |
82 cleanUp(); | 82 cleanUp(); |
83 | 83 |
84 sandbox.appendChild( | 84 sandbox.appendChild( |
85 createDOM('div', {}, | 85 createDOM('div', {}, |
86 createDOM('style', {}, | 86 createDOM('style', {}, |
87 document.createTextNode('div::shadow span { border: 1px solid green;
}')), | 87 document.createTextNode('div::shadow span { border: 1px solid green;
}')), |
88 createDOM('div', {'id': 'host'}, | 88 createDOM('div', {'id': 'host'}, |
89 createShadowRoot( | 89 createShadowRoot( |
90 createDOM('span', {'id': 'target'}, | 90 createDOM('span', {'id': 'target'}, |
91 document.createTextNode('green border, because of hat.')))))
); | 91 document.createTextNode('green border, because of ::shadow.'
)))))); |
92 | 92 |
93 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 93 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
94 | 94 |
95 cleanUp(); | 95 cleanUp(); |
96 | 96 |
97 // Cascade order | 97 // Cascade order |
98 sandbox.appendChild( | 98 sandbox.appendChild( |
99 createDOM('div', {}, | 99 createDOM('div', {}, |
100 createDOM('style', {}, | 100 createDOM('style', {}, |
101 document.createTextNode('div::shadow span { border: 1px solid green;
}')), | 101 document.createTextNode('div::shadow span { border: 1px solid green;
}')), |
102 createDOM('div', {'id': 'host'}, | 102 createDOM('div', {'id': 'host'}, |
103 createShadowRoot( | 103 createShadowRoot( |
104 createDOM('style', {}, | 104 createDOM('style', {}, |
105 document.createTextNode('span { border: 1px solid red; }')), | 105 document.createTextNode('span { border: 1px solid red; }')), |
106 createDOM('span', {'id': 'target'}, | 106 createDOM('span', {'id': 'target'}, |
107 document.createTextNode('green border, because of hat.')))))
); | 107 document.createTextNode('green border, because of ::shadow.'
)))))); |
108 | 108 |
109 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 109 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
110 | 110 |
111 cleanUp(); | 111 cleanUp(); |
112 | 112 |
113 sandbox.appendChild( | 113 sandbox.appendChild( |
114 createDOM('div', {}, | 114 createDOM('div', {}, |
115 createDOM('style', {}, | 115 createDOM('style', {}, |
116 document.createTextNode('div::shadow span { border: 1px solid green;
}')), | 116 document.createTextNode('div::shadow span { border: 1px solid green;
}')), |
117 createDOM('div', {'id': 'host'}, | 117 createDOM('div', {'id': 'host'}, |
118 createShadowRoot( | 118 createShadowRoot( |
119 createDOM('style', {}, | 119 createDOM('style', {}, |
120 document.createTextNode('span#target { border: 1px solid red
; }')), | 120 document.createTextNode('span#target { border: 1px solid red
; }')), |
121 createDOM('span', {'id': 'target'}, | 121 createDOM('span', {'id': 'target'}, |
122 document.createTextNode('green border, because of hat.')))))
); | 122 document.createTextNode('green border, because of ::shadow.'
)))))); |
123 | 123 |
124 // Need to clarify the spec, i.e. using specificity? Currently rgb(255,0,0). | 124 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
125 borderColorShouldBe('host/target', 'rgb(255, 0, 0)'); | |
126 | 125 |
127 cleanUp(); | 126 cleanUp(); |
128 | 127 |
129 sandbox.appendChild( | 128 sandbox.appendChild( |
130 createDOM('div', {}, | 129 createDOM('div', {}, |
131 createDOM('style', {}, | 130 createDOM('style', {}, |
132 document.createTextNode('div#sandbox > div > div::shadow span { bord
er: 1px solid green; }')), | 131 document.createTextNode('div#sandbox > div > div::shadow span { bord
er: 1px solid green; }')), |
133 createDOM('div', {'id': 'host'}, | 132 createDOM('div', {'id': 'host'}, |
134 createShadowRoot( | 133 createShadowRoot( |
135 createDOM('span', {'id': 'target'}, | 134 createDOM('span', {'id': 'target'}, |
136 document.createTextNode('green border, because of hat.')))))
); | 135 document.createTextNode('green border, because of ::shadow.'
)))))); |
137 | 136 |
138 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 137 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
139 | 138 |
140 cleanUp(); | 139 cleanUp(); |
141 | 140 |
142 sandbox.appendChild( | 141 sandbox.appendChild( |
143 createDOM('div', {}, | 142 createDOM('div', {}, |
144 createDOM('style', {}, | 143 createDOM('style', {}, |
145 document.createTextNode('div::shadow span { border: 1px solid green;
}')), | 144 document.createTextNode('div::shadow span { border: 1px solid green;
}')), |
146 createDOM('div', {'id': 'host'}, | 145 createDOM('div', {'id': 'host'}, |
147 createShadowRoot( | 146 createShadowRoot( |
148 createDOM('style', {}, | 147 createDOM('style', {}, |
149 document.createTextNode('div > span { border: 1px solid red;
}')), | 148 document.createTextNode('div > span { border: 1px solid red;
}')), |
150 createDOM('div', {}, | 149 createDOM('div', {}, |
151 createDOM('span', {'id': 'target'}, | 150 createDOM('span', {'id': 'target'}, |
152 document.createTextNode('green border, because parent ha
t wins.'))))))); | 151 document.createTextNode('green border, because parent ::
shadow wins.'))))))); |
153 | 152 |
154 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 153 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
155 | 154 |
156 cleanUp(); | 155 cleanUp(); |
157 | 156 |
158 sandbox.appendChild( | 157 sandbox.appendChild( |
159 createDOM('div', {}, | 158 createDOM('div', {}, |
160 createDOM('style', {}, | 159 createDOM('style', {}, |
161 document.createTextNode('div::shadow span { border: 1px solid green;
}')), | 160 document.createTextNode('div::shadow span { border: 1px solid green;
}')), |
162 createDOM('div', {'id': 'host'}, | 161 createDOM('div', {'id': 'host'}, |
(...skipping 137 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
300 createDOM('div', {'id': 'x-zot-host', 'class': 'x-zot'}, | 299 createDOM('div', {'id': 'x-zot-host', 'class': 'x-zot'}, |
301 createShadowRoot( | 300 createShadowRoot( |
302 createDOM('div', {'id': 'x-zot-target'}, | 301 createDOM('div', {'id': 'x-zot-target'}, |
303 document.createTextNode('x-zot'))))))))); | 302 document.createTextNode('x-zot'))))))))); |
304 | 303 |
305 borderColorShouldNotBe('host/x-bar-host/x-zot-host/x-zot-target', 'rgb(255, 0, 0
)'); | 304 borderColorShouldNotBe('host/x-bar-host/x-zot-host/x-zot-target', 'rgb(255, 0, 0
)'); |
306 cleanUp(); | 305 cleanUp(); |
307 | 306 |
308 </script> | 307 </script> |
309 </html> | 308 </html> |
OLD | NEW |