8
0
Quellcode durchsuchen

Remove unneeded styles normalizations.

Maciej Gołaszewski vor 6 Jahren
Ursprung
Commit
44b80342d3

+ 16 - 4
packages/ckeditor5-engine/src/view/styles.js

@@ -167,7 +167,11 @@ export default class Styles {
 	getStyleNames() {
 		const inlineStyle = this.getInlineStyle();
 
-		return ( inlineStyle || '' ).split( ';' ).filter( f => f !== '' ).map( abc => abc.split( ':' )[ 0 ] ).sort();
+		return ( inlineStyle || '' )
+			.split( ';' )
+			.filter( f => f !== '' )
+			.map( abc => abc.split( ':' )[ 0 ] )
+			.sort( sortTopRightBottomLeftProperties );
 	}
 
 	clear() {
@@ -421,10 +425,20 @@ function toInlineStyleProperty( styleName, styleObjectOrString ) {
 	return styleObjectOrString;
 }
 
+const topRightBottomLeftOrder = [ 'top', 'right', 'bottom', 'left' ];
+
+function sortTopRightBottomLeftProperties( a, b ) {
+	if ( topRightBottomLeftOrder.includes( a ) && topRightBottomLeftOrder.includes( b ) ) {
+		return topRightBottomLeftOrder.indexOf( a ) - topRightBottomLeftOrder.indexOf( b );
+	}
+
+	return 0;
+}
+
 function leWhat( styleObjectOrString, styleName ) {
 	const values = [];
 
-	for ( const key of Object.keys( styleObjectOrString ) ) {
+	for ( const key of Object.keys( styleObjectOrString ).sort( sortTopRightBottomLeftProperties ) ) {
 		let styleObjectOrStringElement;
 
 		if ( isObject( styleObjectOrString[ key ] ) ) {
@@ -445,8 +459,6 @@ function toInlineStyle( styleName, styleObjectOrString ) {
 	inliners.set( 'border-color', shBorder( 'color' ) );
 	inliners.set( 'border-style', shBorder( 'style' ) );
 	inliners.set( 'border-width', shBorder( 'width' ) );
-	inliners.set( 'margin', value => outputShorthandableValue( value, false, 'margin' ) );
-	inliners.set( 'padding', value => outputShorthandableValue( value, false, 'padding' ) );
 
 	if ( inliners.has( styleName ) ) {
 		const inliner = inliners.get( styleName );

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

@@ -18,10 +18,10 @@ describe( 'Styles', () => {
 			expect( styles.getStyleNames() ).to.deep.equal( [ 'bar', 'foo', 'foo-bar-baz' ] );
 		} );
 
-		it( 'should output full names for shorthand', () => {
+		it( 'should output full names for known style names', () => {
 			styles.setStyle( 'margin: 1px;margin-left: 2em;' );
 
-			expect( styles.getStyleNames() ).to.deep.equal( [ 'margin' ] );
+			expect( styles.getStyleNames() ).to.deep.equal( [ 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' ] );
 		} );
 	} );
 
@@ -317,8 +317,8 @@ describe( 'Styles', () => {
 			it( 'should output inline style (1 value defined)', () => {
 				styles.setStyle( 'margin:1px;' );
 
-				expect( styles.getInlineStyle() ).to.equal( 'margin:1px;' );
-				expect( styles.getInlineProperty( 'margin' ) ).to.equal( '1px' );
+				expect( styles.getInlineStyle() ).to.equal( 'margin-top:1px;margin-right:1px;margin-bottom:1px;margin-left: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' );
@@ -328,8 +328,8 @@ describe( 'Styles', () => {
 			it( 'should output inline style (2 values defined)', () => {
 				styles.setStyle( 'margin:1px .34cm;' );
 
-				expect( styles.getInlineStyle() ).to.equal( 'margin:1px .34cm;' );
-				expect( styles.getInlineProperty( 'margin' ) ).to.equal( '1px .34cm' );
+				expect( styles.getInlineStyle() ).to.equal( 'margin-top:1px;margin-right:.34cm;margin-bottom:1px;margin-left:.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' );
@@ -339,8 +339,8 @@ describe( 'Styles', () => {
 			it( 'should output inline style (3 values defined)', () => {
 				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.getInlineStyle() ).to.equal( 'margin-top:1px;margin-right:.34cm;margin-bottom:90.1rem;margin-left:.34cm;' );
+				// 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' );
@@ -350,8 +350,8 @@ describe( 'Styles', () => {
 			it( 'should output inline style (3 values defined, only last different)', () => {
 				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.getInlineStyle() ).to.equal( 'margin-top:1px;margin-right:1px;margin-bottom:90.1rem;margin-left:1px;' );
+				// 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' );
@@ -361,8 +361,8 @@ describe( 'Styles', () => {
 			it( 'should output inline style (4 values defined)', () => {
 				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.getInlineStyle() ).to.equal( 'margin-top:1px;margin-right:.34cm;margin-bottom:90.1rem;margin-left: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' );
@@ -372,8 +372,8 @@ describe( 'Styles', () => {
 			it( 'should output inline style (4 values defined, only last different)', () => {
 				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.getInlineStyle() ).to.equal( 'margin-top:1px;margin-right:1px;margin-bottom:1px;margin-left: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' );