From 717fc3afba3f58a05b77569599289fd599188938 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Wed, 18 May 2016 15:00:17 -0700
Subject: [PATCH] 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            |  9 ++++
 test/unit/styling-cross-scope-var.html | 64 ++++++++++++++++++++++++++
 2 files changed, 73 insertions(+)

diff --git a/src/standard/x-styling.html b/src/standard/x-styling.html
index 23150ed4f8..211565ec09 100644
--- a/src/standard/x-styling.html
+++ b/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);
         }
diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html
index 36d0063b0d..2463842343 100644
--- a/test/unit/styling-cross-scope-var.html
+++ b/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();