var specificity = require('../'), assert = require('assert'), tests, testSelector, comparisonTests, testCompare; tests = [ // http://css-tricks.com/specifics-on-css-specificity/ { selector: 'ul#nav li.active a', expected: '0,1,1,3' }, { selector: 'body.ie7 .col_3 h2 ~ h2', expected: '0,0,2,3' }, { selector: '#footer *:not(nav) li', expected: '0,1,0,2' }, { selector: 'ul > li ul li ol li:first-letter', expected: '0,0,0,7' }, // http://reference.sitepoint.com/css/specificity { selector: 'body#home div#warning p.message', expected: '0,2,1,3' }, { selector: '* body#home>div#warning p.message', expected: '0,2,1,3' }, { selector: '#home #warning p.message', expected: '0,2,1,1' }, { selector: '#warning p.message', expected: '0,1,1,1' }, { selector: '#warning p', expected: '0,1,0,1' }, { selector: 'p.message', expected: '0,0,1,1' }, { selector: 'p', expected: '0,0,0,1' }, // Test pseudo-element with uppercase letters { selector: 'li:bEfoRE', expected: '0,0,0,2' }, // Pseudo-class tests { selector: 'li:first-child+p', expected: '0,0,1,2'}, { selector: 'li:nth-child(even)+p', expected: '0,0,1,2'}, { selector: 'li:nth-child(2n+1)+p', expected: '0,0,1,2'}, { selector: 'li:nth-child( 2n + 1 )+p', expected: '0,0,1,2'}, { selector: 'li:nth-child(2n-1)+p', expected: '0,0,1,2'}, { selector: 'li:nth-child(2n-1) p', expected: '0,0,1,2'}, { selector: ':lang(nl-be)', expected: '0,0,1,0'}, // Tests with CSS escape sequences // https://mathiasbynens.be/notes/css-escapes and https://mathiasbynens.be/demo/crazy-class { selector: '.\\3A -\\)', expected: '0,0,1,0' }, /*
*/ { selector: '.\\3A \\`\\(', expected: '0,0,1,0' }, /* */ { selector: '.\\3A .\\`\\(', expected: '0,0,2,0' }, /* */ { selector: '.\\31 a2b3c', expected: '0,0,1,0' }, /* */ { selector: '.\\000031a2b3c', expected: '0,0,1,0' }, /* */ { selector: '.\\000031 a2b3c', expected: '0,0,1,0' }, /* */ { selector: '#\\#fake-id', expected: '0,1,0,0' }, /* */ { selector: '.\\#fake-id', expected: '0,0,1,0' }, /* */ { selector: '#\\', expected: '0,1,0,0' }, /*
*/ { selector: '.\\#\\.\\#\\.\\#', expected: '0,0,1,0' }, /* */ { selector: '.foo\\.bar', expected: '0,0,1,0' }, /* */ { selector: '.\\:hover\\:active', expected: '0,0,1,0' }, /* */ { selector: '.\\3A hover\\3A active', expected: '0,0,1,0' }, /* */ { selector: '.\\000031 p', expected: '0,0,1,1' }, /* " */ { selector: '.\\3A \\`\\( .another', expected: '0,0,2,0' }, /* */ { selector: '.\\--cool', expected: '0,0,1,0' }, /* */ { selector: '#home .\\[page\\]', expected: '0,1,1,0' }, /* */ ]; testSelector = function(test) { describe('#calculate(" ' + test.selector + ' ")', function() { it ('should return a specificity of "' + test.expected + '"', function() { var result = specificity.calculate(test.selector); assert.equal(result[0].specificity, test.expected); }); }); }; comparisonTests = [ { a: 'div', b: 'span', expected: 0 }, { a: '.active', b: ':focus', expected: 0 }, { a: '#header', b: '#main', expected: 0 }, { a: 'div', b: '.active', expected: -1 }, { a: 'div', b: '#header', expected: -1 }, { a: '.active', b: '#header', expected: -1 }, { a: '.active', b: 'div', expected: 1 }, { a: '#main', b: 'div', expected: 1 }, { a: '#main', b: ':focus', expected: 1 }, { a: 'div p', b: 'span a', expected: 0 }, { a: '#main p .active', b: '#main span :focus', expected: 0 }, { a: [0, 1, 1, 1], b: '#main span :focus', expected: 0 }, { a: '#main p .active', b: [0, 1, 1, 1], expected: 0 }, { a: ':focus', b: 'span a', expected: 1 }, { a: '#main', b: 'span a:hover', expected: 1 }, { a: 'ul > li > a > span:before', b: '.active', expected: -1 }, { a: 'a.active:hover', b: '#main', expected: -1 } ]; testCompare = function(test) { it('compare("' + test.a + '", "' + test.b + '") should return ' + test.expected, function() { var result = specificity.compare(test.a, test.b); assert.equal(result, test.expected); }); }; describe('specificity', function() { describe('calculate', function() { var i, len, test; for (i = 0, len = tests.length; i < len; i += 1) { test = tests[i]; testSelector(test); } }); describe('compare', function() { var i, len, test; for (i = 0, len = comparisonTests.length; i < len; i += 1) { test = comparisonTests[i]; testCompare(test); } }); describe('sorting with compare', function() { var a = 'div', b = 'p a', c = '.active', d = 'p.active', e = '.active:focus', f = '#main', original = [c, f, a, e, b, d], sorted = [a, b, c, d, e, f]; it('array.sort(specificity.compare) should sort the array by specificity', function() { var result = original.sort(specificity.compare); assert.equal(result.join('|'), sorted.join('|')); }); }); });