call _transitionEnd if no transition is performed, styles need to be …

…set (#63)

* call _transitionEnd if no transition is performed, styles need to be set

* added test for empty iron-collapse and styles after opening

* fix issue with updateSize not keeping its size

* added tests for external calls of updateSize

* cleanup

* more cleanup

iron-collapse.html

@@ -120,14 +120,22 @@
       },
 
       /**
-       * Set noAnimation to true to disable animations
+       * Set noAnimation to true to disable animations.
        *
        * @attribute noAnimation
        */
       noAnimation: {
         type: Boolean
       },
 
+      /**
+       * Stores the desired size of the collapse body.
+       * @private
+       */
+      _desiredSize: {
+        type: String,
+        value: ''
+      }
     },
 
     get dimension() {
@@ -188,20 +196,24 @@
      * @param {boolean=} animated if `true` updates the size with an animation, otherwise without.
      */
     updateSize: function(size, animated) {
+      // Consider 'auto' as '', to take full size.
+      size = size === 'auto' ? '' : size;
       // No change!
-      var curSize = this.style[this._dimensionMax];
-      if (curSize === size || (size === 'auto' && !curSize)) {
+      if (this._desiredSize === size) {
         return;
       }
 
+      this._desiredSize = size;
+
       this._updateTransition(false);
+      var willAnimate = animated && !this.noAnimation && this._isDisplayed;
       // If we can animate, must do some prep work.
-      if (animated && !this.noAnimation && this._isDisplayed) {
+      if (willAnimate) {
         // Animation will start at the current size.
         var startSize = this._calcSize();
         // For `auto` we must calculate what is the final size for the animation.
         // After the transition is done, _transitionEnd will set the size back to `auto`.
-        if (size === 'auto') {
+        if (size === '') {
           this.style[this._dimensionMax] = '';
           size = this._calcSize();
         }
@@ -212,12 +224,14 @@
         this.scrollTop = this.scrollTop;
         // Enable animation.
         this._updateTransition(true);
+        // If final size is the same as startSize it will not animate.
+        willAnimate = (size !== startSize);
       }
       // Set the final size.
-      if (size === 'auto') {
-        this.style[this._dimensionMax] = '';
-      } else {
-        this.style[this._dimensionMax] = size;
+      this.style[this._dimensionMax] = size;
+      // If it won't animate, call transitionEnd to set correct classes.
+      if (!willAnimate) {
+        this._transitionEnd();
       }
     },
 
@@ -256,15 +270,10 @@
       if (this.opened) {
         this.focus();
       }
-      if (this.noAnimation) {
-        this._transitionEnd();
-      }
     },
 
     _transitionEnd: function() {
-      if (this.opened) {
-        this.style[this._dimensionMax] = '';
-      }
+      this.style[this._dimensionMax] = this._desiredSize;
       this.toggleClass('iron-collapse-closed', !this.opened);
       this.toggleClass('iron-collapse-opened', this.opened);
       this._updateTransition(false);

test/basic.html

@@ -36,6 +36,13 @@
       </template>
     </test-fixture>
 
+    <test-fixture id="test-empty">
+    <template>
+        <iron-collapse id="collapse" opened>
+        </iron-collapse>
+      </template>
+    </test-fixture>
+
     <script>
 
       suite('basic', function() {
@@ -139,6 +146,34 @@
           assert.equal(collapse.style.transitionProperty, 'max-width');
         });
 
+        test('change size with updateSize', function(done) {
+          collapse.addEventListener('transitionend', function() {
+            // size should be kept after transition
+            assert.equal(collapse.style.maxHeight, "123px");
+            done();
+          });
+          collapse.updateSize("123px", true);
+        });
+
+      });
+
+      suite('empty', function() {
+
+        var collapse;
+
+        setup(function() {
+          collapse = fixture('test-empty');
+        });
+
+        test('empty&opened shows dynamically loaded content', function(done) {
+          flush(function () {
+            collapse.toggle();
+            collapse.toggle();
+            assert.equal(collapse.style.maxHeight, "");
+            done();
+          });
+        });
+
       });
 
     </script>

test/flex.html

@@ -135,6 +135,15 @@
           assert.equal(collapse.style.transitionProperty, 'max-width');
         });
 
+        test('change size with updateSize', function(done) {
+          collapse.addEventListener('transitionend', function() {
+            // size should be kept after transition
+            assert.equal(collapse.style.maxHeight, "123px");
+            done();
+          });
+          collapse.updateSize("123px", true);
+        });
+
       });
 
     </script>

test/horizontal.html

@@ -79,6 +79,16 @@
           // Size should be immediately set.
           assert.equal(collapse.style.maxWidth, '0px');
         });
+
+        test('change size with updateSize', function(done) {
+          collapse.addEventListener('transitionend', function() {
+            // size should be kept after transition
+            assert.equal(collapse.style.maxWidth, "123px");
+            done();
+          });
+          collapse.updateSize("123px", true);
+        });
+
       });
 
     </script>