Skip to content
This repository


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Test your CSS, because life's too short to click around.

branch: master

Fetching latest commit…


Cannot retrieve the latest commit at this time

Octocat-spinner-32 test
Octocat-spinner-32 .gitignore
Octocat-spinner-32 .jshintrc
Octocat-spinner-32 Makefile
Octocat-spinner-32 example.html
Octocat-spinner-32 tcsst.js


Test your CSS.


Because life's too short to click around.

Use it

Add jQuery and tcsst.js to your header:

<script src=""></script>
<script src="tcsst.js"></script>

Define your tests in terms of CSS selectors. Assert propositions using the methods listed below:

  tc.test('top of paragraph should be at a multiple of line-height', 'p',
    function(test, element){
      var lineHeight = parseInt($('body').css('line-height'), 10);
      var diff = $(element).offset().top % lineHeight;
      test.assert((0 === diff), 'Off by ' + diff + 'px');
  tc.test('something should go wrong in a badly-written test', 'em',
    function(test, element){
      throw('oh no!');

Open the browser (Chrome or Firefox) and check the JavaScript console:

Running tests:
Tests: 2, Assertions: 4, Passed: 3, Failed: 1, Errors: 1
Failed: top of paragraph should be at a multiple of line-height
Off by 1px
      Subsequent paragraphs are out of alignment with the vertical rhythm, and
      will cause the tests to fail. It's possible to fix the extra pixel by
      setting the line-height of code to zero or to a number less than about
      (line-height - 2px).
Error: something should go wrong in a badly-written test
oh no! 

Alternatively, you can run your tests headlessly in PhantomJS directly from the command line:

./test/run-test.js example.html [example2.html ...]


assert(boolean proposition, string optionalMessage)

Asserts that boolean is true. Prints message on failure, if supplied. This is the basic unit from which all other assertions are composed.

assertEqual(any expected, any actual)

Asserts that expected and actual are equal, using ===.

assertInDelta(number expected, number actual, number epsilon)

Asserts that the difference between expected and actual is no more than epsilon.


  • Only tested in Chrome, Firefox, and PhantomJS
  • Definitely won't work in IE at present
  • No backtraces when an error occurs in a test

To do (maybe)

  • Add more assertions
  • Add alternative reporters: call an endpoint, for example
Something went wrong with that request. Please try again.