Fallback for progress when canvas isn't available

Author: yourWaifu

lib/reporters/html.js

@@ -73,6 +73,7 @@ function HTML(runner, options) {
   var stack = [report];
   var progress;
   var ctx;
+  var progressText;
   var root = document.getElementById('mocha');
 
   if (canvas.getContext) {
@@ -84,6 +85,12 @@ function HTML(runner, options) {
     ctx = canvas.getContext('2d');
     ctx.scale(ratio, ratio);
     progress = new Progress();
+  } else {
+    // On some broswers, canvas might be unavailable for whatever reason.
+    // As such, we need a text version as a fallback
+    var progressTextFallback = fragment('<em>0</em>%');
+    progressText = stat.getElementsByTagName('em')[0];
+    items[0].appendChild(progressTextFallback);
   }
 
   if (!root) {
@@ -236,6 +243,12 @@ function HTML(runner, options) {
     var percent = ((stats.tests / runner.total) * 100) | 0;
     if (progress) {
       progress.update(percent).draw(ctx);
+    } else 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));
     }
 
     // update stats