CSS!

The HTML report looks beautiful.

src/spectator/formatting/html/body.ecr

@@ -5,8 +5,8 @@
 </div>
 
 <%- if report.counts.fail > 0 -%>
-<h2>Failures</h2>
-<ul id="failure-list">
+<h2>Failures (<%= report.counts.fail %>)</h2>
+<ol id="failure-list">
   <%- report.failures.each do |example| -%>
   <li class="example fail">
     <a href="#example-<%= example.object_id %>" title="Jump to result">
@@ -14,12 +14,12 @@
     </a>
   </li>
   <%- end -%>
-</ul>
+</ol>
 <%- end -%>
 
 <%- if report.counts.pending > 0 -%>
-<h2>Pending</h2>
-<ul id="pending-list">
+<h2>Pending (<%= report.counts.pending %>)</h2>
+<ol id="pending-list">
   <%- report.pending.each do |example| -%>
   <li class="example pending">
     <a href="#example-<%= example.object_id %>" title="Jump to result">
@@ -27,24 +27,24 @@
     </a>
   </li>
   <%- end -%>
-</ul>
+</ol>
 <%- end -%>
 
-<h2>Examples</h2>
+<h2>Examples (<%= report.counts.total %>)</h2>
 <ul id="example-list">
   <%- report.examples.each do |example| -%>
   <li class="example <%= example.result %>">
     <h3 id="#example-<%= example.object_id %>" class="full-name"><% escape(example) %></h3>
     <span class="result <%= example.result %>"><%= example.result %></span>
-    <span class="elapsed" title="<% escape(example.result.elapsed) %>"><% escape(runtime(example.result.elapsed)) %></span>
+    <span class="elapsed" title="<% escape(example.result.elapsed) %>">Took <% escape(runtime(example.result.elapsed)) %></span>
     <% if location = example.location? %><span class="location"><% escape(location) %></span><% end %>
-    <% if result = example.result.as?(PendingResult) %><span class="message"><% escape(result.reason) %></span>
+    <% if result = example.result.as?(PendingResult) %><p class="message"><% escape(result.reason) %></p>
 
     <%- elsif result = example.result.as?(ErrorResult) -%>
-    <span class="error">
-      <em><% escape(result.error.class) %></em>
+    <p class="message error">
+      <em class="type-name"><% escape(result.error.class) %></em>
       <% escape(result.error.message) %>
-    </span>
+    </p>
     <%- if backtrace = result.error.backtrace? -%>
     <div class="stacktrace">
       <%- backtrace.each do |line| -%>
@@ -54,7 +54,7 @@
     <%- end -%>
 
     <%- elsif result = example.result.as?(FailResult) -%>
-    <span class="error"><% escape(result.error.message) %></span>
+    <p class="message fail"><% escape(result.error.message) %></span>
     <%- end -%>
 
     <%- if example.result.expectations.empty? -%>
@@ -63,12 +63,12 @@
     <h4>Expectations</h4>
     <ol class="expectation-list">
       <%- example.result.expectations.each do |expectation| -%>
-      <li class="expectation <%= expectation.satisfied? ? "pass" : "fail" %>">
-        <span<% if location = expectation.location? %> title="<% escape(location) %>"<% end %>><% escape(expectation.description) %></h5>
+      <li class="expectation <%= expectation.satisfied? ? "pass" : "fail" %>"<% if location = expectation.location? %> title="<% escape(location) %>"<% end %>>
+        <span><% escape(expectation.description) %></h5>
         <%- if expectation.satisfied? -%>
-        <span class="result">pass</span>
+        <span class="result pass">pass</span>
         <%- else -%>
-        <span class="result">fail</span>
+        <span class="result fail">fail</span>
         <p class="message"><% escape(expectation.failure_message) %></span>
         <dl class="expectation-values">
           <%- expectation.values.each do |key, value| -%>

src/spectator/formatting/html/head.ecr

@@ -7,6 +7,207 @@
   <meta name="generator" content="Spectator">
 
   <title>Test Results</title>
+
+  <style>
+body {
+  font-family: "sans-serif";
+  background-color: #e2e2e2;
+}
+
+#summary, #failure-list, #pending-list, #example-list li.example {
+  background-color: #fafafa;
+  border: #aaaaaa solid 1px;
+  margin: 1em 0;
+  padding: 1em 0.5em;
+}
+
+#example-list {
+  list-style: none;
+}
+
+#summary.pass, #example-list li.example.pass {
+  border-left: #00aa00 solid 0.5em;
+}
+
+#summary.fail, #summary.error, #failure-list, #example-list li.example.fail, #example-list li.example.error {
+  border-left: #aa0000 solid 0.5em;
+}
+
+#summary.pending, #pending-list, #example-list li.example.pending {
+  border-left: #aaaa00 solid 0.5em;
+}
+
+.totals {
+  display: block;
+}
+
+.result {
+  float: right;
+}
+
+.result.pass {
+  color: #00aa00;
+}
+
+.result.fail, .result.error {
+  color: #aa0000;
+}
+
+.result.pending {
+  color: #aaaa00;
+}
+
+span {
+  margin: 0.25em 0;
+}
+
+.message {
+  font-weight: bold;
+}
+
+.muted {
+  color: #888888;
+  font-style: italic;
+}
+
+h3.full-name {
+  display: inline-block;
+  margin-top: 0;
+}
+
+h1 {
+  margin-top: 0;
+}
+
+h1, h2, h4 {
+  margin-bottom: 0.5em;
+}
+
+.example .elapsed, .example .location {
+  display: block;
+  padding-left: 1em;
+}
+
+#summary, #failure-list, #pending-list {
+  margin: 0 1em;
+}
+
+#example-list {
+  padding: 0 1em;
+}
+
+li.example {
+  border-top: #dddddd solid 1px;
+  margin: 0 0 0 2em;
+}
+
+li.example:hover {
+  background-color: #dddddd;
+}
+
+li.example:last-of-type {
+  border-bottom: #dddddd solid 1px;
+}
+
+li.example a {
+  display: block;
+  text-decoration: none;
+  color: #000000;
+  padding: 0.5em;
+}
+
+.expectation .result {
+  font-size: smaller;
+}
+
+li.expectation {
+  border-top: #dddddd solid 1px;
+  padding: 0.5em;
+}
+
+li.expectation:hover {
+  background-color: #dddddd;
+}
+
+li.expectation:last-of-type {
+  border-bottom: #dddddd solid 1px;
+}
+
+.message.fail, .message.error, .expectation.fail .message {
+  color: #aa0000;
+}
+
+.type-name {
+  font-family: "monospace";
+}
+
+.stacktrace {
+  padding: 1em;
+  margin: 1em;
+  background: #e2e2e2;
+}
+
+.stacktrace code {
+  display: block;
+}
+
+.stacktrace code:hover {
+  background-color: #fafafa;
+}
+
+.stacktrace code.muted:hover {
+  background-color: #e2e2e2;
+}
+
+dl.expectation-values {
+  border: #aaaaaa solid 1px;
+  background-color: #e2e2e2;
+  margin: 0.5em;
+  padding: 0.5em;
+}
+
+.expectation-values dt {
+  float: left;
+  clear: left;
+  width: 15%;
+  text-align: right;
+  font-weight: bold;
+}
+
+.expectation-values dt::after {
+  content: ":";
+}
+
+.expectation-values dd {
+  margin: 0 0 0 15%;
+  padding: 0 0 0.25em 0.5em;
+}
+
+.elapsed:before {
+  content: "\023F1";
+  padding-right: 0.5em;
+}
+
+.location:before {
+  content: "\01f4c4";
+  padding-right: 0.5em;
+}
+
+.totals.pass:before, .result.pass:before {
+  content: "\02714";
+  padding-right: 0.25em;
+}
+
+.totals.fail:before, .totals.error:before, .result.fail:before, .result.error:before {
+  content: "\0274c";
+  padding-right: 0.25em;
+}
+
+.totals.pending:before, .result.pending:before {
+  content: "\026a0";
+  padding-right: 0.25em;
+}
+  </style>
 </head>
 
 <body>