Show custom properties in the computed style pane of the inspector.

third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-variables.html

Index: third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-variables.html
diff --git a/third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-computed-trace.html b/third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-variables.html
similarity index 64%
copy from third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-computed-trace.html
copy to third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-variables.html
index 24274d125adcbfd0c78247be3ada10692a38228e..4e54fb02af95d9c21e510e55e4b9b9d7c220d1c1 100644
--- a/third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-computed-trace.html
+++ b/third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-variables.html
@@ -4,6 +4,7 @@
 body {
     background-color: rgb(100, 0, 0);
     font-family: Arial;
+    --a: red;
 }
 
 div {
@@ -13,6 +14,7 @@ div {
 #id1 {
     background-color: green;
     font-family: Times;
+    --b: 44px;
 }
 
 #id1 {
@@ -28,6 +30,7 @@ div {
     background-color: blue;
     font-family: Courier;
     text-decoration: invalidvalue;
+    --a: green;
 }
 
 </style>
@@ -38,27 +41,26 @@ div {
 function test()
 {
     InspectorTest.selectNodeAndWaitForStylesWithComputed("id1", step1);
-
-    function step1()
+    function step1(node)
     {
         InspectorTest.addResult("==== Computed style for ID1 ====");
         InspectorTest.dumpSelectedElementStyles(false, true);
-        InspectorTest.selectNodeAndWaitForStylesWithComputed("id2", step2);
+        InspectorTest.cssModel.computedStylePromise(node.id).then(
+            function(style) {
+                InspectorTest.addResult("value of --a: " + style.get("--a"));
+                InspectorTest.selectNodeAndWaitForStylesWithComputed("id2", step2);
+            });
     }
 
-    function step2()
+    function step2(node)
     {
         InspectorTest.addResult("==== Computed style for ID2 ====");
         InspectorTest.dumpSelectedElementStyles(false, true);
-        InspectorTest.selectNodeAndWaitForStylesWithComputed("id3", step3);
-    }
-
-    function step3()
-    {
-        InspectorTest.addResult("==== Style for ID3 ====");
-        // The button[hidden] style specifies "display: none", which should not be /-- overloaded --/.
-        InspectorTest.dumpSelectedElementStyles(true, true);
-        InspectorTest.completeTest();
+        InspectorTest.cssModel.computedStylePromise(node.id).then(
+            function(style) {
+                InspectorTest.addResult("value of --b: " + style.get("--b"));
+                InspectorTest.completeTest();
+            });
     }
 
 }
@@ -73,7 +75,6 @@ Tests that computed styles expand and allow tracing to style rules.
 <div id="id1">
 <div id="id2">
 </div>
-<button id="id3" hidden />
 </div>
 
 </body>