third_party/WebKit/LayoutTests/fast/css/content-distributed-nodes.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/js-test.js"></script>
   3 <div id="host">
   4   <div>
   5     <span class="red" id="span">red?</span>
   6   </div>
   7 </div>
   8 <script>
   9 description('Checking if styles in the nested shadow roots apply properly to distributed elements.');
  10 var root = document.querySelector('#host').createShadowRoot();
  11 root.innerHTML = '<div><content></content></div><style>::content .red { color: green; }</style>';
  12 var root2 = root.firstChild.createShadowRoot();
  13 root2.innerHTML = '<style>::content .red { background-color: green; color: red; }</style><content></content>';
  14 var span = document.querySelector('#span');
  15 shouldBeEqualToString('getComputedStyle(span).color', 'rgb(255, 0, 0)');
  16 shouldBeEqualToString('getComputedStyle(span).backgroundColor', 'rgb(0, 128, 0)');
  17 </script>