From 8deabc75a92522d66351c553c79355dbb915364a Mon Sep 17 00:00:00 2001
From: Hao-qi Wu <wuhao64@gmail.com>
Date: Tue, 26 Mar 2024 18:23:22 -0400
Subject: [PATCH] Mirror styles changes to progress ring renamed ring-whole to
 ring-flatlight and have ring highlight and flatlight be the inverse of each
 other fix spelling error with decimalPlaces use getComputedStyle for get the
 radius of the ring defined in CSS use :is() CSS to simplify CSS code Change
 stroke thickness math to better match previous look

---
 lib/reporters/html.js | 19 +++++++++++++------
 mocha.css             | 26 ++++++++++++--------------
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/lib/reporters/html.js b/lib/reporters/html.js
index 1181af5330..ae4a4546f8 100644
--- a/lib/reporters/html.js
+++ b/lib/reporters/html.js
@@ -37,7 +37,7 @@ exports = module.exports = HTML;
 
 var statsTemplate =
   '<ul id="mocha-stats">' +
-  '<li class="progress-contain"><progress class="progress-element" max="100" value="0"></progress><svg class="progress-ring"><circle class="ring-whole"/><circle class="ring-highlight" stroke-dasharray="0%,100%"/></svg><div class="progress-text">0%</div></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>' +
   '<li class="duration">duration: <em>0</em>s</li>' +
@@ -71,7 +71,10 @@ function HTML(runner, options) {
   var stack = [report];
   var progressText = items[0].getElementsByTagName('div')[0];
   var progressBar = items[0].getElementsByTagName('progress')[0];
-  var progressRing = items[0].getElementsByClassName('ring-highlight')[0];
+  var progressRing = [
+    items[0].getElementsByClassName('ring-flatlight')[0],
+    items[0].getElementsByClassName('ring-highlight')[0]];
+  var progressRingRadius = null; // computed CSS unavailable now, so set later
   var root = document.getElementById('mocha');
 
   if (!root) {
@@ -223,17 +226,21 @@ function HTML(runner, options) {
       // setting a toFixed that is too low, makes small changes to progress not shown
       // setting it too high, makes the progress text longer then it needs to
       // to address this, calculate the toFixed based on the magnitude of total
-      var decmalPlaces = Math.ceil(Math.log10(runner.total / 100));
+      var decimalPlaces = Math.ceil(Math.log10(runner.total / 100));
       text(
         progressText,
-        percent.toFixed(Math.min(Math.max(decmalPlaces, 0), 100)) + '%'
+        percent.toFixed(Math.min(Math.max(decimalPlaces, 0), 100)) + '%'
       );
     }
     if (progressRing) {
-      var radius = 19; // to do, figure out how to match with css
+      var radius = parseFloat(getComputedStyle(progressRing[0]).getPropertyValue('r'));
       var wholeArc = Math.PI * 2 * radius;
       var highlightArc = percent * (wholeArc / 100);
-      progressRing.style['stroke-dasharray'] = `${highlightArc}px,${wholeArc}px`;
+      // The progress ring is in 2 parts, the flatlight color and highlight color.
+      // Rendering both on top of the other, seems to make a 3rd color on the edges.
+      // To create 1 whole ring with 2 colors, both parts are inverse of the other.
+      progressRing[0].style['stroke-dasharray'] = `0,${highlightArc}px,${wholeArc}px`;
+      progressRing[1].style['stroke-dasharray'] = `${highlightArc}px,${wholeArc}px`;
     }
 
     // update stats
diff --git a/mocha.css b/mocha.css
index 72b44de13f..7521580809 100644
--- a/mocha.css
+++ b/mocha.css
@@ -348,24 +348,24 @@ body {
   padding: 0;
 }
 
+#mocha-stats :is(.progress-element, .progress-text) {
+  width: var(--ring-size);
+  display: block;
+  top: 12px;
+  position: absolute;
+}
+
 #mocha-stats .progress-element {
   visibility: hidden;
-  width: var(--ring-size);
   height: calc(var(--ring-size) / 2);
-  position: absolute;
-  top: 11px; /* padding */
-  display: block;
 }
 
 #mocha-stats .progress-text {
   text-align: center;
-  position: absolute;
-  width: var(--ring-size);
-  display: block;
-  top: 11px; /* padding */
   text-overflow: clip;
   overflow: hidden;
   color: var(--mocha-stats-em-color);
+  font-size: 11px;
 }
 
 #mocha-stats .progress-ring {
@@ -373,19 +373,17 @@ body {
   height: var(--ring-size);
 }
 
-#mocha-stats .ring-whole, #mocha-stats .ring-highlight {
+#mocha-stats :is(.ring-flatlight, .ring-highlight) {
   --stroke-thickness: 1px;
   cx: var(--ring-radius);
   cy: var(--ring-radius);
-  r: calc(var(--ring-radius) - var(--stroke-thickness)); /* radius - stroke */
+  r: calc(var(--ring-radius) - calc(var(--stroke-thickness) / 2));
   fill: hsla(0, 0%, 0%, 0);
-  stroke-width: calc(var(--stroke-thickness) * 2);
+  stroke-width: var(--stroke-thickness);
 }
 
-#mocha-stats .ring-whole {
+#mocha-stats .ring-flatlight {
   stroke: var(--mocha-progress-ring-color);
-  stroke-width: calc(var(--stroke-thickness) * 1.8);
-  /* slightly smaller to fix strange edge issue */
 }
 
 #mocha-stats .ring-highlight {