diff --git a/CHANGES.md b/CHANGES.md
index 741b5414978..ec08ac39a96 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -25,6 +25,7 @@ Fixed Issues:
* [#1014](https://github.com/ckeditor/ckeditor-dev/issues/1014): Fixed: [Table Tools](https://ckeditor.com/addon/tabletools) cell properties dialog is now [ACF](http://docs.ckeditor.com/#!/guide/dev_acf) aware - it not possible to change cell width/height if corresponding styles are disabled.
* [#877](https://github.com/ckeditor/ckeditor-dev/issues/877): Fixed: Lists with custom bullets with exotic characters crashes editor when [pasted from Word](http://ckeditor.com/addon/pastefromword).
* [#605](https://github.com/ckeditor/ckeditor-dev/issues/605): Fixed: Inline widgets do not preserve trailing spaces.
+* [#1008](https://github.com/ckeditor/ckeditor-dev/issues/1008): Fixed: Shorthand hex colors from [colorButton_colors](https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-colorButton_colors) are not correctly highlighted in [Color Button](http://ckeditor.com/addon/colorbutton) _text color_ / _background color_ panel.
Other Changes:
diff --git a/plugins/colorbutton/plugin.js b/plugins/colorbutton/plugin.js
index 1dfd0d58067..37f4761ab49 100644
--- a/plugins/colorbutton/plugin.js
+++ b/plugins/colorbutton/plugin.js
@@ -335,7 +335,8 @@ CKEDITOR.plugins.add( 'colorbutton', {
* @returns {String}
*/
function normalizeColor( color ) {
- return CKEDITOR.tools.convertRgbToHex( color || '' ).replace( /#/, '' ).toLowerCase();
+ // Replace 3-character hexadecimal notation with a 6-character hexadecimal notation (#1008).
+ return CKEDITOR.tools.normalizeHex( '#' + CKEDITOR.tools.convertRgbToHex( color || '' ) ).replace( /#/g, '' );
}
}
} );
diff --git a/tests/plugins/colorbutton/highlightedcolor.js b/tests/plugins/colorbutton/highlightedcolor.js
new file mode 100644
index 00000000000..a527a3ee8bc
--- /dev/null
+++ b/tests/plugins/colorbutton/highlightedcolor.js
@@ -0,0 +1,87 @@
+/* bender-tags: editor, colorbutton, 1008 */
+/* bender-ckeditor-plugins: colorbutton,toolbar,wysiwygarea */
+
+( function() {
+ 'use strict';
+
+ bender.editor = true;
+
+ bender.editor = {
+ config: {
+ colorButton_colors: '999,000,DDD,FFF,A1a1A1,00F',
+ language: 'en'
+ }
+ };
+
+ function assertSelectedColor( colorButton, colorName, colorValue, colorIndex ) {
+ assert.areSame( 'true', colorButton._.panel.getBlock( colorButton._.id ).element.find( 'a.cke_colorbox' ).getItem( colorIndex ).getAttribute( 'aria-selected' ) );
+ assert.areSame( colorName, colorButton._.panel.getBlock( colorButton._.id ).element.find( 'a.cke_colorbox' ).getItem( colorIndex ).$.title );
+ assert.areSame( colorValue, colorButton._.panel.getBlock( colorButton._.id ).element.find( 'a.cke_colorbox' ).getItem( colorIndex ).getAttribute( 'data-value' ) );
+ }
+
+ bender.test( {
+ 'test highlighted color with background color button': function() {
+ var editor = this.editor,
+ bgColorBtn = editor.ui.get( 'BGColor' );
+
+ resume( function() {
+ assertSelectedColor( bgColorBtn, 'Dark Gray', '999', 0 );
+ } );
+
+ bender.tools.selection.setWithHtml( editor, '{Moo}
' );
+ bgColorBtn.click( editor );
+
+ wait();
+ },
+
+ 'test highlighted color with text color button': function() {
+ var editor = this.editor,
+ txtColorBtn = editor.ui.get( 'TextColor' );
+
+ resume( function() {
+ assertSelectedColor( txtColorBtn, 'Black', '000', 1 );
+ } );
+
+ bender.tools.selection.setWithHtml( editor, '{Moo}
' );
+ txtColorBtn.click( editor );
+
+ wait();
+ },
+
+ 'test highlighted color with background and text color button': function() {
+ var editor = this.editor,
+ txtColorBtn = editor.ui.get( 'TextColor' ),
+ bgColorBtn = editor.ui.get( 'BGColor' );
+
+ resume( function() {
+ assertSelectedColor( bgColorBtn, 'Light Gray', 'DDD', 2 );
+
+ txtColorBtn.click( editor );
+ assertSelectedColor( txtColorBtn, 'White', 'FFF', 3 );
+ } );
+
+ bender.tools.selection.setWithHtml( editor, '{Moo}
' );
+ bgColorBtn.click( editor );
+
+ wait();
+ },
+
+ 'test highlighted various color with background and text color button': function() {
+ var editor = this.editor,
+ txtColorBtn = editor.ui.get( 'TextColor' ),
+ bgColorBtn = editor.ui.get( 'BGColor' );
+
+ resume( function() {
+ assertSelectedColor( bgColorBtn, 'A1a1A1', 'A1a1A1', 4 );
+
+ txtColorBtn.click( editor );
+ assertSelectedColor( txtColorBtn, 'Blue', '00F', 5 );
+ } );
+
+ bender.tools.selection.setWithHtml( editor, '{Moo}
' );
+ bgColorBtn.click( editor );
+
+ wait();
+ }
+ } );
+} )();
diff --git a/tests/plugins/colorbutton/manual/highlightedcolor.html b/tests/plugins/colorbutton/manual/highlightedcolor.html
new file mode 100644
index 00000000000..495d093458b
--- /dev/null
+++ b/tests/plugins/colorbutton/manual/highlightedcolor.html
@@ -0,0 +1,26 @@
+Editor 1
+
+
+Editor 2
+
+
+
diff --git a/tests/plugins/colorbutton/manual/highlightedcolor.md b/tests/plugins/colorbutton/manual/highlightedcolor.md
new file mode 100644
index 00000000000..b81c533684b
--- /dev/null
+++ b/tests/plugins/colorbutton/manual/highlightedcolor.md
@@ -0,0 +1,15 @@
+@bender-tags: 4.8.0, bug, 1008
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, colorbutton
+
+** Scenario (both editors): **
+
+1. Select each word or put caret in each word and click `Text Color`/`Background Color` button.
+
+### Expected result:
+
+Proper text/background color should be highlighted in color panel.
+
+### Unexpected result:
+
+Text/background color in color panel is not highlighted.