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