Color the stat result icon and text based on root suite result

lib/reporters/html.js

@@ -29,10 +29,11 @@ var Date = global.Date;
 exports = module.exports = HTML;
 
 /**
- * Stats template.
+ * Stats template: Result, progress, passes, failures, and duration.
  */
 var statsTemplate =
   '<ul id="mocha-stats">' +
+  '<li class="result"></li>' +
   '<li class="progress-contain"><progress class="progress-element" max="100" value="0"></progress><svg class="progress-ring"><circle class="ring-flatlight" stroke-dasharray="100%,0%"/><circle class="ring-highlight" stroke-dasharray="0%,100%"/></svg><div class="progress-text">0%</div></li>' +
   '<li class="passes"><a href="javascript:void(0);">passes:</a> <em>0</em></li>' +
   '<li class="failures"><a href="javascript:void(0);">failures:</a> <em>0</em></li>' +
@@ -58,18 +59,30 @@ function HTML(runner, options) {
   var stats = this.stats;
   var stat = fragment(statsTemplate);
   var items = stat.getElementsByTagName('li');
-  var passes = items[1].getElementsByTagName('em')[0];
-  var passesLink = items[1].getElementsByTagName('a')[0];
-  var failures = items[2].getElementsByTagName('em')[0];
-  var failuresLink = items[2].getElementsByTagName('a')[0];
-  var duration = items[3].getElementsByTagName('em')[0];
+  const resultIndex = 0;
+  const progressIndex = 1;
+  const passesIndex = 2;
+  const failuresIndex = 3;
+  const durationIndex = 4;
+  /** Stat item containing the pass or fail indicator (hasFailures ? '✖' : '✓') */
+  var results = items[resultIndex];
+  /** Stat item containing the pass count (not the word, just the number) */
+  var passes = items[passesIndex].getElementsByTagName('em')[0];
+  /** Stat item linking to filter to show only passing tests */
+  var passesLink = items[passesIndex].getElementsByTagName('a')[0];
+  /** Stat item containing the failure count (not the word, just the number) */
+  var failures = items[failuresIndex].getElementsByTagName('em')[0];
+  /** Stat item linking to filter to show only failing tests */
+  var failuresLink = items[failuresIndex].getElementsByTagName('a')[0];
+  /** Stat item linking to the duration time (not the word or unit, just the number) */
+  var duration = items[durationIndex].getElementsByTagName('em')[0];
   var report = fragment('<ul id="mocha-report"></ul>');
   var stack = [report];
-  var progressText = items[0].getElementsByTagName('div')[0];
-  var progressBar = items[0].getElementsByTagName('progress')[0];
+  var progressText = items[progressIndex].getElementsByTagName('div')[0];
+  var progressBar = items[progressIndex].getElementsByTagName('progress')[0];
   var progressRing = [
-    items[0].getElementsByClassName('ring-flatlight')[0],
-    items[0].getElementsByClassName('ring-highlight')[0]
+    items[progressIndex].getElementsByClassName('ring-flatlight')[0],
+    items[progressIndex].getElementsByClassName('ring-highlight')[0]
   ];
   var progressRingRadius = null; // computed CSS unavailable now, so set later
   var root = document.getElementById('mocha');
@@ -124,6 +137,10 @@ function HTML(runner, options) {
 
   runner.on(EVENT_SUITE_END, function (suite) {
     if (suite.root) {
+      const hasFailures = stats.failures > 0;
+      const className = hasFailures ? ' fail' : ' pass';
+      text(results, hasFailures ? '✖' : '✓');
+      stat.className += className;
       updateStats();
       return;
     }

mocha.css

@@ -344,6 +344,23 @@ body {
   z-index: 1;
 }
 
+#mocha-stats.fail li.result {
+  color: var(--mocha-test-fail-color);
+}
+
+#mocha-stats.fail li.failures {
+  color: var(--mocha-test-fail-color);
+}
+
+#mocha-stats.pass li.result {
+  color: var(--mocha-pass-icon-color);
+}
+
+#mocha-stats.pass li.passes {
+  color: var(--mocha-pass-icon-color);
+}
+
+
 #mocha-stats .progress-contain {
   float: right;
   padding: 0;