8
0
Pārlūkot izejas kodu

Add tests for table cell background.

Maciej Gołaszewski 6 gadi atpakaļ
vecāks
revīzija
658ef9faa5

+ 7 - 7
packages/ckeditor5-table/src/tablestyleediting.js

@@ -35,7 +35,7 @@ export default class TableStyleEditing extends Plugin {
 		schema.extend( 'tableCell', {
 			allowAttributes: [
 				'borderWidth', 'borderColor', 'borderStyle',
-				'background-color', 'padding', 'vertical-align', 'width', 'height' ]
+				'backgroundColor', 'padding', 'vertical-align', 'width', 'height' ]
 		} );
 
 		// Table attributes.
@@ -54,22 +54,22 @@ export default class TableStyleEditing extends Plugin {
 		downcastToStyle( conversion, 'borderColor', 'border-color' );
 		downcastToStyle( conversion, 'borderWidth', 'border-width' );
 
-		setupConversion( conversion, 'background-color', 'tableCell' );
+		setupConversion( conversion, 'background-color', 'tableCell', 'backgroundColor' );
 		setupConversion( conversion, 'padding', 'tableCell' );
 		setupConversion( conversion, 'vertical-align', 'tableCell' );
 		setupConversion( conversion, 'width', 'tableCell' );
 	}
 }
 
-function setupConversion( conversion, styleName, modelName ) {
+function setupConversion( conversion, styleName, modelName, modelAttribute ) {
 	// General upcast 'border' attribute (requires model border attribute to be allowed).
-	upcastAttribute( conversion, styleName, modelName );
+	upcastAttribute( conversion, styleName, modelName, modelAttribute );
 
 	// Downcast table cell only (table has own downcast converter).
 	conversion.for( 'downcast' ).attributeToAttribute( {
 		model: {
 			name: modelName,
-			key: styleName
+			key: modelAttribute || styleName
 		},
 		view: modelAttributeValue => ( {
 			key: 'style',
@@ -80,7 +80,7 @@ function setupConversion( conversion, styleName, modelName ) {
 	} );
 }
 
-function upcastAttribute( conversion, styleName, modelName ) {
+function upcastAttribute( conversion, styleName, modelName, modelAttribute ) {
 	conversion.for( 'upcast' ).attributeToAttribute( {
 		view: {
 			styles: {
@@ -89,7 +89,7 @@ function upcastAttribute( conversion, styleName, modelName ) {
 		},
 		model: {
 			name: modelName,
-			key: styleName,
+			key: modelAttribute || styleName,
 			value: viewElement => viewElement.getNormalizedStyle( styleName )
 		}
 	} );

+ 20 - 8
packages/ckeditor5-table/tests/converters/tablestyles.js

@@ -11,7 +11,7 @@ import TableStyleEditing from '../../src/tablestyleediting';
 import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import { assertEqualMarkup } from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
 
-describe.only( 'Table styles conversion', () => {
+describe( 'Table styles conversion', () => {
 	let editor, model;
 
 	beforeEach( () => {
@@ -23,8 +23,7 @@ describe.only( 'Table styles conversion', () => {
 				editor = newEditor;
 				model = editor.model;
 
-				// Since this part of test tests only view->model conversion editing pipeline is not necessary
-				// so defining model->view converters won't be necessary.
+				// Since this part of test tests only data conversion so editing pipeline is not necessary.
 				editor.editing.destroy();
 			} );
 	} );
@@ -154,6 +153,13 @@ describe.only( 'Table styles conversion', () => {
 				assertTRBLAttribute( tableCell, 'borderStyle', null, null, null, 'solid' );
 				assertTRBLAttribute( tableCell, 'borderWidth', null, null, null, '1px' );
 			} );
+
+			it( 'should upcast background-color', () => {
+				editor.setData( '<table><tr><td style="background-color:#f00">foo</td></tr></table>' );
+				const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
+
+				expect( tableCell.getAttribute( 'backgroundColor' ) ).to.deep.equal( '#f00' );
+			} );
 		} );
 	} );
 
@@ -165,11 +171,11 @@ describe.only( 'Table styles conversion', () => {
 				setModelData(
 					model,
 					'<table headingRows="0" headingColumns="0">' +
-					'<tableRow>' +
-					'<tableCell>' +
-					'<paragraph>foo</paragraph>' +
-					'</tableCell>' +
-					'</tableRow>' +
+						'<tableRow>' +
+							'<tableCell>' +
+								'<paragraph>foo</paragraph>' +
+							'</tableCell>' +
+						'</tableRow>' +
 					'</table>'
 				);
 				tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
@@ -310,6 +316,12 @@ describe.only( 'Table styles conversion', () => {
 				);
 			} );
 
+			it( 'should downcast backgroundColor', () => {
+				model.change( writer => writer.setAttribute( 'backgroundColor', '#f00', tableCell ) );
+
+				assertTableCellStyle( 'background-color:#f00;' );
+			} );
+
 			describe( 'change attribute', () => {
 				beforeEach( () => {
 					model.change( writer => {