Make the HtmlReport CSS classes "unique enough"
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
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user