Tests: Adding visual/unit tests for scale effect.

author: gnarf <gnarf@gnarf.net> 2011-06-14 15:11:43 -0500
committer: gnarf <gnarf@gnarf.net> 2011-06-14 15:11:43 -0500
commit: db96e2a51f83c2b1e42b18d7995e356025083ec7 (patch)
tree: 05590cb926129244196b78fbe9d95dc806769e7a
parent: c1f71f1c2f732e58a8fbca91185a284ea8db6b1b (diff)
download: jquery-ui-db96e2a51f83c2b1e42b18d7995e356025083ec7.tar.gz
jquery-ui-db96e2a51f83c2b1e42b18d7995e356025083ec7.zip
6 files changed, 286 insertions, 49 deletions
diff --git a/tests/unit/effects/effects.html b/tests/unit/effects/effects.html
index 6956ebcda..e3c6d2f4e 100644
--- a/tests/unit/effects/effects.html
+++ b/tests/unit/effects/effects.html
@@ -28,40 +28,54 @@
 	<script src="../../jquery.simulate.js"></script>
 	<script src="../testsuite.js"></script>
 	<script src="effects_core.js"></script>
-            
+	<script src="effects_scale.js"></script>
+
 	<script src="../swarminject.js"></script>
 
 	<style type="text/css">
-		.hidden {
-			display: none;
-		}
-		.test {
-			background: #000;
-			border: 0;
-			width: 100px;
-			height: 100px;
-		}
-		.testAddBorder {
-			border: 10px solid #000;
-		}
-		.testChildren,
-		.testChangeBackground {
-			background: #fff;
-		}
-		.test h2 {
-			font-size: 10px;
-		}
-		.testChildren h2 {
-			font-size: 20px;
-		}
-		
-		.relWidth {
-			width: 50%;
-		}
+	#qunit-fixture {
+		width: 1000px;
+		height: 1000px;
+	}
+	.hidden {
+		display: none;
+	}
+	.test {
+		background: #000;
+		border: 0;
+		width: 100px;
+		height: 100px;
+	}
+	.testAddBorder {
+		border: 10px solid #000;
+	}
+	.testChildren,
+	.testChangeBackground {
+		background: #fff;
+	}
+	.test h2 {
+		font-size: 10px;
+	}
+	.testChildren h2 {
+		font-size: 20px;
+	}
+
+	.relWidth {
+		width: 50%;
+	}
+
+	.relHeight {
+		height: 50%;
+	}
+
+	.testScale {
+		border: 5px solid #000;
+		padding: 5px;
+		margin: 5px;
+		width: 50px;
+		height: 50px;
+	}
 
-		.relHeight {
-			height: 50%;
-		}
 	</style>
 </head>
 <body>
@@ -81,6 +95,8 @@
 	<div class="relWidth relHeight testAddBorder">
 		<h2>Slide with relative width</d2>
 	</div>
+	<div class="testScale">
+	</div>
 </div>
 
 </body>
diff --git a/tests/unit/effects/effects_scale.js b/tests/unit/effects/effects_scale.js
new file mode 100644
index 000000000..1436cd030
--- /dev/null
+++ b/tests/unit/effects/effects_scale.js
@@ -0,0 +1,61 @@
+(function( $ ) {
+module( "effect.scale: Scale" );
+
+function run( position, v, h, vo, ho ) {
+	var desc = "End Position Correct: " + position + " (" + v + "," + h + ") - origin: (" + vo + "," + ho + ")";
+	asyncTest( desc, function() {
+		var test = $( ".testScale" ),
+			css = {
+				position: position
+			},
+			effect = {
+				effect: "scale",
+				mode: "effect",
+				percent: 200,
+				origin: [ vo, ho ],
+				complete: complete,
+				duration: 1
+			},
+			target = {},
+			relative = position === "relative";
+
+		css[ h ] = 33;
+		css[ v ] = 33;
+		target[ h ] = h === ho ? css[ h ] : ho == "center" ? css[ h ] - 35 : css[ h ] - 70;
+		target[ v ] = v === vo ? css[ v ] : vo == "middle" ? css[ v ] - 35 : css[ v ] - 70;
+		if ( relative && h == "right" ) {
+			target[ h ] += 70;
+		}
+		if ( relative && v == "bottom" ) {
+			target[ v ] += 70;
+		}
+		test.css( css );
+		test.effect( effect );
+
+		function complete() {
+			equal( parseInt( test.css( h ), 10 ), target[ h ], "Horizontal Position Correct " + desc );
+			equal( parseInt( test.css( v ), 10 ), target[ v ], "Vertical Position Correct " + desc );
+			start();
+		}
+	});
+}
+
+function suite( position ) {
+	run( position, "top", "left", "top", "left" );
+	run( position, "top", "left", "middle", "center" );
+	run( position, "top", "left", "bottom", "right" );
+	run( position, "bottom", "right", "top", "left" );
+	run( position, "bottom", "right", "middle", "center" );
+	run( position, "bottom", "right", "bottom", "right" );
+}
+
+$(function() {
+	suite( "absolute" );
+	suite( "relative" );
+	$.offset.initialize();
+	if ( $.offset.supportsFixedPosition ) {
+		suite( "fixed" );
+	}
+});
+
+})( jQuery );
diff --git a/tests/visual/effects.all.css b/tests/visual/effects/effects.all.css
index d2ed94026..1d531b026 100644
--- a/tests/visual/effects.all.css
+++ b/tests/visual/effects/effects.all.css
@@ -5,6 +5,7 @@ body,html {
 	font-size: 12px;
 	font-family: Arial;
 	background: #191919;
+	color: #fff;
 }
 body { margin: 1em; }
 
diff --git a/tests/visual/effects.all.html b/tests/visual/effects/effects.all.html
index fed35de8a..a2f8f62ef 100644
--- a/tests/visual/effects.all.html
+++ b/tests/visual/effects/effects.all.html
@@ -1,25 +1,25 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="utf-8">
 	<title>jQuery UI Effects Test Suite</title>
-	<link rel="stylesheet" href="effects.all.css" type="text/css" />
-	<script type="text/javascript" src="../../jquery-1.5.1.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.effects.core.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.effects.bounce.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.effects.fade.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.effects.scale.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.effects.shake.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.effects.slide.js"></script>
-	<script type="text/javascript" src="../../ui/jquery.effects.transfer.js"></script>
-	<script type="text/javascript" src="effects.all.js"></script>
+	<link rel="stylesheet" href="effects.all.css" type="text/css">
+	<script src="../../../jquery-1.5.1.js"></script>
+	<script src="../../../ui/jquery.effects.core.js"></script>
+	<script src="../../../ui/jquery.effects.blind.js"></script>
+	<script src="../../../ui/jquery.effects.bounce.js"></script>
+	<script src="../../../ui/jquery.effects.clip.js"></script>
+	<script src="../../../ui/jquery.effects.drop.js"></script>
+	<script src="../../../ui/jquery.effects.explode.js"></script>
+	<script src="../../../ui/jquery.effects.fade.js"></script>
+	<script src="../../../ui/jquery.effects.fold.js"></script>
+	<script src="../../../ui/jquery.effects.highlight.js"></script>
+	<script src="../../../ui/jquery.effects.pulsate.js"></script>
+	<script src="../../../ui/jquery.effects.scale.js"></script>
+	<script src="../../../ui/jquery.effects.shake.js"></script>
+	<script src="../../../ui/jquery.effects.slide.js"></script>
+	<script src="../../../ui/jquery.effects.transfer.js"></script>
+	<script src="effects.all.js"></script>
 </head>
 <body>
 
diff --git a/tests/visual/effects.all.js b/tests/visual/effects/effects.all.js
index a28c41a89..a28c41a89 100644
--- a/tests/visual/effects.all.js
+++ b/tests/visual/effects/effects.all.js
diff --git a/tests/visual/effects/effects.scale.html b/tests/visual/effects/effects.scale.html
new file mode 100644
index 000000000..9521a1872
--- /dev/null
+++ b/tests/visual/effects/effects.scale.html
@@ -0,0 +1,159 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects Test Suite</title>
+	<link rel="stylesheet" href="effects.all.css" type="text/css">
+	<script src="../../../jquery-1.5.1.js"></script>
+	<script src="../../../ui/jquery.effects.core.js"></script>
+	<script src="../../../ui/jquery.effects.scale.js"></script>
+	<script src="effects.all.js"></script>
+	<script type="text/javascript" charset="utf-8">
+	jQuery(function( $ ) {
+		var test = $( "#testBox" ),
+			opts = $( ".arg" ),
+			optsRev = $( opts.get().reverse() ),
+			doer = $( "#doAnim" ),
+			current = $( "#current" ),
+			cleanStyle = test[0].style,
+			total = 1;
+
+		opts.each(function() {
+			total *= this.options.length;
+		});
+
+		opts.change( doAnim );
+		doer.click( doAnim );
+		$( "#cyclePrev" ).click(function() {
+			cycle( -1 );
+		});
+		$( "#cycleNext" ).click(function() {
+			cycle( 1 );
+		});
+
+		function cycle( direction ) {
+			optsRev.each(function() {
+				var cur = this.selectedIndex,
+					next = cur + direction,
+					len = this.options.length;
+				
+				this.selectedIndex = ( next + len ) % len;
+				
+				if ( ( next+len ) % len === next ) return false;
+			});
+			doAnim();
+		}
+
+
+		function doAnim() {
+			var cur = 0;
+			opts.each(function() {
+				cur *= this.options.length
+				cur += this.selectedIndex;
+			});
+			cur++;
+			current.text( "Configuration: " + cur + " of " + total );
+			run.apply(test, opts.map(function() {
+				return $(this).val();
+			}).get());
+		}
+
+		function run( position, v, h, vo, ho ) {
+			var el = this,
+				style = el[0].style,
+				effect = {
+					effect: "scale",
+					mode: "effect",
+					percent: 200,
+					origin: [ vo, ho ],
+					duration: 500
+				};
+			el.stop(true, true);
+			if ( typeof style === "object" ) {
+				style.cssText = "";
+			} else {
+				el[0].style = "";
+			}
+			el.css( "position", position )
+				.css( h, 5 )
+				.css( v, 5 )
+				.delay( 100 )
+				.effect( effect );
+		}
+	});
+	</script>
+	<style type="text/css">
+	#testArea {
+/*		border: 5px dashed #777;*/
+		width: 200px;
+		height: 200px;
+		position: relative;
+	}
+	#testBox {
+		width: 50px;
+		height: 50px;
+		background-color: #bada55;
+		color: black;
+		border: 10px solid #fff;
+		margin: 10px;
+		padding: 10px;
+	}
+	label {
+		display: block;
+	}
+	#controls {
+		position: absolute;
+		z-index: 300;
+		left: 50%;
+		top: 50%;
+		margin-left: -200px;
+		width: 400px;
+		opacity: 0.8;
+	}
+	</style>
+</head>
+<body>
+	<div id="testArea">
+		<div id="testBox">
+		</div>
+	</div>
+	<div id="controls">
+		<label for="pos">Positioning
+			<select id="pos" class="arg">
+				<option value="absolute">absolute</option>
+				<option value="relative">relative</option>
+				<option value="fixed">fixed</option>
+			</select>
+		</label>
+		<label for="vertPos">Vertical Positioning
+			<select id="vertPos" class="arg">
+				<option value="top">top</option>
+				<option value="bottom">bottom</option>
+			</select>
+		</label>
+		<label for="horizPos">Horizontal Positioning
+			<select id="horizPos" class="arg">
+				<option value="left">left</option>
+				<option value="right">right</option>
+			</select>
+		</label>
+		<label for="vertOrigin">Vertical Origin
+			<select id="vertOrigin" class="arg">
+				<option value="top">top</option>
+				<option value="middle">middle</option>
+				<option value="bottom">bottom</option>
+			</select>
+		</label>
+		<label for="horizOrigin">Horizontal Origin
+			<select id="horizOrigin" class="arg">
+				<option value="left">left</option>
+				<option value="center">center</option>
+				<option value="right">right</option>
+			</select>
+		</label><br />
+		<label id="current">jQuery UI Scale Animation Test</label>
+		<button id="cyclePrev">Back</button>
+		<button id="doAnim">Run Animation</button>
+		<button id="cycleNext">Forward</button>
+	</div>
+</body>
+\ No newline at end of file
author	gnarf <gnarf@gnarf.net>	2011-06-14 15:11:43 -0500
committer	gnarf <gnarf@gnarf.net>	2011-06-14 15:11:43 -0500
commit	db96e2a51f83c2b1e42b18d7995e356025083ec7 (patch)
tree	05590cb926129244196b78fbe9d95dc806769e7a
parent	c1f71f1c2f732e58a8fbca91185a284ea8db6b1b (diff)
download	jquery-ui-db96e2a51f83c2b1e42b18d7995e356025083ec7.tar.gz jquery-ui-db96e2a51f83c2b1e42b18d7995e356025083ec7.zip