src/third_party/WebKit/LayoutTests/inspector-protocol/shadow-dom-rules-in-styleSheetAddedEvent.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <script type="text/javascript" src="../http/tests/inspector-protocol/resources/protocol-test.js"></script>
   5 <script type="text/javascript">
   6 function pageLoaded()
   7 {
   8     var template = document.querySelector("#tmpl");
   9     var root = document.querySelector("#host").webkitCreateShadowRoot();
  10     root.appendChild(template.content.cloneNode(true));
  11     runTest();
  12 }
  13
  14 function test()
  15 {
  16     InspectorTest.eventHandler["CSS.styleSheetAdded"] = styleSheetAdded;
  17     InspectorTest.sendCommand("CSS.enable", {}, null);
  18
  19     function styleSheetAdded(msg)
  20     {
  21         var styleSheetHeader = msg.params.header;
  22         InspectorTest.sendCommand("CSS.getStyleSheetText", {"styleSheetId": styleSheetHeader.styleSheetId}, onStyleSheetText);
  23     }
  24
  25     function onStyleSheetText(payload)
  26     {
  27         InspectorTest.log("Loaded style sheet text: " + payload.result.text);
  28         InspectorTest.completeTest();
  29     }
  30 }
  31 </script>
  32 </head>
  33 <body onload="pageLoaded()">
  34 <p>This test checks that style sheets hosted inside shadow roots are reported in CSS.getAllStyleSheets protocol method.</p>
  35 <div id="host"></div>
  36 <template id="tmpl">
  37     <style> .red { color: red; } </style>
  38     <div id="inner" class="red">hi!</div>
  39 </template>
  40 </body>
  41 </html>