浏览代码

Merge branch 'master' into i/6106

Aleksander Nowodzinski 5 年之前
父节点
当前提交
334990c989

+ 2 - 1
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellverticalalignmentcommand.js

@@ -26,7 +26,8 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
  *
  * * `'top'`
  * * `'bottom'`
- * * `'middle'`
+ *
+ * The `'middle'` value is default one so there's no need to set this value.
  *
  * @extends module:table/tablecellproperties/commands/tablecellpropertycommand
  */

+ 51 - 9
packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesediting.js

@@ -24,6 +24,8 @@ import TableCellBorderStyleCommand from './commands/tablecellborderstylecommand'
 import TableCellBorderColorCommand from './commands/tablecellbordercolorcommand';
 import TableCellBorderWidthCommand from './commands/tablecellborderwidthcommand';
 
+const VALIGN_VALUES_REG_EXP = /^(top|bottom)$/;
+
 /**
  * The table cell properties editing feature.
  *
@@ -92,7 +94,7 @@ export default class TableCellPropertiesEditing extends Plugin {
 		enableProperty( schema, conversion, 'backgroundColor', 'background-color' );
 		editor.commands.add( 'tableCellBackgroundColor', new TableCellBackgroundColorCommand( editor ) );
 
-		enableProperty( schema, conversion, 'verticalAlignment', 'vertical-align' );
+		enableVerticalAlignmentProperty( schema, conversion );
 		editor.commands.add( 'tableCellVerticalAlignment', new TableCellVerticalAlignmentCommand( editor ) );
 	}
 }
@@ -125,16 +127,9 @@ function enableHorizontalAlignmentProperty( schema, conversion ) {
 		model: {
 			name: 'tableCell',
 			key: 'horizontalAlignment',
-			values: [ 'left', 'right', 'center', 'justify' ]
+			values: [ 'right', 'center', 'justify' ]
 		},
 		view: {
-			// TODO: controversial one but I don't know if we want "default".
-			left: {
-				key: 'style',
-				value: {
-					'text-align': 'left'
-				}
-			},
 			right: {
 				key: 'style',
 				value: {
@@ -157,6 +152,53 @@ function enableHorizontalAlignmentProperty( schema, conversion ) {
 	} );
 }
 
+// Enables the `'verticalAlignment'` attribute for table cells.
+//
+// @param {module:engine/model/schema~Schema} schema
+// @param {module:engine/conversion/conversion~Conversion} conversion
+function enableVerticalAlignmentProperty( schema, conversion ) {
+	schema.extend( 'tableCell', {
+		allowAttributes: [ 'verticalAlignment' ]
+	} );
+
+	conversion.attributeToAttribute( {
+		model: {
+			name: 'tableCell',
+			key: 'verticalAlignment',
+			values: [ 'top', 'bottom' ]
+		},
+		view: {
+			top: {
+				key: 'style',
+				value: {
+					'vertical-align': 'top'
+				}
+			},
+			bottom: {
+				key: 'style',
+				value: {
+					'vertical-align': 'bottom'
+				}
+			}
+		}
+	} );
+
+	conversion.for( 'upcast' )
+		// Support for backwards compatibility and pasting from other sources.
+		.attributeToAttribute( {
+			view: {
+				attributes: {
+					valign: VALIGN_VALUES_REG_EXP
+				}
+			},
+			model: {
+				name: 'tableCell',
+				key: 'verticalAlignment',
+				value: viewElement => viewElement.getAttribute( 'valign' )
+			}
+		} );
+}
+
 // Enables conversion for an attribute for simple view-model mappings.
 //
 // @param {String} modelAttribute

+ 8 - 10
packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesui.js

@@ -15,13 +15,14 @@ import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextu
 import TableCellPropertiesView from './ui/tablecellpropertiesview';
 import tableCellProperties from './../../theme/icons/table-cell-properties.svg';
 import {
-	repositionContextualBalloon,
+	colorFieldValidator,
 	getBalloonCellPositionData,
 	getLocalizedColorErrorText,
 	getLocalizedLengthErrorText,
-	colorFieldValidator,
+	defaultColors,
 	lengthFieldValidator,
-	defaultColors
+	lineWidthFieldValidator,
+	repositionContextualBalloon
 } from '../ui/utils';
 import {
 	getLocalizedColorOptions,
@@ -29,9 +30,6 @@ import {
 } from '@ckeditor/ckeditor5-ui/src/colorgrid/utils';
 import { debounce } from 'lodash-es';
 
-const DEFAULT_BORDER_STYLE = 'none';
-const DEFAULT_HORIZONTAL_ALIGNMENT = 'left';
-const DEFAULT_VERTICAL_ALIGNMENT = 'middle';
 const ERROR_TEXT_TIMEOUT = 500;
 
 /**
@@ -208,7 +206,7 @@ export default class TableCellPropertiesUI extends Plugin {
 			viewField: view.borderWidthInput,
 			commandName: 'tableCellBorderWidth',
 			errorText: lengthErrorText,
-			validator: lengthFieldValidator
+			validator: lineWidthFieldValidator
 		} ) );
 
 		view.on( 'change:padding', this._getValidatedPropertyChangeCallback( {
@@ -259,15 +257,15 @@ export default class TableCellPropertiesUI extends Plugin {
 		const commands = this.editor.commands;
 
 		this.view.set( {
-			borderStyle: commands.get( 'tableCellBorderStyle' ).value || DEFAULT_BORDER_STYLE,
+			borderStyle: commands.get( 'tableCellBorderStyle' ).value || '',
 			borderColor: commands.get( 'tableCellBorderColor' ).value || '',
 			borderWidth: commands.get( 'tableCellBorderWidth' ).value || '',
 			width: commands.get( 'tableCellWidth' ).value || '',
 			height: commands.get( 'tableCellHeight' ).value || '',
 			padding: commands.get( 'tableCellPadding' ).value || '',
 			backgroundColor: commands.get( 'tableCellBackgroundColor' ).value || '',
-			horizontalAlignment: commands.get( 'tableCellHorizontalAlignment' ).value || DEFAULT_HORIZONTAL_ALIGNMENT,
-			verticalAlignment: commands.get( 'tableCellVerticalAlignment' ).value || DEFAULT_VERTICAL_ALIGNMENT,
+			horizontalAlignment: commands.get( 'tableCellHorizontalAlignment' ).value || '',
+			verticalAlignment: commands.get( 'tableCellVerticalAlignment' ).value || ''
 		} );
 	}
 

+ 23 - 18
packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -79,10 +79,10 @@ export default class TableCellPropertiesView extends View {
 			 * The value of the cell border style.
 			 *
 			 * @observable
-			 * @default 'none'
+			 * @default ''
 			 * @member #borderStyle
 			 */
-			borderStyle: 'none',
+			borderStyle: '',
 
 			/**
 			 * The value of the cell border width style.
@@ -142,19 +142,19 @@ export default class TableCellPropertiesView extends View {
 			 * The value of the horizontal text alignment style.
 			 *
 			 * @observable
-			 * @default 'left'
+			 * @default ''
 			 * @member #horizontalAlignment
 			 */
-			horizontalAlignment: 'left',
+			horizontalAlignment: '',
 
 			/**
 			 * The value of the vertical text alignment style.
 			 *
 			 * @observable
-			 * @default 'middle'
+			 * @default ''
 			 * @member #verticalAlignment
 			 */
-			verticalAlignment: 'middle'
+			verticalAlignment: ''
 		} );
 
 		/**
@@ -478,7 +478,7 @@ export default class TableCellPropertiesView extends View {
 		} );
 
 		borderStyleDropdown.view.buttonView.bind( 'label' ).to( this, 'borderStyle', value => {
-			return styleLabels[ value ];
+			return styleLabels[ value ? value : 'none' ];
 		} );
 
 		borderStyleDropdown.view.on( 'execute', evt => {
@@ -493,13 +493,11 @@ export default class TableCellPropertiesView extends View {
 
 		borderWidthInput.set( {
 			label: t( 'Width' ),
-			class: 'ck-table-form__border-width',
+			class: 'ck-table-form__border-width'
 		} );
 
 		borderWidthInput.view.bind( 'value' ).to( this, 'borderWidth' );
-		borderWidthInput.bind( 'isEnabled' ).to( this, 'borderStyle', value => {
-			return value !== 'none';
-		} );
+		borderWidthInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet );
 		borderWidthInput.view.on( 'input', () => {
 			this.borderWidth = borderWidthInput.view.element.value;
 		} );
@@ -514,10 +512,7 @@ export default class TableCellPropertiesView extends View {
 		} );
 
 		borderColorInput.view.bind( 'value' ).to( this, 'borderColor' );
-
-		borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', value => {
-			return value !== 'none';
-		} );
+		borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet );
 
 		borderColorInput.view.on( 'input', () => {
 			this.borderColor = borderColorInput.view.value;
@@ -526,7 +521,7 @@ export default class TableCellPropertiesView extends View {
 		// Reset the border color and width fields when style is "none".
 		// https://github.com/ckeditor/ckeditor5/issues/6227
 		this.on( 'change:borderStyle', ( evt, name, value ) => {
-			if ( value === 'none' ) {
+			if ( !isBorderStyleSet( value ) ) {
 				this.borderColor = '';
 				this.borderWidth = '';
 			}
@@ -698,7 +693,10 @@ export default class TableCellPropertiesView extends View {
 			icons: ALIGNMENT_ICONS,
 			toolbar: horizontalAlignmentToolbar,
 			labels: this._horizontalAlignmentLabels,
-			propertyName: 'horizontalAlignment'
+			propertyName: 'horizontalAlignment',
+			nameToValue: name => {
+				return name === 'left' ? '' : name;
+			}
 		} );
 
 		// -- Vertical -----------------------------------------------------
@@ -715,7 +713,10 @@ export default class TableCellPropertiesView extends View {
 			icons: ALIGNMENT_ICONS,
 			toolbar: verticalAlignmentToolbar,
 			labels: this._verticalAlignmentLabels,
-			propertyName: 'verticalAlignment'
+			propertyName: 'verticalAlignment',
+			nameToValue: name => {
+				return name === 'middle' ? '' : name;
+			}
 		} );
 
 		return {
@@ -806,3 +807,7 @@ export default class TableCellPropertiesView extends View {
 		};
 	}
 }
+
+function isBorderStyleSet( value ) {
+	return !!value;
+}

+ 6 - 7
packages/ckeditor5-table/src/tableproperties/tablepropertiesui.js

@@ -15,12 +15,13 @@ import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextu
 import TablePropertiesView from './ui/tablepropertiesview';
 import tableProperties from './../../theme/icons/table-properties.svg';
 import {
-	repositionContextualBalloon,
+	colorFieldValidator,
 	getBalloonTablePositionData,
 	getLocalizedColorErrorText,
 	getLocalizedLengthErrorText,
-	colorFieldValidator,
 	lengthFieldValidator,
+	lineWidthFieldValidator,
+	repositionContextualBalloon,
 	defaultColors,
 } from '../ui/utils';
 import {
@@ -29,8 +30,6 @@ import {
 } from '@ckeditor/ckeditor5-ui/src/colorgrid/utils';
 import { debounce } from 'lodash-es';
 
-const DEFAULT_BORDER_STYLE = 'none';
-const DEFAULT_ALIGNMENT = '';
 const ERROR_TEXT_TIMEOUT = 500;
 
 /**
@@ -207,7 +206,7 @@ export default class TablePropertiesUI extends Plugin {
 			viewField: view.borderWidthInput,
 			commandName: 'tableBorderWidth',
 			errorText: lengthErrorText,
-			validator: lengthFieldValidator
+			validator: lineWidthFieldValidator
 		} ) );
 
 		view.on( 'change:backgroundColor', this._getValidatedPropertyChangeCallback( {
@@ -250,13 +249,13 @@ export default class TablePropertiesUI extends Plugin {
 		const commands = this.editor.commands;
 
 		this.view.set( {
-			borderStyle: commands.get( 'tableBorderStyle' ).value || DEFAULT_BORDER_STYLE,
+			borderStyle: commands.get( 'tableBorderStyle' ).value || '',
 			borderColor: commands.get( 'tableBorderColor' ).value || '',
 			borderWidth: commands.get( 'tableBorderWidth' ).value || '',
 			backgroundColor: commands.get( 'tableBackgroundColor' ).value || '',
 			width: commands.get( 'tableWidth' ).value || '',
 			height: commands.get( 'tableHeight' ).value || '',
-			alignment: commands.get( 'tableAlignment' ).value || DEFAULT_ALIGNMENT,
+			alignment: commands.get( 'tableAlignment' ).value || '',
 		} );
 	}
 

+ 11 - 12
packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.js

@@ -71,10 +71,10 @@ export default class TablePropertiesView extends View {
 			 * The value of the border style.
 			 *
 			 * @observable
-			 * @default 'none'
+			 * @default ''
 			 * @member #borderStyle
 			 */
-			borderStyle: 'none',
+			borderStyle: '',
 
 			/**
 			 * The value of the border width style.
@@ -425,7 +425,7 @@ export default class TablePropertiesView extends View {
 		} );
 
 		borderStyleDropdown.view.buttonView.bind( 'label' ).to( this, 'borderStyle', value => {
-			return styleLabels[ value ];
+			return styleLabels[ value ? value : 'none' ];
 		} );
 
 		borderStyleDropdown.view.on( 'execute', evt => {
@@ -440,13 +440,11 @@ export default class TablePropertiesView extends View {
 
 		borderWidthInput.set( {
 			label: t( 'Width' ),
-			class: 'ck-table-form__border-width',
+			class: 'ck-table-form__border-width'
 		} );
 
 		borderWidthInput.view.bind( 'value' ).to( this, 'borderWidth' );
-		borderWidthInput.bind( 'isEnabled' ).to( this, 'borderStyle', value => {
-			return value !== 'none';
-		} );
+		borderWidthInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet );
 		borderWidthInput.view.on( 'input', () => {
 			this.borderWidth = borderWidthInput.view.element.value;
 		} );
@@ -461,10 +459,7 @@ export default class TablePropertiesView extends View {
 		} );
 
 		borderColorInput.view.bind( 'value' ).to( this, 'borderColor' );
-
-		borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', value => {
-			return value !== 'none';
-		} );
+		borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', isBorderStyleSet );
 
 		borderColorInput.view.on( 'input', () => {
 			this.borderColor = borderColorInput.view.value;
@@ -473,7 +468,7 @@ export default class TablePropertiesView extends View {
 		// Reset the border color and width fields when style is "none".
 		// https://github.com/ckeditor/ckeditor5/issues/6227
 		this.on( 'change:borderStyle', ( evt, name, value ) => {
-			if ( value === 'none' ) {
+			if ( !isBorderStyleSet( value ) ) {
 				this.borderColor = '';
 				this.borderWidth = '';
 			}
@@ -695,3 +690,7 @@ export default class TablePropertiesView extends View {
 		};
 	}
 }
+
+function isBorderStyleSet( value ) {
+	return !!value;
+}

+ 29 - 9
packages/ckeditor5-table/src/ui/utils.js

@@ -12,7 +12,7 @@ import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import Model from '@ckeditor/ckeditor5-ui/src/model';
 import ColorInputView from './colorinputview';
-import { isColor, isLength } from '@ckeditor/ckeditor5-engine/src/view/styles/utils';
+import { isColor, isLength, isPercentage } from '@ckeditor/ckeditor5-engine/src/view/styles/utils';
 import { getTableWidgetAncestor } from '../utils';
 import { findAncestor } from '../commands/utils';
 
@@ -158,6 +158,7 @@ export function colorFieldValidator( value ) {
  * Otherwise, `false` is returned.
  *
  * See {@link module:engine/view/styles/utils~isLength}.
+ * See {@link module:engine/view/styles/utils~isPercentage}.
  *
  * @param {String} value
  * @returns {Boolean}
@@ -165,6 +166,21 @@ export function colorFieldValidator( value ) {
 export function lengthFieldValidator( value ) {
 	value = value.trim();
 
+	return isEmpty( value ) || isNumberString( value ) || isLength( value ) || isPercentage( value );
+}
+
+/**
+ * Returns `true` when the passed value is an empty string, number without unit or a valid CSS length expression.
+ * Otherwise, `false` is returned.
+ *
+ * See {@link module:engine/view/styles/utils~isLength}.
+ *
+ * @param {String} value
+ * @returns {Boolean}
+ */
+export function lineWidthFieldValidator( value ) {
+	value = value.trim();
+
 	return isEmpty( value ) || isNumberString( value ) || isLength( value );
 }
 
@@ -172,7 +188,7 @@ export function lengthFieldValidator( value ) {
  * Generates item definitions for a UI dropdown that allows changing the border style of a table or a table cell.
  *
  * @param {module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView|
- * module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView}
+ * module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView} view
  * @returns {Iterable.<module:ui/dropdown/utils~ListDropdownItemDefinition>}
  */
 export function getBorderStyleDefinitions( view ) {
@@ -183,15 +199,19 @@ export function getBorderStyleDefinitions( view ) {
 		const definition = {
 			type: 'button',
 			model: new Model( {
-				_borderStyleValue: style,
+				_borderStyleValue: style === 'none' ? '' : style,
 				label: styleLabels[ style ],
-				withText: true,
+				withText: true
 			} )
 		};
 
-		definition.model.bind( 'isOn' ).to( view, 'borderStyle', value => {
-			return value === style;
-		} );
+		if ( style === 'none' ) {
+			definition.model.bind( 'isOn' ).to( view, 'borderStyle', value => !value );
+		} else {
+			definition.model.bind( 'isOn' ).to( view, 'borderStyle', value => {
+				return value === style;
+			} );
+		}
 
 		itemDefinitions.add( definition );
 	}
@@ -213,9 +233,9 @@ export function getBorderStyleDefinitions( view ) {
  * @param {module:ui/toolbar/toolbarview~ToolbarView} options.toolbar
  * @param {Object.<String,String>} labels
  * @param {String} propertyName
- * @param {Function} [nameToValue] Optional function that maps button name to value. By default names are the same as values.
+ * @param {Function} nameToValue Function that maps button name to value. By default names are the same as values.
  */
-export function fillToolbar( { view, icons, toolbar, labels, propertyName, nameToValue = name => name } ) {
+export function fillToolbar( { view, icons, toolbar, labels, propertyName, nameToValue } ) {
 	for ( const name in labels ) {
 		const button = new ButtonView( view.locale );
 

+ 56 - 7
packages/ckeditor5-table/tests/tablecellproperties/tablecellpropertiesediting.js

@@ -600,6 +600,20 @@ describe( 'table cell properties', () => {
 
 					expect( tableCell.getAttribute( 'backgroundColor' ) ).to.equal( '#f00' );
 				} );
+
+				it( 'should upcast from background shorthand', () => {
+					editor.setData( '<table><tr><td style="background:#f00 center center">foo</td></tr></table>' );
+					const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
+
+					expect( tableCell.getAttribute( 'backgroundColor' ) ).to.equal( '#f00' );
+				} );
+
+				it( 'should upcast from background shorthand (rbg color value with spaces)', () => {
+					editor.setData( '<table><tr><td style="background:rgb(253, 253, 119) center center">foo</td></tr></table>' );
+					const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
+
+					expect( tableCell.getAttribute( 'backgroundColor' ) ).to.equal( 'rgb(253, 253, 119)' );
+				} );
 			} );
 
 			describe( 'downcast conversion', () => {
@@ -671,11 +685,11 @@ describe( 'table cell properties', () => {
 			} );
 
 			describe( 'upcast conversion', () => {
-				it( 'should upcast text-align:left style', () => {
+				it( 'should not upcast text-align:left style', () => {
 					editor.setData( '<table><tr><td style="text-align:left">foo</td></tr></table>' );
 					const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
 
-					expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.equal( 'left' );
+					expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.be.undefined;
 				} );
 
 				it( 'should upcast text-align:right style', () => {
@@ -737,10 +751,10 @@ describe( 'table cell properties', () => {
 					assertTableCellStyle( editor, '' );
 				} );
 
-				it( 'should downcast horizontalAlignment=left', () => {
+				it( 'should not downcast horizontalAlignment=left', () => {
 					model.change( writer => writer.setAttribute( 'horizontalAlignment', 'left', tableCell ) );
 
-					assertTableCellStyle( editor, 'text-align:left;' );
+					assertTableCellStyle( editor );
 				} );
 
 				it( 'should downcast horizontalAlignment=right', () => {
@@ -769,12 +783,47 @@ describe( 'table cell properties', () => {
 			} );
 
 			describe( 'upcast conversion', () => {
-				it( 'should upcast vertical-align', () => {
+				it( 'should upcast "top" vertical-align', () => {
 					editor.setData( '<table><tr><td style="vertical-align:top">foo</td></tr></table>' );
 					const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
 
 					expect( tableCell.getAttribute( 'verticalAlignment' ) ).to.equal( 'top' );
 				} );
+
+				it( 'should upcast "bottom" vertical-align', () => {
+					editor.setData( '<table><tr><td style="vertical-align:bottom">foo</td></tr></table>' );
+					const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
+
+					expect( tableCell.getAttribute( 'verticalAlignment' ) ).to.equal( 'bottom' );
+				} );
+
+				it( 'should not upcast "middle" vertical-align', () => {
+					editor.setData( '<table><tr><td style="vertical-align:middle">foo</td></tr></table>' );
+					const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
+
+					expect( tableCell.getAttribute( 'verticalAlignment' ) ).to.be.undefined;
+				} );
+
+				it( 'should upcast "top" valign attribute', () => {
+					editor.setData( '<table><tr><td valign="top">foo</td></tr></table>' );
+					const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
+
+					expect( tableCell.getAttribute( 'verticalAlignment' ) ).to.equal( 'top' );
+				} );
+
+				it( 'should upcast "bottom" valign attribute', () => {
+					editor.setData( '<table><tr><td valign="bottom">foo</td></tr></table>' );
+					const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
+
+					expect( tableCell.getAttribute( 'verticalAlignment' ) ).to.equal( 'bottom' );
+				} );
+
+				it( 'should not upcast "middle" valign attribute', () => {
+					editor.setData( '<table><tr><td valign="middle">foo</td></tr></table>' );
+					const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
+
+					expect( tableCell.getAttribute( 'verticalAlignment' ) ).to.be.undefined;
+				} );
 			} );
 
 			describe( 'downcast conversion', () => {
@@ -815,9 +864,9 @@ describe( 'table cell properties', () => {
 				} );
 
 				it( 'should downcast verticalAlignment', () => {
-					model.change( writer => writer.setAttribute( 'verticalAlignment', 'middle', tableCell ) );
+					model.change( writer => writer.setAttribute( 'verticalAlignment', 'top', tableCell ) );
 
-					assertTableCellStyle( editor, 'vertical-align:middle;' );
+					assertTableCellStyle( editor, 'vertical-align:top;' );
 				} );
 			} );
 		} );

+ 3 - 3
packages/ckeditor5-table/tests/tablecellproperties/tablecellpropertiesui.js

@@ -572,15 +572,15 @@ describe( 'table cell properties', () => {
 
 					expect( contextualBalloon.visibleView ).to.equal( tableCellPropertiesView );
 					expect( tableCellPropertiesView ).to.include( {
-						borderStyle: 'none',
+						borderStyle: '',
 						borderColor: '',
 						borderWidth: '',
 						width: '',
 						height: '',
 						padding: '',
 						backgroundColor: '',
-						horizontalAlignment: 'left',
-						verticalAlignment: 'middle'
+						horizontalAlignment: '',
+						verticalAlignment: ''
 					} );
 				} );
 			} );

+ 8 - 8
packages/ckeditor5-table/tests/tablecellproperties/ui/tablecellpropertiesview.js

@@ -71,13 +71,13 @@ describe( 'table cell properties', () => {
 
 			it( 'should define the public data interface (observable properties)', () => {
 				expect( view ).to.include( {
-					borderStyle: 'none',
+					borderStyle: '',
 					borderWidth: '',
 					borderColor: '',
 					padding: '',
 					backgroundColor: '',
-					horizontalAlignment: 'left',
-					verticalAlignment: 'middle'
+					horizontalAlignment: '',
+					verticalAlignment: ''
 				} );
 			} );
 
@@ -151,7 +151,7 @@ describe( 'table cell properties', () => {
 
 						it( 'should change #borderStyle when executed', () => {
 							labeledDropdown.view.listView.items.first.children.first.fire( 'execute' );
-							expect( view.borderStyle ).to.equal( 'none' );
+							expect( view.borderStyle ).to.equal( '' );
 
 							labeledDropdown.view.listView.items.last.children.first.fire( 'execute' );
 							expect( view.borderStyle ).to.equal( 'outset' );
@@ -170,7 +170,7 @@ describe( 'table cell properties', () => {
 							view.borderWidth = '1px';
 							view.borderColor = 'red';
 
-							view.borderStyle = 'none';
+							view.borderStyle = '';
 
 							expect( view.borderColor ).to.equal( '' );
 							expect( view.borderWidth ).to.equal( '' );
@@ -199,7 +199,7 @@ describe( 'table cell properties', () => {
 						} );
 
 						it( 'should be enabled only when #borderStyle is different than "none"', () => {
-							view.borderStyle = 'none';
+							view.borderStyle = '';
 							expect( labeledInput.isEnabled ).to.be.false;
 
 							view.borderStyle = 'dotted';
@@ -257,7 +257,7 @@ describe( 'table cell properties', () => {
 						} );
 
 						it( 'should be enabled only when #borderStyle is different than "none"', () => {
-							view.borderStyle = 'none';
+							view.borderStyle = '';
 							expect( labeledInput.isEnabled ).to.be.false;
 
 							view.borderStyle = 'dotted';
@@ -493,7 +493,7 @@ describe( 'table cell properties', () => {
 							expect( toolbar.items.last.isOn ).to.be.true;
 
 							toolbar.items.first.fire( 'execute' );
-							expect( view.horizontalAlignment ).to.equal( 'left' );
+							expect( view.horizontalAlignment ).to.equal( '' );
 							expect( toolbar.items.last.isOn ).to.be.false;
 							expect( toolbar.items.first.isOn ).to.be.true;
 						} );

+ 7 - 0
packages/ckeditor5-table/tests/tableproperties/tablepropertiesediting.js

@@ -559,6 +559,13 @@ describe( 'table properties', () => {
 
 					expect( table.getAttribute( 'backgroundColor' ) ).to.equal( '#f00' );
 				} );
+
+				it( 'should upcast from background shorthand (rbg color value with spaces)', () => {
+					editor.setData( '<table style="background:rgb(253, 253, 119) center center"><tr><td>foo</td></tr></table>' );
+					const table = model.document.getRoot().getNodeByPath( [ 0 ] );
+
+					expect( table.getAttribute( 'backgroundColor' ) ).to.equal( 'rgb(253, 253, 119)' );
+				} );
 			} );
 
 			describe( 'downcast conversion', () => {

+ 1 - 1
packages/ckeditor5-table/tests/tableproperties/tablepropertiesui.js

@@ -524,7 +524,7 @@ describe( 'table properties', () => {
 
 					expect( contextualBalloon.visibleView ).to.equal( tablePropertiesView );
 					expect( tablePropertiesView ).to.include( {
-						borderStyle: 'none',
+						borderStyle: '',
 						borderColor: '',
 						borderWidth: '',
 						backgroundColor: '',

+ 5 - 5
packages/ckeditor5-table/tests/tableproperties/ui/tablepropertiesview.js

@@ -71,7 +71,7 @@ describe( 'table properties', () => {
 
 			it( 'should define the public data interface (observable properties)', () => {
 				expect( view ).to.include( {
-					borderStyle: 'none',
+					borderStyle: '',
 					borderWidth: '',
 					borderColor: '',
 					backgroundColor: '',
@@ -151,7 +151,7 @@ describe( 'table properties', () => {
 
 						it( 'should change #borderStyle when executed', () => {
 							labeledDropdown.view.listView.items.first.children.first.fire( 'execute' );
-							expect( view.borderStyle ).to.equal( 'none' );
+							expect( view.borderStyle ).to.equal( '' );
 
 							labeledDropdown.view.listView.items.last.children.first.fire( 'execute' );
 							expect( view.borderStyle ).to.equal( 'outset' );
@@ -170,7 +170,7 @@ describe( 'table properties', () => {
 							view.borderWidth = '1px';
 							view.borderColor = 'red';
 
-							view.borderStyle = 'none';
+							view.borderStyle = '';
 
 							expect( view.borderColor ).to.equal( '' );
 							expect( view.borderWidth ).to.equal( '' );
@@ -199,7 +199,7 @@ describe( 'table properties', () => {
 						} );
 
 						it( 'should be enabled only when #borderStyle is different than "none"', () => {
-							view.borderStyle = 'none';
+							view.borderStyle = '';
 							expect( labeledInput.isEnabled ).to.be.false;
 
 							view.borderStyle = 'dotted';
@@ -261,7 +261,7 @@ describe( 'table properties', () => {
 						} );
 
 						it( 'should be enabled only when #borderStyle is different than "none"', () => {
-							view.borderStyle = 'none';
+							view.borderStyle = '';
 							expect( labeledInput.isEnabled ).to.be.false;
 
 							view.borderStyle = 'dotted';

+ 36 - 0
packages/ckeditor5-table/tests/ui/utils.js

@@ -22,6 +22,7 @@ import {
 	getLocalizedColorErrorText,
 	getLocalizedLengthErrorText,
 	lengthFieldValidator,
+	lineWidthFieldValidator,
 	colorFieldValidator,
 	fillToolbar
 } from '../../src/ui/utils';
@@ -245,6 +246,7 @@ describe( 'UI Utils', () => {
 			expect( lengthFieldValidator( '1px' ) ).to.be.true;
 			expect( lengthFieldValidator( '12em' ) ).to.be.true;
 			expect( lengthFieldValidator( ' 12em ' ) ).to.be.true;
+			expect( lengthFieldValidator( '45%' ) ).to.be.true;
 		} );
 
 		it( 'should pass for number without unit', () => {
@@ -265,6 +267,40 @@ describe( 'UI Utils', () => {
 		} );
 	} );
 
+	describe( 'lineWidthFieldValidator()', () => {
+		it( 'should pass for an empty value', () => {
+			expect( lineWidthFieldValidator( '' ) ).to.be.true;
+		} );
+
+		it( 'should pass for white spaces', () => {
+			expect( lineWidthFieldValidator( '  ' ) ).to.be.true;
+		} );
+
+		it( 'should pass for lengths', () => {
+			expect( lineWidthFieldValidator( '1px' ) ).to.be.true;
+			expect( lineWidthFieldValidator( '12em' ) ).to.be.true;
+			expect( lineWidthFieldValidator( ' 12em ' ) ).to.be.true;
+		} );
+
+		it( 'should pass for number without unit', () => {
+			expect( lineWidthFieldValidator( '1' ) ).to.be.true;
+			expect( lineWidthFieldValidator( '12.1' ) ).to.be.true;
+			expect( lineWidthFieldValidator( '0.125 ' ) ).to.be.true;
+		} );
+
+		it( 'should not pass for invalid number values', () => {
+			expect( lineWidthFieldValidator( '.1 ' ) ).to.be.false;
+			expect( lineWidthFieldValidator( '45. ' ) ).to.be.false;
+			expect( lineWidthFieldValidator( '45.1.1 ' ) ).to.be.false;
+			expect( lineWidthFieldValidator( '45%' ) ).to.be.false;
+		} );
+
+		it( 'should pass for lengths surrounded by white spaces', () => {
+			expect( lineWidthFieldValidator( '3px ' ) ).to.be.true;
+			expect( lineWidthFieldValidator( ' 12em ' ) ).to.be.true;
+		} );
+	} );
+
 	describe( 'getBorderStyleDefinitions()', () => {
 		let view, locale, definitions;