DevTools: Autocomplete CSS variables in StylesSidebar

third_party/WebKit/LayoutTests/inspector/elements/styles-3/style-autocomplete.html

Index: third_party/WebKit/LayoutTests/inspector/elements/styles-3/style-autocomplete.html
diff --git a/third_party/WebKit/LayoutTests/inspector/elements/styles-3/style-autocomplete.html b/third_party/WebKit/LayoutTests/inspector/elements/styles-3/style-autocomplete.html
index fc538ad8f68dd3809162fc824fa3079e8daf43d6..9ac3b04679ee5f3ea03171ec1048feada0f7d060 100644
--- a/third_party/WebKit/LayoutTests/inspector/elements/styles-3/style-autocomplete.html
+++ b/third_party/WebKit/LayoutTests/inspector/elements/styles-3/style-autocomplete.html
@@ -6,12 +6,12 @@
 
 function test()
 {
-    var namePrompt = new Elements.StylesSidebarPane.CSSPropertyPrompt(SDK.cssMetadata().allProperties(), null, true);
+    var namePrompt = new Elements.StylesSidebarPane.CSSPropertyPrompt(SDK.cssMetadata().allProperties(), ['--red-color', '--blue-color'], null, true);
     var valuePrompt = valuePromptFor("color");
 
     function valuePromptFor(name)
     {
-        return new Elements.StylesSidebarPane.CSSPropertyPrompt(SDK.cssMetadata().propertyValues(name), null, false);
+        return new Elements.StylesSidebarPane.CSSPropertyPrompt(SDK.cssMetadata().propertyValues(name), ['--red-color', '--blue-color'], null, false);
     }
 
     InspectorTest.runTestSuite([
@@ -73,6 +73,16 @@ function test()
         function testValueSubstring(next)
         {
             testAgainstGolden(valuePromptFor("color"), "blue", false, ["blue", "darkblue", "lightblue"], ["darkred", "yellow", "initial", "inherit"], next);
+        },
+
+        function testNameVariables(next)
+        {
+            testAgainstGolden(namePrompt, "", true, ["--red-color", "--blue-color"], [], next);
+        },
+
+        function testValueVariables(next)
+        {
+            testAgainstGolden(valuePromptFor("color"), "var(", true, ["--red-color)", "--blue-color)"], ["width"], next);
         }
    ]);