Flex fix (#53)

* added flex tests

* fixed flex behavior

* updated documentation

* 'cleanup'

* API optimizations

* documentation updates and optimization of updateSize(...)

bower.json

@@ -26,6 +26,7 @@
     "web-component-tester": "^4.0.0",
     "test-fixture": "PolymerElements/test-fixture#^1.0.0",
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
     "paper-styles": "PolymerElements/paper-styles#^1.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },

iron-collapse.html

@@ -27,7 +27,7 @@
       this.$.collapse.toggle();
     }
 
-`iron-collapse` adjusts the height/width of the collapsible element to show/hide
+`iron-collapse` adjusts the max-height/max-width of the collapsible element to show/hide
 the content.  So avoid putting padding/margin/border on the collapsible directly,
 and instead put a div inside and style that.
 
@@ -126,6 +126,22 @@
       return this.horizontal ? 'width' : 'height';
     },
 
+    /**
+     * `maxWidth` or `maxHeight`.
+     * @private
+     */    
+    get _dimensionMax() {
+      return this.horizontal ? 'maxWidth' : 'maxHeight';
+    },
+
+    /**
+     * `max-width` or `max-height`.
+     * @private
+     */
+    get _dimensionMaxCss() {
+      return this.horizontal ? 'max-width' : 'max-height';
+    },
+
     hostAttributes: {
       role: 'group',
       'aria-hidden': 'true',
@@ -158,9 +174,15 @@
       this.opened = false;
     },
 
+    /**
+     * Updates the size of the element.
+     * @param {!String} size The new value for `maxWidth`/`maxHeight` as css property value, usually `auto` or `0px`.
+     * @param {boolean=} animated if `true` updates the size with an animation, otherwise without.
+     */     
     updateSize: function(size, animated) {
       // No change!
-      if (this.style[this.dimension] === size) {
+      var curSize = this.style[this._dimensionMax];
+      if (curSize === size || (size === 'auto' && !curSize)) {
         return;
       }
 
@@ -172,19 +194,23 @@
         // 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') {
-          this.style[this.dimension] = size;
+          this.style[this._dimensionMax] = '';
           size = this._calcSize();
         }
         // Go to startSize without animation.
-        this.style[this.dimension] = startSize;
+        this.style[this._dimensionMax] = startSize;
         // Force layout to ensure transition will go. Set offsetHeight to itself
         // so that compilers won't remove it.
         this.offsetHeight = this.offsetHeight;
         // Enable animation.
         this._updateTransition(true);
       }
       // Set the final size.
-      this.style[this.dimension] = size;
+      if (size === 'auto') {
+        this.style[this._dimensionMax] = '';
+      } else {
+        this.style[this._dimensionMax] = size;
+      }
     },
 
     /**
@@ -204,8 +230,8 @@
     },
 
     _horizontalChanged: function() {
-      this.style.transitionProperty = this.dimension;
-      var otherDimension = this.dimension === 'width' ? 'height' : 'width';
+      this.style.transitionProperty = this._dimensionMaxCss;
+      var otherDimension = this._dimensionMax === 'maxWidth' ? 'maxHeight' : 'maxWidth';
       this.style[otherDimension] = '';
       this.updateSize(this.opened ? 'auto' : '0px', false);
     },
@@ -229,7 +255,7 @@
 
     _transitionEnd: function() {
       if (this.opened) {
-        this.style[this.dimension] = 'auto';
+        this.style[this._dimensionMax] = '';
       }
       this.toggleClass('iron-collapse-closed', !this.opened);
       this.toggleClass('iron-collapse-opened', this.opened);

test/basic.html

@@ -61,7 +61,7 @@
         });
 
         test('default opened height', function() {
-          assert.equal(collapse.style.height, 'auto');
+          assert.equal(collapse.style.maxHeight, '');
         });
 
         test('set opened to false triggers animation', function(done) {
@@ -81,29 +81,29 @@
           // trying to animate the size update
           collapse.updateSize('0px', true);
           // Animation immediately disabled.
-          assert.equal(collapse.style.height, '0px');
+          assert.equal(collapse.style.maxHeight, '0px');
         });
 
         test('set opened to false, then to true', function(done) {
           // this listener will be triggered twice (every time `opened` changes)
           collapse.addEventListener('transitionend', function() {
             if (collapse.opened) {
               // Check finalSize after animation is done.
-              assert.equal(collapse.style.height, 'auto');
+              assert.equal(collapse.style.height, '');
               done();
             } else {
               // Check if size is still 0px.
-              assert.equal(collapse.style.height, '0px');
+              assert.equal(collapse.style.maxHeight, '0px');
               // Trigger 2nd toggle.
               collapse.opened = true;
               // Size should be immediately set.
-              assert.equal(collapse.style.height, collapseHeight);
+              assert.equal(collapse.style.maxHeight, collapseHeight);
             }
           });
           // Trigger 1st toggle.
           collapse.opened = false;
           // Size should be immediately set.
-          assert.equal(collapse.style.height, '0px');
+          assert.equal(collapse.style.maxHeight, '0px');
         });
 
         test('opened changes trigger iron-resize', function() {
@@ -130,13 +130,13 @@
         test('toggle horizontal updates size', function() {
           collapse.horizontal = false;
           assert.equal(collapse.style.width, '');
-          assert.equal(collapse.style.height, 'auto');
-          assert.equal(collapse.style.transitionProperty, 'height');
+          assert.equal(collapse.style.maxHeight, '');
+          assert.equal(collapse.style.transitionProperty, 'max-height');
 
           collapse.horizontal = true;
-          assert.equal(collapse.style.width, 'auto');
+          assert.equal(collapse.style.maxWidth, '');
           assert.equal(collapse.style.height, '');
-          assert.equal(collapse.style.transitionProperty, 'width');
+          assert.equal(collapse.style.transitionProperty, 'max-width');
         });
 
       });

test/flex.html

@@ -0,0 +1,143 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 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
+-->
+
+<html>
+  <head>
+
+    <title>iron-collapse-flex</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+    <script src="../../test-fixture/test-fixture-mocha.js"></script>
+
+    <link rel="import" href="../../iron-flex-layout/iron-flex-layout-classes.html">
+    <link rel="import" href="../../test-fixture/test-fixture.html">
+    <link rel="import" href="../iron-collapse.html">
+
+    <style is="custom-style" include="iron-flex">
+    </style>
+
+  </head>
+  <body>
+
+    <test-fixture id="test">
+      <template>
+        <div id="container" class="layout vertical" style="height: 200px">
+          <iron-collapse id="collapse" opened style="flex: 1 0 auto">
+            <div style="height:100px;">
+              Lorem ipsum
+            </div>
+          </iron-collapse>
+        </div>
+      </template>
+    </test-fixture>
+
+    <script>
+
+      suite('flex', function() {
+
+      	var container;
+        var collapse;
+        var collapseHeight;
+
+        setup(function() {
+          container = fixture('test');
+          collapse = container.querySelector('iron-collapse');
+          collapseHeight = getComputedStyle(collapse).height;
+        });
+
+        test('default opened height', function() {
+          assert.equal(collapse.style.height, '');
+        });
+
+        test('set opened to false triggers animation', function(done) {
+          collapse.opened = false;
+          // Animation got enabled.
+          assert.notEqual(collapse.style.transitionDuration, '0s');
+          collapse.addEventListener('transitionend', function() {
+            // Animation disabled.
+            assert.equal(collapse.style.transitionDuration, '0s');
+            done();
+          });
+        });
+
+        test('enableTransition(false) disables animations', function() {
+          collapse.enableTransition(false);
+          assert.isTrue(collapse.noAnimation, '`noAnimation` is true');
+          // trying to animate the size update
+          collapse.updateSize('0px', true);
+          // Animation immediately disabled.
+          assert.equal(collapse.style.maxHeight, '0px');
+        });
+
+        test('set opened to false, then to true', function(done) {
+          // this listener will be triggered twice (every time `opened` changes)
+          collapse.addEventListener('transitionend', function() {
+            if (collapse.opened) {
+              // Check finalSize after animation is done.
+              assert.equal(collapse.style.maxHeight, '');
+              done();
+            } else {
+              // Check if size is still 0px.
+              assert.equal(collapse.style.maxHeight, '0px');
+              // Trigger 2nd toggle.
+              collapse.opened = true;
+              // Size should be immediately set.
+              assert.equal(collapse.style.maxHeight, collapseHeight);
+            }
+          });
+          // Trigger 1st toggle.
+          collapse.opened = false;
+          // Size should be immediately set.
+          assert.equal(collapse.style.maxHeight, '0px');
+        });
+
+        test('opened changes trigger iron-resize', function() {
+          var spy = sinon.stub();
+          collapse.addEventListener('iron-resize', spy);
+          // No animations for faster test.
+          collapse.noAnimation = true;
+          collapse.opened = false;
+          assert.isTrue(spy.calledOnce, 'iron-resize was fired');
+        });
+
+        test('overflow is hidden while animating', function(done) {
+          collapse.addEventListener('transitionend', function() {
+            // Should still be hidden.
+            assert.equal(getComputedStyle(collapse).overflow, 'hidden');
+            done();
+          });
+          assert.equal(getComputedStyle(collapse).overflow, 'visible');
+          collapse.opened = false;
+          // Immediately updated style.
+          assert.equal(getComputedStyle(collapse).overflow, 'hidden');
+        });
+
+        test('toggle horizontal updates size', function() {
+          collapse.horizontal = false;
+          assert.equal(collapse.style.width, '');
+          assert.equal(collapse.style.maxHeight, '');
+          assert.equal(collapse.style.transitionProperty, 'max-height');
+
+          collapse.horizontal = true;
+          assert.equal(collapse.style.maxWidth, '');
+          assert.equal(collapse.style.height, '');
+          assert.equal(collapse.style.transitionProperty, 'max-width');
+        });
+
+      });
+
+    </script>
+
+  </body>
+</html>

test/horizontal.html

@@ -55,29 +55,29 @@
         });
 
         test('default opened width', function() {
-          assert.equal(collapse.style.width, 'auto');
+          assert.equal(collapse.style.width, '');
         });
 
         test('set opened to false, then to true', function(done) {
           // This listener will be triggered twice (every time `opened` changes).
           collapse.addEventListener('transitionend', function() {
             if (collapse.opened) {
               // Check finalSize after animation is done.
-              assert.equal(collapse.style.width, 'auto');
+              assert.equal(collapse.style.width, '');
               done();
             } else {
               // Check if size is still 0px.
-              assert.equal(collapse.style.width, '0px');
+              assert.equal(collapse.style.maxWidth, '0px');
               // Trigger 2nd toggle.
               collapse.opened = true;
               // Size should be immediately set.
-              assert.equal(collapse.style.width, collapseWidth);
+              assert.equal(collapse.style.maxWidth, collapseWidth);
             }
           });
           // Trigger 1st toggle.
           collapse.opened = false;
           // Size should be immediately set.
-          assert.equal(collapse.style.width, '0px');
+          assert.equal(collapse.style.maxWidth, '0px');
         });
       });
 

test/index.html

@@ -21,10 +21,12 @@
         'horizontal.html',
         'a11y.html',
         'nested.html',
+        'flex.html',
         'basic.html?dom=shadow',
         'horizontal.html?dom=shadow',
         'a11y.html?dom=shadow',
-        'nested.html?dom=shadow'
+        'nested.html?dom=shadow',
+        'flex.html?dom=shadow'
       ]);
     </script>
 

test/nested.html

@@ -68,7 +68,7 @@
           });
 
           test('inner collapse default style height', function() {
-            assert.equal(innerCollapse.style.height, '0px');
+            assert.equal(innerCollapse.style.maxHeight, '0px');
           });
 
           test('open inner collapse updates size without animation', function() {
@@ -94,7 +94,7 @@
           });
 
           test('inner collapse default style width', function() {
-            assert.equal(innerCollapse.style.width, '0px');
+            assert.equal(innerCollapse.style.maxWidth, '0px');
           });
 
           test('open inner collapse updates size without animation', function() {