From f59e0993a681ded64f9767576ee7dcbc7918576d Mon Sep 17 00:00:00 2001
From: John McLear <john@mclear.co.uk>
Date: Sun, 14 Feb 2021 08:04:50 +0000
Subject: [PATCH] tests: test runner output HTML and CSS improvements to show
 duration (#4775)

---
 src/tests/frontend/lib/mocha.js |  4 ++--
 src/tests/frontend/runner.css   | 14 +++-----------
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/src/tests/frontend/lib/mocha.js b/src/tests/frontend/lib/mocha.js
index a9669b1b7..031b6e446 100644
--- a/src/tests/frontend/lib/mocha.js
+++ b/src/tests/frontend/lib/mocha.js
@@ -3216,10 +3216,10 @@ function HTML(runner, options) {
   runner.on(EVENT_TEST_PASS, function(test) {
     var url = self.testURL(test);
     var markup =
-      '<li class="test pass %e"><h2>%e<span class="duration">%ems</span> ' +
+      '<li class="test pass %e"><h2>%e</h2><span class="duration">%ems</span> ' +
       '<a href="%s" class="replay">' +
       playIcon +
-      '</a></h2></li>';
+      '</a></li>';
     var el = fragment(markup, test.speed, test.title, test.duration, url);
     self.addCodeToggle(el, test.body);
     appendToStack(el);
diff --git a/src/tests/frontend/runner.css b/src/tests/frontend/runner.css
index 14cc96986..b35918028 100644
--- a/src/tests/frontend/runner.css
+++ b/src/tests/frontend/runner.css
@@ -102,11 +102,11 @@ body {
 }
 
 #mocha .test.pass.medium .duration {
-  background: #C09853;
+  background: #ffd285;
 }
 
 #mocha .test.pass.slow .duration {
-  background: #B94A48;
+  background: #ffc2c0;
 }
 
 #mocha .test.pass::before {
@@ -122,19 +122,11 @@ body {
   font-size: 9px;
   margin-left: 5px;
   padding: 2px 5px;
-  color: white;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
-  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  -ms-border-radius: 5px;
-  -o-border-radius: 5px;
   border-radius: 5px;
 }
 
 #mocha .test.pass.fast .duration {
-  display: none;
+  background: #d3ffe9;
 }
 
 #mocha .test.pending {