third_party/WebKit/LayoutTests/inspector-protocol/css/css-shadow-host-content-selector.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script type="text/javascript" src="../../http/tests/inspector-protocol/inspector-protocol-test.js"></script>
   5 <script type="text/javascript" src="../../http/tests/inspector-protocol/css-protocol-test.js"></script>
   6 <script type="text/javascript" src="../../http/tests/inspector-protocol/dom-protocol-test.js"></script>
   7 <script type="text/javascript">
   8 function test()
   9 {
  10     var documentNodeId;
  11     InspectorTest.requestDocumentNodeId(onDocumentNodeId);
  12
  13     function onDocumentNodeId(nodeId)
  14     {
  15         documentNodeId = nodeId;
  16         InspectorTest.sendCommandOrDie("CSS.enable", {}, onCSSEnabled);
  17     }
  18
  19     function onCSSEnabled()
  20     {
  21         InspectorTest.requestNodeId(documentNodeId, "#shadow-content", onNodeReceived);
  22     }
  23
  24     function onNodeReceived(nodeId)
  25     {
  26         InspectorTest.loadAndDumpMatchingRulesForNode(nodeId, InspectorTest.completeTest.bind(InspectorTest));
  27     }
  28 }
  29 </script>
  30 </head>
  31 <body>
  32     <div id="shadow-host">
  33         <p id="shadow-content">This text is bold</p>
  34     </div>
  35     <script type="text/javascript">
  36         var host = document.querySelector("#shadow-host");
  37         var root = host.createShadowRoot();
  38         root.innerHTML = "<style>:host ::content * { font-weight: bold; }</style><content></content>";
  39         runTest();
  40     </script>
  41 </body>
  42 </html>
  43