src/third_party/WebKit/LayoutTests/inspector-protocol/shadow-dom-rules-in-getAllStyleSheets.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>
   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.sendCommand("CSS.enable", {}, step1);
  17
  18     function step1()
  19     {
  20         InspectorTest.sendCommand("CSS.getAllStyleSheets", {}, step2);
  21     }
  22
  23     function step2(payload)
  24     {
  25         var headers = payload.result.headers
  26         InspectorTest.log("Loaded style sheets count: " + headers.length);
  27         var styleSheetHeader = headers[0];
  28         InspectorTest.sendCommand("CSS.getStyleSheetText", {"styleSheetId": styleSheetHeader.styleSheetId}, step3);
  29     }
  30
  31     function step3(payload)
  32     {
  33         InspectorTest.log("Loaded style sheet text: " + payload.result.text);
  34         InspectorTest.completeTest();
  35     }
  36 }
  37 </script>
  38 </head>
  39 <body onload="pageLoaded()">
  40 <p>This test checks that style sheets hosted inside shadow roots are reported in CSS.getAllStyleSheets protocol method.</p>
  41 <div id="host"></div>
  42 <template id="tmpl">
  43     <style> .red { color: red; } </style>
  44     <div id="inner" class="red">hi!</div>
  45 </template>
  46 </body>
  47 </html>