Sfoglia il codice sorgente

Merge pull request #1184 from ckeditor/t/1179

Fix: View stringify utility now sorts CSS classes and values in `style` attribute. Closes #1179.
Szymon Kupś 8 anni fa
parent
commit
f411be7a9d

+ 16 - 1
packages/ckeditor5-engine/src/dev-utils/view.js

@@ -827,7 +827,22 @@ class ViewStringify {
 		const keys = [ ...element.getAttributeKeys() ].sort();
 
 		for ( const attribute of keys ) {
-			attributes.push( `${ attribute }="${ element.getAttribute( attribute ) }"` );
+			let attributeValue;
+
+			if ( attribute === 'class' ) {
+				attributeValue = [ ...element.getClassNames() ]
+					.sort()
+					.join( ' ' );
+			} else if ( attribute === 'style' ) {
+				attributeValue = [ ...element.getStyleNames() ]
+					.sort()
+					.map( style => `${ style }:${ element.getStyle( style ) }` )
+					.join( ';' );
+			} else {
+				attributeValue = element.getAttribute( attribute );
+			}
+
+			attributes.push( `${ attribute }="${ attributeValue }"` );
 		}
 
 		return attributes.join( ' ' );

+ 14 - 14
packages/ckeditor5-engine/tests/conversion/model-selection-to-view-converters.js

@@ -528,9 +528,9 @@ describe( 'model-selection-to-view-converters', () => {
 		beforeEach( () => {
 			function themeElementCreator( themeValue ) {
 				if ( themeValue == 'important' ) {
-					return new ViewAttributeElement( 'strong', { style: 'text-transform:uppercase;' } );
+					return new ViewAttributeElement( 'strong', { style: 'text-transform:uppercase' } );
 				} else if ( themeValue == 'gold' ) {
-					return new ViewAttributeElement( 'span', { style: 'color:yellow;' } );
+					return new ViewAttributeElement( 'span', { style: 'color:yellow' } );
 				}
 			}
 
@@ -545,7 +545,7 @@ describe( 'model-selection-to-view-converters', () => {
 				test(
 					[ 1, 5 ],
 					'fo<$text theme="gold">ob</$text>ar',
-					'f{o<span style="color:yellow;">ob</span>a}r'
+					'f{o<span style="color:yellow">ob</span>a}r'
 				);
 			} );
 
@@ -553,7 +553,7 @@ describe( 'model-selection-to-view-converters', () => {
 				test(
 					[ 2, 4 ],
 					'f<$text theme="gold">ooba</$text>r',
-					'f<span style="color:yellow;">o{ob}a</span>r'
+					'f<span style="color:yellow">o{ob}a</span>r'
 				);
 			} );
 
@@ -561,7 +561,7 @@ describe( 'model-selection-to-view-converters', () => {
 				test(
 					[ 2, 4 ],
 					'fo<$text theme="important">ob</$text>ar',
-					'fo{<strong style="text-transform:uppercase;">ob</strong>}ar'
+					'fo{<strong style="text-transform:uppercase">ob</strong>}ar'
 				);
 			} );
 
@@ -569,7 +569,7 @@ describe( 'model-selection-to-view-converters', () => {
 				test(
 					[ 3, 5 ],
 					'fo<$text theme="important">ob</$text>ar',
-					'fo<strong style="text-transform:uppercase;">o{b</strong>a}r'
+					'fo<strong style="text-transform:uppercase">o{b</strong>a}r'
 				);
 			} );
 		} );
@@ -579,7 +579,7 @@ describe( 'model-selection-to-view-converters', () => {
 				test(
 					[ 3, 3 ],
 					'f<$text theme="gold">ooba</$text>r',
-					'f<span style="color:yellow;">oo{}ba</span>r'
+					'f<span style="color:yellow">oo{}ba</span>r'
 				);
 			} );
 
@@ -587,7 +587,7 @@ describe( 'model-selection-to-view-converters', () => {
 				test(
 					[ 1, 1 ],
 					'foobar',
-					'f<strong style="text-transform:uppercase;">[]</strong>oobar',
+					'f<strong style="text-transform:uppercase">[]</strong>oobar',
 					{ theme: 'important' }
 				);
 			} );
@@ -596,9 +596,9 @@ describe( 'model-selection-to-view-converters', () => {
 				test(
 					[ 3, 3 ],
 					'f<$text theme="gold">ooba</$text>r',
-					'f<span style="color:yellow;">oo</span>' +
-					'<em><span style="color:yellow;">[]</span></em>' +
-					'<span style="color:yellow;">ba</span>r',
+					'f<span style="color:yellow">oo</span>' +
+					'<em><span style="color:yellow">[]</span></em>' +
+					'<span style="color:yellow">ba</span>r',
 					{ italic: true }
 				);
 			} );
@@ -611,9 +611,9 @@ describe( 'model-selection-to-view-converters', () => {
 				test(
 					[ 3, 3 ],
 					'f<$text theme="gold">ooba</$text>r',
-					'f<span style="color:yellow;">oo</span>' +
-					'<strong style="text-transform:uppercase;">[]</strong>' +
-					'<span style="color:yellow;">ba</span>r',
+					'f<span style="color:yellow">oo</span>' +
+					'<strong style="text-transform:uppercase">[]</strong>' +
+					'<span style="color:yellow">ba</span>r',
 					{ theme: 'important' }
 				);
 			} );

+ 18 - 0
packages/ckeditor5-engine/tests/dev-utils/view.js

@@ -355,6 +355,24 @@ describe( 'view test utils', () => {
 			expect( stringify( p, null, { showType: true } ) )
 				.to.equal( '<container:p><ui:span></ui:span></container:p>' );
 		} );
+
+		it( 'should sort classes in specified element', () => {
+			const text = new Text( 'foobar' );
+			const b = new Element( 'b', {
+				class: 'zz xx aa'
+			}, text );
+
+			expect( stringify( b ) ).to.equal( '<b class="aa xx zz">foobar</b>' );
+		} );
+
+		it( 'should sort styles in specified element', () => {
+			const text = new Text( 'foobar' );
+			const i = new Element( 'i', {
+				style: 'text-decoration: underline; font-weight: bold'
+			}, text );
+
+			expect( stringify( i ) ).to.equal( '<i style="font-weight:bold;text-decoration:underline">foobar</i>' );
+		} );
 	} );
 
 	describe( 'parse', () => {

+ 6 - 6
packages/ckeditor5-engine/tests/view/writer/unwrap.js

@@ -259,7 +259,7 @@ describe( 'writer', () => {
 
 		it( 'should unwrap single element by removing matching classes', () => {
 			test(
-				'<container:p>[<attribute:b view-priority="1" class="foo bar baz">test</attribute:b>]</container:p>',
+				'<container:p>[<attribute:b view-priority="1" class="bar baz foo">test</attribute:b>]</container:p>',
 				'<attribute:b view-priority="1" class="baz foo"></attribute:b>',
 				'<container:p>[<attribute:b view-priority="1" class="bar">test</attribute:b>]</container:p>'
 			);
@@ -267,9 +267,9 @@ describe( 'writer', () => {
 
 		it( 'should not unwrap single element when classes are different', () => {
 			test(
-				'<container:p>[<attribute:b view-priority="1" class="foo bar baz">test</attribute:b>]</container:p>',
+				'<container:p>[<attribute:b view-priority="1" class="bar baz foo">test</attribute:b>]</container:p>',
 				'<attribute:b view-priority="1" class="baz foo qux"></attribute:b>',
-				'<container:p>[<attribute:b view-priority="1" class="foo bar baz">test</attribute:b>]</container:p>'
+				'<container:p>[<attribute:b view-priority="1" class="bar baz foo">test</attribute:b>]</container:p>'
 			);
 		} );
 
@@ -279,18 +279,18 @@ describe( 'writer', () => {
 					'[<attribute:b view-priority="1" style="color:red;position:absolute;top:10px;">test</attribute:b>]' +
 				'</container:p>',
 				'<attribute:b view-priority="1" style="position: absolute;"></attribute:b>',
-				'<container:p>[<attribute:b view-priority="1" style="color:red;top:10px;">test</attribute:b>]</container:p>'
+				'<container:p>[<attribute:b view-priority="1" style="color:red;top:10px">test</attribute:b>]</container:p>'
 			);
 		} );
 
 		it( 'should not unwrap single element when styles are different', () => {
 			test(
 				'<container:p>' +
-					'[<attribute:b view-priority="1" style="color:red;position:absolute;top:10px;">test</attribute:b>]' +
+					'[<attribute:b view-priority="1" style="color:red;position:absolute;top:10px">test</attribute:b>]' +
 				'</container:p>',
 				'<attribute:b view-priority="1" style="position: relative;"></attribute:b>',
 				'<container:p>' +
-					'[<attribute:b view-priority="1" style="color:red;position:absolute;top:10px;">test</attribute:b>]' +
+					'[<attribute:b view-priority="1" style="color:red;position:absolute;top:10px">test</attribute:b>]' +
 				'</container:p>'
 			);
 		} );

+ 12 - 12
packages/ckeditor5-engine/tests/view/writer/wrap.js

@@ -227,26 +227,26 @@ describe( 'writer', () => {
 			test(
 				'<container:p>[<attribute:b view-priority="1" class="foo bar baz"></attribute:b>]</container:p>',
 				'<attribute:b view-priority="1" class="foo bar qux jax"></attribute:b>',
-				'<container:p>[<attribute:b view-priority="1" class="foo bar baz qux jax"></attribute:b>]</container:p>'
+				'<container:p>[<attribute:b view-priority="1" class="bar baz foo jax qux"></attribute:b>]</container:p>'
 			);
 		} );
 
 		it( 'should wrap single element by merging styles', () => {
 			test(
-				'<container:p>[<attribute:b view-priority="1" style="color:red; position: absolute;"></attribute:b>]</container:p>',
-				'<attribute:b view-priority="1" style="color:red; top: 20px;"></attribute:b>',
-				'<container:p>[<attribute:b view-priority="1" style="color:red;position:absolute;top:20px;"></attribute:b>]</container:p>'
+				'<container:p>[<attribute:b view-priority="1" style="color:red; position: absolute"></attribute:b>]</container:p>',
+				'<attribute:b view-priority="1" style="color:red; top: 20px"></attribute:b>',
+				'<container:p>[<attribute:b view-priority="1" style="color:red;position:absolute;top:20px"></attribute:b>]</container:p>'
 			);
 		} );
 
 		it( 'should not merge styles when they differ', () => {
 			test(
-				'<container:p>[<attribute:b view-priority="1" style="color:red;"></attribute:b>]</container:p>',
-				'<attribute:b view-priority="1" style="color:black;"></attribute:b>',
+				'<container:p>[<attribute:b view-priority="1" style="color:red"></attribute:b>]</container:p>',
+				'<attribute:b view-priority="1" style="color:black"></attribute:b>',
 				'<container:p>' +
 				'[' +
-					'<attribute:b view-priority="1" style="color:black;">' +
-						'<attribute:b view-priority="1" style="color:red;"></attribute:b>' +
+					'<attribute:b view-priority="1" style="color:black">' +
+						'<attribute:b view-priority="1" style="color:red"></attribute:b>' +
 					'</attribute:b>' +
 				']' +
 				'</container:p>'
@@ -255,12 +255,12 @@ describe( 'writer', () => {
 
 		it( 'should not merge single elements when they have different priority', () => {
 			test(
-				'<container:p>[<attribute:b view-priority="2" style="color:red;"></attribute:b>]</container:p>',
-				'<attribute:b view-priority="1" style="color:red;"></attribute:b>',
+				'<container:p>[<attribute:b view-priority="2" style="color:red"></attribute:b>]</container:p>',
+				'<attribute:b view-priority="1" style="color:red"></attribute:b>',
 				'<container:p>' +
 				'[' +
-					'<attribute:b view-priority="1" style="color:red;">' +
-						'<attribute:b view-priority="2" style="color:red;"></attribute:b>' +
+					'<attribute:b view-priority="1" style="color:red">' +
+						'<attribute:b view-priority="2" style="color:red"></attribute:b>' +
 					'</attribute:b>' +
 				']</container:p>'
 			);