docs: function HTML(runner, root) {
    Base.call(this, runner);
  
    var self = this
      , stats = this.stats
      , total = runner.total
      , stat = fragment(statsTemplate)
      , items = stat.getElementsByTagName('li')
      , passes = items[1].getElementsByTagName('em')[0]
      , passesLink = items[1].getElementsByTagName('a')[0]
      , failures = items[2].getElementsByTagName('em')[0]
      , failuresLink = items[2].getElementsByTagName('a')[0]
      , duration = items[3].getElementsByTagName('em')[0]
      , canvas = stat.getElementsByTagName('canvas')[0]
      , report = fragment('<ul id="mocha-report"></ul>')
      , stack = [report]
      , progress
      , ctx
  
    root = 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(){
      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(){
      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('suite', function(suite){
      if (suite.root) return;
  
      // suite
      var url = '?grep=' + encodeURIComponent(suite.fullTitle());
      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('suite end', function(suite){
      if (suite.root) return;
      stack.shift();
    });
  
    runner.on('fail', function(test, err){
      if ('hook' == test.type) runner.emit('test end', test);
    });
  
    runner.on('test end', function(test){
      window.scrollTo(0, document.body.scrollHeight);
  
      // TODO: add to stats
      var percent = stats.tests / this.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));
  
      // test
      if ('passed' == test.state) {
        var el = fragment('<li class="test pass %e"><h2>%e<span class="duration">%ems</span> <a href="?grep=%e" class="replay">‣</a></h2></li>', test.speed, test.title, test.duration, encodeURIComponent(test.fullTitle()));
      } else if (test.pending) {
        var el = fragment('<li class="test pass pending"><h2>%e</h2></li>', test.title);
      } else {
        var el = fragment('<li class="test fail"><h2>%e <a href="?grep=%e" class="replay">‣</a></h2></li>', test.title, encodeURIComponent(test.fullTitle()));
        var str = test.err.stack || test.err.toString();
  
        // FF / Opera do not add the message
        if (!~str.indexOf(test.err.message)) {
          str = test.err.message + '\n' + str;
        }
  
        // <=IE7 stringifies to [Object Error]. Since it can be overloaded, we
        // check for the result of the stringifying.
        if ('[object Error]' == str) str = test.err.message;
  
        // Safari doesn't give you a stack. Let's at least provide a source line.
        if (!test.err.stack && test.err.sourceURL && test.err.line !== undefined) {
          str += "\n(" + test.err.sourceURL + ":" + test.err.line + ")";
        }
  
        el.appendChild(fragment('<pre class="error">%e</pre>', str));
      }
  
      // toggle code
      // TODO: defer
      if (!test.pending) {
        var h2 = el.getElementsByTagName('h2')[0];
  
        on(h2, 'click', function(){
          pre.style.display = 'none' == pre.style.display
            ? 'block'
            : 'none';
        });
  
        var pre = fragment('<pre><code>%e</code></pre>', utils.clean(test.fn.toString()));
        el.appendChild(pre);
        pre.style.display = 'none';
      }
  
      // Don't call .appendChild if #mocha-report was already .shift()'ed off the stack.
      if (stack[0]) stack[0].appendChild(el);
    });
  }