"border-color" in tables gets removed

[jswiderski]

Are you reporting a feature request or a bug?

Bug

Check if the issue is already reported

Provide detailed reproduction steps (if any)

1. Set ACF to config.extraAllowedContent = 'td{border-color,border-style,border-width}';.
2. Open replacebycode.html sample in IE11.
3. Switch to source mode and paste:

<table style="width:500px">
<tbody>
<tr>
<td style="border-color:red; border-style:solid; border-width:2pt">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>

4. Switch to wysiwyg mode.

Expected result

Broder in first cell is red.

Actual result

Broder in first cell isn't red and when inspecting HTML with dev-tools, you can see that border-color:red; gets removed.

Other details

• Browser: IE11
• OS: Windoes
• CKEditor version: 4.6+
• Installed CKEditor plugins: table, tabletools

Problem can be reproduced in IE11 from CKEditor 4.6.0.

[sebastien-roch]

This is a pen to reproduce:
https://codepen.io/sebastien-roch/pen/BweLBr

I can confirm it happens only on IE10+, Chrome and Firefox work fine.

[mlewand]

Let's have a look at it as a candidate for 4.8.1 or a next minor release.

[f1ames]

To put a little more perspective on this issue, this is a general issue in all browsers related to splitBorderShorthand method (which apparently does not parse border color).

For HTML provided in reproduction steps it was only visible in IE as there border-color:red; border-style:solid; border-width:2pt styles are normalized to shorthand form and then wrongly interpreted by splitBorderShorthand method.

To reproduce the issue in other browsers, it is enough to use shorthand form (border:2pt solid red) instead of the full one: see sample codepen.