Przeglądaj źródła

Convert borders to three separate values.

Maciej Gołaszewski 6 lat temu
rodzic
commit
879e2a18b4

+ 32 - 0
packages/ckeditor5-engine/src/view/styles.js

@@ -71,15 +71,37 @@ export default class Styles {
 		 */
 		this.normalizers = new Map();
 
+		// Border shorthand.
 		this.normalizers.set( 'border', normalizeBorder );
+
+		// Border-position shorthands.
 		this.normalizers.set( 'border-top', getBorderPositionNormalizer( 'top' ) );
 		this.normalizers.set( 'border-right', getBorderPositionNormalizer( 'right' ) );
 		this.normalizers.set( 'border-bottom', getBorderPositionNormalizer( 'bottom' ) );
 		this.normalizers.set( 'border-left', getBorderPositionNormalizer( 'left' ) );
+
+		// Border-property shorthands.
 		this.normalizers.set( 'border-color', getBorderPropertyNormalizer( 'color' ) );
 		this.normalizers.set( 'border-width', getBorderPropertyNormalizer( 'width' ) );
 		this.normalizers.set( 'border-style', getBorderPropertyNormalizer( 'style' ) );
 
+		// Border longhands.
+		this.normalizers.set( 'border-top-color', getBorderPropertyPositionNormalizer( 'color', 'top' ) );
+		this.normalizers.set( 'border-top-style', getBorderPropertyPositionNormalizer( 'style', 'top' ) );
+		this.normalizers.set( 'border-top-width', getBorderPropertyPositionNormalizer( 'width', 'top' ) );
+
+		this.normalizers.set( 'border-right-color', getBorderPropertyPositionNormalizer( 'color', 'right' ) );
+		this.normalizers.set( 'border-right-style', getBorderPropertyPositionNormalizer( 'style', 'right' ) );
+		this.normalizers.set( 'border-right-width', getBorderPropertyPositionNormalizer( 'width', 'right' ) );
+
+		this.normalizers.set( 'border-bottom-color', getBorderPropertyPositionNormalizer( 'color', 'bottom' ) );
+		this.normalizers.set( 'border-bottom-style', getBorderPropertyPositionNormalizer( 'style', 'bottom' ) );
+		this.normalizers.set( 'border-bottom-width', getBorderPropertyPositionNormalizer( 'width', 'bottom' ) );
+
+		this.normalizers.set( 'border-left-color', getBorderPropertyPositionNormalizer( 'color', 'left' ) );
+		this.normalizers.set( 'border-left-style', getBorderPropertyPositionNormalizer( 'style', 'left' ) );
+		this.normalizers.set( 'border-left-width', getBorderPropertyPositionNormalizer( 'width', 'left' ) );
+
 		this.normalizers.set( 'background', normalizeBackground );
 
 		this.normalizers.set( 'margin', getPositionShorthandNormalizer( 'margin' ) );
@@ -473,6 +495,16 @@ function getBorderPropertyNormalizer( propertyName ) {
 	return value => ( { border: toBorderPropertyShorthand( value, propertyName ) } );
 }
 
+function getBorderPropertyPositionNormalizer( property, side ) {
+	return value => ( {
+		border: {
+			[ property ]: {
+				[ side ]: value
+			}
+		}
+	} );
+}
+
 function borderPositionExtractor( which ) {
 	return styles => {
 		const border = styles.getNormalized( 'border' );

+ 2 - 2
packages/ckeditor5-engine/tests/conversion/viewconsumable.js

@@ -593,7 +593,7 @@ describe( 'ViewConsumable', () => {
 			} );
 		} );
 
-		it( 'should return valse when testing style shorthand... 1', () => {
+		it( 'should return false when testing style shorthand for consumed longhand', () => {
 			viewConsumable.add( el, { styles: [ 'margin' ] } );
 
 			expect( viewConsumable.test( el, { styles: 'margin' } ) ).to.be.true;
@@ -604,7 +604,7 @@ describe( 'ViewConsumable', () => {
 			expect( viewConsumable.test( el, { styles: 'margin-left' } ) ).to.be.false;
 		} );
 
-		it( 'should return valse when testing style shorthand... 1', () => {
+		it( 'should return false when testing style shorthand for consumed shorthand', () => {
 			viewConsumable.add( el, { styles: [ 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' ] } );
 
 			expect( viewConsumable.test( el, { styles: 'margin-top' } ) ).to.be.true;

+ 31 - 0
packages/ckeditor5-engine/tests/view/styles.js

@@ -257,6 +257,20 @@ describe( 'Styles', () => {
 				} );
 			} );
 
+			it( 'should parse border longhand', () => {
+				styles.setStyle( 'border-color: #f00 #ba2;' +
+					'border-style: solid;' +
+					'border-width: 1px;' +
+					'border-bottom-width: 2px;' +
+					'border-right-style: dotted;' );
+
+				expect( styles.getNormalized( 'border' ) ).to.deep.equal( {
+					color: { top: '#f00', right: '#ba2', bottom: '#f00', left: '#ba2' },
+					style: { top: 'solid', right: 'dotted', bottom: 'solid', left: 'solid' },
+					width: { top: '1px', right: '1px', bottom: '2px', left: '1px' }
+				} );
+			} );
+
 			it( 'should output inline shorthand rules #1', () => {
 				styles.setStyle( 'border:1px solid blue;' );
 
@@ -586,6 +600,23 @@ describe( 'Styles', () => {
 					expect( styles.getInlineProperty( 'border-left' ) ).to.equal( 'none' );
 				} );
 			} );
+
+			describe( 'getStyleNames() - border', () => {
+				it( 'should set all border colors (1 value defined)', () => {
+					styles.setStyle( '    border-color: deeppink deepskyblue;\n' +
+						'    border-style: solid;\n' +
+						'    border-width: 1px;\n' +
+						'    border-bottom-width: 2px;\n' +
+						'    border-right-style: dotted;' );
+
+					expect( styles.getStyleNames() ).to.deep.equal( [
+						'border-top',
+						'border-right',
+						'border-bottom',
+						'border-left'
+					] );
+				} );
+			} );
 		} );
 
 		describe( 'margin', () => {