PNG
IHDR ; IDATxܻn0K
)(pA 7LeG{ §㻢| ذaÆ
6lذaÆ
6lذaÆ
6lom$^yذag5 bÆ
6lذaÆ
6lذa{
6lذaÆ
` }HFkm,mӪôô! x|'ܢ˟;E:9&ᶒ}{v]n&6
h_tڠ͵-ҫZ;Z$.Pkž)!o>}leQfJTu іچ\X=8Rن4`Vwl>nG^is"ms$ui?wbs[m6K4O .4%/ bC%t Mז -lG6mrz2s%9s@-k9=)kB5\+͂Zsٲ Rn~GRC wIcIn7jJhۛNCS|j08yiHKֶۛkɈ+;Sz L /F *\Ԕ#"5m2[S =gnaPeғL
lذaÆ
6l^ḵaÆ
6lذaÆ
6lذa;
_ذaÆ
6lذaÆ
6lذaÆ
R IENDB`
'use strict';
const { expect } = require('chai');
const { computeStyle } = require('./style.js');
const { querySelector } = require('./xast.js');
const svg2js = require('./svgo/svg2js.js');
describe('computeStyle', () => {
it('collects styles', () => {
const root = svg2js(`
`);
expect(computeStyle(querySelector(root, '#class'))).to.deep.equal({
fill: { type: 'static', inherited: false, value: 'red' },
});
expect(computeStyle(querySelector(root, '#two-classes'))).to.deep.equal({
fill: { type: 'static', inherited: false, value: 'green' },
stroke: { type: 'static', inherited: false, value: 'black' },
});
expect(computeStyle(querySelector(root, '#attribute'))).to.deep.equal({
fill: { type: 'static', inherited: false, value: 'purple' },
});
expect(computeStyle(querySelector(root, '#inline-style'))).to.deep.equal({
fill: { type: 'static', inherited: false, value: 'grey' },
});
expect(computeStyle(querySelector(root, '#inheritance'))).to.deep.equal({
fill: { type: 'static', inherited: true, value: 'yellow' },
});
expect(
computeStyle(querySelector(root, '#nested-inheritance'))
).to.deep.equal({
fill: { type: 'static', inherited: true, value: 'blue' },
});
});
it('prioritizes different kinds of styles', () => {
const root = svg2js(`
`);
expect(
computeStyle(querySelector(root, '#complex-selector'))
).to.deep.equal({
fill: { type: 'static', inherited: false, value: 'red' },
});
expect(
computeStyle(querySelector(root, '#attribute-over-inheritance'))
).to.deep.equal({
fill: { type: 'static', inherited: false, value: 'orange' },
});
expect(
computeStyle(querySelector(root, '#style-rule-over-attribute'))
).to.deep.equal({
fill: { type: 'static', inherited: false, value: 'blue' },
});
expect(
computeStyle(querySelector(root, '#inline-style-over-style-rule'))
).to.deep.equal({
fill: { type: 'static', inherited: false, value: 'purple' },
});
});
it('prioritizes important styles', () => {
const root = svg2js(`
`);
expect(
computeStyle(querySelector(root, '#complex-selector'))
).to.deep.equal({
fill: { type: 'static', inherited: false, value: 'green' },
});
expect(
computeStyle(querySelector(root, '#style-rule-over-inline-style'))
).to.deep.equal({
fill: { type: 'static', inherited: false, value: 'green' },
});
expect(
computeStyle(querySelector(root, '#inline-style-over-style-rule'))
).to.deep.equal({
fill: { type: 'static', inherited: false, value: 'purple' },
});
});
it('treats at-rules and pseudo-classes as dynamic styles', () => {
const root = svg2js(`
`);
expect(computeStyle(querySelector(root, '#media-query'))).to.deep.equal({
fill: { type: 'dynamic', inherited: false },
});
expect(computeStyle(querySelector(root, '#hover'))).to.deep.equal({
fill: { type: 'dynamic', inherited: false },
});
expect(computeStyle(querySelector(root, '#inherited'))).to.deep.equal({
fill: { type: 'dynamic', inherited: true },
});
expect(
computeStyle(querySelector(root, '#inherited-overriden'))
).to.deep.equal({
fill: { type: 'static', inherited: false, value: 'blue' },
});
expect(computeStyle(querySelector(root, '#static'))).to.deep.equal({
fill: { type: 'static', inherited: false, value: 'black' },
});
});
it('considers
`);
expect(computeStyle(querySelector(root, '#media-query'))).to.deep.equal({
fill: { type: 'dynamic', inherited: false },
});
expect(computeStyle(querySelector(root, '#kinda-static'))).to.deep.equal({
fill: { type: 'dynamic', inherited: false },
});
expect(computeStyle(querySelector(root, '#static'))).to.deep.equal({
fill: { type: 'static', inherited: false, value: 'blue' },
});
});
it('ignores
`);
expect(computeStyle(querySelector(root, '#valid-type'))).to.deep.equal({
fill: { type: 'static', inherited: false, value: 'red' },
});
expect(computeStyle(querySelector(root, '#empty-type'))).to.deep.equal({
fill: { type: 'static', inherited: false, value: 'green' },
});
expect(computeStyle(querySelector(root, '#invalid-type'))).to.deep.equal(
{}
);
});
it('ignores keyframes atrule', () => {
const root = svg2js(`
`);
expect(computeStyle(querySelector(root, '#element'))).to.deep.equal({
animation: {
type: 'static',
inherited: false,
value: 'loading 4s linear infinite',
},
});
});
});