Merge pull request #346 from cksource/t/16971

Improve background color detection in tabletools plugin.
ckeditor · Apr 19, 2017 · 84d3983 · 84d3983
2 parents 8f388d2 + bea7e76
commit 84d3983
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 3 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -5,6 +5,7 @@
 
 New Features:
 
+* [#16971](http://dev.ckeditor.com/ticket/16971): Added a support for color in `background` property containing also other styles for table cells in  [Table Tools](http://ckeditor.com/addon/tabletools) plugin.
 * [#16847](http://dev.ckeditor.com/ticket/16847): Added a support for parsing and inlining any formatting created using Microsoft Word's style system to the [Paste from Word](http://ckeditor.com/addon/pastefromword) plugin.
 * [#16818](http://dev.ckeditor.com/ticket/16818): Added table cell height parsing in the [Paste from Word](http://ckeditor.com/addon/pastefromword) plugin.
 * [#16850](http://dev.ckeditor.com/ticket/16850): Added new `config.enableContextMenu` configuration option for enabling and disabling [Context Menu](http://ckeditor.com/addon/contextmenu).

diff --git a/plugins/tabletools/plugin.js b/plugins/tabletools/plugin.js
@@ -644,7 +644,8 @@
 	CKEDITOR.plugins.tabletools = {
 		requires: 'table,dialog,contextmenu',
 		init: function( editor ) {
-			var lang = editor.lang.table;
+			var lang = editor.lang.table,
+				styleParse = CKEDITOR.tools.style.parse;
 
 			function createDef( def ) {
 				return CKEDITOR.tools.extend( def || {}, {
@@ -665,10 +666,10 @@
 				contentTransformations: [ [ {
 						element: 'td',
 						left: function( element ) {
-							return element.styles.background && element.styles.background.match( /^(#[a-fA-F0-9]{3,6}|rgb\([\d, ]+\)|\w+)$/ );
+							return element.styles.background && styleParse.background( element.styles.background ).color;
 						},
 						right: function( element ) {
-							element.styles[ 'background-color' ] = element.styles.background;
+							element.styles[ 'background-color' ] = styleParse.background( element.styles.background ).color;
 						}
 					}, {
 						element: 'td',

diff --git a/tests/plugins/tabletools/manual/transformations/mixedBackground.html b/tests/plugins/tabletools/manual/transformations/mixedBackground.html
@@ -0,0 +1,7 @@
+<div id="editor">
+	<p></p>
+</div>
+
+<script>
+	CKEDITOR.replace( 'editor' );
+</script>
diff --git a/tests/plugins/tabletools/manual/transformations/mixedBackground.md b/tests/plugins/tabletools/manual/transformations/mixedBackground.md
@@ -0,0 +1,22 @@
+@bender-tags: 4.7.0, tc, 16971
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, tabletools, sourcearea
+
+1. Open source area using "Source" button.
+1. Insert following HTML:
+```html
+<table border="1" style="width:300px">
+	<tbody>
+		<tr>
+			<td style="background:#00cc99 no-repeat center">&nbsp;</td>
+			<td>&nbsp;</td>
+		</tr>
+	</tbody>
+</table>
+```
+1. Go back to wysiwyg mode, by clicking "Source" button again.
+	**Expected:** Background in the first cell is different than the other.
+1. Right click the first cell, and use "Cell / Cell Properties".
+	**Expected:** "Background Color" property is set.
+
+Note there's an issue that the value in the dialog is displayed in `rgb()` format, it's an unrelated issue. You can verify the transformation by checking source once again.
diff --git a/tests/plugins/tabletools/tabletools.html b/tests/plugins/tabletools/tabletools.html
@@ -1472,6 +1472,26 @@
 	</table>
 </textarea>
 
+<textarea id="background-extraction">
+	<table border="1">
+		<tbody>
+			<tr>
+				<td style="background:no-repeat center #00cc99">&nbsp;</td>
+				<td>&nbsp;</td>
+			</tr>
+		</tbody>
+	</table>
+	=>
+	<table border="1">
+		<tbody>
+			<tr>
+				<td style="background:no-repeat center #00cc99; background-color: #00cc99">&nbsp;</td>
+				<td>&nbsp;</td>
+			</tr>
+		</tbody>
+	</table>
+</textarea>
+
 <textarea id="align-conversion">
 	<table border="1">
 		<tbody>

diff --git a/tests/plugins/tabletools/tabletools.js b/tests/plugins/tabletools/tabletools.js
@@ -192,6 +192,20 @@
 			} );
 		},
 
+		// (#16971)
+		'test background color extraction': function() {
+			var bot = this.editorBot;
+
+			bender.tools.testInputOut( 'background-extraction', function( source, expected ) {
+				if ( CKEDITOR.env.ie && CKEDITOR.env.version === 8 ) {
+					// Just a regular IE quirks.
+					expected = expected.replace( 'no-repeat center #00cc99', '#00cc99 no-repeat center 50%' );
+				}
+				bot.setHtmlWithSelection( source );
+				assert.beautified.html( expected, bot.getData( true ) );
+			} );
+		},
+
 		'test valign conversion': function() {
 			var bot = this.editorBot;