include stylesheets for TrivialReporter and HTMLReporter, scoped so they don't interfere with each other.

src/html/HtmlReporter.js

@@ -85,7 +85,7 @@ jasmine.HtmlReporter = function(_doc) {
   }
 
   function createReporterDom(version) {
-    dom.reporter = self.createDom('div', { className: 'jasmine_reporter' },
+    dom.reporter = self.createDom('div', { id: 'HTMLReporter', className: 'jasmine_reporter' },
       dom.banner = self.createDom('div', { className: 'banner' },
         self.createDom('span', { className: 'title' }, "Jasmine "),
         self.createDom('span', { className: 'version' }, version)),

src/html/TrivialReporter.js

@@ -32,7 +32,7 @@ jasmine.TrivialReporter.prototype.createDom = function(type, attrs, childrenVarA
 jasmine.TrivialReporter.prototype.reportRunnerStarting = function(runner) {
   var showPassed, showSkipped;
 
-  this.outerDiv = this.createDom('div', { className: 'jasmine_reporter' },
+  this.outerDiv = this.createDom('div', { id: 'TrivialReporter', className: 'jasmine_reporter' },
       this.createDom('div', { className: 'banner' },
         this.createDom('div', { className: 'logo' },
             this.createDom('span', { className: 'title' }, "Jasmine"),

src/html/_HTMLReporter.scss

@@ -0,0 +1,325 @@
+@import "compass";
+
+
+$line-height: 14px;
+$margin-unit: 14px;
+
+$feint-text-color: #aaa;
+$light-text-color: #666;
+$text-color: #333;
+
+$page-background-color: #eee;
+
+$light-passing-color: #a6b779;
+$passing-color: #5e7d00;
+
+$light-failing-color: #cf867e;
+$failing-color: #b03911;
+
+$neutral-color: #bababa;
+
+$font-size: 11px;
+$large-font-size: 14px;
+
+
+body {
+  background-color: $page-background-color;
+  padding: 0;
+  margin: 5px;
+  overflow-y: scroll;
+}
+
+#HTMLReporter {
+
+  font-size: $font-size;
+  font-family: Monaco, "Lucida Console", monospace;
+  line-height: $line-height;
+  color: $text-color;
+
+  a {
+    text-decoration: none;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  
+  p, h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+    line-height: $line-height;
+  }
+  
+  .banner,
+  .symbolSummary,
+  .summary,
+  .resultMessage,
+  .specDetail .description,
+  .alert .bar,
+  .stackTrace {
+    padding-left: $margin-unit - 5px;
+    padding-right: $margin-unit - 5px;
+  }
+  
+  // This div is available for testing elements that must be added to the DOM.
+  // We position it out of view, so it doesn't obstruct the runner.
+  #jasmine_content {
+    position: fixed;
+    right: 100%;
+  }
+  
+  .version {
+    color: $feint-text-color;
+  }
+  
+  
+  //--- Banner ---//
+  
+  .banner {
+    margin-top: $line-height;
+  }
+  
+  .duration {
+    color: $feint-text-color;
+    float: right;
+  }
+  
+  
+  
+  //--- Symbol summary ---//
+  
+  .symbolSummary {
+    @include clearfix;
+    margin: $line-height 0;
+  
+    li {
+      display: block;
+      float: left;
+      height: $line-height / 2;
+      width: $line-height;
+      margin-bottom: $line-height / 2;
+  
+      //opacity: .9;
+      
+      font-size: 16px;
+      
+      &.passed {
+        font-size: 14px;
+  
+        &:before{
+          color: $passing-color;
+          content: "\02022";
+        }
+      }
+      
+      &.failed {
+        line-height: ($line-height / 2) + 2;
+      
+        &:before{
+          color: $failing-color;
+          content: "x";
+          font-weight: bold;
+          margin-left: -1px;
+        }
+      }
+      
+      &.skipped {
+        font-size: 14px;
+        
+        &:before{
+          color: $neutral-color;
+          content: "\02022";
+        }
+      }
+      
+      &.pending{
+        line-height: ($line-height / 2) + 4;
+        
+        &:before {
+          color: $feint-text-color;
+          content: "-";
+        }
+      }
+    }
+  }
+  
+  
+  
+  //--- Alert ---//
+  
+  .bar {
+    line-height: $line-height * 2;
+    font-size: $large-font-size;
+    
+    display: block;
+    color: #eee;
+  }
+  
+  
+  .runningAlert {
+    background-color: $light-text-color;
+  }
+  
+  .skippedAlert {
+    background-color: $feint-text-color;
+  
+    &:first-child {
+      background-color: $text-color;
+    }
+    
+    &:hover {
+      text-decoration: none;
+      color: white;
+      text-decoration: underline;
+    }
+  }
+  
+  .passingAlert {
+    background-color: $light-passing-color;
+    
+    &:first-child {
+      background-color: $passing-color;
+    }
+  }
+  
+  .failingAlert {
+    background-color: $light-failing-color;
+    
+    &:first-child {
+      background-color: $failing-color
+    }
+  }
+  
+  
+  
+  
+  
+  
+  
+  //--- Results ---//
+  
+  .results {
+    margin-top: $line-height;
+  }
+  
+  
+  
+  //--- Results menu ---//
+  
+  #details {
+    display: none;
+  }
+  
+  .resultsMenu,
+  .resultsMenu a {
+    background-color: #fff;
+    color: $text-color;
+  }
+  
+  &.showDetails {
+    
+    .summaryMenuItem {
+      font-weight: normal;
+      text-decoration: inherit;
+      
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+    
+    .detailsMenuItem {
+      font-weight: bold;
+      text-decoration: underline;    
+    }
+  
+    .summary {
+      display: none;
+    }
+    
+    #details {
+      display: block;
+    }
+  }
+  
+  .summaryMenuItem {  
+    font-weight: bold;
+    text-decoration: underline;
+  }
+  
+  
+  
+  
+  //--- Results summary ---//
+  
+  .summary {
+    margin-top: $margin-unit;
+    
+    .suite .suite, .specSummary {
+      margin-left: $margin-unit;
+    }
+    
+    .specSummary {
+      &.passed a {
+        color: $passing-color;  
+      }
+      &.failed a {
+        color: $failing-color;
+      }
+    }
+  }
+  
+  .description+.suite {
+    margin-top: 0;
+  }
+  
+  .suite {
+    margin-top: $margin-unit;
+    
+    a {
+      color: $text-color;
+    }
+  }
+  
+  
+  
+  
+  //--- Results details ---//
+  
+  #details {
+    .specDetail {
+      margin-bottom: $line-height * 2;
+      
+      .description {
+        //line-height: $line-height * 2;
+        display: block;
+  
+        color: white;
+        background-color: $failing-color;
+        
+        //font-size: $large-font-size;
+      }
+    }
+  }
+  
+  .resultMessage {
+    padding-top: $line-height;
+    
+    color: $text-color;
+  }
+  
+  .resultMessage span.result {
+    display: block;
+  }
+  
+  .stackTrace {
+    margin: 5px 0 0 0;
+    max-height: $line-height * 16;
+    overflow: auto;
+    line-height: 18px;
+    
+    color: $light-text-color;
+    border: 1px solid #ddd;
+    background: white;
+    white-space: pre;
+  }
+  
+}

src/html/_TrivialReporter.scss

@@ -0,0 +1,171 @@
+
+#TrivialReporter {
+  padding: 8px 13px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow-y: scroll;
+  
+  background-color: white;
+  font-family: "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif;
+
+  a:visited, a {
+    color: #303; 
+  }
+  
+  a:hover, a:active {
+    color: blue; 
+  }
+  
+  .run_spec {
+    float:right;
+    padding-right: 5px;
+    font-size: .8em;
+    text-decoration: none;
+  }
+  
+  .banner {
+    color: #303;
+    background-color: #fef;
+    padding: 5px;
+  }
+  
+  .logo {
+    float: left;
+    font-size: 1.1em;
+    padding-left: 5px;
+  }
+  
+  .logo .version {
+    font-size: .6em;
+    padding-left: 1em;
+  }
+  
+  .runner.running {
+    background-color: yellow;
+  }
+  
+  
+  .options {
+    text-align: right;
+    font-size: .8em;
+  }
+  
+  
+  
+  
+  .suite {
+    border: 1px outset gray;
+    margin: 5px 0;
+    padding-left: 1em;
+  }
+  
+  .suite .suite {
+    margin: 5px; 
+  }
+  
+  .suite.passed {
+    background-color: #dfd;
+  }
+  
+  .suite.failed {
+    background-color: #fdd;
+  }
+  
+  .spec {
+    margin: 5px;
+    padding-left: 1em;
+    clear: both;
+  }
+  
+  .spec.failed, .spec.passed, .spec.skipped {
+    padding-bottom: 5px;
+    border: 1px solid gray;
+  }
+  
+  .spec.failed {
+    background-color: #fbb;
+    border-color: red;
+  }
+  
+  .spec.passed {
+    background-color: #bfb;
+    border-color: green;
+  }
+  
+  .spec.skipped {
+    background-color: #bbb;
+  }
+  
+  .messages {
+    border-left: 1px dashed gray;
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+  
+  .passed {
+    background-color: #cfc;
+    display: none;
+  }
+  
+  .failed {
+    background-color: #fbb;
+  }
+  
+  .skipped {
+    color: #777;
+    background-color: #eee;
+    display: none;
+  }
+  
+  
+  /*.resultMessage {*/
+    /*white-space: pre;*/
+  /*}*/
+  
+  .resultMessage span.result {
+    display: block;
+    line-height: 2em;
+    color: black;
+  }
+  
+  .resultMessage .mismatch {
+    color: black;
+  }
+  
+  .stackTrace {
+    white-space: pre;
+    font-size: .8em;
+    margin-left: 10px;
+    max-height: 5em;
+    overflow: auto;
+    border: 1px inset red;
+    padding: 1em;
+    background: #eef;
+  }
+  
+  .finished-at {
+    padding-left: 1em;
+    font-size: .6em;
+  }
+  
+  &.show-passed .passed,
+  &.show-skipped .skipped {
+    display: block;
+  }
+  
+  
+  #jasmine_content {
+    position:fixed;
+    right: 100%;
+  }
+  
+  .runner {
+    border: 1px solid gray;
+    display: block;
+    margin: 5px 0;
+    padding: 2px 0 2px 10px;
+  }
+}

src/html/jasmine.scss

@@ -1,322 +1,2 @@
-@import "compass.scss";
+@import "HTMLReporter";
-
+@import "TrivialReporter";
-$line-height: 14px;
-$margin-unit: 14px;
-
-$feint-text-color: #aaa;
-$light-text-color: #666;
-$text-color: #333;
-
-$page-background-color: #eee;
-
-$light-passing-color: #a6b779;
-$passing-color: #5e7d00;
-
-$light-failing-color: #cf867e;
-$failing-color: #b03911;
-
-$neutral-color: #bababa;
-
-$font-size: 11px;
-$large-font-size: 14px;
-
-body {
-  font-size: $font-size;
-  font-family: Monaco, "Lucida Console", monospace;
-  line-height: $line-height;
-  background-color: $page-background-color;
-  color: $text-color;
-  overflow-y: scroll;
-  padding: 0;
-  margin: 5px;
-}
-
-a {
-  text-decoration: none;
-  
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-p, h1, h2, h3, h4, h5, h6 {
-  margin: 0;
-  line-height: $line-height;
-}
-
-.banner,
-.symbolSummary,
-.summary,
-.resultMessage,
-.specDetail .description,
-.alert .bar,
-.stackTrace {
-  padding-left: $margin-unit - 5px;
-  padding-right: $margin-unit - 5px;
-}
-
-// This div is available for testing elements that must be added to the DOM.
-// We position it out of view, so it doesn't obstruct the runner.
-#jasmine_content {
-  position: fixed;
-  right: 100%;
-}
-
-.version {
-  color: $feint-text-color;
-}
-
-
-//--- Banner ---//
-
-.banner {
-  margin-top: $line-height;
-}
-
-.duration {
-  color: $feint-text-color;
-  float: right;
-}
-
-
-
-//--- Symbol summary ---//
-
-.symbolSummary {
-  @include clearfix;
-  margin: $line-height 0;
-
-  li {
-    display: block;
-    float: left;
-    height: $line-height / 2;
-    width: $line-height;
-    margin-bottom: $line-height / 2;
-
-    //opacity: .9;
-    
-    font-size: 16px;
-    
-    &.passed {
-      font-size: 14px;
-
-      &:before{
-        color: $passing-color;
-        content: "\02022";
-      }
-    }
-    
-    &.failed {
-      line-height: ($line-height / 2) + 2;
-    
-      &:before{
-        color: $failing-color;
-        content: "x";
-        font-weight: bold;
-        margin-left: -1px;
-      }
-    }
-    
-    &.skipped {
-      font-size: 14px;
-      
-      &:before{
-        color: $neutral-color;
-        content: "\02022";
-      }
-    }
-    
-    &.pending{
-      line-height: ($line-height / 2) + 4;
-      
-      &:before {
-        color: $feint-text-color;
-        content: "-";
-      }
-    }
-  }
-}
-
-
-
-//--- Alert ---//
-
-.bar {
-  line-height: $line-height * 2;
-  font-size: $large-font-size;
-  
-  display: block;
-  color: #eee;
-}
-
-
-.runningAlert {
-  background-color: $light-text-color;
-}
-
-.skippedAlert {
-  background-color: $feint-text-color;
-
-  &:first-child {
-    background-color: $text-color;
-  }
-  
-  &:hover {
-    text-decoration: none;
-    color: white;
-    text-decoration: underline;
-  }
-}
-
-.passingAlert {
-  background-color: $light-passing-color;
-  
-  &:first-child {
-    background-color: $passing-color;
-  }
-}
-
-.failingAlert {
-  background-color: $light-failing-color;
-  
-  &:first-child {
-    background-color: $failing-color
-  }
-}
-
-
-
-
-
-
-
-//--- Results ---//
-
-.results {
-  margin-top: $line-height;
-}
-
-
-
-//--- Results menu ---//
-
-#details {
-  display: none;
-}
-
-.resultsMenu,
-.resultsMenu a {
-  background-color: #fff;
-  color: $text-color;
-}
-
-.showDetails {
-  
-  .summaryMenuItem {
-    font-weight: normal;
-    text-decoration: inherit;
-    
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-  
-  .detailsMenuItem {
-    font-weight: bold;
-    text-decoration: underline;    
-  }
-
-  .summary {
-    display: none;
-  }
-  
-  #details {
-    display: block;
-  }
-}
-
-.summaryMenuItem {  
-  font-weight: bold;
-  text-decoration: underline;
-}
-
-
-
-
-//--- Results summary ---//
-
-.summary {
-  margin-top: $margin-unit;
-  
-  .suite .suite, .specSummary {
-    margin-left: $margin-unit;
-  }
-  
-  .specSummary {
-    &.passed a {
-      color: $passing-color;  
-    }
-    &.failed a {
-      color: $failing-color;
-    }
-  }
-}
-
-.description+.suite {
-  margin-top: 0;
-}
-
-.suite {
-  margin-top: $margin-unit;
-  
-  a {
-    color: $text-color;
-  }
-}
-
-
-
-
-//--- Results details ---//
-
-#details {
-  .specDetail {
-    margin-bottom: $line-height * 2;
-    
-    .description {
-      //line-height: $line-height * 2;
-      display: block;
-
-      color: white;
-      background-color: $failing-color;
-      
-      //font-size: $large-font-size;
-    }
-  }
-}
-
-.resultMessage {
-  padding-top: $line-height;
-  
-  color: $text-color;
-}
-
-.resultMessage span.result {
-  display: block;
-}
-
-.stackTrace {
-  margin: 5px 0 0 0;
-  max-height: $line-height * 16;
-  overflow: auto;
-  line-height: 18px;
-  
-  color: $light-text-color;
-  border: 1px solid #ddd;
-  background: white;
-  white-space: pre;
-}
-  
-
-
-