Opened 7 years ago

Last modified 7 years ago

#16768 confirmed Bug

[WebKit][FF] Normalize behaviour of styles combo on link boundaries — at Version 4

Reported by: kkrzton Owned by:
Priority: Normal Milestone:
Component: General Version:
Keywords: VendorFix CantFix Cc:

Description (last modified by Marek Lewandowski)

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 (same for one browser, not necessarily between browsers).

Change History (4)

comment:1 Changed 7 years ago by kkrzton

Status: newconfirmed
Summary: [WebKit][FF]Normalize behaviour of styles combo on link boundaries[WebKit][FF] Normalize behaviour of styles combo on link boundaries

comment:2 Changed 7 years ago by kkrzton

Description: modified (diff)

comment:3 Changed 7 years ago by Marek Lewandowski

Description: modified (diff)

This is well known inconsistency between the browsers, but I can't find the ticket number. Pinged @j.swiderski for help.

comment:4 Changed 7 years ago by Marek Lewandowski

Description: modified (diff)

Restored original description.

Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy