[DevTools] Show distribution for Shadow DOM V1.

third_party/WebKit/LayoutTests/inspector/elements/shadow/create-shadow-root.html

Index: third_party/WebKit/LayoutTests/inspector/elements/shadow/create-shadow-root.html
diff --git a/third_party/WebKit/LayoutTests/inspector/elements/shadow/create-shadow-root.html b/third_party/WebKit/LayoutTests/inspector/elements/shadow/create-shadow-root.html
index 4775077bea72cdd1d8366366cf2a575b1b62d906..60d9b52e907fddfc8a0f2f52fea750150e96f4d4 100644
--- a/third_party/WebKit/LayoutTests/inspector/elements/shadow/create-shadow-root.html
+++ b/third_party/WebKit/LayoutTests/inspector/elements/shadow/create-shadow-root.html
@@ -11,48 +11,55 @@ function createShadowRoot(id)
     root.innerHTML = "<div id='" + id + "'></div>";
 }
 
-function test()
+function createShadowRootV1(containerId, id, mode)
 {
-    var containerNode;
+    var container = document.getElementById(containerId);
+    var root = container.attachShadow({ mode: mode });
+    root.innerHTML = "<div id='" + id + "'></div>";
+}
 
+function test()
+{
     InspectorTest.runTestSuite([
-        function testDumpInitial(next)
+        function testCreateShadowRoot(next)
         {
-            function callback(node)
-            {
-                containerNode = InspectorTest.expandedNodeWithId("container");
-                expandAndDumpContainerNode("========= Original ========", next)();
-            }
-            InspectorTest.expandElementsTree(callback);
+            testShadowRoot("container", "createShadowRoot('shadow-1')", next);
         },
 
-        function testCreateShadowRoot(next)
+        function testCreateSecondShadowRoot(next)
         {
-            InspectorTest.evaluateInPage(
-                "createShadowRoot('shadow-1')",
-                expandAndDumpContainerNode("===== After createShadowRoot =====", next));
+            testShadowRoot("container", "createShadowRoot('shadow-2')", next);
         },
 
-        function testCreateSecondShadowRoot(next)
+        function testCreateOpenShadowRoot(next)
         {
-            InspectorTest.evaluateInPage(
-                "createShadowRoot('shadow-2')",
-                expandAndDumpContainerNode("===== After second createShadowRoot =====", next));
-        }
+            testShadowRoot("containerOpen", "createShadowRootV1('containerOpen', 'shadow-3', 'open')", next);
+        },
+
+        function testCreateCloseShadowRoot(next)
+        {
+            testShadowRoot("containerClosed", "createShadowRootV1('containerClosed', 'shadow-4', 'closed')", next);
+        },
     ]);
 
-    function expandAndDumpContainerNode(title, next)
+    function testShadowRoot(containerId, code, next)
     {
-        return function()
+        var containerNode;
+        InspectorTest.expandElementsTree(dumpBefore);
+
+        function dumpBefore()
         {
-            InspectorTest.addResult(title);
-            InspectorTest.expandElementsTree(callback);
+            containerNode = InspectorTest.expandedNodeWithId(containerId);
+            InspectorTest.addResult("==== before ====");
+            InspectorTest.dumpElementsTree(containerNode);
+            InspectorTest.evaluateInPage(code, InspectorTest.expandElementsTree.bind(InspectorTest, dumpAfter));
+        }
 
-            function callback()
-            {
-                InspectorTest.dumpElementsTree(containerNode);
-                next();
-            }
+        function dumpAfter()
+        {
+            InspectorTest.addResult("==== after ====");
+            InspectorTest.dumpElementsTree(containerNode);
+            next();
         }
     }
 }
@@ -66,6 +73,8 @@ Tests that elements panel updates dom tree structure upon shadow root creation.
 </p>
 
 <div id="container"><div id="child"></div></div>
+<div id="containerOpen"><div id="childOpen"></div></div>
+<div id="containerClosed"><div id="childClosed"></div></div>
 
 </body>
 </html>