anim: fixing slideDown

glow · Oct 15, 2009 · 46f3fd4 · 46f3fd4
1 parent 6a07139
commit 46f3fd4
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 27 deletions.
diff --git a/src/anim/anim.js b/src/anim/anim.js
@@ -366,6 +366,8 @@
 		@function
 		@param {String | glow.dom.NodeList} element Element to animate. CSS Selector can be used.
 		@param {Number} duration Animation duration in seconds.
+		@param {String} action Either "down", "up" or "toggle" for the direction of the slide
+		@param {Object} [opts] Options object
 		@param {Function} [opts.tween=easeBoth tween] The way the value moves through time. See {@link glow.tweens}.
 		@param {Function} [opts.onStart] The function to be called when the first element in the NodeList starts the animation.  
 		@param {Function} [opts.onComplete] The function to be called when the first element in the NodeList completes the animation.
@@ -400,7 +402,7 @@
 					fromHeight = element.slice(i, i+1).height();
 				} else if (action == "down" || (action == "toggle" && element.slice(i, i+1).height() == 0)) {
 					fromHeight = element.slice(i, i+1).height();
-					element[i].style.height = "auto";
+					element[i].style.height = '';
 					completeHeight = element.slice(i, i+1).height();
 					element[i].style.height = fromHeight + "px";
 				}
@@ -420,8 +422,8 @@
 			events.addListener(timeline, "complete", function() {
 				// return heights to "auto" for slide down
 				element.each(function() {
-					if (this.style.height != "0px") {
-						this.style.height = "auto";
+					if (this.style.height.slice(0,1) != "0") {
+						this.style.height = '';
 					}
 				})
 			});

diff --git a/test/glow/anim/anim.js b/test/glow/anim/anim.js
@@ -153,7 +153,7 @@ t.test("glow.anim.SlideUp SlideUp", function() {
 	glow.anim.slideUp(elm, 0.1, {
 		onStart: function(){ 
 			t.ok(true, "Start fired");
-			t.equals(elm.css("height"), "28px", "Start height");
+			t.equals(elm.css("height"), "100px", "Start height");
 		}, 
 		onComplete: function(){ 
 			t.ok(true, "Complete fired");
@@ -164,9 +164,12 @@ t.test("glow.anim.SlideUp SlideUp", function() {
 });
 
 t.test("glow.anim.SlideDown SlideDown", function() {
-	t.expect(3);
-
+	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("#slidedown");
+	var openHeight = elm.css("height");
+
 	elm.css("height", 0).css("overflow", "hidden");
 	t.stop();
 
@@ -177,6 +180,8 @@ t.test("glow.anim.SlideDown SlideDown", function() {
 		}, 
 		onComplete: function(){ 
 			t.ok(true, "Complete fired");
+			t.equals(elm.css("height"), openHeight, "End height");
+			animTests.css('display', 'none');
 			t.start();
 		} 
 	});

diff --git a/test/index.html b/test/index.html
@@ -176,28 +176,8 @@
 		<input type="text" id="length" name="test"/>
 		<input type="text" id="idTest" name="id"/>
 	</form>
-	<table id="table"></table>
-
-	<div id="fx-queue">
-		<div id="fadein" class='chain test'>fadeIn<div>fadeIn</div></div>
-		<div id="fadeout" class='chain test out'>fadeOut<div>fadeOut</div></div>
-
-		<div id="show" class='chain test'>show<div>show</div></div>
-		<div id="hide" class='chain test out'>hide<div>hide</div></div>
-
-		<div id="togglein" class='chain test'>togglein<div>togglein</div></div>
-		<div id="toggleout" class='chain test out'>toggleout<div>toggleout</div></div>
-
-
-		<div id="slideup" class='chain test'>slideUp<div>slideUp</div></div>
-		<div id="slidedown" class='chain test out'>slideDown<div>slideDown</div></div>
-
-		<div id="slidetogglein" class='chain test'>slideToggleIn<div>slideToggleIn</div></div>
-		<div id="slidetoggleout" class='chain test out'>slideToggleOut<div>slideToggleOut</div></div>
-	</div>
-
+	<table id="table"></table>	
 	<div id="fx-tests"></div>
-
 	<form id="testForm" action="#" method="get">
 		<textarea name="T3" rows="2" cols="15">?
 Z</textarea>
@@ -242,6 +222,13 @@
 	</form>
 </div>
 </dl>
+<div id="animTests" style="display:none">
+	<div id="fadein">fadeIn<div>fadeIn</div></div>
+	<div id="fadeout">fadeOut<div>fadeOut</div></div>
+
+	<div id="slideup">slideUp<div>slideUp</div></div>
+	<div id="slidedown">slideDown<div>slideDown</div></div>
+</div>
 
 <div id="ua">User agent string goes here</div>
 <div class="body" id="mainOutput">

diff --git a/test/testdata/screen.css b/test/testdata/screen.css
@@ -355,4 +355,11 @@ ul.unitTests span.testStats span {
 .displayTest2 {
 	display: none;
 }
+/* anim tests */
+	#fadein, #fadeout, #slideup, #slidedown {
+		width: 100px;
+		height: 100px;
+		overflow: hidden;
+	}
+/* end */
 /* END */