DevTools: Show CSS variables in the inherited properties cascade

third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-variables-expected.txt

Index: third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-variables-expected.txt
diff --git a/third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-variables-expected.txt b/third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-variables-expected.txt
index 4fb6516a62f0178dbd6233025e8356937cb38ebe..19d1d6935d9b07cd2f8f1a036fc3eb8845d92d9f 100644
--- a/third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-variables-expected.txt
+++ b/third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-variables-expected.txt
@@ -1,10 +1,12 @@
 Tests that computed styles expand and allow tracing to style rules.
 
 ==== Computed style for ID1 ====
---b:  44px;
-    44px - #id1 styles-variables.html:8 -> styles-variables.html:8:7
 display: block;
     block - div user agent stylesheet
+--a:  red;
+    red - body styles-variables.html:4 -> styles-variables.html:4:7
+--b:  44px;
+    44px - #id1 styles-variables.html:8 -> styles-variables.html:8:7
 [expanded] 
 element.style { ()
 
@@ -16,12 +18,20 @@ element.style { ()
 div { (user agent stylesheet)
     display: block;
 
+======== Inherited from body ========
+[expanded] 
+body { (styles-variables.html:4 -> styles-variables.html:4:7)
+    --a: red;
+
 value of --a:  red
 ==== Computed style for ID2 ====
---a:  green;
-    green - #id2 styles-variables.html:12 -> styles-variables.html:12:7
 display: block;
     block - div user agent stylesheet
+--a:  green;
+    green - #id2 styles-variables.html:12 -> styles-variables.html:12:7
+    OVERLOADED red - body styles-variables.html:4 -> styles-variables.html:4:7
+--b:  44px;
+    44px - #id1 styles-variables.html:8 -> styles-variables.html:8:7
 [expanded] 
 element.style { ()
 
@@ -33,12 +43,26 @@ element.style { ()
 div { (user agent stylesheet)
     display: block;
 
+======== Inherited from div#id1 ========
+[expanded] 
+#id1 { (styles-variables.html:8 -> styles-variables.html:8:7)
+    --b: 44px;
+
+======== Inherited from body ========
+[expanded] 
+body { (styles-variables.html:4 -> styles-variables.html:4:7)
+/-- overloaded --/     --a: red;
+
 value of --b:  44px
 ==== Computed style for ID3 ====
---a:  green;
-    inherit - #id3 styles-variables.html:16 -> styles-variables.html:16:7
 display: block;
     block - div user agent stylesheet
+--a:  green;
+    inherit - #id3 styles-variables.html:16 -> styles-variables.html:16:7
+    OVERLOADED green - #id2 styles-variables.html:12 -> styles-variables.html:12:7
+    OVERLOADED red - body styles-variables.html:4 -> styles-variables.html:4:7
+--b:  44px;
+    44px - #id1 styles-variables.html:8 -> styles-variables.html:8:7
 [expanded] 
 element.style { ()
 
@@ -50,6 +74,21 @@ element.style { ()
 div { (user agent stylesheet)
     display: block;
 
+======== Inherited from div#id2 ========
+[expanded] 
+#id2 { (styles-variables.html:12 -> styles-variables.html:12:7)
+/-- overloaded --/     --a: green;
+
+======== Inherited from div#id1 ========
+[expanded] 
+#id1 { (styles-variables.html:8 -> styles-variables.html:8:7)
+    --b: 44px;
+
+======== Inherited from body ========
+[expanded] 
+body { (styles-variables.html:4 -> styles-variables.html:4:7)
+/-- overloaded --/     --a: red;
+
 value of --b:  44px
 ==== Computed style for ID4 ====
 display: block;
@@ -65,5 +104,10 @@ element.style { ()
 div { (user agent stylesheet)
     display: block;
 
+======== Inherited from body ========
+[expanded] 
+body { (styles-variables.html:4 -> styles-variables.html:4:7)
+/-- overloaded --/     --a: red;
+
 value of --a: undefined