DKS - added new "tests" subdirectory, containing both new automated u…

…nit tests, and earlier "by-hand" unit tests.
caleb531 · Nov 6, 2012 · c9a6d04 · c9a6d04
1 parent c18d912
commit c9a6d04
Show file tree

Hide file tree

Showing 23 changed files with 1,045 additions and 0 deletions.
diff --git a/tests/by-hand/.htaccess b/tests/by-hand/.htaccess
@@ -0,0 +1 @@
+Options +Indexes
diff --git a/tests/by-hand/jCanvas-addLayerRect.html b/tests/by-hand/jCanvas-addLayerRect.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jCanvas trivial addLayer, drawRect demo</title>
+	<style>
+		html, body { width:100%; height:100%; margin: 0px;}
+		canvas { display:block; }
+	</style>
+</head>
+<body>
+	<div id="content">
+		<canvas id="bg"></canvas>
+	</div>
+	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+	<script src="../../jcanvas.min.js"></script>
+	<script>
+		$(document).ready(function() {
+			$("#bg").addLayer({method: "drawRect", fillStyle: "green",
+				x: 10, y: 10, width: 40, height: 95, fromCenter: false})
+			.drawLayers();
+		});
+	</script>
+</body>
+</html>
diff --git a/tests/by-hand/jCanvas-animate-recurse.html b/tests/by-hand/jCanvas-animate-recurse.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>animate jCanvas recursively</title>
+</head>
+<body>
+	<div id="content">
+		<canvas width="300" height="300"></canvas>
+	</div>
+	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+	<script src="../../jcanvas.min.js"></script>
+	<script>
+		function addBreadcrumbCount(ii, xx, yy, opacityValue) {
+			$("canvas").addLayer({name: "crumb-count-" + ii,
+				method: "drawText", fillStyle: "red", strokeStyle: "red",
+				x: xx, y: yy, font: "16pt Verdana",
+				fromCenter: false, text: String(ii+1), opacity: opacityValue});
+		}
+		function fadeLayer(name, opacity, speed /* , afterFn */ ) {
+			if (3 == arguments.length) {
+				$("canvas").animateLayer(name, {opacity: opacity}, speed);
+			} else if (4 == arguments.length) {
+				$("canvas").animateLayer(name, {opacity: opacity}, speed,
+					arguments[3]);
+			}
+		}
+		function raindrop(ii, width, height) {
+			if (ii<10) {
+				xx = Math.random() * width;
+				yy = Math.random() * height;
+				$("canvas").addLayer({name: "ring-" + ii,
+					method: "drawArc", strokeStyle: "blue",
+					strokeWidth: 2, x: xx, y: yy, radius: 10, opacity: 0});
+				addBreadcrumbCount(ii, xx, yy, 0);
+				fadeLayer("ring-"+ii, 1, 0);
+				$("canvas").animateLayer("ring-" + ii,
+					{radius: 30, opacity: 0}, 500,
+					function () {
+						fadeLayer("crumb-count-"+ii, 1, 0,
+							raindrop(++ii, width, height)
+						);
+					}
+				);
+			}
+		}
+		$(document).ready(function(){
+			var height = 300;
+			var width  = 300;
+			raindrop(0, width, height);
+		});
+	</script>
+</body>
+</html>
diff --git a/tests/by-hand/jCanvas-animate.html b/tests/by-hand/jCanvas-animate.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>animate jCanvas</title>
+</head>
+<body>
+	<div id="content">
+		<canvas width="1000" height="1000"></canvas>
+	</div>
+		<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+		<script src="../../jcanvas.min.js"></script>
+	<script>
+		$(document).ready(function() {
+			$("canvas").addLayer({
+				method: "drawLine", name: "vertical-beam", strokeStyle: "#f00",
+				strokeWidth: 4, x1: 40, y1: 40, x2: 40, y2: 900, opacity: 0
+			})
+			.animateLayer("vertical-beam", {x1: 500, x2: 500, opacity: 1}, 500);
+		});
+	</script>
+</body>
+</html>
diff --git a/tests/by-hand/jCanvas-gradient-bare.html b/tests/by-hand/jCanvas-gradient-bare.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jCanvas bare gradient</title>
+	<style>
+		html, body { width:100%; height:100%; margin: 0px;}
+		canvas { display:block; }
+	</style>
+</head>
+<body>
+	<div id="content">
+		<canvas id="bg"></canvas>
+	</div>
+	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+	<script src="../../jcanvas.min.js"></script>
+	<script>
+		$(document).ready(function(){
+			var myBg = document.getElementById("bg");
+			var ctx  = myBg.getContext('2d');
+			ctx.canvas.width = window.innerWidth;
+			ctx.canvas.height = window.innerHeight;
+			var radial = $("#bg").gradient({
+				x1: ctx.canvas.width/2, y1: ctx.canvas.height/2,
+				x2: ctx.canvas.width/2, y2: ctx.canvas.height/2,
+				r1: 0, r2: ctx.canvas.height,
+				c1: "#fbf9fd",
+				c2: "#dfc9de",
+				c3: "#b883b7"
+			});
+			$("#bg").addLayer({
+				method: "drawRect",
+				fillStyle: radial,
+				x: 0, y: 0,
+				width: ctx.canvas.width,
+				height: ctx.canvas.height,
+				fromCenter: false
+			})
+			.drawLayers();
+		});
+	</script>
+</body>
+</html>
diff --git a/tests/by-hand/jCanvas-gradient.html b/tests/by-hand/jCanvas-gradient.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jCanvas gradient</title>
+	<style>
+		html, body { width:100%; height:100%; margin: 0px;}
+		canvas { display:block; }
+	</style>
+</head>
+<body>
+	<div id="content">
+		<canvas id="bg"></canvas>
+	</div>
+	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+	<script src="../../jcanvas.min.js"></script>
+	<script>
+		$(document).ready(function(){
+			var myBg = document.getElementById("bg");
+			var ctx  = myBg.getContext('2d');
+			ctx.canvas.width = window.innerWidth;
+			ctx.canvas.height = window.innerHeight;
+			var radial = $("#bg").gradient({
+				x1: ctx.canvas.width/2, y1: ctx.canvas.height/2,
+				x2: ctx.canvas.width/2, y2: ctx.canvas.height/2,
+				r1: 0, r2: ctx.canvas.height,
+				c1: "#fbf9fd",
+				c2: "#dfc9de",
+				c3: "#b883b7"
+			});
+			$("#bg").addLayer({
+				method: "drawRect",
+				fillStyle: radial,
+				x: 0, y: 0,
+				width: ctx.canvas.width,
+				height: ctx.canvas.height,
+				fromCenter: false
+			})
+			.addLayer({
+				method: "drawPolygon",
+				strokeStyle: "#000000",
+				strokeWidth: 2,
+				fillStyle: "#0023ee",
+				opacity: 0.15,
+				x: 150, y: 140,
+				radius: 100,
+				sides: 6
+			})
+			.drawLayers();
+		});
+	</script>
+</body>
+</html>
diff --git a/tests/by-hand/jCanvas-hello.html b/tests/by-hand/jCanvas-hello.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>simplest jCanvas</title>
+</head>
+<body>
+	<div id="content">
+		<canvas id="canvas"></canvas>
+	</div>
+	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+	<script src="../../jcanvas.min.js"></script>
+	<script>
+		$(document).ready(function(){
+			$("canvas").drawArc({
+				fillStyle: "green",
+				x: 100, y: 100,
+				radius: 50
+			});
+		});
+	</script>
+</body>
+</html>
diff --git a/tests/by-hand/jCanvas-issue39.html b/tests/by-hand/jCanvas-issue39.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jCanvas issue 39</title>
+</head>
+<body>
+	<div id="content">
+		<canvas id="canvas" height="450" width="800"></canvas>
+	</div>
+	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+	<script src="../../jcanvas.min.js"></script>
+	<script>
+		$(document).ready(function(){
+			var rightX = 250,
+				works = "#090",
+				notyet = "#900",
+				leftX = 10,
+				gapY = 10,
+				tY = gapY,
+				hH = 40
+			function addBox(x,y,w,name,grp) {
+				$("canvas").addLayer({method: "drawRect", name: name,
+					fillStyle: notyet, fromCenter: false, group: grp,
+					x: x, y: y, width: w, height: hH})
+			}
+			function addTxt(x,y,txt,grp) {
+				$("canvas").addLayer({method: "drawText", group: grp,
+					x: x, y: y, fromCenter: false, fillStyle: "black",
+					strokeStyle: "black", text: txt})
+			}
+			function shiftBox(B) {
+				$("canvas").animateLayer(B, {x: rightX, fillStyle: works}, 2000)
+			}
+			function delayBox(B) {
+				$("canvas").delayLayer(B, 2000)
+				shiftBox(B)
+			}
+
+			// animateLayer objects
+			addBox(leftX,tY,180,"animateLayerName")
+			addTxt(rightX,tY+gapY,"animateLayer by name")
+			addBox(leftX,tY+(hH+gapY),180,"animateLayerObject")
+			addTxt(rightX,tY+gapY+(hH+gapY),"animateLayer by object")
+			addBox(leftX,tY+2*(hH+gapY),180,"animateLayerIndex")
+			addTxt(rightX,tY+gapY+2*(hH+gapY),"animateLayer by index")
+
+			// delayLayer test objects
+			addBox(leftX,tY+3*(hH+gapY),180,"delayLayerName")
+			addTxt(rightX,tY+gapY+3*(hH+gapY),"delayLayer by name")
+			addBox(leftX,tY+4*(hH+gapY),180,"delayLayerObject")
+			addTxt(rightX,tY+gapY+4*(hH+gapY),"delayLayer by object")
+			addBox(leftX,tY+5*(hH+gapY),180,"delayLayerIndex")
+			addTxt(rightX,tY+gapY+5*(hH+gapY),"delayLayer by index")
+
+			var rect2 = $("canvas").getLayer("animateLayerObject"),
+				rect5 = $("canvas").getLayer("delayLayerObject")
+
+			shiftBox("animateLayerName")
+			shiftBox(rect2)
+			shiftBox(4)
+
+			delayBox("delayLayerName")
+			delayBox(rect5)
+			delayBox(10)
+		});
+	</script>
+</body>
+</html>
diff --git a/tests/by-hand/jCanvas-layer-order-ext1.js b/tests/by-hand/jCanvas-layer-order-ext1.js
@@ -0,0 +1,13 @@
+function addRadial(ctx) {
+	var radial = $("canvas").gradient({
+		x1: ctx.canvas.width/2, y1: ctx.canvas.height/2,
+		x2: ctx.canvas.width/2, y2: ctx.canvas.height/2,
+		r1: 0, r2: ctx.canvas.height,
+		c1: "#f9fbfe", c2: "#bfcfe2", c3: "#86a9bb"
+	});
+	$("canvas").addLayer({
+		method: "drawRect", fillStyle: radial,
+		x: 0, y: 0, width: ctx.canvas.width, height: ctx.canvas.height,
+		fromCenter: false
+	});
+}
diff --git a/tests/by-hand/jCanvas-layer-order-ext2.js b/tests/by-hand/jCanvas-layer-order-ext2.js
@@ -0,0 +1,36 @@
+// polyline for regular hexagon, flat side on bottom
+function hexPolyline(ctx, cell_width, cell_height) {
+	ctx.beginPath();
+	ctx.moveTo(cell_width*1.5,  cell_height*0.5);
+	ctx.lineTo(cell_width,      cell_height*0.5);
+	ctx.lineTo(cell_width*0.75, cell_height-1);
+	ctx.lineTo(cell_width*0.25, cell_height-1);
+	ctx.lineTo(0,               cell_height*0.5);
+	ctx.lineTo(cell_width*0.25, 0);
+	ctx.lineTo(cell_width*0.75, 0);
+	ctx.lineTo(cell_width,      cell_height*0.5);
+	ctx.lineTo(cell_width*1.5,  cell_height*0.5);
+	ctx.strokeStyle = "black";
+	ctx.stroke();
+}
+
+function toRadians(degrees) {
+	return degrees * (Math.PI/180);
+}
+
+function addGridOutline(ctx) {
+	var hexw = 30;
+	var hexh = hexw * Math.sin(toRadians(60));
+	var patt = $("canvas").pattern({
+		width: hexw*1.5, height: hexh,
+		source: function(pctx) {
+			hexPolyline(pctx, hexw, hexh);
+		},
+		repeat: "repeat"
+	});
+	$("canvas").addLayer({
+		method: "drawRect", fillStyle: patt,
+		x: 0, y: 0, width: ctx.canvas.width, height: ctx.canvas.height,
+		fromCenter: false
+	});
+}
diff --git a/tests/by-hand/jCanvas-layer-order-test.html b/tests/by-hand/jCanvas-layer-order-test.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en-US">
+	<head>
+		<meta charset="utf-8">
+		<style>
+			/* fill available window */
+			html, body { width:100%; height:100%; margin: 0px;}
+			/* turn off the scroll bars */
+			canvas { display:block; }
+		</style>
+	</head>
+	<body>
+		<div id="graphics">
+			<canvas id="canvas"></canvas>
+		</div>
+		<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
+		<script src="../../jcanvas.min.js"></script>
+		<script>
+			var canvas = document.getElementById("canvas");
+			var ctx = canvas.getContext("2d");
+			ctx.canvas.width = window.innerWidth;
+			ctx.canvas.height = window.innerHeight;
+			$.ajaxSetup({async: false});
+				$.getScript("jCanvas-layer-order-ext1.js");
+				$.getScript("jCanvas-layer-order-ext2.js");
+			$.ajaxSetup({async: true});
+			addRadial(ctx);
+			addGridOutline(ctx);
+			// Draw each layer onto the canvas
+			$("canvas").drawLayers();
+		</script>
+	</body>
+</html>