Fixes #3661: ensure that cached style points to the applied style for…

… Shady DOM styling. This ensures that the cache can be used to determine if a style needs to be applied to the document and prevents extra unnecessary styles from being added. This could happen when a property cascaded to a nested element and updateStyles was called after properties have changed.

src/standard/x-styling.html

@@ -187,6 +187,15 @@
           this._styleProperties, this._scopeSelector, info && info.style);
         // apply scope selector
         if (!nativeShadow) {
+          // update cached style to point to new style.
+          // TODO(sorvell): under ShadyDOM, the cached style is 
+          // used to style the element and the cache must be updated to point
+          // to the 'active' style so elements can determine if updates are needed.
+          // This is not the case under Shadow DOM. Ideally the cache 
+          // would be decoupled from style application/use.
+          if (info) {
+            info.style = style;
+          }
           propertyUtils.applyElementScopeSelector(this, this._scopeSelector,
             oldScopeSelector, this._scopeCssViaAttr);
         }

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

@@ -67,6 +67,10 @@
           padding: 8px;
           border: var(--scope-var);
         }
+
+        :host(.foo) {
+          border: var(--scope-var-foo);
+        }
       </style>
       Host property
     </template>
@@ -77,6 +81,34 @@
     </script>
   </dom-module>
 
+  <dom-module id="x-host-host-property">
+    <template>
+      <x-host-property id="hosted"></x-host-property>
+    </template>
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({is: 'x-host-host-property'});
+    });
+    </script>
+  </dom-module>
+
+  <dom-module id="x-produce-use-property">
+    <template>
+      <style>
+        :host {
+          --scope-var: 6px solid steelblue;
+          --scope-var-foo: 8px solid steelblue;
+        }
+      </style>
+      <x-host-host-property id="hosted"></x-host-host-property>
+    </template>
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({is: 'x-produce-use-property'});
+    });
+    </script>
+  </dom-module>
+
   <dom-module id="x-child-scope">
     <template>
       <style>
@@ -772,6 +804,38 @@
     assertComputed(styled.$.child.$.me, '2px');
   });
 
+  test('Nested element uses style cache when attached and updateStyles is called', function() {
+    var l = document.querySelectorAll('style').length;
+    var e1 = document.createElement('x-produce-use-property');
+    var e1t = e1.$.hosted.$.hosted;
+    var e2 = document.createElement('x-produce-use-property');
+    var e2t = e2.$.hosted.$.hosted;
+    document.body.appendChild(e1);
+    document.body.appendChild(e2);
+    CustomElements.takeRecords();
+    if (styled.shadyRoot) {
+      assert.equal(document.querySelectorAll('style').length, l+1);
+    }
+    assertComputed(e1t, '6px');
+    assertComputed(e2t, '6px');
+    e1.customStyle['--scope-var'] = '8px solid purple';
+    e2.customStyle['--scope-var'] = '8px solid purple';
+    Polymer.updateStyles();
+    assertComputed(e1t, '8px');
+    assertComputed(e2t, '8px');
+    if (styled.shadyRoot) {
+      assert.equal(document.querySelectorAll('style').length, l+1);
+    }
+    e1.customStyle['--scope-var'] = null;
+    e2.customStyle['--scope-var'] = null;
+    Polymer.updateStyles();
+    assertComputed(e1t, '6px');
+    assertComputed(e2t, '6px');
+    if (styled.shadyRoot) {
+      assert.equal(document.querySelectorAll('style').length, l+1);
+    }
+  })
+
   test('updateStyles changes own properties based on customStyle changes', function() {
     styled.$.child.customStyle['--child-scope-var'] = '30px solid orange';
     styled.$.child.updateStyles();