warren/jasmine
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Make the HtmlReport CSS classes "unique enough"

Browse Source 
As described in Issue Report 844...
https://github.com/jasmine/jasmine/issues/844

...style rules in the app-being-tested may incidentally affect elements
in the Jasmine HTML Report container, as long as there is a chance that
the app-being-tested has CSS style rules for classes (or IDs) that
Jasmine uses.

This fix attempts to bring Jasmine to a state where each and every class
it uses always ends with "_jasmine-css" which should be unique enough to
ensure that CSS in the app-being-tested won't affect the Jasmine report,
because no app-being-tested is ever likely to use classes that end with
"_jasmine-css"

I'll be surpised if this commit is good enough as it is now, on the
first attempt to fix #844, because of reasons I'll explain in either
the Issue or the Pull Request.
This commit is contained in:
Matt Prather
2015-05-13 18:55:44 -07:00
parent 0b1449228f
commit c41fa7d156
3 changed files with 163 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/html/_HTMLReporter.scss
View File

@@ -46,23 +46,23 @@ body {
line-height: $line-height;
}
.banner,
.symbol-summary,
.summary,
.result-message,
.spec .description,
.spec-detail .description,
.alert .bar,
.stack-trace {
.banner_jasmine-css,
.symbol-summary_jasmine-css,
.summary_jasmine-css,
.result-message_jasmine-css,
.spec_jasmine-css .description_jasmine-css,
.spec-detail_jasmine-css .description_jasmine-css,
.alert_jasmine-css .bar_jasmine-css,
.stack-trace_jasmine-css {
padding-left: $margin-unit - 5px;
padding-right: $margin-unit - 5px;
}
.banner {
.banner_jasmine-css {
position: relative;
}
.banner .title {
.banner_jasmine-css .title_jasmine-css {
background: inline-image('jasmine-horizontal.png') no-repeat;
background: inline-image('jasmine-horizontal.svg') no-repeat, none;
@include background-size(100%);
@@ -72,7 +72,7 @@ body {
height: 25px;
}
.banner .version {
.banner_jasmine-css .version_jasmine-css {
margin-left: $margin-unit;
position: relative;
top: 6px;
@@ -85,17 +85,17 @@ body {
right: 100%;
}
.version {
.version_jasmine-css {
color: $faint-text-color;
}
//--- Banner ---//
.banner {
.banner_jasmine-css {
margin-top: $line-height;
}
.duration {
.duration_jasmine-css {
color: #fff;
float: right;
line-height: $line-height * 2;
@@ -104,7 +104,7 @@ body {
//--- Symbol summary ---//
.symbol-summary {
.symbol-summary_jasmine-css {
@include clearfix;
margin: $line-height 0;
@@ -115,7 +115,7 @@ body {
font-size: 16px;
&.passed {
&.passed_jasmine-css {
font-size: 14px;
&:before {
@@ -124,7 +124,7 @@ body {
}
}
&.failed {
&.failed_jasmine-css {
line-height: ($line-height / 2) + 2;
&:before {
@@ -135,7 +135,7 @@ body {
}
}
&.disabled {
&.disabled_jasmine-css {
font-size: 14px;
&:before {
@@ -144,7 +144,7 @@ body {
}
}
&.pending {
&.pending_jasmine-css {
line-height: 17px;
&:before {
color: $pending-color;
@@ -152,7 +152,7 @@ body {
}
}
&.empty {
&.empty_jasmine-css {
font-size: 14px;
&:before {
@@ -163,7 +163,7 @@ body {
}
}
.run-options {
.run-options_jasmine-css {
float: right;
margin-right: 5px;
border: 1px solid $jasmine-color;
@@ -171,12 +171,12 @@ body {
position: relative;
line-height: 20px;
.trigger {
.trigger_jasmine-css {
cursor: pointer;
padding: 8px 16px;
}
.payload {
.payload_jasmine-css {
position: absolute;
display: none;
right: -1px;
@@ -185,7 +185,7 @@ body {
white-space: nowrap;
padding: 4px 8px;
&.open {
&.open_jasmine-css {
display: block;
}
}
@@ -193,30 +193,30 @@ body {
//--- Alerts: status bars ---//
.bar {
.bar_jasmine-css {
line-height: $line-height * 2;
font-size: $large-font-size;
display: block;
color: #eee;
&.failed {
&.failed_jasmine-css {
background-color: $failing-color;
}
&.passed {
&.passed_jasmine-css {
background-color: $passing-color;
}
&.skipped {
&.skipped_jasmine-css {
background-color: $neutral-color;
}
&.errored {
&.errored_jasmine-css {
background-color: $failing-color;
}
&.menu {
&.menu_jasmine-css {
background-color: #fff;
color: $faint-text-color;
@@ -231,29 +231,29 @@ body {
}
// simplify toggle control between the two menu bars
&.spec-list {
.bar.menu.failure-list,
.results .failures {
&.spec-list_jasmine-css {
.bar_jasmine-css.menu_jasmine-css.failure-list_jasmine-css,
.results_jasmine-css .failures_jasmine-css {
display: none;
}
}
&.failure-list {
.bar.menu.spec-list,
.summary {
&.failure-list_jasmine-css {
.bar_jasmine-css.menu_jasmine-css.spec-list_jasmine-css,
.summary_jasmine-css {
display: none;
}
}
//--- Results ---//
.results {
.results_jasmine-css {
margin-top: $line-height;
}
//--- Results summary: Suites and Specs names/links ---//
.summary {
.summary_jasmine-css {
margin-top: $margin-unit;
ul {
@@ -262,40 +262,40 @@ body {
padding-top: 0;
padding-left: 0;
&.suite {
&.suite_jasmine-css {
margin-top: $margin-unit/2;
margin-bottom: $margin-unit/2
}
}
li {
&.passed a {
&.passed_jasmine-css a {
color: $passing-color;
}
&.failed a {
&.failed_jasmine-css a {
color: $failing-color;
}
&.empty a {
&.empty_jasmine-css a {
color: $pending-color;
}
&.pending a {
&.pending_jasmine-css a {
color: $pending-color;
}
&.disabled a {
&.disabled_jasmine-css a {
color: $neutral-color;
}
}
}
.description+.suite {
.description_jasmine-css + .suite_jasmine-css {
margin-top: 0;
}
.suite {
.suite_jasmine-css {
margin-top: $margin-unit;
a {
@@ -305,11 +305,11 @@ body {
//--- Failure details ---//
.failures {
.spec-detail {
.failures_jasmine-css {
.spec-detail_jasmine-css {
margin-bottom: $line-height * 2;
.description {
.description_jasmine-css {
background-color: $failing-color;
a {
@@ -319,7 +319,7 @@ body {
}
}
.result-message {
.result-message_jasmine-css {
padding-top: $line-height;
color: $text-color;
@@ -327,11 +327,11 @@ body {
white-space: pre;
}
.result-message span.result {
.result-message_jasmine-css span.result_jasmine-css {
display: block;
}
.stack-trace {
.stack-trace_jasmine-css {
margin: 5px 0 0 0;
max-height: $line-height * 16;
overflow: auto;