add tests for font scaling and canvas scaling

jondavidjohn · jondavidjohn · commit 61421f7134eb · 2014-01-30T22:31:24.000-06:00
diff --git a/index.html b/index.html
@@ -76,6 +76,7 @@
 
 			ctx.font="20px Arial";
 			ctx.fillText("Am I Sharp?",10,300);
+			ctx.fillText("Am I Sharp Also?",10,450);
 		 })();
 	</script>
 </body>
diff --git a/test/CanvasRenderingContext2D.html b/test/CanvasRenderingContext2D.html
@@ -8,7 +8,7 @@
 <body>
 	<div id="qunit"></div>
 	<div id="qunit-fixture">
-		<canvas id="canvas" height="300" width="500"></canvas>
+		<canvas id="test_canvas"></canvas>
 	</div>
 	<script src="qunit/qunit/qunit.js"></script>
 	<script src="../dist/hidpi-canvas.js"></script>
diff --git a/test/CanvasRenderingContext2DTests.js b/test/CanvasRenderingContext2DTests.js
@@ -1,5 +1,19 @@
-module('CanvasRenderingContext2D Tests');
+module('CanvasRenderingContext2D Tests', {
+	setup: function() {
+		window.devicePixelRatio = 2;
+	}
+});
+
+test('the font size remains unchanged after every text call', function() {
+	var font_value = '12px Helvetica',
+		canvas = document.getElementById('test_canvas'),
+		context = canvas.getContext('2d');
+
+	context.font = font_value;
+
+	context.fillText("Some Text",10,300);
+	equal(context.font, font_value);
 
-test('something', function() {
-	equal(true, true);
+	context.fillText("Some More Text",10,450);
+	equal(context.font, font_value);
 });
diff --git a/test/HTMLCanvasElement.html b/test/HTMLCanvasElement.html
@@ -8,7 +8,7 @@
 <body>
 	<div id="qunit"></div>
 	<div id="qunit-fixture">
-		<canvas id="canvas" height="300" width="500"></canvas>
+		<canvas id="test_canvas"></canvas>
 	</div>
 	<script src="qunit/qunit/qunit.js"></script>
 	<script src="../dist/hidpi-canvas.js"></script>
diff --git a/test/HTMLCanvasElementTests.js b/test/HTMLCanvasElementTests.js
@@ -1,5 +1,21 @@
-module('HTMLCanvasElement Tests');
+module('HTMLCanvasElement Tests', {
+	setup: function() {
+		window.devicePixelRatio = 2;
+	}
+});
+
+test('canvas dimensions scale to device pixel ratio', function() {
+	var canvas = document.getElementById('test_canvas'),
+		context;
+
+	canvas.height = 100;
+	canvas.width = 200;
+
+	context = canvas.getContext('2d');
+
+	equal(canvas.height, 200);
+	equal(canvas.width, 400);
 
-test('something', function() {
-	equal(true, true);
+	equal(canvas.style.height, '100px');
+	equal(canvas.style.width, '200px');
 });
