third_party/WebKit/LayoutTests/inspector/elements/shadow/inspect-deep-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     InspectorTest.firstElementsTreeOutline().addEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, selectedNodeChanged, this);
  11     function selectedNodeChanged(event)
  12     {
  13         var node = event.data;
  14         if (!node)
  15             return;
  16         if (node.getAttribute("id") == "shadow") {
  17             InspectorTest.addResult(WebInspector.DOMPresentationUtils.xPath(node, false));
  18             InspectorTest.completeTest();
  19         }
  20     }
  21     InspectorTest.evaluateInConsole("inspect(host.shadowRoot.firstChild.firstChild.firstChild)");
  22 }
  23
  24 </script>
  25 </head>
  26
  27 <body onload="runTest()">
  28 <p>
  29 Tests that inspect element action works for deep shadow elements.
  30 </p>
  31
  32 <div>
  33   <div>
  34     <div id="host">
  35     </div>
  36   </div>
  37 </div>
  38
  39 <script>
  40     var host = document.querySelector('#host');
  41     var sr = host.createShadowRoot();
  42     sr.innerHTML = "<div><div><span id='shadow'>Shadow</span></div></div>";
  43 </script>
  44
  45 </body>
  46 </html>