Skip to content

Instantly share code, notes, and snippets.

@ciembor
Created March 10, 2012 22:45
Show Gist options
  • Select an option

  • Save ciembor/2013756 to your computer and use it in GitHub Desktop.

Select an option

Save ciembor/2013756 to your computer and use it in GitHub Desktop.
Customized QUnit CSS style. Dark, with Monokai colors.
/**
* QUnit v1.4.0pre - A JavaScript Unit Testing Framework
*
* http://docs.jquery.com/QUnit
*
* Copyright (c) 2012 John Resig, Jörn Zaefferer
* Dual licensed under the MIT (MIT-LICENSE.txt)
* or GPL (GPL-LICENSE.txt) licenses.
*/
/** Font Family and Sizes */
body {
background-color: #191919;
margin: 0;
}
strong, b {
font-weight: normal;
}
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
}
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
#qunit-tests { font-size: smaller; }
/** Resets */
#qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult {
margin: 0;
padding: 0;
}
/** Header */
#qunit-header {
padding: 0.5em 0 0.5em 1em;
color: #8699a4;
background-color: #0d3349;
font-size: 1.5em;
line-height: 1em;
font-weight: normal;
border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
-webkit-border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
}
#qunit-header a {
text-decoration: none;
color: #75715E;
}
#qunit-header a:hover,
#qunit-header a:focus {
color: #fff;
}
#qunit-header label {
display: inline-block;
}
#qunit-banner {
height: 5px;
}
#qunit-testrunner-toolbar {
padding: 0.5em 0 0.5em 2em;
color: #A6E22E;
background-color: #eee;
}
#qunit-userAgent {
padding: 0.5em 0 0.5em 2.5em;
background-color: #2b81af;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
}
/** Tests: Pass/Fail */
#qunit-tests {
list-style: circle inside;
}
#qunit-tests li {
padding: 0.3em 0.3em 0.3em 0.3em;
border-bottom: 1px solid #191919;
list-style-position: inside;
}
#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
display: none;
}
#qunit-tests li strong {
cursor: pointer;
padding-left: 10px;
}
#qunit-tests li a {
padding: 0.5em;
color: #75715E;
text-decoration: none;
}
#qunit-tests li a:hover,
#qunit-tests li a:focus {
color: #75715E;
}
#qunit-tests ol {
margin-top: 0.5em;
padding: 0.5em;
background-color: #191919;
}
#qunit-tests table {
border-collapse: collapse;
margin-top: .2em;
}
#qunit-tests th {
text-align: right;
vertical-align: top;
padding: 0 .5em 0 0;
}
#qunit-tests td {
vertical-align: top;
}
#qunit-tests pre {
font-family: Monospace;
font-size: 13px;
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
#qunit-tests del {
background-color: #A6E22E;
color: #000;
text-decoration: none;
}
#qunit-tests ins {
background-color: #F92672;
color: #000;
text-decoration: none;
}
/*** Test Counts */
#qunit-tests b.counts { color: #E18124; }
#qunit-tests b.passed { color: #A6E22E; }
#qunit-tests b.failed { color: #F92672; }
.test-source, .test-diff { color: #fff }
.test-source>th, .test-diff>th { color: #FD971F }
#qunit-tests li li {
margin: 0.5em;
padding: 0.4em 0.5em 0.4em 0.5em;
background-color: #191919;
border-bottom: none;
list-style-position: inside;
}
/*** Passing Styles */
#qunit-tests li li.pass {
color: #A6E22E;
background-color: #191919;
padding-left: 15px;
border-left: 4px solid #A6E22E;
}
#qunit-tests .pass {
padding: 0px;
color: #fff;
background-color: #121212;
display: block;
min-height: 22px;
padding-top: 6px;
}
#qunit-tests .pass .test-name { color: #A6E22E; }
#qunit-tests .pass .test-actual,
#qunit-tests .pass .test-expected { color: #999999; }
#qunit-banner.qunit-pass { background-color: #A6E22E; }
/*** Failing Styles */
#qunit-tests li li.fail {
color: #F92672;
background-color: #191919;
border-left: 4px solid #F92672;
padding-left: 15px;
white-space: pre;
}
#qunit-tests .fail {
padding: 0px;
color: #fff;
background-color: #121212;
display: block;
min-height: 22px;
padding-top: 6px;
}
#qunit-tests .fail .test-name,
#qunit-tests .fail .module-name { font-weight: bold; color: #F92672; }
#qunit-tests .fail .test-actual { color: #F92672; }
#qunit-tests .fail .test-expected { color: #A6E22E; }
#qunit-banner.qunit-fail { background-color: #F92672; }
/** Result */
#qunit-testresult {
padding: 4px 10px 4px 10px;
margin-top: 3px;
color: #fff;
background-color: #191919;
border-bottom: 1px solid #191919;
}
/** Fixture */
#qunit-fixture {
position: absolute;
top: -10000px;
left: -10000px;
width: 1000px;
height: 1000px;
}
@ciembor

ciembor commented Mar 10, 2012

Copy link
Copy Markdown
Author

It's ugly modification of default QUnit CSS. I use it in Aptana Studio's internal web browser, with Monokai theme (and custom background). My index.html <body> looks like that:

<body>
    <ol id="qunit-tests"></ol>
</body>

And this style will not work with default index.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment