Merge branch 't/1084'

CHANGES.md

@@ -9,6 +9,7 @@ Fixed Issues:
 * [#2169](https://github.com/ckeditor/ckeditor-dev/issues/2169): [Edge] Fixed: Error thrown when pasting into editor.
 * [#2107](https://github.com/ckeditor/ckeditor-dev/issues/2107): Fixed: [Autocomplete](https://ckeditor.com/cke4/addon/autocomplete): holding and releasing mouse button is not inserting autocomplete item.
 * [#2167](https://github.com/ckeditor/ckeditor-dev/issues/2167): Fixed: Matching in [Emoji](https://ckeditor.com/cke4/addon/emoji) plugin is not case insensitive.
+* [#1084](https://github.com/ckeditor/ckeditor-dev/issues/1084) Fixed: Using the "Automatic" option with [Color Button](https://ckeditor.com/cke4/addon/colorbutton) on a text with color already defined sets an invalid color value.
 * [#966](https://github.com/ckeditor/ckeditor-dev/issues/966): Fixed: Executing [`editor.destroy()`](https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_editor.html#destroy) during [file upload](https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_fileTools_uploadWidgetDefinition.html#onUploading) throws error. Thanks to [Maksim Makarevich](https://github.com/MaksimMakarevich)!
 
 ## CKEditor 4.10

plugins/colorbutton/plugin.js

@@ -210,17 +210,17 @@ CKEDITOR.plugins.add( 'colorbutton', {
 				if ( color == '?' ) {
 					editor.getColorFromDialog( function( color ) {
 						if ( color ) {
-							return applyColor( color );
+							return setColor( color );
 						}
 					} );
 				} else {
-					return applyColor( color );
+					return setColor( color );
 				}
 
-				function applyColor( color ) {
-					// Clean up any conflicting style within the range.
-					editor.removeStyle( new CKEDITOR.style( config[ 'colorButton_' + type + 'Style' ], { color: 'inherit' } ) );
+				function setColor( color ) {
 					var colorStyle = config[ 'colorButton_' + type + 'Style' ];
+					// Clean up any conflicting style within the range.
+					editor.removeStyle( new CKEDITOR.style( colorStyle, { color: 'inherit' } ) );
 
 					colorStyle.childRule = type == 'back' ?
 					function( element ) {
@@ -233,7 +233,9 @@ CKEDITOR.plugins.add( 'colorbutton', {
 					};
 
 					editor.focus();
-					editor.applyStyle( new CKEDITOR.style( colorStyle, { color: color } ) );
+					if ( color ) {
+						editor.applyStyle( new CKEDITOR.style( colorStyle, { color: color } ) );
+					}
 					editor.fire( 'saveSnapshot' );
 				}
 

tests/plugins/colorbutton/colorbutton.js

@@ -164,6 +164,34 @@
 
 				wait();
 			} );
-		}
+		},
+
+		// (#1084)
+		'test changing text color to automatic': testAutomaticColor(),
+
+		// (#1084)
+		'test changing background color to automatic': testAutomaticColor( true )
 	} );
+
+	function testAutomaticColor( isBackgroundColor ) {
+		return function() {
+			var editor = this.editor,
+				bot = this.editorBot,
+				colorBtn = editor.ui.get( isBackgroundColor ? 'BGColor' : 'TextColor' );
+
+			bot.setHtmlWithSelection( 'Foo [<span style="' + ( isBackgroundColor ? 'background-' : '' ) + 'color:red">bar</span>]' );
+
+			editor.once( 'panelShow', function() {
+				resume( function() {
+					colorBtn._.panel.getBlock( colorBtn._.id ).element.findOne( '.cke_colorauto' ).$.click();
+
+					assert.areEqual( '<p>Foo bar</p>', editor.getData() );
+				} );
+			} );
+
+			colorBtn.click( editor );
+
+			wait();
+		};
+	}
 } )();

tests/plugins/colorbutton/manual/automaticcolor.html

@@ -0,0 +1,5 @@
+<textarea id="classic">Test text</textarea>
+
+<script>
+	CKEDITOR.replace( 'classic' );
+</script>

tests/plugins/colorbutton/manual/automaticcolor.md

@@ -0,0 +1,23 @@
+@bender-tags: bug, 4.10.1, 1084
+@bender-ckeditor-plugins: wysiwygarea, toolbar, colorbutton, sourcearea
+@bender-ui: collapsed
+
+Do following steps for both text color button and background color button.
+
+1. Select word 'text'.
+1. Press text color button.
+1. Set any of colors other than automatic.
+1. Press text color button again.
+1. Set color to 'automatic'.
+1. Press source button.
+
+## Expected
+
+Html in source mode matches following:
+`<p>Test text</p>`
+
+## Unexpected
+
+Html in source mode has span with color `null`, eg.:
+
+`<p>Test <span style="color:null">text</span></p>`