| OLD | NEW |
| 1 <!doctype html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <script src="../../../resources/js-test.js"></script> | 4 <script src="../../../resources/js-test.js"></script> |
| 5 <script src="resources/shadow-dom.js"></script> | 5 <script src="resources/shadow-dom.js"></script> |
| 6 <style> | 6 <style> |
| 7 :host { | 7 :ancestor { |
| 8 background-color: red; | 8 background-color: red; |
| 9 } | 9 } |
| 10 </style> | 10 </style> |
| 11 </head> | 11 </head> |
| 12 <body class='mytheme'> | 12 <body class='mytheme'> |
| 13 <div> | 13 <div> |
| 14 <div id='sandbox'></div> | 14 <div id='sandbox'></div> |
| 15 </div> | 15 </div> |
| 16 <pre id='console'></pre> | 16 <pre id='console'></pre> |
| 17 <script> | 17 <script> |
| 18 description('Test whether :host matches a shadow host correctly.'); | 18 description('Test whether :ancestor matches a shadow host correctly.'); |
| 19 | 19 |
| 20 var sandbox = document.getElementById('sandbox'); | 20 var sandbox = document.getElementById('sandbox'); |
| 21 | 21 |
| 22 function backgroundColorOf(selector) { | 22 function backgroundColorOf(selector) { |
| 23 return window.getComputedStyle(getNodeInTreeOfTrees(selector)).backgroundCol
or; | 23 return window.getComputedStyle(getNodeInTreeOfTrees(selector)).backgroundCol
or; |
| 24 } | 24 } |
| 25 | 25 |
| 26 function backgroundColorShouldBe(selector, expected) { | 26 function backgroundColorShouldBe(selector, expected) { |
| 27 shouldBeEqualToString('backgroundColorOf(\'' + selector + '\')', expected); | 27 shouldBeEqualToString('backgroundColorOf(\'' + selector + '\')', expected); |
| 28 } | 28 } |
| 29 | 29 |
| 30 function cleanUp() { | 30 function cleanUp() { |
| 31 sandbox.innerHTML = ''; | 31 sandbox.innerHTML = ''; |
| 32 } | 32 } |
| 33 | 33 |
| 34 debug(':host out of shadow tree should not match any shadow hosts.'); | 34 debug(':ancestor out of shadow tree should not match any shadow hosts.'); |
| 35 | 35 |
| 36 sandbox.appendChild( | 36 sandbox.appendChild( |
| 37 createDOM('div', {'id': 'host'}, | 37 createDOM('div', {'id': 'host'}, |
| 38 createShadowRoot( | 38 createShadowRoot( |
| 39 createDOM('div', {}, | 39 createDOM('div', {}, |
| 40 document.createTextNode('Hello'))))); | 40 document.createTextNode('Hello'))))); |
| 41 | 41 |
| 42 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); | 42 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| 43 | 43 |
| 44 cleanUp(); | 44 cleanUp(); |
| 45 | 45 |
| 46 debug(':host with * should not match any shadow hosts.'); | 46 debug(':ancestor with * should not match any shadow hosts.'); |
| 47 | 47 |
| 48 sandbox.appendChild( | 48 sandbox.appendChild( |
| 49 createDOM('div', {'id': 'host'}, | 49 createDOM('div', {'id': 'host'}, |
| 50 createShadowRoot( | 50 createShadowRoot( |
| 51 createDOM('style', {}, | 51 createDOM('style', {}, |
| 52 document.createTextNode('*:host { background-color: green; }')), | 52 document.createTextNode('*:ancestor { background-color: green; }
')), |
| 53 createDOM('div', {}, | 53 createDOM('div', {}, |
| 54 document.createTextNode('Hello'))))); | 54 document.createTextNode('Hello'))))); |
| 55 | 55 |
| 56 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); | 56 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
| 57 | 57 |
| 58 cleanUp(); | 58 cleanUp(); |
| 59 | 59 |
| 60 debug(':host with tag selector should not match any shadow hosts.'); | 60 debug(':ancestor with tag selector should not match any shadow hosts.'); |
| 61 | 61 |
| 62 sandbox.appendChild( | 62 sandbox.appendChild( |
| 63 createDOM('div', {'id': 'host'}, | 63 createDOM('div', {'id': 'host'}, |
| 64 createShadowRoot( | 64 createShadowRoot( |
| 65 createDOM('style', {}, | 65 createDOM('style', {}, |
| 66 document.createTextNode('div:host { background-color: green; }')
), | 66 document.createTextNode('div:ancestor { background-color: green;
}')), |
| 67 createDOM('div', {}, | 67 createDOM('div', {}, |
| 68 document.createTextNode('Hello'))))); | 68 document.createTextNode('Hello'))))); |
| 69 | 69 |
| 70 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); | 70 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| 71 | 71 |
| 72 cleanUp(); | 72 cleanUp(); |
| 73 | 73 |
| 74 debug(':host with class selector should not match any shadow hosts.'); | 74 debug(':ancestor with class selector should not match any shadow hosts.'); |
| 75 | 75 |
| 76 sandbox.appendChild( | 76 sandbox.appendChild( |
| 77 createDOM('div', {'id': 'host', 'class': 'host'}, | 77 createDOM('div', {'id': 'host', 'class': 'host'}, |
| 78 createShadowRoot( | 78 createShadowRoot( |
| 79 createDOM('style', {}, | 79 createDOM('style', {}, |
| 80 document.createTextNode('.host:host { background-color: green; }
')), | 80 document.createTextNode('.host:ancestor { background-color: gree
n; }')), |
| 81 createDOM('div', {}, | 81 createDOM('div', {}, |
| 82 document.createTextNode('Hello'))))); | 82 document.createTextNode('Hello'))))); |
| 83 | 83 |
| 84 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); | 84 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| 85 | 85 |
| 86 cleanUp(); | 86 cleanUp(); |
| 87 | 87 |
| 88 debug(':host with id selector should not match any shadow hosts.'); | 88 debug(':ancestor with id selector should not match any shadow hosts.'); |
| 89 | 89 |
| 90 sandbox.appendChild( | 90 sandbox.appendChild( |
| 91 createDOM('div', {'id': 'host'}, | 91 createDOM('div', {'id': 'host'}, |
| 92 createShadowRoot( | 92 createShadowRoot( |
| 93 createDOM('style', {}, | 93 createDOM('style', {}, |
| 94 document.createTextNode('#host:host { background-color: green; }
')), | 94 document.createTextNode('#host:ancestor { background-color: gree
n; }')), |
| 95 createDOM('div', {}, | 95 createDOM('div', {}, |
| 96 document.createTextNode('Hello'))))); | 96 document.createTextNode('Hello'))))); |
| 97 | 97 |
| 98 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); | 98 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| 99 | 99 |
| 100 cleanUp(); | 100 cleanUp(); |
| 101 | 101 |
| 102 debug(':host with attribute selector should not match any shadow hosts.'); | 102 debug(':ancestor with attribute selector should not match any shadow hosts.'); |
| 103 | 103 |
| 104 sandbox.appendChild( | 104 sandbox.appendChild( |
| 105 createDOM('div', {'id': 'host', 'foo': 'bar'}, | 105 createDOM('div', {'id': 'host', 'foo': 'bar'}, |
| 106 createShadowRoot( | 106 createShadowRoot( |
| 107 createDOM('style', {}, | 107 createDOM('style', {}, |
| 108 document.createTextNode('[foo=bar]:host { background-color: gree
n; }')), | 108 document.createTextNode('[foo=bar]:ancestor { background-color:
green; }')), |
| 109 createDOM('div', {}, | 109 createDOM('div', {}, |
| 110 document.createTextNode('Hello'))))); | 110 document.createTextNode('Hello'))))); |
| 111 | 111 |
| 112 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); | 112 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| 113 | 113 |
| 114 cleanUp(); | 114 cleanUp(); |
| 115 | 115 |
| 116 debug(':host in a shadow tree should match its shadow host.'); | 116 debug(':ancestor in a shadow tree should match its shadow host.'); |
| 117 | 117 |
| 118 sandbox.appendChild( | 118 sandbox.appendChild( |
| 119 createDOM('div', {'id': 'host'}, | 119 createDOM('div', {'id': 'host'}, |
| 120 createShadowRoot( | 120 createShadowRoot( |
| 121 createDOM('style', {}, | 121 createDOM('style', {}, |
| 122 document.createTextNode(':host(body.mytheme) { background-color:
green; }')), | 122 document.createTextNode(':ancestor(body.mytheme) { background-co
lor: green; }')), |
| 123 createDOM('div', {}, | 123 createDOM('div', {}, |
| 124 document.createTextNode('Hello'))))); | 124 document.createTextNode('Hello'))))); |
| 125 | 125 |
| 126 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); | 126 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
| 127 | 127 |
| 128 cleanUp(); | 128 cleanUp(); |
| 129 | 129 |
| 130 debug(':host takes simple selectors and matches when one of the simple selectors
matches.'); | 130 debug(':ancestor with :host in a shadow tree should match its shadow host.'); |
| 131 |
| 132 sandbox.appendChild( |
| 133 createDOM('div', {'id': 'host'}, |
| 134 createShadowRoot( |
| 135 createDOM('style', {}, |
| 136 document.createTextNode(':ancestor(div:host) { background-color:
green; }')), |
| 137 createDOM('div', {}, |
| 138 document.createTextNode('Hello'))))); |
| 139 |
| 140 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
| 141 |
| 142 cleanUp(); |
| 143 |
| 144 debug(':ancestor takes simple selectors and matches when one of the simple selec
tors matches.'); |
| 131 | 145 |
| 132 sandbox.appendChild( | 146 sandbox.appendChild( |
| 133 createDOM('div', {'id': 'parentOfHost'}, | 147 createDOM('div', {'id': 'parentOfHost'}, |
| 134 createDOM('div', {'id': 'host'}, | 148 createDOM('div', {'id': 'host'}, |
| 135 createShadowRoot( | 149 createShadowRoot( |
| 136 createDOM('style', {}, | 150 createDOM('style', {}, |
| 137 document.createTextNode(':host(body:not(.mytheme), span, div
#parentOfHost) { background-color: green; }')), | 151 document.createTextNode(':ancestor(body:not(.mytheme), span,
div#parentOfHost) { background-color: green; }')), |
| 138 createDOM('div', {}, | 152 createDOM('div', {}, |
| 139 document.createTextNode('Hello')))))); | 153 document.createTextNode('Hello')))))); |
| 140 | 154 |
| 141 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); | 155 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
| 142 | 156 |
| 143 cleanUp(); | 157 cleanUp(); |
| 144 | 158 |
| 145 debug(':host matches a shadow host in just a nested shadow tree, not all enclosi
ng shadow trees.'); | 159 debug(':ancestor matches a shadow host in just a nested shadow tree, not all enc
losing shadow trees.'); |
| 146 | 160 |
| 147 sandbox.appendChild( | 161 sandbox.appendChild( |
| 148 createDOM('div', {'id': 'host1'}, | 162 createDOM('div', {'id': 'host1'}, |
| 149 createShadowRoot( | 163 createShadowRoot( |
| 150 createDOM('div', {'id': 'host2'}, | 164 createDOM('div', {'id': 'host2'}, |
| 151 createShadowRoot( | 165 createShadowRoot( |
| 152 createDOM('style', {}, | 166 createDOM('style', {}, |
| 153 document.createTextNode(':host { background-color: green
; }')), | 167 document.createTextNode(':ancestor { background-color: g
reen; }')), |
| 154 createDOM('div', {}, | 168 createDOM('div', {}, |
| 155 document.createTextNode('Hello'))))))); | 169 document.createTextNode('Hello'))))))); |
| 156 | 170 |
| 157 backgroundColorShouldBe('host1', 'rgba(0, 0, 0, 0)'); | 171 backgroundColorShouldBe('host1', 'rgba(0, 0, 0, 0)'); |
| 158 backgroundColorShouldBe('host1/host2', 'rgb(0, 128, 0)'); | 172 backgroundColorShouldBe('host1/host2', 'rgb(0, 128, 0)'); |
| 159 | 173 |
| 160 debug(':host matches based on a composed tree.'); | 174 debug(':ancestor matches based on a composed tree.'); |
| 161 | 175 |
| 162 sandbox.appendChild( | 176 sandbox.appendChild( |
| 163 createDOM('div', {'id': 'parentOfHost'}, | 177 createDOM('div', {'id': 'parentOfHost'}, |
| 164 createShadowRoot( | 178 createShadowRoot( |
| 165 createDOM('span', {'id': 'spanA'}, | 179 createDOM('span', {'id': 'spanA'}, |
| 166 createDOM('content', {}))), | 180 createDOM('content', {}))), |
| 167 createDOM('div', {'id': 'host'}, | 181 createDOM('div', {'id': 'host'}, |
| 168 createShadowRoot( | 182 createShadowRoot( |
| 169 createDOM('style', {}, | 183 createDOM('style', {}, |
| 170 document.createTextNode(':host(span#spanA) > div { backgroun
d-color: green; }')), | 184 document.createTextNode(':ancestor(span#spanA) > div { backg
round-color: green; }')), |
| 171 createDOM('div', {'id': 'target'}, | 185 createDOM('div', {'id': 'target'}, |
| 172 document.createTextNode('Hello')))))); | 186 document.createTextNode('Hello')))))); |
| 173 | 187 |
| 174 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 188 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
| 175 | 189 |
| 176 cleanUp(); | 190 cleanUp(); |
| 177 | 191 |
| 178 debug(':host matches based on a composed tree when having multiple shadow roots.
'); | 192 debug(':ancestor matches based on a composed tree when having multiple shadow ro
ots.'); |
| 179 | 193 |
| 180 sandbox.appendChild( | 194 sandbox.appendChild( |
| 181 createDOM('div', {'id': 'parentOfHost'}, | 195 createDOM('div', {'id': 'parentOfHost'}, |
| 182 createShadowRoot( | 196 createShadowRoot( |
| 183 createDOM('span', {'id': 'spanA'}, | 197 createDOM('span', {'id': 'spanA'}, |
| 184 document.createTextNode('no content, no shadow'))), | 198 document.createTextNode('no content, no shadow'))), |
| 185 createShadowRoot( | 199 createShadowRoot( |
| 186 createDOM('span', {'id': 'spanB'}, | 200 createDOM('span', {'id': 'spanB'}, |
| 187 createDOM('content', {}))), | 201 createDOM('content', {}))), |
| 188 createShadowRoot( | 202 createShadowRoot( |
| 189 createDOM('span', {'id': 'spanC'}, | 203 createDOM('span', {'id': 'spanC'}, |
| 190 createDOM('shadow', {}, | 204 createDOM('shadow', {}, |
| 191 createDOM('content')))), | 205 createDOM('content')))), |
| 192 createDOM('div', {'id': 'host'}, | 206 createDOM('div', {'id': 'host'}, |
| 193 createShadowRoot( | 207 createShadowRoot( |
| 194 createDOM('style', {}, | 208 createDOM('style', {}, |
| 195 document.createTextNode(':host(span#spanA) > #targetA { back
ground-color: red; }')), | 209 document.createTextNode(':ancestor(span#spanA) > #targetA {
background-color: red; }')), |
| 196 createDOM('style', {}, | 210 createDOM('style', {}, |
| 197 document.createTextNode(':host(span#spanB) > #targetB { back
ground-color: green; }')), | 211 document.createTextNode(':ancestor(span#spanB) > #targetB {
background-color: green; }')), |
| 198 createDOM('style', {}, | 212 createDOM('style', {}, |
| 199 document.createTextNode(':host(span#spanC) > #targetC { back
ground-color: green; }')), | 213 document.createTextNode(':ancestor(span#spanC) > #targetC {
background-color: green; }')), |
| 200 createDOM('div', {'id': 'targetA'}, | 214 createDOM('div', {'id': 'targetA'}, |
| 201 document.createTextNode('Hello')), | 215 document.createTextNode('Hello')), |
| 202 createDOM('div', {'id': 'targetB'}, | 216 createDOM('div', {'id': 'targetB'}, |
| 203 document.createTextNode('Hello')), | 217 document.createTextNode('Hello')), |
| 204 createDOM('div', {'id': 'targetC'}, | 218 createDOM('div', {'id': 'targetC'}, |
| 205 document.createTextNode('Hello')))))); | 219 document.createTextNode('Hello')))))); |
| 206 | 220 |
| 207 backgroundColorShouldBe('host/targetA', 'rgba(0, 0, 0, 0)'); | 221 backgroundColorShouldBe('host/targetA', 'rgba(0, 0, 0, 0)'); |
| 208 backgroundColorShouldBe('host/targetB', 'rgb(0, 128, 0)'); | 222 backgroundColorShouldBe('host/targetB', 'rgb(0, 128, 0)'); |
| 209 backgroundColorShouldBe('host/targetC', 'rgb(0, 128, 0)'); | 223 backgroundColorShouldBe('host/targetC', 'rgb(0, 128, 0)'); |
| 210 | 224 |
| 211 cleanUp(); | 225 cleanUp(); |
| 212 | 226 |
| 213 debug(':host is updated when its matched ancestor changes className or id.'); | 227 debug(':ancestor is updated when its matched ancestor changes className or id.')
; |
| 214 | 228 |
| 215 sandbox.appendChild( | 229 sandbox.appendChild( |
| 216 createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' }, | 230 createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' }, |
| 217 createDOM('div', {'id': 'host'}, | 231 createDOM('div', {'id': 'host'}, |
| 218 createShadowRoot( | 232 createShadowRoot( |
| 219 createDOM('style', {}, | 233 createDOM('style', {}, |
| 220 document.createTextNode(':host(div#parentOfHost.sometheme) {
background-color: green; }')), | 234 document.createTextNode(':ancestor(div#parentOfHost.somethem
e) { background-color: green; }')), |
| 221 createDOM('div', {}, | 235 createDOM('div', {}, |
| 222 document.createTextNode('Hello')))))); | 236 document.createTextNode('Hello')))))); |
| 223 | 237 |
| 224 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); | 238 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
| 225 document.getElementById('parentOfHost').className = 'mytheme'; | 239 document.getElementById('parentOfHost').className = 'mytheme'; |
| 226 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); | 240 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| 227 | 241 |
| 228 cleanUp(); | 242 cleanUp(); |
| 229 | 243 |
| 230 sandbox.appendChild( | 244 sandbox.appendChild( |
| 231 createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' }, | 245 createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' }, |
| 232 createDOM('div', {'id': 'host'}, | 246 createDOM('div', {'id': 'host'}, |
| 233 createShadowRoot( | 247 createShadowRoot( |
| 234 createDOM('style', {}, | 248 createDOM('style', {}, |
| 235 document.createTextNode(':host(div#parentOfHost.sometheme) {
background-color: green; }')), | 249 document.createTextNode(':ancestor(div#parentOfHost.somethem
e) { background-color: green; }')), |
| 236 createDOM('div', {}, | 250 createDOM('div', {}, |
| 237 document.createTextNode('Hello')))))); | 251 document.createTextNode('Hello')))))); |
| 238 | 252 |
| 239 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); | 253 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
| 240 var parentOfHost = document.getElementById('parentOfHost'); | 254 var parentOfHost = document.getElementById('parentOfHost'); |
| 241 parentOfHost.id = 'differntIdValue'; | 255 parentOfHost.id = 'differntIdValue'; |
| 242 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); | 256 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
| 243 | 257 |
| 244 cleanUp(); | 258 cleanUp(); |
| 245 | 259 |
| 246 debug('Compare :host with :host.'); | 260 debug('Compare :ancestor with :ancestor.'); |
| 247 | 261 |
| 248 sandbox.appendChild( | 262 sandbox.appendChild( |
| 249 createDOM('div', {'id': 'host'}, | 263 createDOM('div', {'id': 'host'}, |
| 250 createShadowRoot( | 264 createShadowRoot( |
| 251 createDOM('style', {}, | 265 createDOM('style', {}, |
| 252 document.createTextNode(':host(div:host, div#sandbox) { backgrou
nd-color: green; }')), | 266 document.createTextNode(':ancestor(div:ancestor, div#sandbox) {
background-color: green; }')), |
| 253 createDOM('style', {}, | 267 createDOM('style', {}, |
| 254 document.createTextNode(':host(body.mytheme) { background-color:
red; }')), | 268 document.createTextNode(':ancestor(body.mytheme) { background-co
lor: red; }')), |
| 255 createDOM('div', {}, | 269 createDOM('div', {}, |
| 256 document.createTextNode('Hello'))))); | 270 document.createTextNode('Hello'))))); |
| 257 | 271 |
| 258 // :host(div:host, div#sandbox) wins, because div#sandbox > body.mytheme. | 272 // :ancestor(div:ancestor, div#sandbox) wins, because div#sandbox > body.mytheme
. |
| 259 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); | 273 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
| 260 | 274 |
| 261 cleanUp(); | 275 cleanUp(); |
| 262 | 276 |
| 263 sandbox.appendChild( | 277 sandbox.appendChild( |
| 264 createDOM('div', {'id': 'host'}, | 278 createDOM('div', {'id': 'host'}, |
| 265 createShadowRoot( | 279 createShadowRoot( |
| 266 createDOM('style', {}, | 280 createDOM('style', {}, |
| 267 document.createTextNode(':host(div:host, div#nomatch) { backgrou
nd-color: green; }')), | 281 document.createTextNode(':ancestor(div:ancestor, div#nomatch) {
background-color: green; }')), |
| 268 createDOM('style', {}, | 282 createDOM('style', {}, |
| 269 document.createTextNode(':host(body.mytheme) { background-color:
red; }')), | 283 document.createTextNode(':ancestor(body.mytheme) { background-co
lor: red; }')), |
| 270 createDOM('div', {}, | 284 createDOM('div', {}, |
| 271 document.createTextNode('Hello'))))); | 285 document.createTextNode('Hello'))))); |
| 272 | 286 |
| 273 // :host(body.mytheme) wins, because div:host < body.mytheme. | 287 // :ancestor(body.mytheme) wins, because div:ancestor < body.mytheme. |
| 274 backgroundColorShouldBe('host', 'rgb(255, 0, 0)'); | 288 backgroundColorShouldBe('host', 'rgb(255, 0, 0)'); |
| 275 | 289 |
| 276 cleanUp(); | 290 cleanUp(); |
| 277 | 291 |
| 278 // Test for specificiy of ":host(...) > ...". | 292 // Test for specificiy of ":ancestor(...) > ...". |
| 279 sandbox.appendChild( | 293 sandbox.appendChild( |
| 280 createDOM('div', {'id': 'host'}, | 294 createDOM('div', {'id': 'host'}, |
| 281 createShadowRoot( | 295 createShadowRoot( |
| 282 createDOM('style', {}, | 296 createDOM('style', {}, |
| 283 document.createTextNode(':host(div:host, div#host:host) > div {
background-color: green; }')), | 297 document.createTextNode(':ancestor(div:ancestor, div#host:ancest
or) > div { background-color: green; }')), |
| 284 createDOM('style', {}, | 298 createDOM('style', {}, |
| 285 document.createTextNode(':host(body.mytheme) > div { background-
color: red; }')), | 299 document.createTextNode(':ancestor(body.mytheme) > div { backgro
und-color: red; }')), |
| 286 createDOM('div', {'id': 'target'}, | 300 createDOM('div', {'id': 'target'}, |
| 287 document.createTextNode('Hello'))))); | 301 document.createTextNode('Hello'))))); |
| 288 | 302 |
| 289 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 303 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
| 290 | 304 |
| 291 cleanUp(); | 305 cleanUp(); |
| 292 | 306 |
| 293 sandbox.appendChild( | 307 sandbox.appendChild( |
| 294 createDOM('div', {'id': 'host', 'class': 'host'}, | 308 createDOM('div', {'id': 'host', 'class': 'host'}, |
| 295 createShadowRoot( | 309 createShadowRoot( |
| 296 createDOM('style', {}, | 310 createDOM('style', {}, |
| 297 document.createTextNode(':host(div:host, div#host.host:host) > d
iv { background-color: green; }')), | 311 document.createTextNode(':ancestor(div:ancestor, div#host.host:a
ncestor) > div { background-color: green; }')), |
| 298 createDOM('style', {}, | 312 createDOM('style', {}, |
| 299 document.createTextNode(':host(body) > div#target { background-c
olor: red; }')), | 313 document.createTextNode(':ancestor(body) > div#target { backgrou
nd-color: red; }')), |
| 300 createDOM('div', {'id': 'target'}, | 314 createDOM('div', {'id': 'target'}, |
| 301 document.createTextNode('Hello'))))); | 315 document.createTextNode('Hello'))))); |
| 302 | 316 |
| 303 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 317 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
| 304 | 318 |
| 305 cleanUp(); | 319 cleanUp(); |
| 306 | 320 |
| 307 sandbox.appendChild( | 321 sandbox.appendChild( |
| 308 createDOM('div', {'id': 'host', 'class': 'host'}, | 322 createDOM('div', {'id': 'host', 'class': 'host'}, |
| 309 createShadowRoot( | 323 createShadowRoot( |
| 310 createDOM('style', {}, | 324 createDOM('style', {}, |
| 311 document.createTextNode(':host(div:host(div:host(div:host(div:ho
st)))) > div { background-color: green; }')), | 325 document.createTextNode(':ancestor(div:ancestor(div:ancestor(div
:ancestor(div:ancestor)))) > div { background-color: green; }')), |
| 312 createDOM('style', {}, | 326 createDOM('style', {}, |
| 313 document.createTextNode(':host(div) > div { background-color: re
d; }')), | 327 document.createTextNode(':ancestor(div) > div { background-color
: red; }')), |
| 314 createDOM('div', {'id': 'target'}, | 328 createDOM('div', {'id': 'target'}, |
| 315 document.createTextNode('Hello'))))); | 329 document.createTextNode('Hello'))))); |
| 316 | 330 |
| 317 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 331 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
| 318 | 332 |
| 319 cleanUp(); | 333 cleanUp(); |
| 320 | 334 |
| 321 </script> | 335 </script> |
| 322 </body> | 336 </body> |
| OLD | NEW |