third_party/WebKit/LayoutTests/http/tests/inspector-enabled/shadow-dom-rules.html

   1 <html>
   2 <head>
   3 <script src="../inspector/inspector-test.js"></script>
   4 <script src="../inspector/elements-test.js"></script>
   5 <script>
   6
   7 function createShadowRoot()
   8 {
   9     if (window.testRunner)
  10         testRunner.waitUntilDone();
  11     var template = document.querySelector('#tmpl');
  12     var root = document.querySelector('#host').createShadowRoot();
  13     root.appendChild(template.content.cloneNode(true));
  14     if (window.testRunner)
  15         testRunner.showWebInspector();
  16     runTest();
  17 }
  18
  19 function test()
  20 {
  21     InspectorTest.runTestSuite([
  22         function testInit(next)
  23         {
  24             InspectorTest.selectNodeAndWaitForStyles("inner", next);
  25         },
  26
  27         function testDumpStyles(next)
  28         {
  29             InspectorTest.dumpSelectedElementStyles(true);
  30             next();
  31         }
  32     ]);
  33 }
  34 </script>
  35 </head>
  36
  37 <body onload="createShadowRoot()">
  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>