﻿id	summary	reporter	owner	description	type	status	priority	milestone	component	version	resolution	keywords	cc
16768	[WebKit][FF] Normalize behaviour of styles combo on link boundaries	kkrzton		"While working on #14856 fix, we had a chance to look more in depth into how it works when applied on link boundaries (see also [http://dev.ckeditor.com/ticket/14856#comment:12 #14856#comment:12]). The behaviour is quite inconsistent and should be normalized.

----

One important thing to mention is how browsers natively handle typing on link boundaries. Consider the following html:

`<p><a href=""#"">Link^</a> text</p>`

For WebKit browsers the selection is like in the above html, however, when you start typing it is moved outside the link (like `<p><a href=""#"">Link</a>^ text</p>`) so the typed text is not the part of the link. All non empty elements from within a link are copied (using styles combo creates empty element/s which are not copied in such cases).

In Firefox, the selection can be either `<p><a href=""#"">Link^</a> text</p>` or `<p><a href=""#"">Link</a>^ text</p>` and it behaves accordingly so the typed text becomes part of the link or plain text.

For IE/Edge browsers the selection always behaves and acts like `<p><a href=""#"">Link</a>^ text</p>`.

----

Now consider the resulting html after using styles combo on the following html:

== Chrome ==

'''1.'''

`<p>x<span style=""font-size:12px""><em><a href=""#"">foo^</a></em></span>x</p>`

After changing font size to 20px and typing ''bar'' becomes

`<p>x<span style=""font-size:12px""><em><a href=""#"">foo</a></em></span><span style=""font-size:20px"">bar</span>x</p>`

'''2.'''

`<p>x<a href=""#""><span style=""font-size:12px""><em>foo^</em></span></a>x</p>`

After changing font size to 20px and typing ''bar'' becomes

`<p>x<a href=""#""><span style=""font-size:12px""><em>foo</em></span></a>barx</p>`

'''3a.'''

`<p>x<span style=""font-family:Georgia,serif""><a href=""#""><span style=""font-size:12px""><em>foo^</em></span></a></span>x</p>`

After changing font size to 20px and typing ''bar'' becomes

`<p>x<span style=""font-family:Georgia,serif""><a href=""#""><span style=""font-size:12px""><em>foo</em></span></a>bar</span>x</p>`


'''3b.'''

`<p>x<span style=""font-family:Georgia,serif""><a href=""#""><span style=""font-size:12px""><em>foo^</em></span></a></span>x</p>`

After changing font family to Tahoma and typing ''bar'' becomes

`<p>x<span style=""font-family:Georgia,serif""><a href=""#""><span style=""font-size:12px""><em>foo</em></span></a></span><span style=""font-family:Tahoma,Geneva,sans-serif"">bar</span>x</p>`

== Firefox ==

'''1.''' 

`<p>x<span style=""font-size:12px""><em><a href=""#"">foo^</a></em></span>x</p>`

After changing font size to 20px and typing ''bar'' becomes

`<p>x<span style=""font-size:12px""><em><a href=""#"">foo</a></em></span><span style=""font-size:20px"">bar</span>x</p>`

'''2.'''

`<p>x<a href=""#""><span style=""font-size:12px""><em>foo^</em></span></a>x</p>`

After changing font size to 20px and typing ''bar'' becomes

`<p>x<a href=""#""><span style=""font-size:12px""><em>foo</em></span><span style=""font-size:20px"">bar</span></a>x</p>`

'''3a.'''

`<p>x<span style=""font-family:Georgia,serif""><a href=""#""><span style=""font-size:12px""><em>foo^</em></span></a></span>x</p>`

After changing font size to 20px and typing ''bar'' becomes

`<p>x<span style=""font-family:Georgia,serif""><a href=""#""><span style=""font-size:12px""><em>foo</em></span><span style=""font-size:20px"">bar</span></a></span>x</p>`

'''3b.'''

`<p>x<span style=""font-family:Georgia,serif""><a href=""#""><span style=""font-size:12px""><em>foo^</em></span></a></span>x</p>`

After changing font family to Tahoma and typing ''bar'' becomes

`<p>x<span style=""font-family:Georgia,serif""><a href=""#""><span style=""font-size:12px""><em>foo</em></span></a></span><span style=""font-family:Tahoma,Geneva,sans-serif"">bar</span>x</p>`

----

While the elements order may be different I does not make any difference for visual appearance and CKEditor UI (`<a><em>text^</em></a>` and `<em><a>text^</a></em>` looks same and activates same states/controls in UI). This means for different elements order, the result of using styles combo should be the same (in both appearance and UI state)."	Bug	confirmed	Normal		General				
