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

   1 <html>
   2 <head>
   3 <script type="text/javascript" src="../../http/tests/inspector-protocol/inspector-protocol-test.js"></script>
   4 <script type="text/javascript" src="../../http/tests/inspector-protocol/css-protocol-test.js"></script>
   5 <script type="text/javascript" src="../../http/tests/inspector-protocol/dom-protocol-test.js"></script>
   6 <script type="text/javascript">
   7 function test()
   8 {
   9     var documentNodeId;
  10
  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-host", onNodeReceived);
  22     }
  23
  24     function onNodeReceived(nodeId)
  25     {
  26         InspectorTest.loadAndDumpMatchingRulesForNode(nodeId, InspectorTest.completeTest.bind(InspectorTest));
  27     }
  28 }
  29 </script>
  30 <template id="shadow-template">
  31 <style>
  32 :host {
  33     color: red;
  34 }
  35 </style>
  36 <div>Hi!</div>
  37 </template>
  38 </head>
  39 <body>
  40     <div id="shadow-host"></div>
  41     <script>
  42         var host = document.querySelector("#shadow-host").createShadowRoot();
  43         var template = document.querySelector("#shadow-template");
  44         host.appendChild(template.content);
  45         template.remove();
  46         runTest();
  47     </script>
  48 </body>
  49 </html>