Always update style properties when calling getComputedStyleValue

Fixes #4125

src/standard/x-styling.html

@@ -52,6 +52,8 @@
      * @return {String} the computed value
      */
       getComputedStyleValue: function(property) {
+        // refresh the style properties for this node
+        this._updateStyleProperties();
         return !nativeVariables && this._styleProperties &&
           this._styleProperties[property] ||
           getComputedStyle(this).getPropertyValue(property);
@@ -212,12 +214,14 @@
       },
 
       _computeOwnStyleProperties: function() {
-        var props = {};
-        for (var i=0, n; i < this._ownStylePropertyNames.length; i++) {
-          n = this._ownStylePropertyNames[i];
-          props[n] = this._styleProperties[n];
+        if (this._ownStylePropertyNames) {
+          var props = {};
+          for (var i=0, n; i < this._ownStylePropertyNames.length; i++) {
+            n = this._ownStylePropertyNames[i];
+            props[n] = this._styleProperties[n];
+          }
+          this._ownStyleProperties = props;
         }
-        this._ownStyleProperties = props;
       },
 
       _scopeCount: 0,

test/unit/styling-cross-scope-var.html

@@ -857,6 +857,30 @@
   </script>
 </dom-module>
 
+<dom-module id="prop-inner">
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({is: 'prop-inner'});
+  });
+  </script>
+</dom-module>
+
+<dom-module id="prop-outer">
+  <template>
+    <style>
+    :host {
+      --foo: orange;
+    }
+    </style>
+    <prop-inner id="inner"></prop-inner>
+  </template>
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({is: 'prop-outer'});
+  });
+  </script>
+</dom-module>
+
 <script>
   suite('scoped-styling-var', function() {
 
@@ -1307,6 +1331,14 @@
     assertComputed(e.$.root, '2px');
     assertComputed(e.$.host, '10px');
   });
+
+  test('elements in the dom should be able to query for inherited variables', function() {
+    var e = document.createElement('prop-outer');
+    document.body.appendChild(e);
+    CustomElements.takeRecords();
+    assert.equal(e.getComputedStyleValue('--foo'), 'orange');
+    assert.equal(e.$.inner.getComputedStyleValue('--foo'), 'orange');
+  })
 });
 
 </script>