function HTML(runner, options) {
    Base.call(this, runner, options);

    var self = this;
    var stats = this.stats;
    var stat = fragment(statsTemplate);
    var items = stat.getElementsByTagName('li');
    var passes = items[1].getElementsByTagName('em')[0];
    var passesLink = items[1].getElementsByTagName('a')[0];
    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 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');
    }

    // pass toggle
    on(passesLink, 'click', function (evt) {
      evt.preventDefault();
      unhide();
      var name = /pass/.test(report.className) ? '' : ' pass';
      report.className = report.className.replace(/fail|pass/g, '') + name;
      if (report.className.trim()) {
        hideSuitesWithout('test pass');
      }
    });

    // failure toggle
    on(failuresLink, 'click', function (evt) {
      evt.preventDefault();
      unhide();
      var name = /fail/.test(report.className) ? '' : ' fail';
      report.className = report.className.replace(/fail|pass/g, '') + name;
      if (report.className.trim()) {
        hideSuitesWithout('test fail');
      }
    });

    root.appendChild(stat);
    root.appendChild(report);

    if (progress) {
      progress.size(40);
    }

    runner.on(EVENT_SUITE_BEGIN, function (suite) {
      if (suite.root) {
        return;
      }

      // suite
      var url = self.suiteURL(suite);
      var el = fragment(
        '<li class="suite"><h1><a href="%s">%s</a></h1></li>',
        url,
        escape(suite.title)
      );

      // container
      stack[0].appendChild(el);
      stack.unshift(document.createElement('ul'));
      el.appendChild(stack[0]);
    });

    runner.on(EVENT_SUITE_END, function (suite) {
      if (suite.root) {
        updateStats();
        return;
      }
      stack.shift();
    });

    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> ' +
        '<a href="%s" class="replay">' +
        playIcon +
        '</a></h2></li>';
      var el = fragment(markup, test.speed, test.title, test.duration, url);
      self.addCodeToggle(el, test.body);
      appendToStack(el);
      updateStats();
    });

    runner.on(EVENT_TEST_FAIL, function (test) {
      var el = fragment(
        '<li class="test fail"><h2>%e <a href="%e" class="replay">' +
          playIcon +
          '</a></h2></li>',
        test.title,
        self.testURL(test)
      );
      var stackString; // Note: Includes leading newline
      var message = test.err.toString();

      // <=IE7 stringifies to [Object Error]. Since it can be overloaded, we
      // check for the result of the stringifying.
      if (message === '[object Error]') {
        message = test.err.message;
      }

      if (test.err.stack) {
        var indexOfMessage = test.err.stack.indexOf(test.err.message);
        if (indexOfMessage === -1) {
          stackString = test.err.stack;
        } else {
          stackString = test.err.stack.slice(
            test.err.message.length + indexOfMessage
          );
        }
      } else if (test.err.sourceURL && test.err.line !== undefined) {
        // Safari doesn't give you a stack. Let's at least provide a source line.
        stackString = '\n(' + test.err.sourceURL + ':' + test.err.line + ')';
      }

      stackString = stackString || '';

      if (test.err.htmlMessage && stackString) {
        el.appendChild(
          fragment(
            '<div class="html-error">%s\n<pre class="error">%e</pre></div>',
            test.err.htmlMessage,
            stackString
          )
        );
      } else if (test.err.htmlMessage) {
        el.appendChild(
          fragment('<div class="html-error">%s</div>', test.err.htmlMessage)
        );
      } else {
        el.appendChild(
          fragment('<pre class="error">%e%e</pre>', message, stackString)
        );
      }

      self.addCodeToggle(el, test.body);
      appendToStack(el);
      updateStats();
    });

    runner.on(EVENT_TEST_PENDING, function (test) {
      var el = fragment(
        '<li class="test pass pending"><h2>%e</h2></li>',
        test.title
      );
      appendToStack(el);
      updateStats();
    });

    function appendToStack(el) {
      // Don't call .appendChild if #mocha-report was already .shift()'ed off the stack.
      if (stack[0]) {
        stack[0].appendChild(el);
      }
    }

    function updateStats() {
      // TODO: add to stats
      var percent = ((stats.tests / runner.total) * 100) | 0;
      if (progress) {
        progress.update(percent).draw(ctx);
      }

      // update stats
      var ms = new Date() - stats.start;
      text(passes, stats.passes);
      text(failures, stats.failures);
      text(duration, (ms / 1000).toFixed(2));
    }
  }
Constructs a new `HTML` reporter instance.

@public
@class
@memberof Mocha.reporters
@extends Mocha.reporters.Base
@param {Runner} runner - Instance triggers reporter actions.
@param {Object} [options] - runner options