Put attribute capitalization fix in property-effects

Author: TimvdLippe

externs/closure-types.js

@@ -1374,19 +1374,4 @@ Polymer_ArraySelectorMixin.prototype.select = function(item){};
 * @param {number} idx Index from `items` array to select
 * @return {void}
 */
-Polymer_ArraySelectorMixin.prototype.selectIndex = function(idx){};
-/**
-* @interface
-* @extends {Polymer_PropertyEffects}
-*/
-function Polymer_AttributeCapitalization(){}
-/**
-* @override
-* @param {Node} node Node to parse
-* @param {TemplateInfo} templateInfo Template metadata for current template
-* @param {NodeInfo} nodeInfo Node metadata for current template node
-* @param {*} name 
-* @param {*} value 
-* @return {boolean}
-*/
-Polymer_AttributeCapitalization._parseTemplateNodeAttribute = function(node, templateInfo, nodeInfo, name, value){};
+Polymer_ArraySelectorMixin.prototype.selectIndex = function(idx){};

lib/mixins/property-effects.html

@@ -43,6 +43,9 @@
     READ_ONLY: '__readOnly'
   };
 
+  /** @const {string} */
+  const capitalAttributeRegex = /[A-Z]/;
+
   /**
    * @typedef {{
    * name: (string | undefined),
@@ -2530,7 +2533,9 @@
           // Attribute or property
           let origName = name;
           let kind = 'property';
-          if (name[name.length-1] == '$') {
+          if (capitalAttributeRegex.test(name)) {
+            kind = 'attribute';
+          } else if (name[name.length-1] == '$') {
             name = name.slice(0, -1);
             kind = 'attribute';
           }

lib/utils/attribute-capitalization-mixin.html

@@ -7,6 +7,8 @@
 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
 -->
+<link rel="import" href="../../polymer.html">
+
 <dom-module id="x-basic">
   <template>
     <div id="boundChild"
@@ -1062,3 +1064,23 @@
 }
 customElements.define(SubObserverElement.is, SubObserverElement);
 </script>
+
+<dom-module id="svg-element">
+  <template>
+    <svg id="svg" viewBox="[[value]]"></svg>
+  </template>
+  <script>
+    class SVGElement extends Polymer.Element {
+      static get is() { return 'svg-element'; }
+      static get properties() {
+        return {
+          value: {
+            type: String,
+            value: '0 0 50 50'
+          }
+        };
+      }
+    }
+    customElements.define(SVGElement.is, SVGElement);
+  </script>
+</dom-module>

test/unit/attribute-capitalization.html

@@ -419,6 +419,23 @@
       assert.equal(el.__observerCalled, 1);
     });
   });
+
+  suite('automated attribute capitalization detection', function() {
+    let el;
+
+    setup(function() {
+      el = document.createElement('svg-element');
+      document.body.appendChild(el);
+    });
+
+    teardown(function() {
+      document.body.removeChild(el);
+    });
+
+    test('can handle capitalized HTML attribute', function() {
+      assert.equal(el.$.svg.getAttribute('viewBox'), el.value);
+    });
+  });
 });
 
 suite('computed bindings with dynamic functions', function() {