Browse Source

Add support for border-color shorthand.

Maciej Gołaszewski 6 years ago
parent
commit
aba4f762b9

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

@@ -118,6 +118,16 @@ function parseStyle( string, styleObject = {} ) {
 	return styleObject;
 }
 
+function getTopRightBottomLeftValues( value ) {
+	const values = value.split( ' ' );
+
+	const top = values[ 0 ];
+	const bottom = values[ 2 ] || top;
+	const right = values[ 1 ] || top;
+	const left = values[ 3 ] || right;
+	return { top, bottom, right, left };
+}
+
 function parseRule( key, value, styleObject ) {
 	if ( isPlainObject( value ) ) {
 		addStyle( styleObject, key, value );
@@ -142,6 +152,15 @@ function parseRule( key, value, styleObject ) {
 		border[ which ] = parseBorderAttribute( value );
 
 		addStyle( styleObject, 'border', border );
+	} else if ( key === 'border-color' ) {
+		const { top, bottom, right, left } = getTopRightBottomLeftValues( value );
+
+		addStyle( styleObject, 'border', {
+			top: { color: top },
+			right: { color: right },
+			bottom: { color: bottom },
+			left: { color: left }
+		} );
 	} else {
 		addStyle( styleObject, key, value );
 	}

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

@@ -119,6 +119,52 @@ describe( 'Styles', () => {
 				expect( styleProxy.getInlineRule( 'border-bottom' ) ).to.equal( '1px solid blue' );
 				expect( styleProxy.getInlineRule( 'border-left' ) ).to.equal( '1px solid blue' );
 			} );
+
+			describe( 'border-color', () => {
+				it( 'should set all border colors (1 value defined)', () => {
+					styleProxy.setStyle( 'border-color:cyan;' );
+
+					expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
+						top: { color: 'cyan' },
+						left: { color: 'cyan' },
+						bottom: { color: 'cyan' },
+						right: { color: 'cyan' }
+					} );
+				} );
+
+				it( 'should set all border colors (2 values defined)', () => {
+					styleProxy.setStyle( 'border-color:cyan magenta;' );
+
+					expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
+						top: { color: 'cyan' },
+						right: { color: 'magenta' },
+						bottom: { color: 'cyan' },
+						left: { color: 'magenta' }
+					} );
+				} );
+
+				it( 'should set all border colors (3 values defined)', () => {
+					styleProxy.setStyle( 'border-color:cyan magenta pink;' );
+
+					expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
+						top: { color: 'cyan' },
+						right: { color: 'magenta' },
+						bottom: { color: 'pink' },
+						left: { color: 'magenta' }
+					} );
+				} );
+
+				it( 'should set all border colors (4 values defined)', () => {
+					styleProxy.setStyle( 'border-color:cyan magenta pink beige;' );
+
+					expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
+						top: { color: 'cyan' },
+						right: { color: 'magenta' },
+						bottom: { color: 'pink' },
+						left: { color: 'beige' }
+					} );
+				} );
+			} );
 		} );
 
 		describe( 'unknown rules', () => {