Merge pull request #1797 from Polymer/fix-1752

Fix 1752
Polymer · Jun 12, 2015 · b58343a · b58343a
2 parents 622c731 + 1273227
commit b58343a
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 16 deletions.
diff --git a/src/lib/style-defaults.html b/src/lib/style-defaults.html
@@ -36,6 +36,7 @@
           this._styles._scopeStyleProperties = null;
           this._properties = styleProperties
             .scopePropertiesFromStyles(this._styles);
+          styleProperties.reify(this._properties);
         }
         return this._properties;
       },

diff --git a/test/smoke/custom-reify.html b/test/smoke/custom-reify.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+<link rel="import" href="../../polymer.html">
+
+<body>
+  <style is="custom-style">
+    :root {
+       --mood1: orange; 
+      --mood: var(--mood1);
+
+      /* --mood: yellow; */
+    }
+
+  </style>
+
+  <style is="custom-style">
+    .zonk {
+      --mood1: red;
+    }
+
+    .bar {
+      --mood1: blue;
+    }
+  </style>
+
+
+
+  <x-test class="zonk"></x-test>
+
+  <x-test class="bar"></x-test>
+
+  <dom-module id="x-test">
+    <style>
+      .mood {
+        /* background: var(--mood1, --mood); */
+        background: var(--mood);
+      }
+    </style>
+    <template>
+      <div class="mood">Mood</div>
+    </template>
+    <script>
+    addEventListener('HTMLImportsLoaded', function() {
+      Polymer({
+        is: 'x-test'
+      });
+    });
+  </script>
+  </dom-module>
+
+
+</body>
+
diff --git a/test/unit/custom-style.html b/test/unit/custom-style.html
@@ -182,7 +182,7 @@
         }, 0);
       });
 
-      test('custom-styles apply normal and property values to elements', function() {
+      test('custom-styles apply normal and property values to elements and cannot be late bound via inheritance', function() {
         var e = document.querySelector('x-foo').$.me;
         assertComputed(e, '1px');
       });

diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html
@@ -156,6 +156,49 @@
     </script>
   </dom-module>
 
+  <dom-module id="x-late">
+    <style>
+      :host {
+        border: var(--late);
+        display: block;
+      }
+    </style>
+
+    <template>
+      late
+    </template>
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({is: 'x-late'});
+    });
+    </script>
+  </dom-module>
+
+  <dom-module id="x-overrides3">
+    <style>
+      :host {
+        border: 1px dashed gray;
+        margin: 8px;
+        padding: 8px;
+        display: block;
+      }
+
+      :root {
+        --fillin: 16px;
+      }
+    </style>
+
+    <template>
+      overrides:
+      <x-late id="late"></x-late>
+    </template>
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({is: 'x-overrides3'});
+    });
+    </script>
+  </dom-module>
+
   <dom-module id="x-has-if">
     <style>
       .iffy {
@@ -194,6 +237,7 @@
         --a: 10px;
         --b: 5px;
         --primary-color: rgb(128, 128, 128);
+        --late: var(--fillin);
       }
 
       #me {
@@ -230,11 +274,11 @@
         background-color: var(--default3);
       }
 
-      #overrides1, #overrides2, #overrides3 {
+      #overrides1a, #overrides1b, #overrides2 {
         --rename: 8px solid navy;
       }
 
-      #overrides2, #overrides3 {
+      #overrides1b, #overrides2 {
         --grand-child-scope-var: 9px solid orange;
       }
 
@@ -261,9 +305,10 @@
       <div id="me">x-scope</div>
       <x-child-scope id="child"></x-child-scope>
       <x-child-scope id="child2"></x-child-scope>
-      <x-overrides id="overrides1"></x-overrides>
-      <x-overrides id="overrides2"></x-overrides>
-      <x-overrides2 id="overrides3"></x-overrides2>
+      <x-overrides id="overrides1a"></x-overrides>
+      <x-overrides id="overrides1b"></x-overrides>
+      <x-overrides2 id="overrides2"></x-overrides2>
+      <x-overrides3 id="overrides3"></x-overrides3>
       <div id="default1">default</div>
       <div id="default2">var default</div>
       <div id="default3">tricky property rgb(...) default</div>
@@ -398,20 +443,26 @@
 
   test('variable precedence and overrides', function() {
     // renamed property applied
-    var o1 = styled.$.overrides1;
-    assertStylePropertyValue(o1._styleProperties, '--rename', '8px');
-    assertStylePropertyValue(o1._styleProperties, '--grand-child-scope-var', '8px');
-    assertComputed(o1.$.gc1.$.me, '8px');
+    var o1a = styled.$.overrides1a;
+    assertStylePropertyValue(o1a._styleProperties, '--rename', '8px');
+    assertStylePropertyValue(o1a._styleProperties, '--grand-child-scope-var', '8px');
+    assertComputed(o1a.$.gc1.$.me, '8px');
     // :host property overridden by outer scope
+    var o1b = styled.$.overrides1b;
+    assertStylePropertyValue(o1b._styleProperties, '--rename', '8px');
+    assertStylePropertyValue(o1b._styleProperties, '--grand-child-scope-var', '9px');
+    assertComputed(o1b.$.gc1.$.me, '9px');
+    // own scope property overrides outer scope
     var o2 = styled.$.overrides2;
     assertStylePropertyValue(o2._styleProperties, '--rename', '8px');
-    assertStylePropertyValue(o2._styleProperties, '--grand-child-scope-var', '9px');
-    assertComputed(o2.$.gc1.$.me, '9px');
-    // own scope property overrides outer scope
+    assertStylePropertyValue(o2._styleProperties, '--grand-child-scope-var', '8px');
+    assertComputed(o2.$.gc1.$.me, '8px');
+
+    // late bound property does *not* resolve using inherited value
     var o3 = styled.$.overrides3;
-    assertStylePropertyValue(o3._styleProperties, '--rename', '8px');
-    assertStylePropertyValue(o3._styleProperties, '--grand-child-scope-var', '8px');
-    assertComputed(o3.$.gc1.$.me, '8px');
+    assert.equal(o3._styleProperties['--late'], '', 'property should not be late bound');
+    assertStylePropertyValue(o3._styleProperties, '--fillin', '16px');
+    assertComputed(o3.$.late, '0px');
 
   });