src/third_party/WebKit/LayoutTests/inspector/console/shadow-element.html

   1 <html>
   2 <head>
   3 <script src="../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../../http/tests/inspector/console-test.js"></script>
   5 <script src="../../http/tests/inspector/elements-test.js"></script>
   6 <script>
   7
   8 function test()
   9 {
  10     WebInspector.settings.showUAShadowDOM.set(true);
  11     InspectorTest.selectNodeWithId("shadow", step1);
  12
  13     function step1()
  14     {
  15         InspectorTest.evaluateInConsoleAndDump("'Author shadow element: ' + $0.id", step3);
  16     }
  17
  18     function step3()
  19     {
  20         InspectorTest.selectNodeWithId("user-agent-host", step4);
  21     }
  22
  23     function step4(node)
  24     {
  25         WebInspector.panels.elements.revealAndSelectNode(node.shadowRoots()[0]);
  26         InspectorTest.evaluateInConsoleAndDump("'User agent shadow host: ' + $0.id", step5);
  27     }
  28
  29     function step5()
  30     {
  31         InspectorTest.completeTest();
  32     }
  33 }
  34 </script>
  35 </head>
  36
  37 <body onload="runTest()">
  38 <p>
  39 Tests that $0 works with shadow dom.
  40 </p>
  41
  42 <div><div><div id="host"></div></div></div>
  43 <script>
  44   var host = document.querySelector('#host');
  45   var sr = host.createShadowRoot();
  46   sr.innerHTML = "<div><div><div id='shadow'><input id='user-agent-host' type='range'></div></div></div>";
  47 </script>
  48
  49 </body>
  50 </html>