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 /tests/visual/effects
parent: c1f71f1c2f732e58a8fbca91185a284ea8db6b1b (diff)
download: jquery-ui-db96e2a51f83c2b1e42b18d7995e356025083ec7.tar.gz
jquery-ui-db96e2a51f83c2b1e42b18d7995e356025083ec7.zip
4 files changed, 537 insertions, 0 deletions
diff --git a/tests/visual/effects/effects.all.css b/tests/visual/effects/effects.all.css
new file mode 100644
index 000000000..1d531b026
--- /dev/null
+++ b/tests/visual/effects/effects.all.css
@@ -0,0 +1,55 @@
+
+body,html {
+	margin: 0;
+	padding: 0;
+	font-size: 12px;
+	font-family: Arial;
+	background: #191919;
+	color: #fff;
+}
+body { margin: 1em; }
+
+ul.effects {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+}
+
+ul.effects li {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	width: 120px;
+	height: 100px;
+	float: left;
+	margin-top: 20px;
+	margin-left: 20px;
+}
+
+div.effect {
+	width: 120px;
+	height: 100px;
+	background: #ccc;
+	border: 5px outset #aaa;
+	float: left;
+	cursor: pointer;
+	cursor: hand;
+}
+
+div.current {
+	border: 5px outset #FF9C08;
+	background: #FF9C08;
+}
+
+div.effect p {
+	color: #191919;
+	font-weight: bold;
+	margin: 0px;
+	padding: 10px;
+}
+
+.ui-effects-transfer {
+	border: 1px dotted #fff;
+	background: #666;
+	opacity: 0.5;
+}
diff --git a/tests/visual/effects/effects.all.html b/tests/visual/effects/effects.all.html
new file mode 100644
index 000000000..a2f8f62ef
--- /dev/null
+++ b/tests/visual/effects/effects.all.html
@@ -0,0 +1,217 @@
+<!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.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>
+
+<ul class="effects">
+
+	<li>
+		<div class="effect" id="blindUp">
+			<p>Blind up</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="blindDown">
+			<p>Blind down</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="blindLeft">
+			<p>Blind left</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="blindRight">
+			<p>Blind right</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="bounce3times">
+		<p>Bounce 3 times</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="clipHorizontally">
+		<p>Clip horizontally</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="clipVertically">
+		<p>Clip vertically</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="dropDown">
+		<p>Drop down</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="dropUp">
+		<p>Drop up</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="dropLeft">
+		<p>Drop left</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="dropRight">
+		<p>Drop right</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="explode9">
+		<p>Explode in 9 pieces</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="explode36">
+		<p>Explode in 36 pieces</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="fade">
+		<p>Fade</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="fold">
+		<p>Fold</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="highlight">
+		<p>Highlight</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="pulsate">
+		<p>Pulsate 2 times</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="puff">
+		<p>Puff</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="scale">
+		<p>Scale</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="shake">
+		<p>Shake</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="size">
+		<p>Size Default Show/Hide</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="sizeToggle">
+		<p>Size Toggle</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="slideDown">
+		<p>Slide down</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="slideUp">
+		<p>Slide up</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="slideLeft">
+		<p>Slide left</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="slideRight">
+		<p>Slide right</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="transfer">
+		<p>Transfer to first element</p>
+		</div>
+	</li>
+	
+	<li>
+		<div class="effect" id="addClass">
+		<p>addClass</p>
+		</div>
+	</li>
+	
+	<li>
+		<div class="effect" id="removeClass">
+		<p>removeClass</p>
+		</div>
+	</li>
+	
+	<li>
+		<div class="effect" id="toggleClass">
+		<p>toggleClass</p>
+		</div>
+	</li>
+
+	<li>
+		<div class="effect" id="hide">
+		<p>hide/show (jQuery)</p>
+		</div>
+	</li>
+
+</ul>
+
+</body>
+</html>
diff --git a/tests/visual/effects/effects.all.js b/tests/visual/effects/effects.all.js
new file mode 100644
index 000000000..a28c41a89
--- /dev/null
+++ b/tests/visual/effects/effects.all.js
@@ -0,0 +1,106 @@
+
+$(function() {
+	var duration = 1000, wait = 500;
+
+	$("div.effect")
+		.hover(function() { $(this).addClass("hover"); },
+			function() { $(this).removeClass("hover"); });
+
+	var effect = function(el, n, o) {
+
+		$.extend(o, {
+			easing: "easeOutQuint"
+		});
+
+		$(el).bind("click", function() {
+
+			$(this).addClass("current")
+				// delaying the initial animation makes sure that the queue stays in tact
+				.delay( 10 )
+				.hide( n, o, duration )
+				.delay( wait )
+				.show( n, o, duration, function() { 
+					$( this ).removeClass("current"); 
+				});
+		});
+
+	};
+	
+	$("#hide").click(function() {
+		var el = $(this);
+		el.addClass("current").hide(duration, function() {
+			setTimeout(function() {
+				el.show(duration, function() { el.removeClass("current"); });
+			}, wait);
+		});
+	});
+
+	effect("#blindLeft", "blind", { direction: "left" });
+	effect("#blindUp", "blind", { direction: "up" });
+	effect("#blindRight", "blind", { direction: "right" });
+	effect("#blindDown", "blind", { direction: "down" });
+
+	effect("#bounce3times", "bounce", { times: 3 });
+
+	effect("#clipHorizontally", "clip", { direction: "horizontal" });
+	effect("#clipVertically", "clip", { direction: "vertical" });
+
+	effect("#dropDown", "drop", { direction: "down" });
+	effect("#dropUp", "drop", { direction: "up" });
+	effect("#dropLeft", "drop", { direction: "left" });
+	effect("#dropRight", "drop", { direction: "right" });
+
+	effect("#explode9", "explode", {});
+	effect("#explode36", "explode", { pieces: 36 });
+
+	effect("#fade", "fade", {});
+
+	effect("#fold", "fold", { size: 50 });
+
+	effect("#highlight", "highlight", {});
+
+	effect("#pulsate", "pulsate", { times: 2 });
+
+	effect("#puff", "puff", { times: 2 });
+	effect("#scale", "scale", {});
+	effect("#size", "size", {});
+	$("#sizeToggle").bind("click", function() {
+		var opts = { to: { width: 300, height: 300 }};
+		$(this).addClass('current')
+			.toggle("size", opts, duration)
+			.delay(wait)
+			.toggle("size", opts, duration, function() {
+				$(this).removeClass("current");
+			});
+	});
+
+	$("#shake").bind("click", function() { $(this).addClass("current").effect("shake", {}, 100, function() { $(this).removeClass("current"); }); });
+
+	effect("#slideDown", "slide", { direction: "down" });
+	effect("#slideUp", "slide", { direction: "up" });
+	effect("#slideLeft", "slide", { direction: "left" });
+	effect("#slideRight", "slide", { direction: "right" });
+
+	$("#transfer").bind("click", function() { $(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000, function() { $(this).removeClass("current"); }); });
+
+	$("#addClass").click(function() {
+		$(this).addClass(function() {
+			window.console && console.log(arguments);
+			return "current";
+		}, duration, function() {
+			$(this).removeClass("current");
+		});
+	});
+	$("#removeClass").click(function() {
+		$(this).addClass("current").removeClass(function() {
+			window.console && console.log(arguments);
+			return "current";
+		}, duration);
+	});
+	$("#toggleClass").click(function() {
+		$(this).toggleClass(function() {
+			window.console && console.log(arguments);
+			return "current";
+		}, duration);
+	});
+});
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 /tests/visual/effects
parent	c1f71f1c2f732e58a8fbca91185a284ea8db6b1b (diff)
download	jquery-ui-db96e2a51f83c2b1e42b18d7995e356025083ec7.tar.gz jquery-ui-db96e2a51f83c2b1e42b18d7995e356025083ec7.zip