[DevTools] Show distribution for Shadow DOM V1.

third_party/WebKit/LayoutTests/inspector/elements/shadow/inspect-deep-shadow-element.html

Index: third_party/WebKit/LayoutTests/inspector/elements/shadow/inspect-deep-shadow-element.html
diff --git a/third_party/WebKit/LayoutTests/inspector/elements/shadow/inspect-deep-shadow-element.html b/third_party/WebKit/LayoutTests/inspector/elements/shadow/inspect-deep-shadow-element.html
index 88856aa511f5664554cf425365e4fdb2436497de..efaa9134a907e092cbeeaf6dfd2dd875f5b740a9 100644
--- a/third_party/WebKit/LayoutTests/inspector/elements/shadow/inspect-deep-shadow-element.html
+++ b/third_party/WebKit/LayoutTests/inspector/elements/shadow/inspect-deep-shadow-element.html
@@ -7,18 +7,35 @@
 
 function test()
 {
-    InspectorTest.firstElementsTreeOutline().addEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, selectedNodeChanged, this);
+    InspectorTest.firstElementsTreeOutline().addEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, selectedNodeChanged);
+
+    var tests = [
+        ["shadow", "inspect(host.shadowRoot.firstChild.firstChild.firstChild)"],
+        ["shadow-open", "inspect(hostOpen.shadowRoot.firstChild.firstChild.firstChild)"]
+    ];
+
     function selectedNodeChanged(event)
     {
         var node = event.data;
         if (!node)
             return;
-        if (node.getAttribute("id") == "shadow") {
+        if (node.getAttribute("id") == tests[0][0]) {
             InspectorTest.addResult(WebInspector.DOMPresentationUtils.xPath(node, false));
+            tests.shift();
+            nextTest();
+        }
+    }
+
+    function nextTest()
+    {
+        if (!tests.length) {
             InspectorTest.completeTest();
+            return;
         }
+        InspectorTest.evaluateInConsole(tests[0][1]);
     }
-    InspectorTest.evaluateInConsole("inspect(host.shadowRoot.firstChild.firstChild.firstChild)");
+
+    nextTest();
 }
 
 </script>
@@ -31,15 +48,14 @@ Tests that inspect element action works for deep shadow elements.
 
 <div>
   <div>
-    <div id="host">
-    </div>
+    <div id="host"></div>
+    <span id="hostOpen"></span>
   </div>
 </div>
 
 <script>
-    var host = document.querySelector('#host');
-    var sr = host.createShadowRoot();
-    sr.innerHTML = "<div><div><span id='shadow'>Shadow</span></div></div>";
+    document.querySelector('#host').createShadowRoot().innerHTML = "<div><div><span id='shadow'>Shadow</span></div></div>";
+    document.querySelector('#hostOpen').attachShadow({ mode: "open" }).innerHTML = "<div><div><span id='shadow-open'>Shadow</span></div></div>";
 </script>
 
 </body>