src/third_party/WebKit/LayoutTests/fast/dom/shadow/hostcontext-pseudo-class.html

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