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 ::shadow.'
)))))); | 91 document.createTextNode('green border, because of hat.')))))
); |
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 ::shadow.'
)))))); | 107 document.createTextNode('green border, because of hat.')))))
); |
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 ::shadow.'
)))))); | 122 document.createTextNode('green border, because of hat.')))))
); |
123 | 123 |
124 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 124 // Need to clarify the spec, i.e. using specificity? Currently rgb(255,0,0). |
| 125 borderColorShouldBe('host/target', 'rgb(255, 0, 0)'); |
125 | 126 |
126 cleanUp(); | 127 cleanUp(); |
127 | 128 |
128 sandbox.appendChild( | 129 sandbox.appendChild( |
129 createDOM('div', {}, | 130 createDOM('div', {}, |
130 createDOM('style', {}, | 131 createDOM('style', {}, |
131 document.createTextNode('div#sandbox > div > div::shadow span { bord
er: 1px solid green; }')), | 132 document.createTextNode('div#sandbox > div > div::shadow span { bord
er: 1px solid green; }')), |
132 createDOM('div', {'id': 'host'}, | 133 createDOM('div', {'id': 'host'}, |
133 createShadowRoot( | 134 createShadowRoot( |
134 createDOM('span', {'id': 'target'}, | 135 createDOM('span', {'id': 'target'}, |
135 document.createTextNode('green border, because of ::shadow.'
)))))); | 136 document.createTextNode('green border, because of hat.')))))
); |
136 | 137 |
137 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 138 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
138 | 139 |
139 cleanUp(); | 140 cleanUp(); |
140 | 141 |
141 sandbox.appendChild( | 142 sandbox.appendChild( |
142 createDOM('div', {}, | 143 createDOM('div', {}, |
143 createDOM('style', {}, | 144 createDOM('style', {}, |
144 document.createTextNode('div::shadow span { border: 1px solid green;
}')), | 145 document.createTextNode('div::shadow span { border: 1px solid green;
}')), |
145 createDOM('div', {'id': 'host'}, | 146 createDOM('div', {'id': 'host'}, |
146 createShadowRoot( | 147 createShadowRoot( |
147 createDOM('style', {}, | 148 createDOM('style', {}, |
148 document.createTextNode('div > span { border: 1px solid red;
}')), | 149 document.createTextNode('div > span { border: 1px solid red;
}')), |
149 createDOM('div', {}, | 150 createDOM('div', {}, |
150 createDOM('span', {'id': 'target'}, | 151 createDOM('span', {'id': 'target'}, |
151 document.createTextNode('green border, because parent ::
shadow wins.'))))))); | 152 document.createTextNode('green border, because parent ha
t wins.'))))))); |
152 | 153 |
153 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 154 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
154 | 155 |
155 cleanUp(); | 156 cleanUp(); |
156 | 157 |
157 sandbox.appendChild( | 158 sandbox.appendChild( |
158 createDOM('div', {}, | 159 createDOM('div', {}, |
159 createDOM('style', {}, | 160 createDOM('style', {}, |
160 document.createTextNode('div::shadow span { border: 1px solid green;
}')), | 161 document.createTextNode('div::shadow span { border: 1px solid green;
}')), |
161 createDOM('div', {'id': 'host'}, | 162 createDOM('div', {'id': 'host'}, |
(...skipping 137 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
299 createDOM('div', {'id': 'x-zot-host', 'class': 'x-zot'}, | 300 createDOM('div', {'id': 'x-zot-host', 'class': 'x-zot'}, |
300 createShadowRoot( | 301 createShadowRoot( |
301 createDOM('div', {'id': 'x-zot-target'}, | 302 createDOM('div', {'id': 'x-zot-target'}, |
302 document.createTextNode('x-zot'))))))))); | 303 document.createTextNode('x-zot'))))))))); |
303 | 304 |
304 borderColorShouldNotBe('host/x-bar-host/x-zot-host/x-zot-target', 'rgb(255, 0, 0
)'); | 305 borderColorShouldNotBe('host/x-bar-host/x-zot-host/x-zot-target', 'rgb(255, 0, 0
)'); |
305 cleanUp(); | 306 cleanUp(); |
306 | 307 |
307 </script> | 308 </script> |
308 </html> | 309 </html> |
OLD | NEW |