Explorar o código

Add tests for margin style output.

Maciej Gołaszewski %!s(int64=6) %!d(string=hai) anos
pai
achega
16b32d90c6

+ 52 - 50
packages/ckeditor5-engine/src/view/styles.js

@@ -55,8 +55,10 @@ export default class Styles {
 			return this._styles;
 		} // TODO: clone
 
-		if ( has( this._styles, name.replace( '-', '.' ) ) ) {
-			return get( this._styles, name.replace( '-', '.' ) );
+		const path = name.replace( '-', '.' );
+
+		if ( has( this._styles, path ) ) {
+			return get( this._styles, path );
 		} else {
 			return this._styles[ name ];
 		}
@@ -236,6 +238,52 @@ function addStyle( styleObject, name, value ) {
 	}
 }
 
+function printSingleValues( { top, right, bottom, left }, prefix ) {
+	const ret = [];
+
+	if ( top ) {
+		ret.push( prefix + '-top:' + top );
+	}
+
+	if ( right ) {
+		ret.push( prefix + '-right:' + right );
+	}
+
+	if ( bottom ) {
+		ret.push( prefix + '-bottom:' + bottom );
+	}
+
+	if ( left ) {
+		ret.push( prefix + '-left:' + left );
+	}
+
+	return ret.join( ';' );
+}
+
+function outputShorthandableValue( styleObject, strict, styleShorthand ) {
+	const { top, right, bottom, left } = styleObject;
+
+	if ( top === left && left === bottom && bottom === right ) {
+		return ( strict ? '' : styleShorthand + ':' ) + top;
+	} else if ( ![ top, right, left, bottom ].every( value => !!value ) ) {
+		return printSingleValues( { top, right, bottom, left }, 'margin' );
+	} else {
+		const out = [];
+
+		if ( left !== right ) {
+			out.push( top, right, bottom, left );
+		} else if ( bottom !== top ) {
+			out.push( top, right, bottom );
+		} else if ( right != top ) {
+			out.push( top, right );
+		} else {
+			out.push( top );
+		}
+
+		return `${ strict ? '' : styleShorthand + ':' }${ out.join( ' ' ) }`;
+	}
+}
+
 function toInlineStyle( styleName, styleObjectOrString, strict = false ) {
 	if ( styleName === 'border' ) {
 		const top = toInlineBorder( styleObjectOrString.top );
@@ -246,26 +294,7 @@ function toInlineStyle( styleName, styleObjectOrString, strict = false ) {
 		if ( top === right && right === bottom && bottom === left ) {
 			return ( strict ? '' : 'border:' ) + top;
 		} else if ( !strict ) {
-			const ret = [];
-
-			// TODO not so nice:
-			if ( top ) {
-				ret.push( 'border-top:' + top );
-			}
-
-			if ( right ) {
-				ret.push( 'border-right:' + right );
-			}
-
-			if ( bottom ) {
-				ret.push( 'border-bottom:' + bottom );
-			}
-
-			if ( left ) {
-				ret.push( 'border-left:' + left );
-			}
-
-			return ret.join( ';' );
+			return printSingleValues( { top, right, bottom, left }, 'border' );
 		}
 
 		return;
@@ -276,34 +305,7 @@ function toInlineStyle( styleName, styleObjectOrString, strict = false ) {
 	}
 
 	if ( styleName === 'margin' ) {
-		const { top, right, bottom, left } = styleObjectOrString;
-
-		if ( top === left && left === bottom && bottom === right ) {
-			return ( strict ? 'margin' : '' ) + top;
-		} else if ( ![ top, right, left, bottom ].every( value => !!value ) ) {
-			const ret = [];
-
-			// TODO not so nice:
-			if ( top ) {
-				ret.push( 'margin-top:' + top );
-			}
-
-			if ( right ) {
-				ret.push( 'margin-right:' + right );
-			}
-
-			if ( bottom ) {
-				ret.push( 'margin-bottom:' + bottom );
-			}
-
-			if ( left ) {
-				ret.push( 'margin-left:' + left );
-			}
-
-			return ret.join( ';' );
-		} else {
-			return 'margin...';
-		}
+		return outputShorthandableValue( styleObjectOrString, strict, 'margin' );
 	}
 
 	return ( strict ? '' : styleName + ':' ) + styleObjectOrString;

+ 73 - 3
packages/ckeditor5-engine/tests/view/styles.js

@@ -283,13 +283,78 @@ 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' );
+			} );
+
+			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' );
+			} );
+
+			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' );
+			} );
+
+			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' );
+			} );
+
+			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' );
+			} );
+
+			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' );
+			} );
+
 			describe( 'margin-*', () => {
 				it( 'should set proper margin', () => {
 					styleProxy.setStyle( 'margin-top:1px;' );
 
-					expect( styleProxy.getModel( 'margin' ) ).to.deep.equal( {
-						top: '1px'
-					} );
+					expect( styleProxy.getModel( 'margin' ) ).to.deep.equal( { top: '1px' } );
+					expect( styleProxy.getModel( 'margin-top' ) ).to.equal( '1px' );
 				} );
 
 				it( 'should set proper margin with margin shorthand', () => {
@@ -301,6 +366,10 @@ describe( 'Styles', () => {
 						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' );
 				} );
 			} );
 		} );
@@ -349,6 +418,7 @@ describe( 'Styles', () => {
 					left: 'thick'
 				} );
 			} );
+
 			describe( 'padding-*', () => {
 				it( 'should set proper padding', () => {
 					styleProxy.setStyle( 'padding-top:1px;' );