|
|
@@ -5,32 +5,32 @@
|
|
|
import StyleProxy from '../../src/view/styles';
|
|
|
|
|
|
describe( 'Styles', () => {
|
|
|
- let styleProxy;
|
|
|
+ let styles;
|
|
|
|
|
|
beforeEach( () => {
|
|
|
- styleProxy = new StyleProxy();
|
|
|
+ styles = new StyleProxy();
|
|
|
} );
|
|
|
|
|
|
describe( 'getStyleNames()', () => {
|
|
|
it( 'should output custom style names', () => {
|
|
|
- styleProxy.setStyle( 'foo: 2;bar: baz;foo-bar-baz:none;' );
|
|
|
+ styles.setStyle( 'foo: 2;bar: baz;foo-bar-baz:none;' );
|
|
|
|
|
|
- expect( styleProxy.getStyleNames() ).to.deep.equal( [ 'bar', 'foo', 'foo-bar-baz' ] );
|
|
|
+ expect( styles.getStyleNames() ).to.deep.equal( [ 'bar', 'foo', 'foo-bar-baz' ] );
|
|
|
} );
|
|
|
|
|
|
it( 'should output full names for shorthand', () => {
|
|
|
- styleProxy.setStyle( 'margin: 1px;margin-left: 2em;' );
|
|
|
+ styles.setStyle( 'margin: 1px;margin-left: 2em;' );
|
|
|
|
|
|
- expect( styleProxy.getStyleNames() ).to.deep.equal( [ 'margin' ] );
|
|
|
+ expect( styles.getStyleNames() ).to.deep.equal( [ 'margin' ] );
|
|
|
} );
|
|
|
} );
|
|
|
|
|
|
describe( 'styles rules', () => {
|
|
|
describe( 'border', () => {
|
|
|
it( 'should parse border shorthand', () => {
|
|
|
- styleProxy.setStyle( 'border:1px solid blue;' );
|
|
|
+ styles.setStyle( 'border:1px solid blue;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
|
|
|
top: { color: 'blue', style: 'solid', width: '1px' },
|
|
|
right: { color: 'blue', style: 'solid', width: '1px' },
|
|
|
bottom: { color: 'blue', style: 'solid', width: '1px' },
|
|
|
@@ -39,9 +39,9 @@ describe( 'Styles', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should parse border shorthand with other shorthands', () => {
|
|
|
- styleProxy.setStyle( 'border:1px solid blue;border-left:#665511 dashed 2.7em;border-top:7px dotted #ccc;' );
|
|
|
+ styles.setStyle( 'border:1px solid blue;border-left:#665511 dashed 2.7em;border-top:7px dotted #ccc;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
|
|
|
top: { color: '#ccc', style: 'dotted', width: '7px' },
|
|
|
right: { color: 'blue', style: 'solid', width: '1px' },
|
|
|
bottom: { color: 'blue', style: 'solid', width: '1px' },
|
|
|
@@ -50,63 +50,63 @@ describe( 'Styles', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should output inline shorthand rules', () => {
|
|
|
- styleProxy.setStyle( 'border:1px solid blue;' );
|
|
|
-
|
|
|
- expect( styleProxy.getInlineStyle() ).to.equal( 'border:1px solid blue;' );
|
|
|
- expect( styleProxy.getInlineRule( 'border' ) ).to.equal( '1px solid blue' );
|
|
|
- expect( styleProxy.getInlineRule( 'border-top' ) ).to.equal( '1px solid blue' );
|
|
|
- expect( styleProxy.getInlineRule( 'border-right' ) ).to.equal( '1px solid blue' );
|
|
|
- expect( styleProxy.getInlineRule( 'border-bottom' ) ).to.equal( '1px solid blue' );
|
|
|
- expect( styleProxy.getInlineRule( 'border-left' ) ).to.equal( '1px solid blue' );
|
|
|
+ styles.setStyle( 'border:1px solid blue;' );
|
|
|
+
|
|
|
+ expect( styles.getInlineStyle() ).to.equal( 'border:1px solid blue;' );
|
|
|
+ expect( styles.getInlineProperty( 'border' ) ).to.equal( '1px solid blue' );
|
|
|
+ expect( styles.getInlineProperty( 'border-top' ) ).to.equal( '1px solid blue' );
|
|
|
+ expect( styles.getInlineProperty( 'border-right' ) ).to.equal( '1px solid blue' );
|
|
|
+ expect( styles.getInlineProperty( 'border-bottom' ) ).to.equal( '1px solid blue' );
|
|
|
+ expect( styles.getInlineProperty( 'border-left' ) ).to.equal( '1px solid blue' );
|
|
|
} );
|
|
|
|
|
|
it( 'should output inline shorthand rules', () => {
|
|
|
- styleProxy.setStyle( 'border:1px solid blue;border-left:#665511 dashed 2.7em;border-top:7px dotted #ccc;' );
|
|
|
+ styles.setStyle( 'border:1px solid blue;border-left:#665511 dashed 2.7em;border-top:7px dotted #ccc;' );
|
|
|
|
|
|
- expect( styleProxy.getInlineStyle() ).to.equal(
|
|
|
+ expect( styles.getInlineStyle() ).to.equal(
|
|
|
'border-top:7px dotted #ccc;border-right:1px solid blue;border-bottom:1px solid blue;border-left:2.7em dashed #665511;'
|
|
|
);
|
|
|
- expect( styleProxy.getInlineRule( 'border' ) ).to.be.undefined;
|
|
|
- expect( styleProxy.getInlineRule( 'border-top' ) ).to.equal( '7px dotted #ccc' );
|
|
|
- expect( styleProxy.getInlineRule( 'border-right' ) ).to.equal( '1px solid blue' );
|
|
|
- expect( styleProxy.getInlineRule( 'border-bottom' ) ).to.equal( '1px solid blue' );
|
|
|
- expect( styleProxy.getInlineRule( 'border-left' ) ).to.equal( '2.7em dashed #665511' );
|
|
|
+ expect( styles.getInlineProperty( 'border' ) ).to.be.undefined;
|
|
|
+ expect( styles.getInlineProperty( 'border-top' ) ).to.equal( '7px dotted #ccc' );
|
|
|
+ expect( styles.getInlineProperty( 'border-right' ) ).to.equal( '1px solid blue' );
|
|
|
+ expect( styles.getInlineProperty( 'border-bottom' ) ).to.equal( '1px solid blue' );
|
|
|
+ expect( styles.getInlineProperty( 'border-left' ) ).to.equal( '2.7em dashed #665511' );
|
|
|
} );
|
|
|
|
|
|
it( 'should merge rules on insert other shorthand', () => {
|
|
|
- styleProxy.setStyle( 'border:1px solid blue;' );
|
|
|
- styleProxy.insertRule( 'border-left', '#665511 dashed 2.7em' );
|
|
|
- styleProxy.insertRule( 'border-top', '7px dotted #ccc' );
|
|
|
+ styles.setStyle( 'border:1px solid blue;' );
|
|
|
+ styles.insertProperty( 'border-left', '#665511 dashed 2.7em' );
|
|
|
+ styles.insertProperty( 'border-top', '7px dotted #ccc' );
|
|
|
|
|
|
- expect( styleProxy.getInlineStyle() ).to.equal(
|
|
|
+ expect( styles.getInlineStyle() ).to.equal(
|
|
|
'border-top:7px dotted #ccc;border-right:1px solid blue;border-bottom:1px solid blue;border-left:2.7em dashed #665511;'
|
|
|
);
|
|
|
- expect( styleProxy.getInlineRule( 'border' ) ).to.be.undefined;
|
|
|
- expect( styleProxy.getInlineRule( 'border-top' ) ).to.equal( '7px dotted #ccc' );
|
|
|
- expect( styleProxy.getInlineRule( 'border-right' ) ).to.equal( '1px solid blue' );
|
|
|
- expect( styleProxy.getInlineRule( 'border-bottom' ) ).to.equal( '1px solid blue' );
|
|
|
- expect( styleProxy.getInlineRule( 'border-left' ) ).to.equal( '2.7em dashed #665511' );
|
|
|
+ expect( styles.getInlineProperty( 'border' ) ).to.be.undefined;
|
|
|
+ expect( styles.getInlineProperty( 'border-top' ) ).to.equal( '7px dotted #ccc' );
|
|
|
+ expect( styles.getInlineProperty( 'border-right' ) ).to.equal( '1px solid blue' );
|
|
|
+ expect( styles.getInlineProperty( 'border-bottom' ) ).to.equal( '1px solid blue' );
|
|
|
+ expect( styles.getInlineProperty( 'border-left' ) ).to.equal( '2.7em dashed #665511' );
|
|
|
} );
|
|
|
|
|
|
it( 'should output', () => {
|
|
|
- styleProxy.setStyle( 'border:1px solid blue;' );
|
|
|
- styleProxy.removeRule( 'border-top' );
|
|
|
+ styles.setStyle( 'border:1px solid blue;' );
|
|
|
+ styles.removeProperty( 'border-top' );
|
|
|
|
|
|
- expect( styleProxy.getInlineStyle() ).to.equal(
|
|
|
+ expect( styles.getInlineStyle() ).to.equal(
|
|
|
'border-right:1px solid blue;border-bottom:1px solid blue;border-left:1px solid blue;'
|
|
|
);
|
|
|
- expect( styleProxy.getInlineRule( 'border' ) ).to.be.undefined;
|
|
|
- expect( styleProxy.getInlineRule( 'border-top' ) ).to.be.undefined;
|
|
|
- expect( styleProxy.getInlineRule( 'border-right' ) ).to.equal( '1px solid blue' );
|
|
|
- expect( styleProxy.getInlineRule( 'border-bottom' ) ).to.equal( '1px solid blue' );
|
|
|
- expect( styleProxy.getInlineRule( 'border-left' ) ).to.equal( '1px solid blue' );
|
|
|
+ expect( styles.getInlineProperty( 'border' ) ).to.be.undefined;
|
|
|
+ expect( styles.getInlineProperty( 'border-top' ) ).to.be.undefined;
|
|
|
+ expect( styles.getInlineProperty( 'border-right' ) ).to.equal( '1px solid blue' );
|
|
|
+ expect( styles.getInlineProperty( 'border-bottom' ) ).to.equal( '1px solid blue' );
|
|
|
+ expect( styles.getInlineProperty( 'border-left' ) ).to.equal( '1px solid blue' );
|
|
|
} );
|
|
|
|
|
|
describe( 'border-color', () => {
|
|
|
it( 'should set all border colors (1 value defined)', () => {
|
|
|
- styleProxy.setStyle( 'border-color:cyan;' );
|
|
|
+ styles.setStyle( 'border-color:cyan;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
|
|
|
top: { color: 'cyan' },
|
|
|
left: { color: 'cyan' },
|
|
|
bottom: { color: 'cyan' },
|
|
|
@@ -115,9 +115,9 @@ describe( 'Styles', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should set all border colors (2 values defined)', () => {
|
|
|
- styleProxy.setStyle( 'border-color:cyan magenta;' );
|
|
|
+ styles.setStyle( 'border-color:cyan magenta;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
|
|
|
top: { color: 'cyan' },
|
|
|
right: { color: 'magenta' },
|
|
|
bottom: { color: 'cyan' },
|
|
|
@@ -126,9 +126,9 @@ describe( 'Styles', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should set all border colors (3 values defined)', () => {
|
|
|
- styleProxy.setStyle( 'border-color:cyan magenta pink;' );
|
|
|
+ styles.setStyle( 'border-color:cyan magenta pink;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
|
|
|
top: { color: 'cyan' },
|
|
|
right: { color: 'magenta' },
|
|
|
bottom: { color: 'pink' },
|
|
|
@@ -137,9 +137,9 @@ describe( 'Styles', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should set all border colors (4 values defined)', () => {
|
|
|
- styleProxy.setStyle( 'border-color:cyan magenta pink beige;' );
|
|
|
+ styles.setStyle( 'border-color:cyan magenta pink beige;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
|
|
|
top: { color: 'cyan' },
|
|
|
right: { color: 'magenta' },
|
|
|
bottom: { color: 'pink' },
|
|
|
@@ -148,9 +148,9 @@ describe( 'Styles', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should merge with border shorthand', () => {
|
|
|
- styleProxy.setStyle( 'border:1px solid blue;border-color:cyan black;' );
|
|
|
+ styles.setStyle( 'border:1px solid blue;border-color:cyan black;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
|
|
|
top: { color: 'cyan', style: 'solid', width: '1px' },
|
|
|
right: { color: 'black', style: 'solid', width: '1px' },
|
|
|
bottom: { color: 'cyan', style: 'solid', width: '1px' },
|
|
|
@@ -161,9 +161,9 @@ describe( 'Styles', () => {
|
|
|
|
|
|
describe( 'border-style', () => {
|
|
|
it( 'should set all border styles (1 value defined)', () => {
|
|
|
- styleProxy.setStyle( 'border-style:solid;' );
|
|
|
+ styles.setStyle( 'border-style:solid;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
|
|
|
top: { style: 'solid' },
|
|
|
right: { style: 'solid' },
|
|
|
bottom: { style: 'solid' },
|
|
|
@@ -172,9 +172,9 @@ describe( 'Styles', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should set all border styles (2 values defined)', () => {
|
|
|
- styleProxy.setStyle( 'border-style:solid dotted;' );
|
|
|
+ styles.setStyle( 'border-style:solid dotted;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
|
|
|
top: { style: 'solid' },
|
|
|
right: { style: 'dotted' },
|
|
|
bottom: { style: 'solid' },
|
|
|
@@ -183,9 +183,9 @@ describe( 'Styles', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should set all border styles (3 values defined)', () => {
|
|
|
- styleProxy.setStyle( 'border-style:solid dotted dashed;' );
|
|
|
+ styles.setStyle( 'border-style:solid dotted dashed;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
|
|
|
top: { style: 'solid' },
|
|
|
right: { style: 'dotted' },
|
|
|
bottom: { style: 'dashed' },
|
|
|
@@ -194,9 +194,9 @@ describe( 'Styles', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should set all border styles (4 values defined)', () => {
|
|
|
- styleProxy.setStyle( 'border-style:solid dotted dashed ridge;' );
|
|
|
+ styles.setStyle( 'border-style:solid dotted dashed ridge;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
|
|
|
top: { style: 'solid' },
|
|
|
right: { style: 'dotted' },
|
|
|
bottom: { style: 'dashed' },
|
|
|
@@ -207,9 +207,9 @@ describe( 'Styles', () => {
|
|
|
|
|
|
describe( 'border-width', () => {
|
|
|
it( 'should set all border widths (1 value defined)', () => {
|
|
|
- styleProxy.setStyle( 'border-width:1px;' );
|
|
|
+ styles.setStyle( 'border-width:1px;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
|
|
|
top: { width: '1px' },
|
|
|
right: { width: '1px' },
|
|
|
bottom: { width: '1px' },
|
|
|
@@ -218,9 +218,9 @@ describe( 'Styles', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should set all border widths (2 values defined)', () => {
|
|
|
- styleProxy.setStyle( 'border-width:1px .34cm;' );
|
|
|
+ styles.setStyle( 'border-width:1px .34cm;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
|
|
|
top: { width: '1px' },
|
|
|
right: { width: '.34cm' },
|
|
|
bottom: { width: '1px' },
|
|
|
@@ -229,9 +229,9 @@ describe( 'Styles', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should set all border widths (3 values defined)', () => {
|
|
|
- styleProxy.setStyle( 'border-width:1px .34cm 90.1rem;' );
|
|
|
+ styles.setStyle( 'border-width:1px .34cm 90.1rem;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
|
|
|
top: { width: '1px' },
|
|
|
right: { width: '.34cm' },
|
|
|
bottom: { width: '90.1rem' },
|
|
|
@@ -240,9 +240,9 @@ describe( 'Styles', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should set all border widths (4 values defined)', () => {
|
|
|
- styleProxy.setStyle( 'border-width:1px .34cm 90.1rem thick;' );
|
|
|
+ styles.setStyle( 'border-width:1px .34cm 90.1rem thick;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
|
|
|
top: { width: '1px' },
|
|
|
right: { width: '.34cm' },
|
|
|
bottom: { width: '90.1rem' },
|
|
|
@@ -254,9 +254,9 @@ describe( 'Styles', () => {
|
|
|
|
|
|
describe( 'margin', () => {
|
|
|
it( 'should set all margins (1 value defined)', () => {
|
|
|
- styleProxy.setStyle( 'margin:1px;' );
|
|
|
+ styles.setStyle( 'margin:1px;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'margin' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'margin' ) ).to.deep.equal( {
|
|
|
top: '1px',
|
|
|
right: '1px',
|
|
|
bottom: '1px',
|
|
|
@@ -265,9 +265,9 @@ describe( 'Styles', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should set all margins (2 values defined)', () => {
|
|
|
- styleProxy.setStyle( 'margin:1px .34cm;' );
|
|
|
+ styles.setStyle( 'margin:1px .34cm;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'margin' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'margin' ) ).to.deep.equal( {
|
|
|
top: '1px',
|
|
|
right: '.34cm',
|
|
|
bottom: '1px',
|
|
|
@@ -276,9 +276,9 @@ describe( 'Styles', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should set all margins (3 values defined)', () => {
|
|
|
- styleProxy.setStyle( 'margin:1px .34cm 90.1rem;' );
|
|
|
+ styles.setStyle( 'margin:1px .34cm 90.1rem;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'margin' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'margin' ) ).to.deep.equal( {
|
|
|
top: '1px',
|
|
|
right: '.34cm',
|
|
|
bottom: '90.1rem',
|
|
|
@@ -287,9 +287,9 @@ describe( 'Styles', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should set all margins (4 values defined)', () => {
|
|
|
- styleProxy.setStyle( 'margin:1px .34cm 90.1rem thick;' );
|
|
|
+ styles.setStyle( 'margin:1px .34cm 90.1rem thick;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'margin' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'margin' ) ).to.deep.equal( {
|
|
|
top: '1px',
|
|
|
right: '.34cm',
|
|
|
bottom: '90.1rem',
|
|
|
@@ -298,101 +298,101 @@ describe( 'Styles', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should output inline style (1 value defined)', () => {
|
|
|
- styleProxy.setStyle( 'margin:1px;' );
|
|
|
-
|
|
|
- expect( styleProxy.getInlineStyle() ).to.equal( 'margin:1px;' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin' ) ).to.equal( '1px' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-top' ) ).to.equal( '1px' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-right' ) ).to.equal( '1px' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-bottom' ) ).to.equal( '1px' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-left' ) ).to.equal( '1px' );
|
|
|
+ styles.setStyle( 'margin:1px;' );
|
|
|
+
|
|
|
+ expect( styles.getInlineStyle() ).to.equal( 'margin:1px;' );
|
|
|
+ expect( styles.getInlineProperty( 'margin' ) ).to.equal( '1px' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-top' ) ).to.equal( '1px' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-right' ) ).to.equal( '1px' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-bottom' ) ).to.equal( '1px' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-left' ) ).to.equal( '1px' );
|
|
|
} );
|
|
|
|
|
|
it( 'should output inline style (2 values defined)', () => {
|
|
|
- styleProxy.setStyle( 'margin:1px .34cm;' );
|
|
|
-
|
|
|
- expect( styleProxy.getInlineStyle() ).to.equal( 'margin:1px .34cm;' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin' ) ).to.equal( '1px .34cm' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-top' ) ).to.equal( '1px' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-right' ) ).to.equal( '.34cm' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-bottom' ) ).to.equal( '1px' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-left' ) ).to.equal( '.34cm' );
|
|
|
+ styles.setStyle( 'margin:1px .34cm;' );
|
|
|
+
|
|
|
+ expect( styles.getInlineStyle() ).to.equal( 'margin:1px .34cm;' );
|
|
|
+ expect( styles.getInlineProperty( 'margin' ) ).to.equal( '1px .34cm' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-top' ) ).to.equal( '1px' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-right' ) ).to.equal( '.34cm' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-bottom' ) ).to.equal( '1px' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-left' ) ).to.equal( '.34cm' );
|
|
|
} );
|
|
|
|
|
|
it( 'should output inline style (3 values defined)', () => {
|
|
|
- styleProxy.setStyle( 'margin:1px .34cm 90.1rem;' );
|
|
|
-
|
|
|
- expect( styleProxy.getInlineStyle() ).to.equal( 'margin:1px .34cm 90.1rem;' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin' ) ).to.equal( '1px .34cm 90.1rem' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-top' ) ).to.equal( '1px' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-right' ) ).to.equal( '.34cm' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-bottom' ) ).to.equal( '90.1rem' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-left' ) ).to.equal( '.34cm' );
|
|
|
+ styles.setStyle( 'margin:1px .34cm 90.1rem;' );
|
|
|
+
|
|
|
+ expect( styles.getInlineStyle() ).to.equal( 'margin:1px .34cm 90.1rem;' );
|
|
|
+ expect( styles.getInlineProperty( 'margin' ) ).to.equal( '1px .34cm 90.1rem' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-top' ) ).to.equal( '1px' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-right' ) ).to.equal( '.34cm' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-bottom' ) ).to.equal( '90.1rem' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-left' ) ).to.equal( '.34cm' );
|
|
|
} );
|
|
|
|
|
|
it( 'should output inline style (3 values defined, only last different)', () => {
|
|
|
- styleProxy.setStyle( 'margin:1px 1px 90.1rem;' );
|
|
|
-
|
|
|
- expect( styleProxy.getInlineStyle() ).to.equal( 'margin:1px 1px 90.1rem;' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin' ) ).to.equal( '1px 1px 90.1rem' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-top' ) ).to.equal( '1px' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-right' ) ).to.equal( '1px' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-bottom' ) ).to.equal( '90.1rem' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-left' ) ).to.equal( '1px' );
|
|
|
+ styles.setStyle( 'margin:1px 1px 90.1rem;' );
|
|
|
+
|
|
|
+ expect( styles.getInlineStyle() ).to.equal( 'margin:1px 1px 90.1rem;' );
|
|
|
+ expect( styles.getInlineProperty( 'margin' ) ).to.equal( '1px 1px 90.1rem' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-top' ) ).to.equal( '1px' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-right' ) ).to.equal( '1px' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-bottom' ) ).to.equal( '90.1rem' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-left' ) ).to.equal( '1px' );
|
|
|
} );
|
|
|
|
|
|
it( 'should output inline style (4 values defined)', () => {
|
|
|
- styleProxy.setStyle( 'margin:1px .34cm 90.1rem thick;' );
|
|
|
-
|
|
|
- expect( styleProxy.getInlineStyle() ).to.equal( 'margin:1px .34cm 90.1rem thick;' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin' ) ).to.equal( '1px .34cm 90.1rem thick' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-top' ) ).to.equal( '1px' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-right' ) ).to.equal( '.34cm' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-bottom' ) ).to.equal( '90.1rem' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-left' ) ).to.equal( 'thick' );
|
|
|
+ styles.setStyle( 'margin:1px .34cm 90.1rem thick;' );
|
|
|
+
|
|
|
+ expect( styles.getInlineStyle() ).to.equal( 'margin:1px .34cm 90.1rem thick;' );
|
|
|
+ expect( styles.getInlineProperty( 'margin' ) ).to.equal( '1px .34cm 90.1rem thick' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-top' ) ).to.equal( '1px' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-right' ) ).to.equal( '.34cm' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-bottom' ) ).to.equal( '90.1rem' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-left' ) ).to.equal( 'thick' );
|
|
|
} );
|
|
|
|
|
|
it( 'should output inline style (4 values defined, only last different)', () => {
|
|
|
- styleProxy.setStyle( 'margin:1px 1px 1px thick;' );
|
|
|
-
|
|
|
- expect( styleProxy.getInlineStyle() ).to.equal( 'margin:1px 1px 1px thick;' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin' ) ).to.equal( '1px 1px 1px thick' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-top' ) ).to.equal( '1px' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-right' ) ).to.equal( '1px' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-bottom' ) ).to.equal( '1px' );
|
|
|
- expect( styleProxy.getInlineRule( 'margin-left' ) ).to.equal( 'thick' );
|
|
|
+ styles.setStyle( 'margin:1px 1px 1px thick;' );
|
|
|
+
|
|
|
+ expect( styles.getInlineStyle() ).to.equal( 'margin:1px 1px 1px thick;' );
|
|
|
+ expect( styles.getInlineProperty( 'margin' ) ).to.equal( '1px 1px 1px thick' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-top' ) ).to.equal( '1px' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-right' ) ).to.equal( '1px' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-bottom' ) ).to.equal( '1px' );
|
|
|
+ expect( styles.getInlineProperty( 'margin-left' ) ).to.equal( 'thick' );
|
|
|
} );
|
|
|
|
|
|
describe( 'margin-*', () => {
|
|
|
it( 'should set proper margin', () => {
|
|
|
- styleProxy.setStyle( 'margin-top:1px;' );
|
|
|
+ styles.setStyle( 'margin-top:1px;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'margin' ) ).to.deep.equal( { top: '1px' } );
|
|
|
- expect( styleProxy.getModel( 'margin-top' ) ).to.equal( '1px' );
|
|
|
+ expect( styles.getNormalized( 'margin' ) ).to.deep.equal( { top: '1px' } );
|
|
|
+ expect( styles.getNormalized( 'margin-top' ) ).to.equal( '1px' );
|
|
|
} );
|
|
|
|
|
|
it( 'should set proper margin with margin shorthand', () => {
|
|
|
- styleProxy.setStyle( 'margin: 2em;margin-top:1px;' );
|
|
|
+ styles.setStyle( 'margin: 2em;margin-top:1px;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'margin' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'margin' ) ).to.deep.equal( {
|
|
|
top: '1px',
|
|
|
right: '2em',
|
|
|
bottom: '2em',
|
|
|
left: '2em'
|
|
|
} );
|
|
|
- expect( styleProxy.getModel( 'margin-top' ) ).to.equal( '1px' );
|
|
|
- expect( styleProxy.getModel( 'margin-right' ) ).to.equal( '2em' );
|
|
|
- expect( styleProxy.getModel( 'margin-bottom' ) ).to.equal( '2em' );
|
|
|
- expect( styleProxy.getModel( 'margin-left' ) ).to.equal( '2em' );
|
|
|
+ expect( styles.getNormalized( 'margin-top' ) ).to.equal( '1px' );
|
|
|
+ expect( styles.getNormalized( 'margin-right' ) ).to.equal( '2em' );
|
|
|
+ expect( styles.getNormalized( 'margin-bottom' ) ).to.equal( '2em' );
|
|
|
+ expect( styles.getNormalized( 'margin-left' ) ).to.equal( '2em' );
|
|
|
} );
|
|
|
} );
|
|
|
} );
|
|
|
|
|
|
describe( 'padding', () => {
|
|
|
it( 'should set all paddings (1 value defined)', () => {
|
|
|
- styleProxy.setStyle( 'padding:1px;' );
|
|
|
+ styles.setStyle( 'padding:1px;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'padding' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'padding' ) ).to.deep.equal( {
|
|
|
top: '1px',
|
|
|
right: '1px',
|
|
|
bottom: '1px',
|
|
|
@@ -401,9 +401,9 @@ describe( 'Styles', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should set all paddings (2 values defined)', () => {
|
|
|
- styleProxy.setStyle( 'padding:1px .34cm;' );
|
|
|
+ styles.setStyle( 'padding:1px .34cm;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'padding' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'padding' ) ).to.deep.equal( {
|
|
|
top: '1px',
|
|
|
right: '.34cm',
|
|
|
bottom: '1px',
|
|
|
@@ -412,9 +412,9 @@ describe( 'Styles', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should set all paddings (3 values defined)', () => {
|
|
|
- styleProxy.setStyle( 'padding:1px .34cm 90.1rem;' );
|
|
|
+ styles.setStyle( 'padding:1px .34cm 90.1rem;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'padding' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'padding' ) ).to.deep.equal( {
|
|
|
top: '1px',
|
|
|
right: '.34cm',
|
|
|
bottom: '90.1rem',
|
|
|
@@ -423,9 +423,9 @@ describe( 'Styles', () => {
|
|
|
} );
|
|
|
|
|
|
it( 'should set all paddings (4 values defined)', () => {
|
|
|
- styleProxy.setStyle( 'padding:1px .34cm 90.1rem thick;' );
|
|
|
+ styles.setStyle( 'padding:1px .34cm 90.1rem thick;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'padding' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'padding' ) ).to.deep.equal( {
|
|
|
top: '1px',
|
|
|
right: '.34cm',
|
|
|
bottom: '90.1rem',
|
|
|
@@ -435,17 +435,17 @@ describe( 'Styles', () => {
|
|
|
|
|
|
describe( 'padding-*', () => {
|
|
|
it( 'should set proper padding', () => {
|
|
|
- styleProxy.setStyle( 'padding-top:1px;' );
|
|
|
+ styles.setStyle( 'padding-top:1px;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'padding' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'padding' ) ).to.deep.equal( {
|
|
|
top: '1px'
|
|
|
} );
|
|
|
} );
|
|
|
|
|
|
it( 'should set proper padding with padding shorthand', () => {
|
|
|
- styleProxy.setStyle( 'padding: 2em;padding-top:1px;' );
|
|
|
+ styles.setStyle( 'padding: 2em;padding-top:1px;' );
|
|
|
|
|
|
- expect( styleProxy.getModel( 'padding' ) ).to.deep.equal( {
|
|
|
+ expect( styles.getNormalized( 'padding' ) ).to.deep.equal( {
|
|
|
top: '1px',
|
|
|
right: '2em',
|
|
|
bottom: '2em',
|
|
|
@@ -457,11 +457,11 @@ describe( 'Styles', () => {
|
|
|
|
|
|
describe( 'unknown rules', () => {
|
|
|
it( 'should left rules untouched', () => {
|
|
|
- styleProxy.setStyle( 'foo-bar:baz 1px abc;baz: 2px 3em;' );
|
|
|
+ styles.setStyle( 'foo-bar:baz 1px abc;baz: 2px 3em;' );
|
|
|
|
|
|
- expect( styleProxy.getInlineStyle() ).to.equal( 'baz:2px 3em;foo-bar:baz 1px abc;' );
|
|
|
- expect( styleProxy.getInlineRule( 'foo-bar' ) ).to.equal( 'baz 1px abc' );
|
|
|
- expect( styleProxy.getInlineRule( 'baz' ) ).to.equal( '2px 3em' );
|
|
|
+ expect( styles.getInlineStyle() ).to.equal( 'baz:2px 3em;foo-bar:baz 1px abc;' );
|
|
|
+ expect( styles.getInlineProperty( 'foo-bar' ) ).to.equal( 'baz 1px abc' );
|
|
|
+ expect( styles.getInlineProperty( 'baz' ) ).to.equal( '2px 3em' );
|
|
|
} );
|
|
|
} );
|
|
|
} );
|