Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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
Closed

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
04914fa
Fixes #156 and #157 IE6-7-8 specific styles and non-canvas progress r…
brendannee Apr 13, 2012
63ef5dd
Merge conflict fixes
brendannee Apr 14, 2012
66ae293
Removed fallback progressbar for IE
brendannee Apr 14, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 19 additions & 2 deletions mocha.js
View file
Open in desktop
Expand Up @@ -1591,10 +1591,22 @@ function HTML(runner) {
, stack = [root]
, progress
, ctx
, progressBar
, bar
, innerBar
, innerText

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];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

}

if (!root) return error('#mocha div missing, add it to your document');
Expand Down Expand Up @@ -1627,7 +1639,12 @@ function HTML(runner) {
runner.on('test end', function(test){
// TODO: add to stats
var percent = stats.tests / total * 100 | 0;
if (progress) progress.update(percent).draw(ctx);
if (progress){
progress.update(percent).draw(ctx);
} else {
innerBar.style.width = percent + '%';
innerText.innerHTML = percent + '%';
}

// update stats
var ms = new Date - stats.start;
Expand Down Expand Up @@ -4109,4 +4126,4 @@ window.mocha = require('mocha');
return runner.run(fn);
};
})();
})();
})();
54 changes: 45 additions & 9 deletions test/browser/style.css
View file
Open in desktop
@@ -1,20 +1,26 @@

body {
font: 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 60px 50px;
padding: 0 50px;
}

#mocha {
position: relative;
}

#mocha h1, h2 {
margin: 0;
}

#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;
}
Expand Down Expand Up @@ -49,7 +55,7 @@ body {
}

#mocha .test.pass::before {
content: '✓';
content: '\02713';
font-size: 12px;
display: block;
float: left;
Expand All @@ -62,7 +68,7 @@ body {
}

#mocha .test.pending::before {
content: '◦';
content: '\02022';
color: #0b97c4;
}

Expand All @@ -75,7 +81,7 @@ body {
}

#mocha .test.fail::before {
content: '✖';
content: '\02716';
font-size: 12px;
display: block;
float: left;
Expand Down Expand Up @@ -106,28 +112,58 @@ 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 {
color: black;
}

#stats li {
display: inline-block;
display: inline;
margin: 0 5px;
list-style: none;
padding-top: 11px;
}

#mocha.fallback #stats {
width: 320px;
}

#mocha.fallback #stats .progress canvas {
display: none;
}

#mocha.fallback #stats .progress .bar {
margin-top: 8px;
width: 80px;
height: 20px;
border: 1px solid #aaa;
}

#mocha.fallback #stats .progress .innerBar {
background-color: #00C41C;
height: 20px;
width: 0;
}

#mocha.fallback .test.pass h2 {
color: #00c41c;
}

#mocha.fallback .test.fail h2 {
color: #c00;
}

code .comment { color: #ddd }
Expand Down