src/third_party/WebKit/LayoutTests/fast/dom/shadow/style-with-hat.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 var borderColor;
  14
  15 function borderColorOf(node)
  16 {
  17     return document.defaultView.getComputedStyle(node, null).getPropertyValue('border-color');
  18 }
  19
  20 function borderColorShouldBe(selector, color)
  21 {
  22     var text = 'borderColorOf(getNodeInTreeOfTrees("' + selector + '"))';
  23     shouldBeEqualToString(text, color);
  24 }
  25
  26 function borderColorShouldNotBe(selector, color)
  27 {
  28     var text = 'borderColorOf(getNodeInTreeOfTrees("' + selector + '"))';
  29     var unevaledString = '"' + color.replace(/\\/g, "\\\\").replace(/"/g, "\"") + '"';
  30     shouldNotBe(text, unevaledString);
  31 }
  32
  33 function cleanUp()
  34 {
  35     document.getElementById('sandbox').innerHTML = '';
  36 }
  37
  38 description('Test for ^ combinator, http://crbug.com/309504.');
  39
  40 var sandbox = document.getElementById('sandbox');
  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 // Cascade order
  56 sandbox.appendChild(
  57     createDOM('div', {},
  58         createDOM('style', {},
  59             document.createTextNode('div ^ span { border: 1px solid green; }')),
  60         createDOM('div', {'id': 'host'},
  61             createShadowRoot(
  62                 createDOM('style', {},
  63                     document.createTextNode('span { border: 1px solid red; }')),
  64                 createDOM('span', {'id': 'target'},
  65                     document.createTextNode('green border, because of hat.'))))));
  66
  67 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
  68
  69 cleanUp();
  70
  71 sandbox.appendChild(
  72     createDOM('div', {},
  73         createDOM('style', {},
  74             document.createTextNode('div ^ span { border: 1px solid green; }')),
  75         createDOM('div', {'id': 'host'},
  76             createShadowRoot(
  77                 createDOM('style', {},
  78                     document.createTextNode('span#target { border: 1px solid red; }')),
  79                 createDOM('span', {'id': 'target'},
  80                     document.createTextNode('green border, because of hat.'))))));
  81
  82 // Need to clarify the spec, i.e. using specificity? Currently rgb(255,0,0).
  83 borderColorShouldBe('host/target', 'rgb(255, 0, 0)');
  84
  85 cleanUp();
  86
  87 sandbox.appendChild(
  88     createDOM('div', {},
  89         createDOM('style', {},
  90             document.createTextNode('div#sandbox > div > div ^ span { border: 1px solid green; }')),
  91         createDOM('div', {'id': 'host'},
  92             createShadowRoot(
  93                 createDOM('span', {'id': 'target'},
  94                     document.createTextNode('green border, because of hat.'))))));
  95
  96 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
  97
  98 cleanUp();
  99
 100 sandbox.appendChild(
 101     createDOM('div', {},
 102         createDOM('style', {},
 103             document.createTextNode('div ^ span { border: 1px solid green; }')),
 104         createDOM('div', {'id': 'host'},
 105             createShadowRoot(
 106                 createDOM('style', {},
 107                     document.createTextNode('div > span { border: 1px solid red; }')),
 108                 createDOM('div', {},
 109                     createDOM('span', {'id': 'target'},
 110                         document.createTextNode('green border, because parent hat wins.')))))));
 111
 112 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
 113
 114 cleanUp();
 115
 116 sandbox.appendChild(
 117     createDOM('div', {},
 118         createDOM('style', {},
 119             document.createTextNode('div ^ span { border: 1px solid green; }')),
 120         createDOM('div', {'id': 'host'},
 121             createShadowRoot(
 122                 createDOM('style', {},
 123                     document.createTextNode(':host > span { border: 1px solid red; }')),
 124                 createDOM('span', {'id': 'target'},
 125                     document.createTextNode('red border because of specificity.'))))));
 126
 127 // Since :host's specificity is the same as *, div ^^ span wins.
 128 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
 129
 130 cleanUp();
 131
 132 sandbox.appendChild(
 133     createDOM('div', {'id': 'host'},
 134         createShadowRoot(
 135             createDOM('style', {},
 136                 document.createTextNode(':host ^ span { border: 1px solid green; }')),
 137             createDOM('span', {},
 138                 document.createTextNode('some text'))),
 139         createShadowRoot(
 140             createDOM('shadow', {}),
 141             createDOM('span', {'id': 'target'},
 142                 document.createTextNode('green border')))));
 143
 144 borderColorShouldBe('host//target', 'rgb(0, 128, 0)');
 145
 146 cleanUp();
 147
 148 // div ^ span's div cannot match a shadow host whose shadow tree contains the style.
 149 sandbox.appendChild(
 150     createDOM('div', {'id': 'host'},
 151         createShadowRoot(
 152             createDOM('style', {},
 153                 document.createTextNode('div ^ span { border: 1px solid green; }')),
 154             createDOM('span', {},
 155                 document.createTextNode('some text'))),
 156         createShadowRoot(
 157             createDOM('shadow', {}),
 158             createDOM('span', {'id': 'target'},
 159                 document.createTextNode('no border')))));
 160
 161 borderColorShouldBe('host//target', 'rgb(0, 0, 0)');
 162
 163 cleanUp();
 164
 165
 166 // div ^ span can match [div -- sr -- span] in its sibling shadow tree.
 167 sandbox.appendChild(
 168     createDOM('div', {'id': 'host'},
 169         createShadowRoot(
 170             createDOM('style', {},
 171                 document.createTextNode('div ^ span { border: 1px solid green; }')),
 172             createDOM('span', {},
 173                 document.createTextNode('some text'))),
 174         createShadowRoot(
 175             createDOM('shadow', {}),
 176             createDOM('div', {'id': 'host2'},
 177                 createShadowRoot(
 178                     createDOM('span', {'id': 'target'},
 179                         document.createTextNode('green border')))))));
 180
 181 borderColorShouldBe('host//host2/target', 'rgb(0, 128, 0)');
 182
 183 cleanUp();
 184
 185 // :host div ^ div should match.
 186 sandbox.appendChild(
 187     createDOM('div', {'id': 'host'},
 188         createShadowRoot(
 189             createDOM('style', {},
 190                 document.createTextNode(':host div ^ div { border: 1px solid green; }')),
 191             createDOM('div', {'id': 'host2'},
 192                 createShadowRoot(
 193                     createDOM('div', {'id': 'target'},
 194                         document.createTextNode('green border')))))));
 195
 196 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)');
 197
 198 cleanUp();
 199
 200 // div:host
 201 sandbox.appendChild(
 202     createDOM('div', {'id': 'host'},
 203         createShadowRoot(
 204             createDOM('style', {},
 205                 document.createTextNode('div:host ^ span { border: 1px solid green; }')),
 206             createDOM('span', {'id': 'target'},
 207                 document.createTextNode('no border, because div:host matches nothing.')))));
 208
 209 borderColorShouldBe('host/target', 'rgb(0, 0, 0)');
 210
 211 cleanUp();
 212
 213 // div (=shadow host) div ^ div should not match.
 214
 215 sandbox.appendChild(
 216     createDOM('div', {'id': 'host'},
 217         createShadowRoot(
 218             createDOM('style', {},
 219                 document.createTextNode('div > div ^ div { border: 1px solid green; }')),
 220             createDOM('div', {'id': 'host2'},
 221                 createShadowRoot(
 222                     createDOM('div', {'id': 'target'},
 223                         document.createTextNode('no border')))))));
 224
 225 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)');
 226
 227 cleanUp();
 228
 229 // div + div ^ div should match.
 230
 231 sandbox.appendChild(
 232     createDOM('div', {'id': 'host'},
 233         createShadowRoot(
 234             createDOM('style', {},
 235                 document.createTextNode('div + div ^ div { border: 1px solid green; }')),
 236             createDOM('div', {},
 237                 document.createTextNode('sibling')),
 238             createDOM('div', {'id': 'host2'},
 239                 createShadowRoot(
 240                     createDOM('div', {'id': 'target'},
 241                         document.createTextNode('green border')))))));
 242
 243 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)');
 244
 245 cleanUp();
 246
 247 // :host + div ^ div should not match.
 248
 249 sandbox.appendChild(
 250     createDOM('div', {'id': 'host'},
 251         createShadowRoot(
 252             createDOM('style', {},
 253                 document.createTextNode(':host + div ^ div { border: 1px solid green; }')),
 254             createDOM('div', {'id': 'siblingShadow'},
 255                 createShadowRoot(
 256                     createDOM('div', {},
 257                         document.createTextNode('sibling')))),
 258             createDOM('div', {'id': 'host2'},
 259                 createShadowRoot(
 260                     createDOM('div', {'id': 'target'},
 261                         document.createTextNode('no border')))))));
 262
 263 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)');
 264
 265 cleanUp();
 266
 267 // div ^ span in an insert shadow tree cannot match any element in active shadow tree.
 268 sandbox.appendChild(
 269     createDOM('div', {'id': 'host'},
 270         createShadowRoot(
 271             createDOM('style', {},
 272                 document.createTextNode('div ^ span { border: 1px solid red; }')),
 273             createDOM('span', {},
 274                 document.createTextNode('some text'))),
 275         createShadowRoot(
 276             createDOM('div', {'id': 'host2'},
 277                 createShadowRoot(
 278                     createDOM('span', {'id': 'target'},
 279                         document.createTextNode('green border')))))));
 280
 281 borderColorShouldNotBe('host//host2/target', 'rgb(255, 0, 0)');
 282
 283 cleanUp();
 284
 285 </script>
 286 </html>
 287