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