src/third_party/WebKit/LayoutTests/inspector/elements/styles/shadow-dom-rules.html

   1 <html>
   2 <head>
   3 <script src="../../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../../../http/tests/inspector/elements-test.js"></script>
   5 <script>
   6
   7 function createShadowRoot()
   8 {
   9     var template = document.querySelector('#tmpl');
  10     var root = document.querySelector('#host').webkitCreateShadowRoot();
  11     root.appendChild(template.content.cloneNode(true));
  12 }
  13
  14 function test()
  15 {
  16     InspectorTest.runTestSuite([
  17         function testInit(next)
  18         {
  19             WebInspector.settings.showShadowDOM.set(true);
  20             InspectorTest.evaluateInPage("createShadowRoot()", callback);
  21             function callback()
  22             {
  23               InspectorTest.selectNodeAndWaitForStyles("inner", next);
  24             }
  25         },
  26
  27         function testDumpStyles(next)
  28         {
  29             InspectorTest.dumpSelectedElementStyles(true);
  30             next();
  31         }
  32     ]);
  33 }
  34 </script>
  35 </head>
  36
  37 <body onload="runTest()">
  38 <p>
  39 This test checks that style sheets hosted inside shadow roots
  40 could be inspected.
  41 </p>
  42 <div id="host"></div>
  43 <template id="tmpl">
  44     <style> .red { color: red; } </style>
  45     <div id="inner" class="red">hi!</div>
  46 </template>
  47 </body>
  48 </html>