diff --git a/src/html/HtmlReporter.js b/src/html/HtmlReporter.js
index ce92ca11..c70a9a1e 100644
--- a/src/html/HtmlReporter.js
+++ b/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)),
diff --git a/src/html/TrivialReporter.js b/src/html/TrivialReporter.js
index 6debca57..292eae16 100644
--- a/src/html/TrivialReporter.js
+++ b/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"),
diff --git a/src/html/_HTMLReporter.scss b/src/html/_HTMLReporter.scss
new file mode 100644
index 00000000..4becfae5
--- /dev/null
+++ b/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;
+ }
+
+}
\ No newline at end of file
diff --git a/src/html/_TrivialReporter.scss b/src/html/_TrivialReporter.scss
new file mode 100644
index 00000000..1a23e796
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/html/jasmine.scss b/src/html/jasmine.scss
index e11d5132..267b3caa 100644
--- a/src/html/jasmine.scss
+++ b/src/html/jasmine.scss
@@ -1,322 +1,2 @@
-@import "compass.scss";
-
-$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;
-}
-
-
-
-
+@import "HTMLReporter";
+@import "TrivialReporter";
\ No newline at end of file