src/third_party/WebKit/LayoutTests/fast/dom/shadow/style-with-cat.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="resources/shadow-dom.js"></script>
   5 <script src="../../../resources/js-test.js"></script>
   6 </head>
   7 <body>
   8   <div id='sandbox'></div>
   9   <pre id='console'></pre>
  10 </body>
  11 <script>
  12
  13 function borderColorOf(node)
  14 {
  15     return document.defaultView.getComputedStyle(node, null).getPropertyValue('border-color');
  16 }
  17
  18 function borderColorShouldBe(selector, color)
  19 {
  20     var text = 'borderColorOf(getNodeInTreeOfTrees("' + selector + '"))';
  21     shouldBeEqualToString(text, color);
  22 }
  23
  24 function borderColorShouldNotBe(selector, color)
  25 {
  26     var text = 'borderColorOf(getNodeInTreeOfTrees("' + selector + '"))';
  27     var unevaledString = '"' + color.replace(/\\/g, "\\\\").replace(/"/g, "\"") + '"';
  28     shouldNotBe(text, unevaledString);
  29 }
  30
  31 function cleanUp()
  32 {
  33     document.getElementById('sandbox').innerHTML = '';
  34 }
  35
  36 description('Test for ^^ combinator, http://crbug.com/309504.');
  37
  38 var sandbox = document.getElementById('sandbox');
  39
  40 // div ^^ span should match host/target.
  41
  42 sandbox.appendChild(
  43     createDOM('div', {},
  44         createDOM('style', {},
  45             document.createTextNode('div ^^ span { border: 1px solid green; }')),
  46         createDOM('div', {'id': 'host'},
  47             createShadowRoot(
  48                 createDOM('span', {'id': 'target'},
  49                     document.createTextNode('green border, because of hat.'))))));
  50
  51 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
  52
  53 cleanUp();
  54
  55 // div ^^ span should match host/host2/target and target2.
  56
  57 sandbox.appendChild(
  58     createDOM('div', {},
  59         createDOM('style', {},
  60             document.createTextNode('div ^^ span { border: 1px solid green; }')),
  61         createDOM('div', {'id': 'host'},
  62             createShadowRoot(
  63                 createDOM('div', {'id': 'host2'},
  64                     createShadowRoot(
  65                         createDOM('span', {'id': 'target'},
  66                             document.createTextNode('green border, because of hat.')))))),
  67         createDOM('span', {'id': 'target2'})));
  68
  69 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)');
  70 borderColorShouldBe('target2', 'rgb(0, 128, 0)');
  71
  72 cleanUp();
  73
  74 sandbox.appendChild(
  75     createDOM('div', {},
  76         createDOM('style', {},
  77             document.createTextNode('div#sandbox > div > div ^^ span { border: 1px solid green; }')),
  78         createDOM('div', {'id': 'host'},
  79             createShadowRoot(
  80                 createDOM('content', {}),
  81                 createDOM('span', {'id': 'target'},
  82                     document.createTextNode('green border, because of hat.'))),
  83             createDOM('span', {'id': 'target2'}))));
  84
  85 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
  86 borderColorShouldBe('target2', 'rgb(0, 128, 0)');
  87
  88 cleanUp();
  89
  90 // Testing div ^^ span in inner scope vs div ^^ span in outer scope
  91
  92 sandbox.appendChild(
  93     createDOM('div', {},
  94         createDOM('style', {},
  95             document.createTextNode('div ^^ span { border: 1px solid green; }')),
  96         createDOM('div', {'id': 'host'},
  97             createShadowRoot(
  98                 createDOM('div', {'id': 'host2'},
  99                     createDOM('style', {},
 100                         document.createTextNode('div ^^ span { border: 1px solid red; }')),
 101                     createShadowRoot(
 102                         createDOM('span', {'id': 'target'},
 103                             document.createTextNode('green border, because of hat.')))))),
 104         createDOM('span', {'id': 'target2'})));
 105
 106 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)');
 107
 108 cleanUp();
 109
 110 sandbox.appendChild(
 111     createDOM('div', {},
 112         createDOM('style', {},
 113             document.createTextNode('div ^^ span { border: 1px solid green; }')),
 114         createDOM('div', {'id': 'host'},
 115             createShadowRoot(
 116                 createDOM('style', {},
 117                     document.createTextNode('div > span { border: 1px solid red; }')),
 118                 createDOM('div', {},
 119                     createDOM('span', {'id': 'target'},
 120                         document.createTextNode('green border, because parent hat wins.')))))));
 121
 122 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
 123
 124 cleanUp();
 125
 126 sandbox.appendChild(
 127     createDOM('div', {},
 128         createDOM('style', {},
 129             document.createTextNode('div ^^ span { border: 1px solid green; }')),
 130         createDOM('div', {'id': 'host'},
 131             createShadowRoot(
 132                 createDOM('style', {},
 133                     document.createTextNode(':host > span { border: 1px solid red; }')),
 134                 createDOM('span', {'id': 'target'},
 135                     document.createTextNode('red border because of specificity.'))))));
 136
 137 // Since :host's specificity is the same as *, div ^^ span wins.
 138 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
 139
 140 cleanUp();
 141
 142 sandbox.appendChild(
 143     createDOM('div', {'id': 'host'},
 144         createShadowRoot(
 145             createDOM('style', {},
 146                 document.createTextNode(':host ^^ span { border: 1px solid green; }')),
 147             createDOM('span', {},
 148                 document.createTextNode('some text'))),
 149         createShadowRoot(
 150             createDOM('shadow', {}),
 151             createDOM('span', {'id': 'target'},
 152                 document.createTextNode('green border')))));
 153
 154 borderColorShouldBe('host//target', 'rgb(0, 128, 0)');
 155
 156 cleanUp();
 157
 158 // div ^^ span cannot match, because div cannot match any shadow host.
 159 sandbox.appendChild(
 160     createDOM('div', {'id': 'host'},
 161         createShadowRoot(
 162             createDOM('style', {},
 163                 document.createTextNode('div ^^ span { border: 1px solid green; }')),
 164             createDOM('span', {},
 165                 document.createTextNode('some text'))),
 166         createShadowRoot(
 167             createDOM('shadow', {}),
 168             createDOM('span', {'id': 'target'},
 169                 document.createTextNode('no border')))));
 170
 171 borderColorShouldBe('host//target', 'rgb(0, 0, 0)');
 172
 173 cleanUp();
 174
 175 // .foo ^^ span, .foo is an ancestor of some shadow host which has span in its hosting shadow tree, should match.
 176 sandbox.appendChild(
 177     createDOM('div', {'id': 'host'},
 178         createShadowRoot(
 179             createDOM('style', {},
 180                 document.createTextNode('.foo ^^ span { border: 1px solid green; }')),
 181             createDOM('span', {},
 182                 document.createTextNode('some text'))),
 183         createShadowRoot(
 184             createDOM('shadow', {}),
 185             createDOM('div', {'class': 'foo'},
 186                 createDOM('div', {'id': 'host2'},
 187                     createShadowRoot(
 188                         createDOM('span', {'id': 'target'},
 189                             document.createTextNode('green border'))))))));
 190
 191 borderColorShouldBe('host//host2/target', 'rgb(0, 128, 0)');
 192
 193 cleanUp();
 194
 195
 196 // :host div ^^ div should match.
 197
 198 sandbox.appendChild(
 199     createDOM('div', {'id': 'host'},
 200         createShadowRoot(
 201             createDOM('style', {},
 202                 document.createTextNode(':host div ^^ div { border: 1px solid green; }')),
 203             createDOM('div', {'id': 'host2'},
 204                 createShadowRoot(
 205                     createDOM('div', {'id': 'target'},
 206                         document.createTextNode('green border')))))));
 207
 208 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)');
 209
 210 cleanUp();
 211
 212 // div :host div ^^ div should not match.
 213
 214 sandbox.appendChild(
 215     createDOM('div', {'id': 'host'},
 216         createShadowRoot(
 217             createDOM('style', {},
 218                 document.createTextNode('div :host div ^^ div { border: 1px solid green; }')),
 219             createDOM('div', {'id': 'host2'},
 220                 createShadowRoot(
 221                     createDOM('div', {'id': 'target'},
 222                         document.createTextNode('green border')))))));
 223
 224 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)');
 225
 226 cleanUp();
 227
 228 // :host ^ :host ^^ div should not match.
 229
 230 sandbox.appendChild(
 231     createDOM('div', {'id': 'host'},
 232         createShadowRoot(
 233             createDOM('style', {},
 234                 document.createTextNode(':host ^ :host ^^ div { border: 1px solid green; }')),
 235             createDOM('div', {'id': 'host2'},
 236                 createShadowRoot(
 237                     createDOM('div', {'id': 'host3'},
 238                         createShadowRoot(
 239                             createDOM('div', {'id': 'target'},
 240                                 document.createTextNode('no border')))))))));
 241
 242 borderColorShouldBe('host/host2/host3/target', 'rgb(0, 0, 0)');
 243
 244 cleanUp();
 245
 246 // div (=shadow host) div ^^ div should not match.
 247
 248 sandbox.appendChild(
 249     createDOM('div', {'id': 'host'},
 250         createShadowRoot(
 251             createDOM('style', {},
 252                 document.createTextNode('div > div ^^ div { border: 1px solid green; }')),
 253             createDOM('div', {'id': 'host2'},
 254                 createShadowRoot(
 255                     createDOM('div', {'id': 'target'},
 256                         document.createTextNode('no border')))))));
 257
 258 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)');
 259
 260 cleanUp();
 261
 262 // div + div ^^ div should match.
 263
 264 sandbox.appendChild(
 265     createDOM('div', {'id': 'host'},
 266         createShadowRoot(
 267             createDOM('style', {},
 268                 document.createTextNode('div + div ^^ div { border: 1px solid green; }')),
 269             createDOM('div', {},
 270                 document.createTextNode('sibling')),
 271             createDOM('div', {'id': 'host2'},
 272                 createShadowRoot(
 273                     createDOM('div', {'id': 'target'},
 274                         document.createTextNode('green border')))))));
 275
 276 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)');
 277
 278 cleanUp();
 279
 280 sandbox.appendChild(
 281     createDOM('div', {'id': 'host'},
 282         createShadowRoot(
 283             createDOM('style', {},
 284                 document.createTextNode('div + div ^^ div { border: 1px solid green; }')),
 285             createDOM('div', {},
 286                 document.createTextNode('sibling')),
 287             createDOM('div', {'id': 'host2'},
 288                 createShadowRoot(
 289                     createDOM('div', {'id': 'host3'},
 290                         createShadowRoot(
 291                             createDOM('div', {'id': 'target'},
 292                                 document.createTextNode('green border')))))))));
 293
 294 borderColorShouldBe('host/host2/host3/target', 'rgb(0, 128, 0)');
 295
 296 cleanUp();
 297
 298 // :host + div ^^ div should not match.
 299
 300 sandbox.appendChild(
 301     createDOM('div', {'id': 'host'},
 302         createShadowRoot(
 303             createDOM('style', {},
 304                 document.createTextNode(':host + div ^^ div { border: 1px solid green; }')),
 305             createDOM('div', {'id': 'siblingShadow'},
 306                 createShadowRoot(
 307                     createDOM('div', {},
 308                         document.createTextNode('sibling')))),
 309             createDOM('div', {'id': 'host2'},
 310                 createShadowRoot(
 311                     createDOM('div', {'id': 'target'},
 312                         document.createTextNode('no border')))))));
 313
 314 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)');
 315
 316 cleanUp();
 317
 318 sandbox.appendChild(
 319     createDOM('div', {'id': 'host'},
 320         createShadowRoot(
 321             createDOM('style', {},
 322                 document.createTextNode(':host + div ^^ div { border: 1px solid green; }')),
 323             createDOM('div', {},
 324                 document.createTextNode('sibling')),
 325             createDOM('div', {'id': 'host2'},
 326                 createShadowRoot(
 327                     createDOM('div', {'id': 'host3'},
 328                         createShadowRoot(
 329                             createDOM('div', {'id': 'target'},
 330                                 document.createTextNode('no border')))))))));
 331
 332 borderColorShouldBe('host/host2/host3/target', 'rgb(0, 0, 0)');
 333
 334 cleanUp();
 335
 336 // div ^^ span in a sibling shadow tree can match.
 337 sandbox.appendChild(
 338     createDOM('div', {'id': 'host'},
 339         createShadowRoot(
 340             createDOM('style', {},
 341                 document.createTextNode('div ^^ span { border: 1px solid green; }')),
 342             createDOM('span', {},
 343                 document.createTextNode('some text'))),
 344         createShadowRoot(
 345             createDOM('shadow', {}),
 346             createDOM('div', {'id': 'host2'},
 347                 createShadowRoot(
 348                     createDOM('span', {'id': 'target'},
 349                         document.createTextNode('green border')))))));
 350
 351 borderColorShouldBe('host//host2/target', 'rgb(0, 128, 0)');
 352
 353 cleanUp();
 354
 355 // :host ^^ * should not match desendant nodes of div#host.
 356 sandbox.appendChild(
 357     createDOM('div', {'id': 'host'},
 358         createShadowRoot(
 359             createDOM('style', {},
 360                 document.createTextNode(':host ^^ * { border: 1px solid red; }')),
 361             createDOM('content', {})),
 362         createDOM('div', {'id': 'child'},
 363             document.createTextNode('show not red'))));
 364
 365 borderColorShouldNotBe('child', 'rgb(255, 0, 0)');
 366
 367 cleanUp();
 368
 369 // Test for crbug.com/331871. 'div#inner h1' should not cross TreeScope boundary.
 370
 371 sandbox.appendChild(
 372     createDOM('div', {},
 373         createDOM('style', {},
 374             document.createTextNode('div#outer ^^ div#inner h1 { border: 1px solid red; }')),
 375         createDOM('div', {'id': 'outer'},
 376             createDOM('div', {'id': 'inner'},
 377                 createShadowRoot(
 378                     createDOM('h1', {'id': 'target'},
 379                         document.createTextNode('no red border')))))));
 380
 381 borderColorShouldNotBe('inner/target', 'rgb(255, 0, 0)');
 382
 383 cleanUp();
 384
 385 // :host ^^ span is declared in a shadow tree, but the shadow root does not participate in composed tree.
 386
 387 sandbox.appendChild(
 388     createDOM('div', {'id': 'host'},
 389         createShadowRoot(
 390             createDOM('style', {},
 391                 document.createTextNode(':host ^^ span { border: 1px solid red; }')),
 392             createDOM('span', {},
 393                 document.createTextNode('some text'))),
 394         createShadowRoot(
 395             createDOM('span', {'id': 'target'},
 396                 document.createTextNode('not red border')))));
 397
 398 borderColorShouldNotBe('host//target', 'rgb(255, 0, 0)');
 399
 400 cleanUp();
 401
 402 </script>
 403 </html>
 404