feat: use <progress> and <svg> for browser progress indicator instead of <canvas>

lib/reporters/html.js

@@ -10,7 +10,6 @@
 
 var Base = require('./base');
 var utils = require('../utils');
-var Progress = require('../browser/progress');
 var escapeRe = require('escape-string-regexp');
 var constants = require('../runner').constants;
 var EVENT_TEST_PASS = constants.EVENT_TEST_PASS;
@@ -38,7 +37,7 @@ exports = module.exports = HTML;
 
 var statsTemplate =
   '<ul id="mocha-stats">' +
-  '<li class="progress"><canvas width="40" height="40"></canvas></li>' +
+  '<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"><em>0</em>%</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>' +
@@ -68,24 +67,13 @@ function HTML(runner, options) {
   var failures = items[2].getElementsByTagName('em')[0];
   var failuresLink = items[2].getElementsByTagName('a')[0];
   var duration = items[3].getElementsByTagName('em')[0];
-  var canvas = stat.getElementsByTagName('canvas')[0];
   var report = fragment('<ul id="mocha-report"></ul>');
   var stack = [report];
-  var progress;
-  var ctx;
+  var progressText = items[0].getElementsByTagName('em')[0];
+  var progressBar = items[0].getElementsByTagName('progress')[0];
+  var progressRing = items[0].getElementsByClassName('ring-highlight')[0];
   var root = document.getElementById('mocha');
 
-  if (canvas.getContext) {
-    var ratio = window.devicePixelRatio || 1;
-    canvas.style.width = canvas.width;
-    canvas.style.height = canvas.height;
-    canvas.width *= ratio;
-    canvas.height *= ratio;
-    ctx = canvas.getContext('2d');
-    ctx.scale(ratio, ratio);
-    progress = new Progress();
-  }
-
   if (!root) {
     return error('#mocha div missing, add it to your document');
   }
@@ -115,10 +103,6 @@ function HTML(runner, options) {
   root.appendChild(stat);
   root.appendChild(report);
 
-  if (progress) {
-    progress.size(40);
-  }
-
   runner.on(EVENT_SUITE_BEGIN, function (suite) {
     if (suite.root) {
       return;
@@ -234,8 +218,22 @@ function HTML(runner, options) {
   function updateStats() {
     // TODO: add to stats
     var percent = ((stats.tests / runner.total) * 100) | 0;
-    if (progress) {
-      progress.update(percent).draw(ctx);
+    progressBar.value = percent;
+    if (progressText) {
+      // 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));
+      text(
+        progressText,
+        percent.toFixed(Math.min(Math.max(decmalPlaces, 0), 100))
+      );
+    }
+    if (progressRing) {
+      var radius = 19; // to do, figure out how to match with css
+      var wholeArc = Math.PI * 2 * radius;
+      var highlightArc = percent * (wholeArc / 100);
+      progressRing.style['stroke-dasharray'] = `${highlightArc}px,${wholeArc}px`;
     }
 
     // update stats

mocha.css

@@ -334,20 +334,47 @@ body {
   z-index: 1;
 }
 
-#mocha-stats .progress {
+#mocha-stats .progress-contain {
   float: right;
-  padding-top: 0;
-
-  /**
-   * Set safe initial values, so mochas .progress does not inherit these
-   * properties from Bootstrap .progress (which causes .progress height to
-   * equal line height set in Bootstrap).
-   */
-  height: auto;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-  background-color: initial;
+  padding: 0;
+}
+
+#mocha-stats .progress-element {
+  visibility: hidden;
+  width: 40px;
+  height: 20px;
+  position: absolute;
+  top: 11px; /* padding */
+  display: block;
+}
+
+#mocha-stats .progress-text {
+  text-align: center;
+  position: absolute;
+  width: 40px;
+  display: block;
+  top: 11px; /* padding */
+}
+
+#mocha-stats .progress-ring {
+  width: 40px;
+  height: 40px;
+}
+
+#mocha-stats .ring-whole, #mocha-stats .ring-highlight {
+  cx: 20px; /* half of width */
+  cy: 20px; /* half of height */
+  r: 19px; /* radius - stroke */
+  fill: var(--mocha-bg-color);
+  stroke-width: 2px;
+}
+
+#mocha-stats .ring-whole {
+  stroke: var(--mocha-stats-color);
+}
+
+#mocha-stats .ring-highlight {
+  stroke: var(--mocha-stats-em-color);
 }
 
 #mocha-stats em {