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

Author: yourWaifu

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

mocha.css

@@ -348,44 +348,42 @@ 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 {
   width: var(--ring-size);
   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 {