From fb8575c6f2824f75bcfaa3072b5c00d6c09c9547 Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Thu, 3 Nov 2016 14:54:16 -0700
Subject: [PATCH 1/3] Always update style properties when calling
 getComputedStyleValue

Fixes #4125
---
 src/standard/x-styling.html            | 14 +++++++----
 test/unit/styling-cross-scope-var.html | 32 ++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/standard/x-styling.html b/src/standard/x-styling.html
index 2aaf734d41..7c065753ae 100644
--- a/src/standard/x-styling.html
+++ b/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,
diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html
index b37482cede..db625877c0 100644
--- a/test/unit/styling-cross-scope-var.html
+++ b/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>

From 5231d87f31f53e23dbde1520c903f6ff86f504de Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Thu, 3 Nov 2016 15:35:59 -0700
Subject: [PATCH 2/3] simpler implementation, only recompute when using shim
 variables

---
 src/standard/x-styling.html            | 16 ++++++++--------
 test/unit/styling-cross-scope-var.html |  4 ++--
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/standard/x-styling.html b/src/standard/x-styling.html
index 7c065753ae..7f15494e5b 100644
--- a/src/standard/x-styling.html
+++ b/src/standard/x-styling.html
@@ -53,7 +53,9 @@
      */
       getComputedStyleValue: function(property) {
         // refresh the style properties for this node
-        this._updateStyleProperties();
+        if (!nativeVariables) {
+          this._computeStyleProperties();
+        }
         return !nativeVariables && this._styleProperties &&
           this._styleProperties[property] ||
           getComputedStyle(this).getPropertyValue(property);
@@ -214,14 +216,12 @@
       },
 
       _computeOwnStyleProperties: function() {
-        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;
+        var props = {};
+        for (var i=0, n; i < this._ownStylePropertyNames.length; i++) {
+          n = this._ownStylePropertyNames[i];
+          props[n] = this._styleProperties[n];
         }
+        this._ownStyleProperties = props;
       },
 
       _scopeCount: 0,
diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html
index db625877c0..324ab3530a 100644
--- a/test/unit/styling-cross-scope-var.html
+++ b/test/unit/styling-cross-scope-var.html
@@ -1336,8 +1336,8 @@
     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');
+    assert.equal(e.getComputedStyleValue('--foo').trim(), 'orange');
+    assert.equal(e.$.inner.getComputedStyleValue('--foo').trim(), 'orange');
   })
 });
 

From 5bfe27928505c5b400d1eddef24bd2afdddbee6f Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Thu, 3 Nov 2016 16:30:12 -0700
Subject: [PATCH 3/3] only need to recalc if styleProperties missing

---
 src/standard/x-styling.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/standard/x-styling.html b/src/standard/x-styling.html
index 7f15494e5b..7707d73c27 100644
--- a/src/standard/x-styling.html
+++ b/src/standard/x-styling.html
@@ -53,7 +53,7 @@
      */
       getComputedStyleValue: function(property) {
         // refresh the style properties for this node
-        if (!nativeVariables) {
+        if (!nativeVariables && !this._styleProperties) {
           this._computeStyleProperties();
         }
         return !nativeVariables && this._styleProperties &&