瀏覽代碼

Refactor styles method names.

Maciej Gołaszewski 6 年之前
父節點
當前提交
13d5160eea

+ 7 - 7
packages/ckeditor5-engine/src/view/element.js

@@ -334,8 +334,8 @@ export default class Element extends Node {
 		// Check if styles are the same.
 		for ( const property of Object.keys( this._styles._styles ) ) {
 			if (
-				!otherElement._styles.hasRule( property ) ||
-				otherElement._styles.getInlineRule( property ) !== this._styles.getInlineRule( property )
+				!otherElement._styles.hasProperty( property ) ||
+				otherElement._styles.getInlineProperty( property ) !== this._styles.getInlineProperty( property )
 			) {
 				return false;
 			}
@@ -381,9 +381,9 @@ export default class Element extends Node {
 	 */
 	getStyle( property, asModel = false ) {
 		if ( asModel ) {
-			return this._styles.getModel( property );
+			return this._styles.getNormalized( property );
 		} else {
-			return this._styles.getInlineRule( property );
+			return this._styles.getInlineProperty( property );
 		}
 	}
 
@@ -407,7 +407,7 @@ export default class Element extends Node {
 	 */
 	hasStyle( ...property ) {
 		for ( const name of property ) {
-			if ( !this._styles.hasRule( name ) ) {
+			if ( !this._styles.hasProperty( name ) ) {
 				return false;
 			}
 		}
@@ -712,7 +712,7 @@ export default class Element extends Node {
 	_setStyle( property, value ) {
 		this._fireChange( 'attributes', this );
 
-		this._styles.insertRule( property, value );
+		this._styles.insertProperty( property, value );
 	}
 
 	/**
@@ -730,7 +730,7 @@ export default class Element extends Node {
 		this._fireChange( 'attributes', this );
 
 		property = Array.isArray( property ) ? property : [ property ];
-		property.forEach( name => this._styles.removeRule( name ) );
+		property.forEach( name => this._styles.removeProperty( name ) );
 	}
 
 	/**

+ 27 - 23
packages/ckeditor5-engine/src/view/styles.js

@@ -68,8 +68,8 @@ export default class Styles {
 	 * @param {String} name
 	 * @returns {Boolean}
 	 */
-	hasRule( name ) {
-		const nameNorm = this._getPath( name );
+	hasProperty( name ) {
+		const nameNorm = toPath( name );
 
 		return has( this._styles, nameNorm ) || !!this._styles[ name ];
 	}
@@ -83,28 +83,28 @@ export default class Styles {
 	 * @param {String|Object} value
 	 * @returns {Boolean}
 	 */
-	insertRule( nameOrObject, value ) {
+	insertProperty( nameOrObject, value ) {
 		if ( isPlainObject( nameOrObject ) ) {
 			for ( const key of Object.keys( nameOrObject ) ) {
-				this.insertRule( key, nameOrObject[ key ] );
+				this.insertProperty( key, nameOrObject[ key ] );
 			}
 		} else {
-			this._parseRule( nameOrObject, value );
+			this._parseProperty( nameOrObject, value );
 		}
 	}
 
-	removeRule( name ) {
-		unset( this._styles, this._getPath( name ) );
+	removeProperty( name ) {
+		unset( this._styles, toPath( name ) );
 
 		delete this._styles[ name ];
 	}
 
-	getModel( name ) {
+	getNormalized( name ) {
 		if ( !name ) {
 			return merge( {}, this._styles );
 		}
 
-		const path = this._getPath( name );
+		const path = toPath( name );
 
 		if ( has( this._styles, path ) ) {
 			return get( this._styles, path );
@@ -123,16 +123,16 @@ export default class Styles {
 		}
 
 		for ( const key of keys ) {
-			const model = this.getModel( key );
+			const normalized = this.getNormalized( key );
 
-			parsed.push( toInlineStyle( key, model ) );
+			parsed.push( toInlineStyle( key, normalized ) );
 		}
 
 		return parsed.join( ';' ) + ';';
 	}
 
-	getInlineRule( name ) {
-		const model = this.getModel( name );
+	getInlineProperty( name ) {
+		const model = this.getNormalized( name );
 
 		if ( !model ) {
 			// Try return directly
@@ -148,12 +148,9 @@ export default class Styles {
 		}
 	}
 
-	// TODO: expandShortHands: true/false?
 	getStyleNames() {
 		const inlineStyle = this.getInlineStyle();
 
-		// TODO: probably not good enough.
-		// TODO: consumables must have different names or support shorthands.
 		return ( inlineStyle || '' ).split( ';' ).filter( f => f !== '' ).map( abc => abc.split( ':' )[ 0 ] ).sort();
 	}
 
@@ -161,17 +158,13 @@ export default class Styles {
 		this._styles = {};
 	}
 
-	_getPath( name ) {
-		return name.replace( '-', '.' );
-	}
-
 	_parseStyle( string ) {
 		const map = parseInlineStyles( string );
 
 		for ( const key of map.keys() ) {
 			const value = map.get( key );
 
-			this._parseRule( key, value );
+			this._parseProperty( key, value );
 		}
 	}
 
@@ -188,7 +181,7 @@ export default class Styles {
 		}
 	}
 
-	_parseRule( key, value ) {
+	_parseProperty( key, value ) {
 		if ( isPlainObject( value ) ) {
 			this._appendStyleValue( key, value );
 
@@ -199,7 +192,7 @@ export default class Styles {
 
 		// Set directly to object.
 		if ( setOnPathStyles.includes( key ) ) {
-			this._appendStyleValue( this._getPath( key ), value );
+			this._appendStyleValue( toPath( key ), value );
 
 			return;
 		}
@@ -508,3 +501,14 @@ function parseInlineStyles( stylesString ) {
 
 	return stylesMap;
 }
+
+function toPath( name ) {
+	return name.replace( '-', '.' );
+}
+
+// 'border-style'	->	d{}
+// 'border-top'		->	d{}
+// 'border'			->	d{}
+
+// {}	-> style=""
+// {} 	-> border-top=""

+ 10 - 10
packages/ckeditor5-engine/tests/view/element.js

@@ -74,12 +74,12 @@ describe( 'Element', () => {
 			expect( el._attrs.has( 'style' ) ).to.be.false;
 			expect( el._attrs.has( 'id' ) ).to.be.true;
 
-			expect( el._styles.hasRule( 'one' ) ).to.be.true;
-			expect( el._styles.getInlineRule( 'one' ) ).to.equal( 'style1' );
-			expect( el._styles.hasRule( 'two' ) ).to.be.true;
-			expect( el._styles.getInlineRule( 'two' ) ).to.equal( 'style2' );
-			expect( el._styles.hasRule( 'three' ) ).to.be.true;
-			expect( el._styles.getInlineRule( 'three' ) ).to.equal( 'url(http://ckeditor.com)' );
+			expect( el._styles.hasProperty( 'one' ) ).to.be.true;
+			expect( el._styles.getInlineProperty( 'one' ) ).to.equal( 'style1' );
+			expect( el._styles.hasProperty( 'two' ) ).to.be.true;
+			expect( el._styles.getInlineProperty( 'two' ) ).to.equal( 'style2' );
+			expect( el._styles.hasProperty( 'three' ) ).to.be.true;
+			expect( el._styles.getInlineProperty( 'three' ) ).to.equal( 'url(http://ckeditor.com)' );
 		} );
 	} );
 
@@ -200,10 +200,10 @@ describe( 'Element', () => {
 
 			expect( clone ).to.not.equal( el );
 			expect( clone.name ).to.equal( el.name );
-			expect( clone._styles.hasRule( 'color' ) ).to.be.true;
-			expect( clone._styles.getInlineRule( 'color' ) ).to.equal( 'red' );
-			expect( clone._styles.hasRule( 'font-size' ) ).to.be.true;
-			expect( clone._styles.getInlineRule( 'font-size' ) ).to.equal( '12px' );
+			expect( clone._styles.hasProperty( 'color' ) ).to.be.true;
+			expect( clone._styles.getInlineProperty( 'color' ) ).to.equal( 'red' );
+			expect( clone._styles.hasProperty( 'font-size' ) ).to.be.true;
+			expect( clone._styles.getInlineProperty( 'font-size' ) ).to.equal( '12px' );
 		} );
 
 		it( 'should clone custom properties', () => {

+ 149 - 149
packages/ckeditor5-engine/tests/view/styles.js

@@ -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' );
 			} );
 		} );
 	} );