[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 ​#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).