Explorar el Código

Add support for border-width shorthand.

Maciej Gołaszewski hace 6 años
padre
commit
8b16811506

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

@@ -170,6 +170,15 @@ function parseRule( key, value, styleObject ) {
 			bottom: { style: bottom },
 			left: { style: left }
 		} );
+	} else if ( key === 'border-width' ) {
+		const { top, bottom, right, left } = getTopRightBottomLeftValues( value );
+
+		addStyle( styleObject, 'border', {
+			top: { width: top },
+			right: { width: right },
+			bottom: { width: bottom },
+			left: { width: left }
+		} );
 	} else {
 		addStyle( styleObject, key, value );
 	}

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

@@ -211,6 +211,52 @@ describe( 'Styles', () => {
 					} );
 				} );
 			} );
+
+			describe( 'border-width', () => {
+				it( 'should set all border widths (1 value defined)', () => {
+					styleProxy.setStyle( 'border-width:1px;' );
+
+					expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
+						top: { width: '1px' },
+						left: { width: '1px' },
+						bottom: { width: '1px' },
+						right: { width: '1px' }
+					} );
+				} );
+
+				it( 'should set all border widths (2 values defined)', () => {
+					styleProxy.setStyle( 'border-width:1px .34cm;' );
+
+					expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
+						top: { width: '1px' },
+						right: { width: '.34cm' },
+						bottom: { width: '1px' },
+						left: { width: '.34cm' }
+					} );
+				} );
+
+				it( 'should set all border widths (3 values defined)', () => {
+					styleProxy.setStyle( 'border-width:1px .34cm 90.1rem;' );
+
+					expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
+						top: { width: '1px' },
+						right: { width: '.34cm' },
+						bottom: { width: '90.1rem' },
+						left: { width: '.34cm' }
+					} );
+				} );
+
+				it( 'should set all border widths (4 values defined)', () => {
+					styleProxy.setStyle( 'border-width:1px .34cm 90.1rem thick;' );
+
+					expect( styleProxy.getModel( 'border' ) ).to.deep.equal( {
+						top: { width: '1px' },
+						right: { width: '.34cm' },
+						bottom: { width: '90.1rem' },
+						left: { width: 'thick' }
+					} );
+				} );
+			} );
 		} );
 
 		describe( 'unknown rules', () => {