Match repeating-linear-gradient
This commit is contained in:
parent
fdcbd0beb9
commit
d6c91b4757
2 changed files with 78 additions and 43 deletions
|
@ -7,6 +7,7 @@ module.exports = (function() {
|
||||||
var types = {
|
var types = {
|
||||||
gradients: [
|
gradients: [
|
||||||
'linear-gradient',
|
'linear-gradient',
|
||||||
|
'repeating-linear-gradient',
|
||||||
'radial-gradient',
|
'radial-gradient',
|
||||||
'repeating-radial-gradient'
|
'repeating-radial-gradient'
|
||||||
],
|
],
|
||||||
|
@ -24,7 +25,9 @@ module.exports = (function() {
|
||||||
|
|
||||||
var tokens = {
|
var tokens = {
|
||||||
linearGradient: /^linear\-gradient/i,
|
linearGradient: /^linear\-gradient/i,
|
||||||
|
repeatingLinearGradient: /^repeating\-linear\-gradient/i,
|
||||||
radialGradient: /^radial\-gradient/i,
|
radialGradient: /^radial\-gradient/i,
|
||||||
|
repeatingRadialGradient: /^repeating\-radial\-gradient/i,
|
||||||
sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|left|right|top|bottom)/i,
|
sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|left|right|top|bottom)/i,
|
||||||
pixelValue: /^([0-9]+)px/,
|
pixelValue: /^([0-9]+)px/,
|
||||||
percentageValue: /^([0-9]+)\%/,
|
percentageValue: /^([0-9]+)\%/,
|
||||||
|
@ -66,7 +69,11 @@ module.exports = (function() {
|
||||||
return matchGradient(
|
return matchGradient(
|
||||||
'linear-gradient',
|
'linear-gradient',
|
||||||
tokens.linearGradient,
|
tokens.linearGradient,
|
||||||
matchOrientation);
|
matchLinearOrientation) ||
|
||||||
|
matchGradient(
|
||||||
|
'repeating-linear-gradient',
|
||||||
|
tokens.repeatingLinearGradient,
|
||||||
|
matchLinearOrientation);
|
||||||
}
|
}
|
||||||
|
|
||||||
function matchGradient(gradientType, pattern, orientationMatcher) {
|
function matchGradient(gradientType, pattern, orientationMatcher) {
|
||||||
|
@ -105,7 +112,7 @@ module.exports = (function() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function matchOrientation() {
|
function matchLinearOrientation() {
|
||||||
return matchSideOrCorner() ||
|
return matchSideOrCorner() ||
|
||||||
matchAngle();
|
matchAngle();
|
||||||
}
|
}
|
||||||
|
|
|
@ -132,59 +132,87 @@ describe('gradient-parser.js', function () {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
['px', 'em', '%'].forEach(function(metric) {
|
describe('parse all metric values', function() {
|
||||||
describe('parse color stop for metric '+ metric, function() {
|
[
|
||||||
beforeEach(function() {
|
'px',
|
||||||
ast = gradients.parse('linear-gradient(blue 10' + metric + ', transparent)');
|
'em',
|
||||||
subject = ast[0];
|
'%'
|
||||||
});
|
].forEach(function(metric) {
|
||||||
|
describe('parse color stop for metric '+ metric, function() {
|
||||||
describe('the first color', function() {
|
|
||||||
beforeEach(function() {
|
beforeEach(function() {
|
||||||
subject = subject.colorStops[0];
|
ast = gradients.parse('linear-gradient(blue 10' + metric + ', transparent)');
|
||||||
|
subject = ast[0];
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should have the length', function() {
|
describe('the first color', function() {
|
||||||
expect(subject.length.type).to.equal(metric);
|
beforeEach(function() {
|
||||||
expect(subject.length.value).to.equal('10');
|
subject = subject.colorStops[0];
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should have the length', function() {
|
||||||
|
expect(subject.length.type).to.equal(metric);
|
||||||
|
expect(subject.length.value).to.equal('10');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
[
|
describe('parse all linear directional', function() {
|
||||||
{type: 'angular', unparsedValue: '145deg', value: '145'},
|
[
|
||||||
{type: 'directional', unparsedValue: 'to left top', value: 'left top'}
|
{type: 'angular', unparsedValue: '145deg', value: '145'},
|
||||||
].forEach(function(orientation) {
|
{type: 'directional', unparsedValue: 'to left top', value: 'left top'}
|
||||||
describe('parse orientation ' + orientation.type, function() {
|
].forEach(function(orientation) {
|
||||||
beforeEach(function() {
|
describe('parse orientation ' + orientation.type, function() {
|
||||||
ast = gradients.parse('linear-gradient(' + orientation.unparsedValue + ', blue, green)');
|
beforeEach(function() {
|
||||||
subject = ast[0].orientation;
|
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);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
[
|
|
||||||
{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() {
|
it('should parse value', function() {
|
||||||
expect(subject.type).to.equal(color.type);
|
expect(subject.type).to.equal(orientation.type);
|
||||||
expect(subject.value).to.eql(color.value);
|
expect(subject.value).to.equal(orientation.value);
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('parse linear gradients', function() {
|
||||||
|
[
|
||||||
|
'linear-gradient',
|
||||||
|
'repeating-linear-gradient'
|
||||||
|
].forEach(function(gradient) {
|
||||||
|
describe('parse ' + gradient + ' gradient', function() {
|
||||||
|
beforeEach(function() {
|
||||||
|
ast = gradients.parse(gradient + '(red, blue)');
|
||||||
|
subject = ast[0];
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should parse the gradient', function() {
|
||||||
|
expect(subject.type).to.equal(gradient);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue