Handling of error.htmlMessage in the HTML reporter

If an error has a htmlMessage property it will be inserted verbatim into
the DOM. That gives assertion libraries complete control over the
formatting of the error message shown by the HTML test runner.

lib/reporters/html.js

@@ -158,7 +158,13 @@ function HTML(runner) {
 
       stackString = stackString || '';
 
-      el.appendChild(fragment('<pre class="error">%e%e</pre>', message, stackString));
+      if (test.err.htmlMessage && stackString) {
+        el.appendChild(fragment('<div class="html-error">%s\n<pre class="error">%e</pre></div>', test.err.htmlMessage, stackString));
+      } else if (test.err.htmlMessage) {
+        el.appendChild(fragment('<div class="html-error">%s</div>', test.err.htmlMessage));
+      } else {
+        el.appendChild(fragment('<pre class="error">%e%e</pre>', message, stackString));
+      }
     }
 
     // toggle code

mocha.css

@@ -136,6 +136,41 @@ body {
   overflow: auto;
 }
 
+#mocha .test .html-error {
+  overflow: auto;
+  color: black;
+  line-height: 1.5;
+  display: block;
+  float: left;
+  clear: left;
+  font: 12px/1.5 monaco, monospace;
+  margin: 5px;
+  padding: 15px;
+  border: 1px solid #eee;
+  max-width: 85%; /*(1)*/
+  max-width: calc(100% - 42px); /*(2)*/
+  max-height: 300px;
+  word-wrap: break-word;
+  border-bottom-color: #ddd;
+  -webkit-border-radius: 3px;
+  -webkit-box-shadow: 0 1px 3px #eee;
+  -moz-border-radius: 3px;
+  -moz-box-shadow: 0 1px 3px #eee;
+  border-radius: 3px;
+}
+
+#mocha .test .html-error pre.error {
+  border: none;
+  -webkit-border-radius: none;
+  -webkit-box-shadow: none;
+  -moz-border-radius: none;
+  -moz-box-shadow: none;
+  padding: 0;
+  margin: 0;
+  margin-top: 18px;
+  max-height: none;
+}
+
 /**
  * (1): approximate for browsers not supporting calc
  * (2): 42 = 2*15 + 2*10 + 2*1 (padding + margin + border)