anim: Fix for slideDown if elements have height defined as 0 in CSS

src/anim/anim.js

@@ -404,6 +404,11 @@
 					fromHeight = element.slice(i, i+1).height();
 					element[i].style.height = '';
 					completeHeight = element.slice(i, i+1).height();
+					// what if the height is set to 0 in the CSS?
+					if (completeHeight === 0) {
+						element[i].style.height = 'auto';
+						completeHeight = element.slice(i, i+1).height();
+					}
 					element[i].style.height = fromHeight + "px";
 				}
 
@@ -424,6 +429,9 @@
 				element.each(function() {
 					if (this.style.height.slice(0,1) != "0") {
 						this.style.height = '';
+						if ( glow.dom.get(this).height() === 0 ) {
+							this.style.height = 'auto';
+						}
 					}
 				})
 			});

test/glow/anim/anim.js

@@ -144,7 +144,7 @@ t.test("glow.anim.highlight highlight", function() {
 	});
 });
 
-t.test("glow.anim.SlideUp SlideUp", function() {
+t.test("glow.anim.slideUp", function() {
 	t.expect(4);
 	var events = glow.events;
 	var elm = glow.dom.get("#slideup");
@@ -163,7 +163,7 @@ t.test("glow.anim.SlideUp SlideUp", function() {
 	});
 });
 
-t.test("glow.anim.SlideDown SlideDown", function() {
+t.test("glow.anim.slideDown", function() {
 	t.expect(4);
 	// we need the test to be visible to get correct height readings
 	var animTests = glow.dom.get('#animTests').css('display', 'block');
@@ -187,6 +187,28 @@ t.test("glow.anim.SlideDown SlideDown", function() {
 	});
 });
 
+t.test("glow.anim.slideDown (with start height 0 in CSS)", function() {
+	t.expect(4);
+	// we need the test to be visible to get correct height readings
+	var animTests = glow.dom.get('#animTests').css('display', 'block');
+	var elm = glow.dom.get("#slidedown2");
+
+	t.stop();
+
+	glow.anim.slideDown(elm, 0.1, {
+		onStart: function(){ 
+			t.ok(true, "Start fired");
+			t.equals(elm.css("height"), "0px", "Start height");
+		}, 
+		onComplete: function(){ 
+			t.ok(true, "Complete fired");
+			t.equals(elm.css("height"), '100px', "End height");
+			animTests.css('display', 'none');
+			t.start();
+		} 
+	});
+});
+
 t.test('glow.anim.css background colour', function() {
 	t.expect(2);
 	t.stop();

test/index.html

@@ -228,6 +228,7 @@
 
 	<div id="slideup">slideUp<div>slideUp</div></div>
 	<div id="slidedown">slideDown<div>slideDown</div></div>
+	<div id="slidedown2"><div style="height:100px"></div></div>
 </div>
 
 <div id="ua">User agent string goes here</div>

test/testdata/screen.css

@@ -361,5 +361,10 @@ ul.unitTests span.testStats span {
 		height: 100px;
 		overflow: hidden;
 	}
+	#slidedown2 {
+		width: 100px;
+		height: 0;
+		overflow: hidden;
+	}
 /* end */
 /* END */