2014-09-04 22:34:08 +00:00
|
|
|
'use strict';
|
|
|
|
|
|
|
|
var expect = require('expect.js');
|
2014-09-07 19:10:04 +00:00
|
|
|
var gradients = require('build/node');
|
2014-09-04 22:34:08 +00:00
|
|
|
|
2014-09-05 00:02:54 +00:00
|
|
|
|
2014-09-04 22:34:08 +00:00
|
|
|
describe('gradient-parser.js', function () {
|
2014-09-06 10:33:19 +00:00
|
|
|
var ast,
|
|
|
|
subject;
|
|
|
|
|
2014-09-04 22:34:08 +00:00
|
|
|
it('should exist', function () {
|
2014-09-06 17:49:34 +00:00
|
|
|
expect(typeof gradients.parse).to.equal('function');
|
2014-09-04 22:34:08 +00:00
|
|
|
});
|
|
|
|
|
2014-09-06 13:25:10 +00:00
|
|
|
describe('error cases', function() {
|
|
|
|
it('one more comma in definitions', function() {
|
2014-09-06 10:33:19 +00:00
|
|
|
expect(function() {
|
2014-09-11 15:46:08 +00:00
|
|
|
gradients.parse('-webkit-linear-gradient(red, blue),');
|
2014-09-06 10:33:19 +00:00
|
|
|
}).to.throwException(/One extra comma/);
|
|
|
|
});
|
|
|
|
|
2014-09-06 13:25:10 +00:00
|
|
|
it('one more comma in colors', function() {
|
2014-09-06 10:33:19 +00:00
|
|
|
expect(function() {
|
2014-09-11 15:46:08 +00:00
|
|
|
gradients.parse('-o-linear-gradient(red, blue,)');
|
2014-09-06 11:28:43 +00:00
|
|
|
}).to.throwException(/Expected color definition/);
|
2014-09-06 10:33:19 +00:00
|
|
|
});
|
|
|
|
|
2014-09-06 13:25:10 +00:00
|
|
|
it('invalid input', function() {
|
2014-09-06 10:33:19 +00:00
|
|
|
expect(function() {
|
2014-09-06 17:49:34 +00:00
|
|
|
gradients.parse('linear-gradient(red, blue) aaa');
|
2014-09-06 10:33:19 +00:00
|
|
|
}).to.throwException(/Invalid input not EOF/);
|
|
|
|
});
|
|
|
|
|
2014-09-06 13:25:10 +00:00
|
|
|
it('missing open call', function() {
|
2014-09-06 10:33:19 +00:00
|
|
|
expect(function() {
|
2014-09-06 17:49:34 +00:00
|
|
|
gradients.parse('linear-gradient red, blue');
|
2014-09-06 10:33:19 +00:00
|
|
|
}).to.throwException(/Missing \(/);
|
|
|
|
});
|
|
|
|
|
2014-09-06 13:25:10 +00:00
|
|
|
it('missing comma before color stops', function() {
|
2014-09-06 10:33:19 +00:00
|
|
|
expect(function() {
|
2014-09-06 17:49:34 +00:00
|
|
|
gradients.parse('linear-gradient(to right red, blue)');
|
2014-09-06 10:33:19 +00:00
|
|
|
}).to.throwException(/Missing comma before color stops/);
|
|
|
|
});
|
|
|
|
|
2014-09-06 13:25:10 +00:00
|
|
|
it('missing color stops', function() {
|
2014-09-06 10:33:19 +00:00
|
|
|
expect(function() {
|
2014-09-06 17:49:34 +00:00
|
|
|
gradients.parse('linear-gradient(to right, )');
|
2014-09-06 11:28:43 +00:00
|
|
|
}).to.throwException(/Expected color definition/);
|
2014-09-06 10:33:19 +00:00
|
|
|
});
|
2014-09-04 22:34:08 +00:00
|
|
|
|
2014-09-06 13:25:10 +00:00
|
|
|
it('missing closing call', function() {
|
2014-09-06 10:33:19 +00:00
|
|
|
expect(function() {
|
2014-09-06 17:49:34 +00:00
|
|
|
gradients.parse('linear-gradient(to right, red, blue aaa');
|
2014-09-06 10:33:19 +00:00
|
|
|
}).to.throwException(/Missing \)/);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2014-09-06 11:28:43 +00:00
|
|
|
describe('when parsing a simple definition', function() {
|
2014-09-04 22:34:08 +00:00
|
|
|
beforeEach(function() {
|
2014-09-06 17:49:34 +00:00
|
|
|
ast = gradients.parse('linear-gradient(red, blue)');
|
2014-09-06 10:33:19 +00:00
|
|
|
subject = ast[0];
|
2014-09-04 22:34:08 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should get the gradient type', function () {
|
2014-09-06 10:33:19 +00:00
|
|
|
expect(subject.type).to.equal('linear-gradient');
|
2014-09-04 22:34:08 +00:00
|
|
|
});
|
|
|
|
|
2014-09-06 10:33:19 +00:00
|
|
|
it('should get the orientation', function() {
|
|
|
|
expect(subject.orientation).to.be(undefined);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('colors', function() {
|
|
|
|
it('should get all colors', function() {
|
|
|
|
expect(subject.colorStops).to.have.length(2);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('first color', function() {
|
|
|
|
beforeEach(function() {
|
|
|
|
subject = subject.colorStops[0];
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should get literal type', function() {
|
|
|
|
expect(subject.type).to.equal('literal');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should get the right color', function() {
|
|
|
|
expect(subject.value).to.equal('red');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('second color', function() {
|
|
|
|
beforeEach(function() {
|
|
|
|
subject = subject.colorStops[1];
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should get literal type', function() {
|
|
|
|
expect(subject.type).to.equal('literal');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should get the right color', function() {
|
|
|
|
expect(subject.value).to.equal('blue');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2014-09-04 22:34:08 +00:00
|
|
|
});
|
2014-09-06 11:28:43 +00:00
|
|
|
|
2014-09-06 18:20:25 +00:00
|
|
|
describe('parse all metric values', function() {
|
|
|
|
[
|
|
|
|
'px',
|
|
|
|
'em',
|
|
|
|
'%'
|
|
|
|
].forEach(function(metric) {
|
|
|
|
describe('parse color stop for metric '+ metric, function() {
|
2014-09-06 13:25:10 +00:00
|
|
|
beforeEach(function() {
|
2014-09-06 18:20:25 +00:00
|
|
|
ast = gradients.parse('linear-gradient(blue 10' + metric + ', transparent)');
|
|
|
|
subject = ast[0];
|
2014-09-06 13:25:10 +00:00
|
|
|
});
|
|
|
|
|
2014-09-06 18:20:25 +00:00
|
|
|
describe('the first color', function() {
|
|
|
|
beforeEach(function() {
|
|
|
|
subject = subject.colorStops[0];
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should have the length', function() {
|
|
|
|
expect(subject.length.type).to.equal(metric);
|
|
|
|
expect(subject.length.value).to.equal('10');
|
|
|
|
});
|
2014-09-06 13:25:10 +00:00
|
|
|
});
|
2014-09-06 11:28:43 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2014-09-06 13:40:32 +00:00
|
|
|
|
2014-09-06 18:20:25 +00:00
|
|
|
describe('parse all linear directional', function() {
|
|
|
|
[
|
|
|
|
{type: 'angular', unparsedValue: '145deg', value: '145'},
|
|
|
|
{type: 'directional', unparsedValue: 'to left top', value: 'left top'}
|
|
|
|
].forEach(function(orientation) {
|
|
|
|
describe('parse orientation ' + orientation.type, function() {
|
|
|
|
beforeEach(function() {
|
|
|
|
ast = gradients.parse('linear-gradient(' + orientation.unparsedValue + ', blue, green)');
|
|
|
|
subject = ast[0].orientation;
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should parse value', function() {
|
|
|
|
expect(subject.type).to.equal(orientation.type);
|
|
|
|
expect(subject.value).to.equal(orientation.value);
|
|
|
|
});
|
2014-09-06 13:40:32 +00:00
|
|
|
});
|
2014-09-06 18:20:25 +00:00
|
|
|
});
|
|
|
|
});
|
2014-09-06 13:40:32 +00:00
|
|
|
|
2014-09-06 18:20:25 +00:00
|
|
|
describe('parse all color types', function() {
|
|
|
|
[
|
|
|
|
{type: 'literal', unparsedValue: 'red', value: 'red'},
|
|
|
|
{type: 'hex', unparsedValue: '#c2c2c2', value: 'c2c2c2'},
|
|
|
|
{type: 'rgb', unparsedValue: 'rgb(243, 226, 195)', value: ['243', '226', '195']},
|
|
|
|
{type: 'rgba', unparsedValue: 'rgba(243, 226, 195)', value: ['243', '226', '195']}
|
|
|
|
].forEach(function(color) {
|
|
|
|
describe('parse color type '+ color.type, function() {
|
|
|
|
beforeEach(function() {
|
|
|
|
ast = gradients.parse('linear-gradient(12deg, ' + color.unparsedValue + ', blue, green)');
|
|
|
|
subject = ast[0].colorStops[0];
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should parse value', function() {
|
|
|
|
expect(subject.type).to.equal(color.type);
|
|
|
|
expect(subject.value).to.eql(color.value);
|
|
|
|
});
|
2014-09-06 13:40:32 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2014-09-06 13:53:38 +00:00
|
|
|
|
2014-09-06 18:20:25 +00:00
|
|
|
describe('parse linear gradients', function() {
|
|
|
|
[
|
|
|
|
'linear-gradient',
|
2014-09-06 18:38:10 +00:00
|
|
|
'radial-gradient',
|
|
|
|
'repeating-linear-gradient',
|
|
|
|
'repeating-radial-gradient'
|
2014-09-06 18:20:25 +00:00
|
|
|
].forEach(function(gradient) {
|
|
|
|
describe('parse ' + gradient + ' gradient', function() {
|
|
|
|
beforeEach(function() {
|
|
|
|
ast = gradients.parse(gradient + '(red, blue)');
|
|
|
|
subject = ast[0];
|
2014-09-06 13:53:38 +00:00
|
|
|
});
|
|
|
|
|
2014-09-06 18:20:25 +00:00
|
|
|
it('should parse the gradient', function() {
|
|
|
|
expect(subject.type).to.equal(gradient);
|
2014-09-06 13:53:38 +00:00
|
|
|
});
|
2014-09-06 18:20:25 +00:00
|
|
|
});
|
2014-09-06 13:53:38 +00:00
|
|
|
});
|
|
|
|
});
|
2014-09-06 18:38:10 +00:00
|
|
|
|
2014-09-07 13:26:45 +00:00
|
|
|
describe('different radial declarations', function() {
|
|
|
|
[
|
|
|
|
'ellipse farthest-corner',
|
|
|
|
'ellipse cover',
|
|
|
|
'circle cover',
|
|
|
|
'center bottom, ellipse cover',
|
|
|
|
'circle at 119px 58px'
|
|
|
|
].forEach(function(declaration) {
|
|
|
|
|
|
|
|
it('should parse ' + declaration + ' declaration', function() {
|
|
|
|
ast = gradients.parse('radial-gradient(' + declaration + ', red, blue)');
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2014-09-04 22:34:08 +00:00
|
|
|
});
|