merge in fixes to TrivialConsoleReporter: correct # of specs, no longer limited by column length

.gitignore

@@ -4,3 +4,4 @@
 site/
 .bundle/
 .pairs
+.rvmrc

.rvmrc

@@ -1 +0,0 @@
-rvm use default@jasmine

Rakefile

@@ -33,7 +33,7 @@ task :spec => ["spec:node", "spec:browser", "jasmine:hint"]
 namespace :spec do
   desc 'Run specs in Node.js'
   task :node do
-    system("node spec/node_suite.js")
+    raise "Node is required to run all jasmine specs" unless system("node spec/node_suite.js")
   end
 
   desc "Run specs in the default browser (MacOS only)"

lib/jasmine.css

@@ -1,14 +1,24 @@
 body {
   font-family: "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif;
+  margin: 0;
+  background-color: #f0f0f0;
 }
 
-
+a {
-.jasmine_reporter a:visited, .jasmine_reporter a {
+  text-decoration: none;
-  color: #303; 
+  color: #777;
 }
 
-.jasmine_reporter a:hover, .jasmine_reporter a:active {
+a:hover {
-  color: blue; 
+  text-decoration: underline;
+}
+
+.description {
+  display: block;
+  padding: .4em 0 .4em 1.5em;
+  font-size: .8em;
+  min-height: 1.2em;
+  line-height: 1.2em;
 }
 
 .run_spec {
@@ -16,111 +26,240 @@ body {
   padding-right: 5px;
   font-size: .8em;
   text-decoration: none;
+  display: none;
 }
 
 .jasmine_reporter {
-  margin: 0 5px;
+  margin: 0;
 }
 
 .banner {
   color: #303;
-  background-color: #fef;
+  padding: 0 1.5em;
-  padding: 5px;
+  height: 1.2em;
+  line-height: 1.2em;
 }
 
 .logo {
   float: left;
-  font-size: 1.1em;
+  font-size: .8em;
   padding-left: 5px;
+  font-weight: 700;
 }
 
 .logo .version {
-  font-size: .6em;
+  font-size: .8em;
-  padding-left: 1em;
+  padding-left: .5em;
+  color: gray;
+  font-weight: 400;
 }
 
-.runner.running {
-  background-color: yellow;
-}
-
-
 .options {
   text-align: right;
-  font-size: .8em;
+  font-size: .6em;
 }
 
 
 
 
 .suite {
-  border: 1px outset gray;
+  position: relative;
-  margin: 5px 0;
+  margin: 10px 1.5em;
-  padding-left: 1em;
+  padding-bottom: 3px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  -moz-box-shadow: 0px 1px 4px #200;
+  -webkit-box-shadow: 0px 1px 4px #200;
+  box-shadow: 0px 1px 4px #200;
+  background-color: #ddd;
 }
 
 .suite .suite {
-  margin: 5px; 
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  
+}
+
+.suite > .description {
+  padding-left: 1.2em;
+
+  border-bottom: 1px solid gray;
+  -moz-border-radius-topleft: 6px;
+  -moz-border-radius-topright: 6px;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  
+  background-image: -webkit-gradient(
+      linear,
+      left bottom,
+      left top,
+      color-stop(0.1, rgb(186,186,186)),
+      color-stop(0.9, rgb(240,240,240))
+  );
+  background-image: -moz-linear-gradient(
+      center bottom,
+      rgb(186,186,186) 10%,
+      rgb(240,240,240) 90%
+  );
+}
+
+.suite .suite>.description {
+  -moz-border-radius-topleft: 3px;
+  -moz-border-radius-topright: 3px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
 }
 
 .suite.passed {
-  background-color: #dfd;
+  border-color: #bbb;
 }
 
 .suite.failed {
-  background-color: #fdd;
+  border-color: #fcc;
+}
+
+.suite > .description {
+  font-weight: 700;
+  font-size: 1em;
+  text-shadow: 0px 1px 0px #eee;
+  color: #777;
+}
+
+.suite.passed > .description {
+  color: rgb(94,125,0);
+  text-shadow: 0px 1px 0px #ddd;
+}
+
+.suite.failed > .description {
+  color: rgb(176,57,17);
 }
 
 .spec {
-  margin: 5px;
+  margin: 0;
-  padding-left: 1em;
   clear: both;
+  position: relative;
+  padding-bottom: 0;
+  border-bottom: 1px solid gray;
 }
 
 .spec.failed, .spec.passed, .spec.skipped {
-  padding-bottom: 5px;
+
-  border: 1px solid gray;
+}
+
+.spec.failed:first-child, .spec.passed:first-child, .spec.skipped:first-child {
 }
 
 .spec.failed {
-  background-color: #fbb;
+  background-color: white;
-  border-color: red;
+}
+
+.spec > .description {
+  color: #666;
+  font-weight: 700;
+}
+
+.spec.failed > .description {
+  color: white;
+
+  background-image: -webkit-gradient(
+      linear,
+      left bottom,
+      left top,
+      color-stop(0.1, rgb(176,57,17)),
+      color-stop(0.94, rgb(237,87,0))
+  );
+  background-image: -moz-linear-gradient(
+      center bottom,
+      rgb(176,57,17) 10%,
+      rgb(237,87,0) 94%
+  );
+}
+
+.spec.failed > .description:before {
+  display: block;
+  position: absolute;
+  left: 5px;
+  top: 8px;
+  width: 8px;
+  height: 8px;
+  content: ".";
+  color: transparent;
+  border: 1px solid #ffffff;
+  
+  -moz-border-radius: 5px;
+  
+  background-image: -webkit-gradient(
+      linear,
+      left bottom,
+      left top,
+      color-stop(0.1, rgb(176,57,17)),
+      color-stop(0.94, rgb(237,87,0))
+  );
+  background-image: -moz-linear-gradient(
+      center bottom,
+      rgb(176,57,17) 10%,
+      rgb(237,87,0) 94%
+  );
 }
 
 .spec.passed {
-  background-color: #bfb;
+  background-color: white;
-  border-color: green;
+  border-color: #bbb;
 }
 
+.spec.passed>.description {
+  background-color: #ddd;
+}
+
+.spec.passed>.description:before {
+  display: block;
+  position: absolute;
+  left: 6px;
+  top: 9px;
+  width: 8px;
+  height: 8px;
+  content: ".";
+  color: transparent;
+  
+  -moz-border-radius: 4px;
+  
+  background-image: -webkit-gradient(
+      linear,
+      left bottom,
+      left top,
+      color-stop(0.1, rgb(94,125,0)),
+      color-stop(0.9, rgb(167,212,21))
+  );
+  background-image: -moz-linear-gradient(
+      center bottom,
+      rgb(94,125,0) 10%,
+      rgb(167,212,21) 90%
+  );
+}
+
+
 .spec.skipped {
   background-color: #bbb;
 }
 
+
 .messages {
-  border-left: 1px dashed gray;
+  font-size: .8em;
-  padding-left: 1em;
+  padding: 5px 1.5em 0 1.5em;
-  padding-right: 1em;
+  line-height: 1.2em;
 }
 
 .passed {
-  background-color: #cfc;
   display: none;
 }
 
 .failed {
-  background-color: #fbb;
 }
 
 .skipped {
-  color: #777;
-  background-color: #eee;
   display: none;
 }
 
-
-/*.resultMessage {*/
-  /*white-space: pre;*/
-/*}*/
-
 .resultMessage span.result {
   display: block;
   line-height: 2em;
@@ -132,14 +271,22 @@ body {
 }
 
 .stackTrace {
-  white-space: pre;
+  padding: 5px 1em;
-  font-size: .8em;
+  margin: 5px 0;
-  margin-left: 10px;
   max-height: 5em;
-  overflow: auto;
+  overflow: hidden;
-  border: 1px inset red;
+  
-  padding: 1em;
+  border: 1px solid #baa;
   background: #eef;
+  
+  white-space: pre;
+  font-size: 1.2em;
+  line-height: 1.5em;
+  font-family: monospace;
+}
+
+.stackTrace:hover {
+  overflow: auto;
 }
 
 .finished-at {
@@ -152,15 +299,64 @@ body {
   display: block;
 }
 
-
 #jasmine_content {
-  position:fixed;
+  position: fixed;
   right: 100%;
 }
 
 .runner {
-  border: 1px solid gray;
   display: block;
-  margin: 5px 0;
+  margin: 5px 0 10px 0;
-  padding: 2px 0 2px 10px;
+  padding: 2px 0 2px 1.5em;
+  
+  border-top: 1px solid gray;
+  -moz-box-shadow: 0px 1px 4px #000;
+  -webkit-box-shadow: 0px 1px 4px #000;
+  box-shadow: 0px 1px 4px #000;
+
+  font-size: .8em;
+}
+
+.runner.failed {
+  background-image: -webkit-gradient(
+      linear,
+      left bottom,
+      left top,
+      color-stop(0.1, rgb(176,57,17)),
+      color-stop(0.94, rgb(237,87,0))
+  );
+  background-image: -moz-linear-gradient(
+      center bottom,
+      rgb(176,57,17) 10%,
+      rgb(237,87,0) 94%
+  );
+}
+
+.runner.passed {
+
+  background-image: -webkit-gradient(
+      linear,
+      left bottom,
+      left top,
+      color-stop(0.1, rgb(94,125,0)),
+      color-stop(0.9, rgb(167,212,21))
+  );
+  background-image: -moz-linear-gradient(
+      center bottom,
+      rgb(94,125,0) 10%,
+      rgb(167,212,21) 90%
+  );
+}
+
+.runner .description {
+  padding-left: .8em;
+  color: white;
+}
+
+.runner.running {
+  background-color: yellow;
+}
+
+.runner>.description {
+  height: 1em;
 }

lib/jasmine.js

@@ -22,6 +22,12 @@ jasmine.unimplementedMethod_ = function() {
  */
 jasmine.undefined = jasmine.___undefined___;
 
+/**
+ * Show diagnostic messages in the console if set to true
+ *
+ */
+jasmine.VERBOSE = false;
+
 /**
  * Default interval in milliseconds for event loop yields (e.g. to allow network activity or to refresh the screen with the HTML-based runner). Small values here may result in slow test running. Zero means no updates until all tests have completed.
  *
@@ -773,14 +779,14 @@ jasmine.Env.prototype.describe = function(description, specDefinitions) {
     declarationError = e;
   }
 
-  this.currentSuite = parentSuite;
-
   if (declarationError) {
     this.it("encountered a declaration exception", function() {
       throw declarationError;
     });
   }
 
+  this.currentSuite = parentSuite;
+
   return suite;
 };
 
@@ -1379,6 +1385,23 @@ jasmine.Matchers.prototype.toBeGreaterThan = function(expected) {
   return this.actual > expected;
 };
 
+/**
+ * Matcher that checks that the expected item is equal to the actual item
+ * up to a given level of decimal precision (default 2).
+ *
+ * @param {Number} expected
+ * @param {Number} precision
+ */
+jasmine.Matchers.prototype.toBeCloseTo = function(expected, precision) {
+  if (!(precision === 0)) {
+    precision = precision || 2;
+  }
+  var multiplier = Math.pow(10, precision);
+  var actual = Math.round(this.actual * multiplier);
+  expected = Math.round(expected * multiplier);
+  return expected == actual;
+};
+
 /**
  * Matcher that checks that the expected exception was thrown by the actual.
  *
@@ -2186,7 +2209,9 @@ jasmine.WaitsBlock = function(env, timeout, spec) {
 jasmine.util.inherit(jasmine.WaitsBlock, jasmine.Block);
 
 jasmine.WaitsBlock.prototype.execute = function (onComplete) {
+  if (jasmine.VERBOSE) {
     this.env.reporter.log('>> Jasmine waiting for ' + this.timeout + ' ms...');
+  }
   this.env.setTimeout(function () {
     onComplete();
   }, this.timeout);
@@ -2214,7 +2239,9 @@ jasmine.util.inherit(jasmine.WaitsForBlock, jasmine.Block);
 jasmine.WaitsForBlock.TIMEOUT_INCREMENT = 10;
 
 jasmine.WaitsForBlock.prototype.execute = function(onComplete) {
+  if (jasmine.VERBOSE) {
     this.env.reporter.log('>> Jasmine waiting for ' + (this.message || 'something to happen'));
+  }
   var latchFunctionResult;
   try {
     latchFunctionResult = this.latchFunction.apply(this.spec);
@@ -2431,5 +2458,5 @@ jasmine.version_= {
   "major": 1,
   "minor": 1,
   "build": 0,
-  "revision": 1299963843
+  "revision": 1306336386
 };

spec/runner.html

@@ -8,7 +8,7 @@
     // yes, really keep this here to keep us honest, but only for jasmine's own runner! [xw]
     undefined = "diz be undefined yo";
   </script>
-
+  <link rel="shortcut icon" type="image/png" href="../images/jasmine_favicon.png">
   <script type="text/javascript" src="../src/base.js"></script>
   <script type="text/javascript" src="../src/util.js"></script>
   <script type="text/javascript" src="../src/Env.js"></script>

spec/suites/TrivialConsoleReporterSpec.js

@@ -1,4 +1,5 @@
-describe("TrivialConsoleReporter", function() {
+if (jasmine.TrivialConsoleReporter) {
+  describe("TrivialConsoleReporter", function() {
 
 
     //keep these literal.  otherwise the test loses value as a test.
@@ -426,4 +427,5 @@ describe("TrivialConsoleReporter", function() {
 
     });
 
-});
+  });
+}

spec/suites/WaitsForBlockSpec.js

@@ -10,6 +10,37 @@ describe('WaitsForBlock', function () {
     onComplete = jasmine.createSpy("onComplete");
   });
 
+  describe("jasmine.VERBOSE", function() {
+    var jasmineVerboseOriginal;
+    beforeEach(function() {
+      jasmineVerboseOriginal = jasmine.VERBOSE;
+      spyOn(env.reporter, 'log');
+
+    });
+    it('do not show information if jasmine.VERBOSE is set to false', function () {
+        jasmine.VERBOSE = false;
+        var latchFunction = function() {
+          return true;
+        };
+        var block = new jasmine.WaitsForBlock(env, timeout, latchFunction, message, spec);
+        expect(env.reporter.log).not.toHaveBeenCalled();
+        block.execute(onComplete);
+        expect(env.reporter.log).not.toHaveBeenCalled();
+        jasmine.VERBOSE = jasmineVerboseOriginal;
+      });
+    it('show information if jasmine.VERBOSE is set to true', function () {
+        jasmine.VERBOSE = true;
+        var latchFunction = function() {
+          return true;
+        };
+        var block = new jasmine.WaitsForBlock(env, timeout, latchFunction, message, spec);
+        expect(env.reporter.log).not.toHaveBeenCalled();
+        block.execute(onComplete);
+        expect(env.reporter.log).toHaveBeenCalled();
+        jasmine.VERBOSE = jasmineVerboseOriginal;
+      });
+  });
+
   it('onComplete should be called if the latchFunction returns true', function () {
     var latchFunction = function() {
       return true;

src/WaitsBlock.js

@@ -6,7 +6,9 @@ jasmine.WaitsBlock = function(env, timeout, spec) {
 jasmine.util.inherit(jasmine.WaitsBlock, jasmine.Block);
 
 jasmine.WaitsBlock.prototype.execute = function (onComplete) {
+  if (jasmine.VERBOSE) {
     this.env.reporter.log('>> Jasmine waiting for ' + this.timeout + ' ms...');
+  }
   this.env.setTimeout(function () {
     onComplete();
   }, this.timeout);

src/WaitsForBlock.js

@@ -21,7 +21,9 @@ jasmine.util.inherit(jasmine.WaitsForBlock, jasmine.Block);
 jasmine.WaitsForBlock.TIMEOUT_INCREMENT = 10;
 
 jasmine.WaitsForBlock.prototype.execute = function(onComplete) {
+  if (jasmine.VERBOSE) {
     this.env.reporter.log('>> Jasmine waiting for ' + (this.message || 'something to happen'));
+  }
   var latchFunctionResult;
   try {
     latchFunctionResult = this.latchFunction.apply(this.spec);

src/base.js

@@ -22,6 +22,12 @@ jasmine.unimplementedMethod_ = function() {
  */
 jasmine.undefined = jasmine.___undefined___;
 
+/**
+ * Show diagnostic messages in the console if set to true
+ *
+ */
+jasmine.VERBOSE = false;
+
 /**
  * Default interval in milliseconds for event loop yields (e.g. to allow network activity or to refresh the screen with the HTML-based runner). Small values here may result in slow test running. Zero means no updates until all tests have completed.
  *

src/html/jasmine.css

@@ -1,14 +1,24 @@
 body {
   font-family: "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif;
+  margin: 0;
+  background-color: #f0f0f0;
 }
 
-
+a {
-.jasmine_reporter a:visited, .jasmine_reporter a {
+  text-decoration: none;
-  color: #303; 
+  color: #777;
 }
 
-.jasmine_reporter a:hover, .jasmine_reporter a:active {
+a:hover {
-  color: blue; 
+  text-decoration: underline;
+}
+
+.description {
+  display: block;
+  padding: .4em 0 .4em 1.5em;
+  font-size: .8em;
+  min-height: 1.2em;
+  line-height: 1.2em;
 }
 
 .run_spec {
@@ -16,111 +26,240 @@ body {
   padding-right: 5px;
   font-size: .8em;
   text-decoration: none;
+  display: none;
 }
 
 .jasmine_reporter {
-  margin: 0 5px;
+  margin: 0;
 }
 
 .banner {
   color: #303;
-  background-color: #fef;
+  padding: 0 1.5em;
-  padding: 5px;
+  height: 1.2em;
+  line-height: 1.2em;
 }
 
 .logo {
   float: left;
-  font-size: 1.1em;
+  font-size: .8em;
   padding-left: 5px;
+  font-weight: 700;
 }
 
 .logo .version {
-  font-size: .6em;
+  font-size: .8em;
-  padding-left: 1em;
+  padding-left: .5em;
+  color: gray;
+  font-weight: 400;
 }
 
-.runner.running {
-  background-color: yellow;
-}
-
-
 .options {
   text-align: right;
-  font-size: .8em;
+  font-size: .6em;
 }
 
 
 
 
 .suite {
-  border: 1px outset gray;
+  position: relative;
-  margin: 5px 0;
+  margin: 10px 1.5em;
-  padding-left: 1em;
+  padding-bottom: 3px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  -moz-box-shadow: 0px 1px 4px #200;
+  -webkit-box-shadow: 0px 1px 4px #200;
+  box-shadow: 0px 1px 4px #200;
+  background-color: #ddd;
 }
 
 .suite .suite {
-  margin: 5px; 
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  
+}
+
+.suite > .description {
+  padding-left: 1.2em;
+
+  border-bottom: 1px solid gray;
+  -moz-border-radius-topleft: 6px;
+  -moz-border-radius-topright: 6px;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  
+  background-image: -webkit-gradient(
+      linear,
+      left bottom,
+      left top,
+      color-stop(0.1, rgb(186,186,186)),
+      color-stop(0.9, rgb(240,240,240))
+  );
+  background-image: -moz-linear-gradient(
+      center bottom,
+      rgb(186,186,186) 10%,
+      rgb(240,240,240) 90%
+  );
+}
+
+.suite .suite>.description {
+  -moz-border-radius-topleft: 3px;
+  -moz-border-radius-topright: 3px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
 }
 
 .suite.passed {
-  background-color: #dfd;
+  border-color: #bbb;
 }
 
 .suite.failed {
-  background-color: #fdd;
+  border-color: #fcc;
+}
+
+.suite > .description {
+  font-weight: 700;
+  font-size: 1em;
+  text-shadow: 0px 1px 0px #eee;
+  color: #777;
+}
+
+.suite.passed > .description {
+  color: rgb(94,125,0);
+  text-shadow: 0px 1px 0px #ddd;
+}
+
+.suite.failed > .description {
+  color: rgb(176,57,17);
 }
 
 .spec {
-  margin: 5px;
+  margin: 0;
-  padding-left: 1em;
   clear: both;
+  position: relative;
+  padding-bottom: 0;
+  border-bottom: 1px solid gray;
 }
 
 .spec.failed, .spec.passed, .spec.skipped {
-  padding-bottom: 5px;
+
-  border: 1px solid gray;
+}
+
+.spec.failed:first-child, .spec.passed:first-child, .spec.skipped:first-child {
 }
 
 .spec.failed {
-  background-color: #fbb;
+  background-color: white;
-  border-color: red;
+}
+
+.spec > .description {
+  color: #666;
+  font-weight: 700;
+}
+
+.spec.failed > .description {
+  color: white;
+
+  background-image: -webkit-gradient(
+      linear,
+      left bottom,
+      left top,
+      color-stop(0.1, rgb(176,57,17)),
+      color-stop(0.94, rgb(237,87,0))
+  );
+  background-image: -moz-linear-gradient(
+      center bottom,
+      rgb(176,57,17) 10%,
+      rgb(237,87,0) 94%
+  );
+}
+
+.spec.failed > .description:before {
+  display: block;
+  position: absolute;
+  left: 5px;
+  top: 8px;
+  width: 8px;
+  height: 8px;
+  content: ".";
+  color: transparent;
+  border: 1px solid #ffffff;
+  
+  -moz-border-radius: 5px;
+  
+  background-image: -webkit-gradient(
+      linear,
+      left bottom,
+      left top,
+      color-stop(0.1, rgb(176,57,17)),
+      color-stop(0.94, rgb(237,87,0))
+  );
+  background-image: -moz-linear-gradient(
+      center bottom,
+      rgb(176,57,17) 10%,
+      rgb(237,87,0) 94%
+  );
 }
 
 .spec.passed {
-  background-color: #bfb;
+  background-color: white;
-  border-color: green;
+  border-color: #bbb;
 }
 
+.spec.passed>.description {
+  background-color: #ddd;
+}
+
+.spec.passed>.description:before {
+  display: block;
+  position: absolute;
+  left: 6px;
+  top: 9px;
+  width: 8px;
+  height: 8px;
+  content: ".";
+  color: transparent;
+  
+  -moz-border-radius: 4px;
+  
+  background-image: -webkit-gradient(
+      linear,
+      left bottom,
+      left top,
+      color-stop(0.1, rgb(94,125,0)),
+      color-stop(0.9, rgb(167,212,21))
+  );
+  background-image: -moz-linear-gradient(
+      center bottom,
+      rgb(94,125,0) 10%,
+      rgb(167,212,21) 90%
+  );
+}
+
+
 .spec.skipped {
   background-color: #bbb;
 }
 
+
 .messages {
-  border-left: 1px dashed gray;
+  font-size: .8em;
-  padding-left: 1em;
+  padding: 5px 1.5em 0 1.5em;
-  padding-right: 1em;
+  line-height: 1.2em;
 }
 
 .passed {
-  background-color: #cfc;
   display: none;
 }
 
 .failed {
-  background-color: #fbb;
 }
 
 .skipped {
-  color: #777;
-  background-color: #eee;
   display: none;
 }
 
-
-/*.resultMessage {*/
-  /*white-space: pre;*/
-/*}*/
-
 .resultMessage span.result {
   display: block;
   line-height: 2em;
@@ -132,14 +271,22 @@ body {
 }
 
 .stackTrace {
-  white-space: pre;
+  padding: 5px 1em;
-  font-size: .8em;
+  margin: 5px 0;
-  margin-left: 10px;
   max-height: 5em;
-  overflow: auto;
+  overflow: hidden;
-  border: 1px inset red;
+  
-  padding: 1em;
+  border: 1px solid #baa;
   background: #eef;
+  
+  white-space: pre;
+  font-size: 1.2em;
+  line-height: 1.5em;
+  font-family: monospace;
+}
+
+.stackTrace:hover {
+  overflow: auto;
 }
 
 .finished-at {
@@ -152,15 +299,64 @@ body {
   display: block;
 }
 
-
 #jasmine_content {
-  position:fixed;
+  position: fixed;
   right: 100%;
 }
 
 .runner {
-  border: 1px solid gray;
   display: block;
-  margin: 5px 0;
+  margin: 5px 0 10px 0;
-  padding: 2px 0 2px 10px;
+  padding: 2px 0 2px 1.5em;
+  
+  border-top: 1px solid gray;
+  -moz-box-shadow: 0px 1px 4px #000;
+  -webkit-box-shadow: 0px 1px 4px #000;
+  box-shadow: 0px 1px 4px #000;
+
+  font-size: .8em;
+}
+
+.runner.failed {
+  background-image: -webkit-gradient(
+      linear,
+      left bottom,
+      left top,
+      color-stop(0.1, rgb(176,57,17)),
+      color-stop(0.94, rgb(237,87,0))
+  );
+  background-image: -moz-linear-gradient(
+      center bottom,
+      rgb(176,57,17) 10%,
+      rgb(237,87,0) 94%
+  );
+}
+
+.runner.passed {
+
+  background-image: -webkit-gradient(
+      linear,
+      left bottom,
+      left top,
+      color-stop(0.1, rgb(94,125,0)),
+      color-stop(0.9, rgb(167,212,21))
+  );
+  background-image: -moz-linear-gradient(
+      center bottom,
+      rgb(94,125,0) 10%,
+      rgb(167,212,21) 90%
+  );
+}
+
+.runner .description {
+  padding-left: .8em;
+  color: white;
+}
+
+.runner.running {
+  background-color: yellow;
+}
+
+.runner>.description {
+  height: 1em;
 }