From 79a75f5bdb07b8e4a397d4c69172eaab5b5e5cd0 Mon Sep 17 00:00:00 2001
From: Travis Grathwell <tjgrathwell@gmail.com>
Date: Tue, 10 Sep 2013 19:24:07 -0700
Subject: [PATCH] HTMLReporter symbols are inline-block rather than floated

On a very large test suite (8000 specs), a significant amount
of time is spent just drawing the spec dots. Some sort of
worse-than-linear artifact that summons itself only when you
have 8000 floated elements trying to hang out together.

This performance penalty is not seen with inline-block.

In Chrome 29:
  Floated dots: 16.795s
  Inline-block dots: 2.774s

Setting the dots to 'display: none;' takes about the same time
as the inline-block figure, so this is probably a low enough bound
(no need for chunked rendering or who knows what).
---
 lib/jasmine-core/jasmine.css | 2 +-
 src/html/_HTMLReporter.scss  | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/lib/jasmine-core/jasmine.css b/lib/jasmine-core/jasmine.css
index 8fd64dd1..1a243585 100644
--- a/lib/jasmine-core/jasmine.css
+++ b/lib/jasmine-core/jasmine.css
@@ -11,7 +11,7 @@ body { background-color: #eeeeee; padding: 0; margin: 5px; overflow-y: scroll; }
 .html-reporter .banner { margin-top: 14px; }
 .html-reporter .duration { color: #aaaaaa; float: right; }
 .html-reporter .symbol-summary { overflow: hidden; *zoom: 1; margin: 14px 0; }
-.html-reporter .symbol-summary li { display: block; float: left; height: 7px; width: 14px; margin-bottom: 7px; font-size: 16px; }
+.html-reporter .symbol-summary li { display: inline-block; height: 7px; width: 14px; font-size: 16px; }
 .html-reporter .symbol-summary li.passed { font-size: 14px; }
 .html-reporter .symbol-summary li.passed:before { color: #5e7d00; content: "\02022"; }
 .html-reporter .symbol-summary li.failed { line-height: 9px; }
diff --git a/src/html/_HTMLReporter.scss b/src/html/_HTMLReporter.scss
index e6de53f4..72b588db 100644
--- a/src/html/_HTMLReporter.scss
+++ b/src/html/_HTMLReporter.scss
@@ -93,11 +93,9 @@ body {
     margin: $line-height 0;
 
     li {
-      display: block;
-      float: left;
+      display: inline-block;
       height: $line-height / 2;
       width: $line-height;
-      margin-bottom: $line-height / 2;
 
       font-size: 16px;