Fixes #2690

Polymer · Nov 5, 2015 · d8b78d4 · d8b78d4
1 parent 8949c04
commit d8b78d4
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 28 deletions.
diff --git a/src/standard/x-styling.html b/src/standard/x-styling.html
@@ -42,6 +42,16 @@
        */
       customStyle: null,
 
+      /**
+     * Returns the computed style value for the given property.
+     * @param {String} property
+     * @return {String} the computed value
+     */
+      getComputedStyleValue: function(property) {
+        return this._styleProperties && this._styleProperties[property] ||
+          getComputedStyle(this).getPropertyValue(property);
+      },
+
       // here we have an instance time spot to put custom property data
       _setupStyleProperties: function() {
         this.customStyle = {};

diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html
@@ -478,13 +478,16 @@
   suite('scoped-styling-var', function() {
 
   function assertComputed(element, value, pseudo) {
-    var computed = getComputedStyle(element, pseudo);
-    assert.equal(computed['border-top-width'], value, 'computed style incorrect');
+    var name = 'border-top-width';
+    var computed = element.getComputedStyleValue && !pseudo ? 
+      element.getComputedStyleValue(name) : 
+      getComputedStyle(element, pseudo)[name];
+    assert.equal(computed, value, 'computed style incorrect');
   }
 
-  function assertStylePropertyValue(properties, name, includeValue) {
-    assert.property(properties, name);
-    assert.include(properties[name], includeValue);
+  function assertStylePropertyValue(element, name, includeValue) {
+    var value = element.getComputedStyleValue(name);
+    assert.include(value, includeValue);
   }
 
   var styled = document.querySelector('x-scope');
@@ -496,27 +499,27 @@
   });
 
   test('simple variables calculated correctly between scopes', function() {
-     assertStylePropertyValue(styled._styleProperties, '--scope-var', '1px');
+     assertStylePropertyValue(styled, '--scope-var', '1px');
      //
      var child = styled.$.child;
-     assertStylePropertyValue(child._styleProperties, '--scope-var', '1px');
-     assertStylePropertyValue(child._styleProperties, '--child-scope-var', '2px');
-     assertStylePropertyValue(child._styleProperties, '--grand-child-scope-var', '3px');
+     assertStylePropertyValue(child, '--scope-var', '1px');
+     assertStylePropertyValue(child, '--child-scope-var', '2px');
+     assertStylePropertyValue(child, '--grand-child-scope-var', '3px');
      //
      var gc1 = child.$.gc1;
-     assertStylePropertyValue(gc1._styleProperties, '--scope-var', '1px');
-     assertStylePropertyValue(gc1._styleProperties, '--child-scope-var', '2px');
-     assertStylePropertyValue(gc1._styleProperties, '--grand-child-scope-var', '3px');
+     assertStylePropertyValue(gc1, '--scope-var', '1px');
+     assertStylePropertyValue(gc1, '--child-scope-var', '2px');
+     assertStylePropertyValue(gc1, '--grand-child-scope-var', '3px');
      //
      var gc2 = child.$.gc2;
-     assertStylePropertyValue(gc2._styleProperties, '--scope-var', '1px');
-     assertStylePropertyValue(gc2._styleProperties, '--child-scope-var', '2px');
-     assertStylePropertyValue(gc2._styleProperties, '--grand-child-scope-var', '4px');
+     assertStylePropertyValue(gc2, '--scope-var', '1px');
+     assertStylePropertyValue(gc2, '--child-scope-var', '2px');
+     assertStylePropertyValue(gc2, '--grand-child-scope-var', '4px');
      //
      var gc3 = child.$.gc3;
-     assertStylePropertyValue(gc3._styleProperties, '--scope-var', '1px');
-     assertStylePropertyValue(gc3._styleProperties, '--child-scope-var', '2px');
-     assertStylePropertyValue(gc3._styleProperties, '--grand-child-scope-var', '3px');
+     assertStylePropertyValue(gc3, '--scope-var', '1px');
+     assertStylePropertyValue(gc3, '--child-scope-var', '2px');
+     assertStylePropertyValue(gc3, '--grand-child-scope-var', '3px');
 
   });
 
@@ -538,13 +541,13 @@
 
   test('variable can be set to another variable', function() {
     var gc4 = styled.$.child.$.gc4;
-    assertStylePropertyValue(gc4._styleProperties, '--grand-child-scope-var', '5px');
+    assertStylePropertyValue(gc4, '--grand-child-scope-var', '5px');
     assertComputed(gc4.$.me, '5px');
   });
 
   test('variable default values can be assigned to other variables', function() {
-    assertStylePropertyValue(styled._styleProperties, '--default1', '6px');
-    assertStylePropertyValue(styled._styleProperties, '--default2', '7px');
+    assertStylePropertyValue(styled, '--default1', '6px');
+    assertStylePropertyValue(styled, '--default2', '7px');
     assertComputed(styled.$.default1, '6px');
     assertComputed(styled.$.default2, '7px');
     assertComputed(styled.$.applyDefault1, '6px');
@@ -632,24 +635,24 @@
   test('variable precedence and overrides', function() {
     // renamed property applied
     var o1a = styled.$.overrides1a;
-    assertStylePropertyValue(o1a._styleProperties, '--rename', '8px');
-    assertStylePropertyValue(o1a._styleProperties, '--grand-child-scope-var', '8px');
+    assertStylePropertyValue(o1a, '--rename', '8px');
+    assertStylePropertyValue(o1a, '--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');
+    assertStylePropertyValue(o1b, '--rename', '8px');
+    assertStylePropertyValue(o1b, '--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', '8px');
+    assertStylePropertyValue(o2, '--rename', '8px');
+    assertStylePropertyValue(o2, '--grand-child-scope-var', '8px');
     assertComputed(o2.$.gc1.$.me, '8px');
 
     // late bound property does *not* resolve using inherited value
     var o3 = styled.$.overrides3;
     assert.equal(o3._styleProperties['--late'], '', 'property should not be late bound');
-    assertStylePropertyValue(o3._styleProperties, '--fillin', '16px');
+    assertStylePropertyValue(o3, '--fillin', '16px');
     assertComputed(o3.$.late, '0px');
 
   });