src/third_party/WebKit/LayoutTests/fast/dom/shadow/dynamically-added-cat-hat-rules.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'>
   9   <div id='target5' class='bar'>Should have blue background.</div>
  10 </div>
  11 <pre id='console'></pre>
  12 </body>
  13 <script>
  14
  15 function backgroundColorOf(node)
  16 {
  17     return document.defaultView.getComputedStyle(node, null).getPropertyValue('background-color');
  18 }
  19
  20 function backgroundColorShouldBe(selector, color)
  21 {
  22     var text = 'backgroundColorOf(getNodeInTreeOfTrees("' + selector + '"))';
  23     shouldBeEqualToString(text, color);
  24 }
  25
  26 var sandbox = document.getElementById('sandbox');
  27 sandbox.appendChild(
  28         createDOM('div', {'id': 'host'},
  29             createShadowRoot(
  30                 createDOM('div', {'id': 'target1', 'class': 'foo'},
  31                     document.createTextNode('Should have green background')),
  32                 createDOM('div', {'id': 'target2'},
  33                     document.createTextNode('Should have green background')),
  34                 createDOM('div', {'id': 'target3', 'class': 'bar'},
  35                     document.createTextNode('Should have blue background')),
  36                 createDOM('div', {'id': 'target4'},
  37                     document.createTextNode('Should have blue background')))));
  38 document.body.offsetLeft;
  39
  40 var style = document.createElement('style');
  41 style.innerHTML = 'div ^ .foo { background: green; }'
  42     + 'div ^ #target2 { background: green; }'
  43     + 'div ^^ .bar { background: blue; }'
  44     + 'div ^^ #target4 { background: blue; }';
  45 document.body.appendChild(style);
  46
  47 backgroundColorShouldBe('host/target1', 'rgb(0, 128, 0)');
  48 backgroundColorShouldBe('host/target2', 'rgb(0, 128, 0)');
  49 backgroundColorShouldBe('host/target3', 'rgb(0, 0, 255)');
  50 backgroundColorShouldBe('host/target4', 'rgb(0, 0, 255)');
  51 backgroundColorShouldBe('target5', 'rgb(0, 0, 255)');
  52 </script>
  53 </html>