﻿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 (same for one browser, not necessarily between browsers)."	Bug	confirmed	Normal		General			VendorFix CantFix	
