ensure the floating label animation is set up

Author: Yvonne Yip

demo2.html

@@ -82,7 +82,7 @@ <h1>&lt;paper-input&gt;</h1>
       <paper-input floatingLabel label="Type only numbers... (floating)" validate="^[0-9]*$" error="Input is not a number!"></paper-input>
     </div>
     <div class="container">
-      <paper-input multiline label="Type multiple lines here..."></paper-input>
+      <paper-input multiline style="display:none;" label="Type multiple lines here..."></paper-input>
     </div>
     <div class="container">
       <paper-input multiline rows="3" label="This input is 3 rows high"></paper-input>

paper-input.html

@@ -168,6 +168,15 @@
         this.$.underlineContainer.style.top = height + 'px';
       },
 
+      prepareLabelTransform: function() {
+        var toRect = this.$.floatedLabelSpan.getBoundingClientRect();
+        var fromRect = this.$.labelSpan.getBoundingClientRect();
+        if (toRect.width !== 0) {
+          this.$.label.cachedTransform = 'scale(' + (toRect.width / fromRect.width) + ') ' +
+            'translateY(' + (toRect.bottom - fromRect.bottom) + 'px)';
+        }
+      },
+
       rowsChanged: function() {
         if (this.multiline && !isNaN(parseInt(this.rows))) {
           this.$.minInputHeight.innerHTML = '';
@@ -212,10 +221,11 @@
 
       labelChanged: function() {
         if (this.floatingLabel && this.$.floatedLabel && this.$.label) {
-          var toRect = this.$.floatedLabelSpan.getBoundingClientRect();
-          var fromRect = this.$.labelSpan.getBoundingClientRect();
-          this.$.label.cachedTransform = 'scale(' + (toRect.width / fromRect.width) + ') ' +
-            'translateY(' + (toRect.bottom - fromRect.bottom) + 'px)'
+          // If the element is created programmatically, labelChanged is called before
+          // binding. Run the measuring code in async so the DOM is ready.
+          this.async(function() {
+            this.prepareLabelTransform();
+          });
         }
       },
 
@@ -330,6 +340,9 @@
         if (this.floatingLabel) {
           this.$.label.classList.add('focusedColor');
           this.$.label.classList.add('animating');
+          if (!this.$.label.cachedTransform) {
+            this.prepareLabelTransform();
+          }
           this.$.label.style.webkitTransform = this.$.label.cachedTransform;
           this.$.label.style.transform = this.$.label.cachedTransform;
         }