third_party/WebKit/LayoutTests/inspector/elements/styles-3/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').createShadowRoot();
  11     root.appendChild(template.content.cloneNode(true));
  12 }
  13
  14 function test()
  15 {
  16     InspectorTest.runTestSuite([
  17         function testInit(next)
  18         {
  19             InspectorTest.evaluateInPage("createShadowRoot()", callback);
  20             function callback()
  21             {
  22               InspectorTest.selectNodeAndWaitForStyles("inner", next);
  23             }
  24         },
  25
  26         function testDumpStyles(next)
  27         {
  28             InspectorTest.dumpSelectedElementStyles(true);
  29             next();
  30         }
  31     ]);
  32 }
  33 </script>
  34 </head>
  35
  36 <body onload="runTest()">
  37 <p>
  38 This test checks that style sheets hosted inside shadow roots
  39 could be inspected.
  40 </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>