Using classes for font-size causes nesting issues

[iplukens]

Are you reporting a feature request or a bug?

Bug

When using classes for font-sizes instead of styling, you can get nesting issues.

Provide detailed reproduction steps (if any)

1. Set up font size to use classes instead of style attribute

window.CKEDITOR.config.fontSize_style = {
    element: 'span',
    attributes: {'class': '#(size)'},
    overrides: [{
      element: 'font',
      attributes: {'size': null},
    }],
  };

2. Type text in ckeditor
   <p>Hello this is some text</p>
3. Apply font size to inner text
   <p>Hello this <span class="x-large">is</span> some text</p>
4. Select the whole text and apply a different font size

Expected result

What is the expected result of the above steps?
<p><span class="x-small">Hello this is some text</span></p>
The inner span styling of x-large should be removed similar to how the font-size would get removed.

Actual result

What is the actual result of the above steps?
<p><span class="x-small">Hello this <span class="x-large">is</span> some text</span></p>
The inner styling remains.

• Browser: All
• OS: All
• CKEditor version: 4.7.3
• Installed CKEditor plugins: FontSize

JSFiddle: https://jsfiddle.net/yroL0vnk/
Gif of bug: http://g.recordit.co/oNbSSCUCXa.gif

[jacekbogdanski]

Hello,

I can reproduce the issue. It could be related to #1186 and #1116.
You can reproduce the issue using https://codepen.io/jacekbogdanski/pen/XqZjXK codepen.