checkElementMatch always return false for color style in IE11

[Irina]

1. Open sample page
2. Start typing, e.g. abc
3. Observe elements path bar

Actual result: span element gets created on each key press as checkElementMatch return FALSE

Expected result: span element gets created only once on the first key press

This works as expected in FF & Chrome

[Jakub Ś]

Problem can be reproduced from CKEditor 4.0 beta in IE9-11.

I believe the problem are below two lines:

var selection = editor.getSelection().getRanges()[0];
var parentNode = selection.endContainer.getParent();

The parentNode for IE is body while for other browsers like Chrome it is span.

I'm not sure whether this is bug (could be because same method returns different results) or simply a matter of using slightly different api for IE (it is know that browsers handle native selection differently).

[Irina]

Replying to j.swiderski:

Problem can be reproduced from CKEditor 4.0 beta in IE9-11.

I believe the problem are below two lines:

var selection = editor.getSelection().getRanges()[0];
var parentNode = selection.endContainer.getParent();

The parentNode for IE is body while for other browsers like Chrome it is span.

I'm not sure whether this is bug (could be because same method returns different results) or simply a matter of using slightly different api for IE (it is know that browsers handle native selection differently).

For the first character typed parentNode is body in all browsers. For the second character parentNode is span in IE/FF/Chrome as expected. So for the second character

style.checkElementMatch(parentNode, true, editor)

should return true but it returns false in IE. The false value returned only if style contains a color attribute. If you will change style to font-family/font-size instead of the color then all browsers return true for checkElementMatch.

[Jakub Ś]

@irina you are right. I haven't checked this properly thus I have modified my previous comment to avoid confusion.

[Jakub Ś]

To fix my previous mistake I have denugged this method.

IMHO the problem is that IE changes #ff0000 to {rgb:(255,0,0) (Please see attached image).

1. Now, this line returns {rgb:(255,0,0):
   var elementAttr = element.getAttribute( attName ) || '';
   
2. Going down in code you will find:

   compareCssText( attribs[ attName ], elementAttr )// #ff0000 rgb:(255,0,0)
   

3. The method compareCssText calls method parseCssText in tools.js. The problem is that this method is not called with third parameter which is responsible for converting RGB to HEX. You have something like below:

   source = CKEDITOR.tools.parseCssText( source );
   target = CKEDITOR.tools.parseCssText( target, true );
   

while method parseCssText has:

parseCssText: function( styleText, normalize, nativeNormalize ) {
	if ( nativeNormalize ) {
		...
		styleText = CKEDITOR.tools.convertRgbToHex( temp.getAttribute( 'style' ) || '' );