diff --git a/test/index.html.jade b/test/index.html.jade
index 309b65e4..03c8da7c 100644
--- a/test/index.html.jade
+++ b/test/index.html.jade
@@ -11,7 +11,7 @@ html
script( src="scripts.js" )
body
+ div#report
+ a( href='index.html' ) h5ai #{pkg.version} test suite
div#mocha-overlay
- div#report
- a( href='index.html' ) h5ai #{pkg.version} test suite
div#mocha
diff --git a/test/styles.less b/test/styles.less
index 369287b1..3aa7ae61 100644
--- a/test/styles.less
+++ b/test/styles.less
@@ -5,50 +5,51 @@
@col-green: #4caf50;
@col-grey: #555;
-#mocha-overlay {
+#report {
+ font-family: arial, sans;
position: fixed;
left: 0;
top: 0;
right: 0;
+ background: @col-grey;
+ z-index: 10000;
+ color: #fff;
+ font-size: 14px;
+ font-weight: bold;
+ line-height: 32px;
+ height: 32px;
+ padding: 0 8px;
+
+ a, a:active, a:visited, a:hover {
+ display: block;
+ color: #fff;
+ text-decoration: none;
+ }
+ &.pass {
+ background: @col-green;
+ }
+ &.fail {
+ background: @col-red;
+ }
+}
+
+#mocha-overlay {
+ font-family: arial, sans;
+ position: fixed;
+ left: 0;
+ top: 32px;
+ right: 0;
bottom: 0;
background: #fff;
z-index: 10000;
overflow: auto;
-
- #report {
- position: fixed;
- left: 0;
- top: 0;
- right: 0;
- background: @col-grey;
- z-index: 1;
- color: #fff;
- font-size: 14px;
- font-weight: bold;
- line-height: 32px;
- padding: 0 8px;
-
- a, a:active, a:visited, a:hover {
- display: block;
- color: #fff;
- text-decoration: none;
- }
- }
-
- &.pass #report {
- background: @col-green;
- }
-
- &.fail #report {
- background: @col-red;
- }
}
#mocha {
max-width: 900px;
margin: 80px auto;
- ul, li {
+ ul, li, h1, h2 {
margin: 0;
padding: 0;
}
@@ -57,34 +58,12 @@
list-style: none;
}
- h1, h2 {
- margin: 0;
- }
-
h2 {
font-size: 12px;
font-weight: normal;
cursor: pointer;
}
- code {
- .comment {
- color: #ddd;
- }
- .init {
- color: #2f6fad;
- }
- .string {
- color: #5890ad;
- }
- .keyword {
- color: #8a6343;
- }
- .number {
- color: #2f6fad;
- }
- }
-
.hidden {
display: none;
}
@@ -101,124 +80,63 @@
&:hover {
background: #eee;
}
- }
- .test.fail, .test pre.error {
- color: @col-red-text;
- }
+ &.fail {
+ color: @col-red-text;
+ }
- .test .duration {
- display: inline-block;
- color: @col-grey;
- border: none;
- box-shadow: none;
- font-size: 9px;
- margin-left: 12px;
- }
+ &::before {
+ content: ' ';
+ display: block;
+ width: 10px;
+ height: 10px;
+ float: left;
+ margin-right: 8px;
+ background: @col-grey;
+ border-radius: 20px;
+ position: relative;
+ top: 3px;
+ }
+ &.pass::before {
+ background: @col-green;
+ }
+ &.fail::before {
+ background: @col-red;
+ }
+ &.pending::before {
+ background: @col-grey;
+ }
- .test.medium .duration {
- background: #c09853;
- }
+ .duration {
+ display: inline-block;
+ color: @col-grey;
+ border: none;
+ box-shadow: none;
+ font-size: 9px;
+ margin-left: 12px;
+ }
+ &.medium .duration {
+ background: #c09853;
+ }
+ &.slow .duration {
+ background: #b94a48;
+ }
- .test.slow .duration {
- background: #b94a48;
- }
+ pre {
+ display: block;
+ float: left;
+ clear: left;
+ font: 12px monospace;
+ margin: 4px 0 16px 18px;
+ padding: 0 8px;
+ max-width: 80%;
+ word-wrap: break-word;
+ border-left: 2px solid @col-grey;
- .test::before {
- content: ' ';
- display: block;
- width: 10px;
- height: 10px;
- float: left;
- margin-right: 8px;
- background: @col-grey;
- border-radius: 20px;
- position: relative;
- top: 3px;
- }
- .test.pass::before {
- background: @col-green;
- }
- .test.fail::before {
- background: @col-red;
- }
- .test.pending::before {
- background: @col-grey;
- }
-
- .test pre {
- display: block;
- float: left;
- clear: left;
- font: 12px monaco, monospace;
- margin: 4px 0 16px 16px;
- padding: 4px;
- max-width: 80%;
- word-wrap: break-word;
- }
-}
-
-#mocha-stats {
- position: fixed;
- top: 40px;
- right: 20px;
- margin: 0;
- color: @col-grey;
- z-index: 1;
- font-size: 13px;
-
- em {
- font-style: normal;
- font-size: 14px;
- }
-
- .progress {
- float: right;
- padding-top: 0;
- }
-
- em {
- color: black;
- }
-
- a {
- text-decoration: none;
- color: inherit;
- }
-
- a:hover {
- border-bottom: 1px solid #eee;
- }
-
- li {
- display: inline-block;
- margin: 0 5px;
- list-style: none;
- padding-top: 11px;
- }
-
- canvas {
- width: 40px;
- height: 40px;
- }
-}
-
-#mocha-report {
-
- &.pass .test.fail {
- display: none;
- }
-
- &.fail .test.pass {
- display: none;
- }
-
- &.pending .test.pass,
- &.pending .test.fail {
- display: none;
- }
- &.pending .test.pass.pending {
- display: block;
+ &.error {
+ color: @col-red-text;
+ }
+ }
}
.suite {
@@ -262,27 +180,66 @@
}
}
- > .suite {
- margin: 24px 0;
+ #mocha-report {
+ > .suite {
+ margin: 24px 0;
- > h1 {
- height: 32px;
- line-height: 32px;
- font-size: 24px;
- font-weight: bold;
- margin: 24px 0 8px 0;
- }
- }
+ > h1 {
+ height: 32px;
+ line-height: 32px;
+ font-size: 24px;
+ font-weight: bold;
+ margin: 24px 0 8px 0;
+ }
- > .suite > ul > .suite {
- margin: 12px 0;
+ > ul > .suite {
+ margin: 12px 0;
- > h1 {
- height: 26px;
- line-height: 26px;
- font-size: 20px;
- font-weight: bold;
- margin: 16px 0 8px 0;
+ > h1 {
+ height: 26px;
+ line-height: 26px;
+ font-size: 20px;
+ font-weight: bold;
+ margin: 16px 0 8px 0;
+ }
+ }
}
}
}
+
+#mocha-stats {
+ position: fixed;
+ top: 40px;
+ right: 20px;
+ margin: 0;
+ color: @col-grey;
+ z-index: 1;
+ font-size: 13px;
+
+ em {
+ font-style: normal;
+ font-size: 14px;
+ }
+ a {
+ text-decoration: none;
+ color: inherit;
+
+ &:hover {
+ border-bottom: 1px solid #eee;
+ }
+ }
+ li {
+ display: inline-block;
+ margin: 0 5px;
+ list-style: none;
+ padding-top: 11px;
+ }
+ canvas {
+ width: 40px;
+ height: 40px;
+ }
+ .progress {
+ float: right;
+ padding-top: 0;
+ }
+}
diff --git a/test/util/mocha.js b/test/util/mocha.js
index 634e3cf3..bfd74920 100644
--- a/test/util/mocha.js
+++ b/test/util/mocha.js
@@ -26,7 +26,7 @@ function update() {
function onEnd() {
- $('#mocha-overlay').addClass($('.test.fail').length ? 'fail' : 'pass');
+ $('#report').addClass($('.test.fail').length ? 'fail' : 'pass');
$('#mocha-overlay code').each(function () {