src/third_party/WebKit/LayoutTests/inspector/elements/reveal-shadow-dom-node.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);
  10
  11     var nodeChangesRemaining = 2;
  12     function selectedNodeChanged(event)
  13     {
  14         var node = event.data;
  15         if (node.nodeName() === "BODY")
  16             return;
  17         InspectorTest.addResult("SelectedNodeChanged: " + node.localName() + " " + shadowDOMPart(node));
  18         if (!--nodeChangesRemaining)
  19             InspectorTest.completeTest();
  20     }
  21
  22     function shadowDOMPart(node)
  23     {
  24         if (!node.isInShadowTree())
  25             return "(not in shadow tree)";
  26         return "(in " + (node.ancestorUserAgentShadowRoot() ? "user-agent" : "author") + " shadow DOM)";
  27     }
  28
  29     InspectorTest.nodeWithId("nested-input", function(node) {
  30         node.shadowRoots()[0].getChildNodes(childrenCallback);
  31
  32         function childrenCallback(children)
  33         {
  34             var shadowDiv = children[0];
  35             InspectorTest.addResult("User-agent shadow DOM hidden:");
  36             WebInspector.panels.elements.revealAndSelectNode(shadowDiv);
  37             WebInspector.settings.showUAShadowDOM.set(true);
  38             InspectorTest.addResult("User-agent shadow DOM shown:");
  39             WebInspector.panels.elements.revealAndSelectNode(shadowDiv);
  40         }
  41     });
  42 }
  43 </script>
  44 </head>
  45
  46 <body onload="runTest()">
  47
  48 <p id="description">This test verifies that the correct node is revealed in the DOM tree when asked to reveal a user-agent shadow DOM node.</p>
  49
  50 <p id="test1"></p>
  51
  52 <script>
  53 var input = document.createElement("input");
  54 input.id = "nested-input";
  55 input.value = "test";
  56 test1.createShadowRoot().appendChild(input);
  57 </script>
  58
  59 </body>
  60 </html>