Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Fixes #156 and #157 IE6-7-8 specific styles and non-canvas progress reporter for IE #387

Closed
wants to merge 3 commits into from

2 participants

@brendannee

Updated styles to fix layout bug in IE5.5 - IE9. Replaced unicode
characters with entities in CSS. Added a div-based progress reporter
when canvas isn't available. Added a class to #mocha for fallback
and IE specific styles to show pass fail status (color coded)

@brendannee brendannee Fixes #156 and #157 IE6-7-8 specific styles and non-canvas progress r…
…eporter for IE

Updated styles to fix layout bug in IE5.5 - IE9.  Replaced unicode
characters with entities in CSS. Added a div-based progress reporter
when canvas isn't available.  Added a class to `#mocha` for fallback
and IE specific styles to show pass fail status (color coded)
04914fa
mocha.js
((8 lines not shown))
if (canvas.getContext) {
ctx = canvas.getContext('2d');
progress = new Progress;
+ } else {
+ root.className = 'fallback';
+ progressBar = document.createElement('div');
+ items[0].appendChild(progressBar);
+ progressBar.innerHTML = '<div class="bar"><div class="innerBar"></div></div><span></span>';
+ bar = progressBar.getElementsByTagName('div')[0];
+ innerBar = bar.getElementsByTagName('div')[0];
+ innerText = progressBar.getElementsByTagName('span')[0];
@tj Owner
tj added a note

hmm I think personally I would rather just ignore any kind of progress bar when canvas isnt available just so we dont clutter this reporter too much more for legacy browsers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
brendannee added some commits
@brendannee brendannee Merge conflict fixes 63ef5dd
@brendannee brendannee Removed fallback progressbar for IE
Kept IE fallback styles to fix alignment issue and show pass/fail (IE
does support css :: pseudo selectors)
66ae293
@brendannee

Good call - I removed the fallback progress bar, but kept the IE css fixes for alignment and showing pass/fail status

@tj
Owner
tj commented

This issue has been inactive for over 1 month so I'm closing it. If you think it's still an issue re-open. - tjbot

@tj tj closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 13, 2012
  1. @brendannee

    Fixes #156 and #157 IE6-7-8 specific styles and non-canvas progress r…

    brendannee authored
    …eporter for IE
    
    Updated styles to fix layout bug in IE5.5 - IE9.  Replaced unicode
    characters with entities in CSS. Added a div-based progress reporter
    when canvas isn't available.  Added a class to `#mocha` for fallback
    and IE specific styles to show pass fail status (color coded)
Commits on Apr 14, 2012
  1. @brendannee

    Merge conflict fixes

    brendannee authored
  2. @brendannee

    Removed fallback progressbar for IE

    brendannee authored
    Kept IE fallback styles to fix alignment issue and show pass/fail (IE
    does support css :: pseudo selectors)
This page is out of date. Refresh to see the latest.
Showing with 29 additions and 10 deletions.
  1. +2 −0  lib/reporters/html.js
  2. +24 −9 mocha.css
  3. +3 −1 mocha.js
View
2  lib/reporters/html.js
@@ -52,6 +52,8 @@ function HTML(runner) {
if (canvas.getContext) {
ctx = canvas.getContext('2d');
progress = new Progress;
+ } else {
+ root.className = 'fallback';
}
if (!root) return error('#mocha div missing, add it to your document');
View
33 mocha.css
@@ -1,7 +1,11 @@
body {
font: 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
- padding: 60px 50px;
+ padding: 0 50px;
+}
+
+#mocha {
+ position: relative;
}
#mocha h1, h2 {
@@ -9,12 +13,14 @@ body {
}
#mocha h1 {
+ padding-top: 40px;
margin-top: 15px;
font-size: 1em;
font-weight: 200;
}
#mocha .suite .suite h1 {
+ padding-top: 0;
margin-top: 0;
font-size: .8em;
}
@@ -49,7 +55,7 @@ body {
}
#mocha .test.pass::before {
- content: '';
+ content: '\02713';
font-size: 12px;
display: block;
float: left;
@@ -62,7 +68,7 @@ body {
}
#mocha .test.pending::before {
- content: '';
+ content: '\02022';
color: #0b97c4;
}
@@ -75,7 +81,7 @@ body {
}
#mocha .test.fail::before {
- content: '';
+ content: '\02716';
font-size: 12px;
display: block;
float: left;
@@ -106,17 +112,19 @@ body {
}
#stats {
- position: fixed;
- top: 15px;
+ position: absolute;
+ top: 0;
right: 10px;
font-size: 12px;
- margin: 0;
+ margin: 15px 0 0;
color: #888;
+ width: 280px;
}
#stats .progress {
float: right;
padding-top: 0;
+ margin-top: -11px;
}
#stats em {
@@ -124,10 +132,17 @@ body {
}
#stats li {
- display: inline-block;
+ display: inline;
margin: 0 5px;
list-style: none;
- padding-top: 11px;
+}
+
+#mocha.fallback .test.pass h2 {
+ color: #00c41c;
+}
+
+#mocha.fallback .test.fail h2 {
+ color: #c00;
}
code .comment { color: #ddd }
View
4 mocha.js
@@ -1595,6 +1595,8 @@ function HTML(runner) {
if (canvas.getContext) {
ctx = canvas.getContext('2d');
progress = new Progress;
+ } else {
+ root.className = 'fallback';
}
if (!root) return error('#mocha div missing, add it to your document');
@@ -4109,4 +4111,4 @@ window.mocha = require('mocha');
return runner.run(fn);
};
})();
-})();
+})();
Something went wrong with that request. Please try again.