manjunathbv
diff --git a/‎src/client/_css_test.js‎
Lines changed: 39 additions & 2 deletions b/‎src/client/_css_test.js‎
Lines changed: 39 additions & 2 deletions
diff --git a/‎src/client/index.html‎
Lines changed: 1 addition & 1 deletion b/‎src/client/index.html‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/client/screen.css‎
Lines changed: 17 additions & 6 deletions b/‎src/client/screen.css‎
Lines changed: 17 additions & 6 deletions
diff --git a/‎todo.txt‎
Lines changed: 4 additions & 3 deletions b/‎todo.txt‎
Lines changed: 4 additions & 3 deletions
@@ -7,6 +7,7 @@
 	var assert = require("../shared/_assert.js");
 	var quixote = require("./vendor/quixote-0.7.1.js");
 
+	var TRANSPARENT = "rgba(0, 0, 0, 0)";
 	var WHITE = "rgb(255, 255, 255)";
 	var DARK_GRAY = "rgb(89, 89, 89)";
 	var GRAY = "rgb(229, 229, 229)";
@@ -82,7 +83,7 @@
 
 			it("has no padding or margins", function() {
 				assert.equal(margin(buttonTag), "0px", "margin");
-				assert.equal(padding (buttonTag), "0px", "margin");
+				assert.equal(padding(buttonTag), "0px", "padding");
 			});
 
 			it("has rounded corners", function() {
@@ -125,7 +126,6 @@
 				assertHoverStyle(linkTag, DARKENED_MEDIUM_BLUE, "hover background");
 			});
 
-
 		});
 
 
@@ -162,6 +162,42 @@
 		});
 
 
+		describe("Logo", function() {
+
+			var logo;
+
+			beforeEach(function() {
+				logo = frame.add("<div class='logo'>logo</a>", "logo");
+			});
+
+			it("fills its container", function() {
+				logo.assert({
+					width: frame.body().width
+				});
+			});
+
+			it("is nice and big", function() {
+				logo.assert({
+					height: 30
+				});
+			});
+
+			it("text", function() {
+				assert.equal(textAlign(logo), "center", "should be horizontally centered");
+				assert.equal(isTextVerticallyCentered(logo), true, "should be vertically centered");
+				assert.equal(fontSize(logo), "30px", "font size");
+				assert.equal(fontWeight(logo), HEADLINE_WEIGHT, "font weight");
+			});
+
+			it("color", function() {
+				assert.equal(backgroundColor(logo), TRANSPARENT, "background color");
+				assert.equal(textColor(logo), WHITE, "text color");
+			});
+
+		});
+
+
+
 
 		describe("Drawing area", function() {
 
@@ -822,6 +858,7 @@
 
 	function normalizeColorString(color) {
 		if (color === "white") return "rgb(255, 255, 255)";
+		if (color === "transparent") return "rgba(0, 0, 0, 0)";
 
 		var colorGroups = color.match(/^#(..)(..)(..)/);    // look for presence of #rrggbb string
 		if (colorGroups === null) return color;   // if doesn't match, assume we have rgb() string
 
@@ -65,7 +65,7 @@
 </head>
 <body>
 
-	<div id="logo">
+	<div id="logo" class="logo">
 		<img src="/images/weewiki-logo.png" width="181" height="25" alt="WeeWikiPaint">
 	</div>
 
 
@@ -115,19 +115,30 @@ body {
 }
 
 
+/* Logo block */
+
+.logo {
+	/* size */
+	height: 30px;
+
+	/* text */
+	text-align: center;
+	line-height: 30px;     /* vertical centering */
+	font-size: 30px;
+	font-weight: 600;
+
+	/* color */
+	color: white;
+}
+
+
 /* Home page */
 
 #logo {
-	line-height: 1;
-	height: 30px;
 	margin-top: 12px;
 	margin-left: auto;
 	margin-right: auto;
 	margin-bottom: 0px;
-	text-align: center;
-	font-size: 30px;
-	font-weight: 600;
-	color: white;
 }
 
 #tagline {
 
@@ -32,11 +32,12 @@ Engineering Tasks:
 
 To Do on current task:
 * factor out blocks (with TDD)
-  * factor out header
-  - factor out subheader
-  - factor out tagline
+  * factor out logo
   - factor out 404 headline
 - factor out theme
+  - factor out subheader
+  - factor out tagline
 - factor out layout (with TDD?)
+  - should each block have a 'fill its container' test?
 - Improve our client directory structure
 - Split our CSS tests into multiple files