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

   1 <!DOCTYPE html>
   2 <script src="resources/shadow-dom.js"></script>
   3 <script src="../../../resources/js-test.js"></script>
   4 <body>
   5   <div id='sandbox'></div>
   6 </body>
   7 <script>
   8 function colorOf(node)
   9 {
  10     return document.defaultView.getComputedStyle(node, null).getPropertyValue('color');
  11 }
  12
  13 function colorShouldBe(selector, color)
  14 {
  15     var text = 'colorOf(getNodeInTreeOfTrees("' + selector + '"))';
  16     shouldBeEqualToString(text, color);
  17 }
  18
  19 function colorShouldNotBe(selector, color)
  20 {
  21     var text = 'colorOf(getNodeInTreeOfTrees("' + selector + '"))';
  22     var unevaledString = '"' + color.replace(/\\/g, "\\\\").replace(/"/g, "\"") + '"';
  23     shouldNotBe(text, unevaledString);
  24 }
  25
  26 function cleanUp()
  27 {
  28     document.getElementById('sandbox').innerHTML = '';
  29 }
  30
  31 description('Test for ::shadow pseudo element, http://crbug.com/367266.');
  32
  33 sandbox.appendChild(
  34     createDOM('div', {},
  35         createDOM('style', {'id': 'style-with-shadow'},
  36             document.createTextNode('div::shadow { color: red; }')),
  37         createDOM('div', {'id': 'host'},
  38             createShadowRoot(
  39                 createDOM('div', {'id': 'target'},
  40                     document.createTextNode('not red color.'))))));
  41
  42 colorShouldNotBe('host/target', 'rgb(255, 0, 0)');
  43
  44 var styleWithShadow = document.getElementById('style-with-shadow');
  45 styleWithShadow.innerHTML = ':not(div::shadow) { color: red; }';
  46
  47 colorShouldNotBe('host/target', 'rgb(255, 0, 0)');
  48
  49 styleWithShadow.innerHTML = ':-webkit-any(div::shadow, div::shadow div) { color: red; }';
  50
  51 colorShouldNotBe('host/target', 'rgb(255, 0, 0)');
  52
  53 cleanUp();
  54
  55 sandbox.appendChild(
  56     createDOM('div', {},
  57         createDOM('style', {},
  58             document.createTextNode('div::shadow + div { color: red; }')),
  59         createDOM('div', {'id': 'host'},
  60             createShadowRoot(
  61                 createDOM('div', {'id': 'first-direct-child'},
  62                     document.createTextNode('not red color.')),
  63                 createDOM('div', {'id': 'second-direct-child'},
  64                     document.createTextNode('not red color.')))),
  65         createDOM('div', {'id': 'host-sibling'},
  66             document.createTextNode('not red color.'))));
  67
  68 colorShouldNotBe('host/first-direct-child', 'rgb(255, 0, 0)');
  69 colorShouldNotBe('host/second-direct-child', 'rgb(255, 0, 0)');
  70 colorShouldNotBe('host-sibling', 'rgb(255, 0, 0)');
  71
  72 cleanUp();
  73
  74 sandbox.appendChild(
  75     createDOM('div', {},
  76         createDOM('style', {},
  77             document.createTextNode('div::shadow ~ div { color: red; }')),
  78         createDOM('div', {'id': 'host'},
  79             createShadowRoot(
  80                 createDOM('div', {'id': 'first-direct-child'},
  81                     document.createTextNode('not red color.')),
  82                 createDOM('div', {'id': 'second-direct-child'},
  83                     document.createTextNode('not red color.')))),
  84         createDOM('div', {'id': 'host-sibling'},
  85             document.createTextNode('not red color.'))));
  86
  87 colorShouldNotBe('host/first-direct-child', 'rgb(255, 0, 0)');
  88 colorShouldNotBe('host/second-direct-child', 'rgb(255, 0, 0)');
  89 colorShouldNotBe('host-sibling', 'rgb(255, 0, 0)');
  90
  91 cleanUp();
  92
  93 sandbox.appendChild(
  94     createDOM('div', {},
  95         createDOM('style', {},
  96             document.createTextNode('div::shadow > div { color: green; }')),
  97         createDOM('div', {'id': 'host'},
  98             createShadowRoot(
  99                 createDOM('div', {'id': 'direct-child'},
 100                     document.createTextNode('green color.')),
 101                 createDOM('p', {},
 102                     createDOM('div', {'id': 'not-direct-child'},
 103                         document.createTextNode('not green color.'))))),
 104             createDOM('div', {'id': 'host-child'},
 105                 document.createTextNode('not green color.'))));
 106
 107 colorShouldBe('host/direct-child', 'rgb(0, 128, 0)');
 108 colorShouldNotBe('host/not-direct-child', 'rgb(0, 128, 0)');
 109 colorShouldNotBe('host-child', 'rgb(0, 128, 0)');
 110
 111 cleanUp();
 112
 113 </script>
 114
 115