From a93f9fe8120d46a7c5d9b12741eab9eaaef1ec87 Mon Sep 17 00:00:00 2001
From: Sune Simonsen <sune@we-knowhow.dk>
Date: Sun, 7 Sep 2014 20:56:20 +0200
Subject: [PATCH] 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 |  8 +++++++-
 mocha.css             | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/lib/reporters/html.js b/lib/reporters/html.js
index af383c9b65..40ec685096 100644
--- a/lib/reporters/html.js
+++ b/lib/reporters/html.js
@@ -157,7 +157,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
diff --git a/mocha.css b/mocha.css
index 42b9798fa4..3b82ae915c 100644
--- a/mocha.css
+++ b/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)