Border style reducer does not return all possible shorthands for CSS properties

[maxbarnas]

📝 Provide detailed reproduction steps (if any)

Assuming this GHS pattern:

styles: {
  'border-left': /.*/
}

and markup like below:

<p style="border-left: 1px solid;">
  foobar
</p>

There is a bug where border style reducer returns only style properties like border-left-width: 1px and border-left-style: solid, but not border-left: 1px solid which prevents Matcher from correctly matching pattern to the style of the element.

The source of this behavior can be found here: https://github.com/ckeditor/ckeditor5/blob/e6cd6e4/packages/ckeditor5-engine/src/view/styles/border.js#L331-L362 .

This is a follow-up to this comment.

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[pomek]

border-left: 1px solid

This definition is not valid (for me). If you define an element with such style, a browser will use #000 color as default instead of the specified in CSS for an element, so it ends with wrong styles, e.g. in table cells (see: #9790 (comment))

See the attached image:

Border-color: #000 (not specified anywhere, should be #ff0)

vs.

Border-color: #ff0 (as the specified for p).

The short notation must contain all three definitions: width, style, and color.

[maxbarnas]

When stating that it's valid syntax, I was referring to https://drafts.csswg.org/css-backgrounds-3/#border-shorthands or this https://www.w3.org/TR/CSS2/box.html#border-shorthand-properties .

[pomek]

I read the spec, and now I see that these values are not obligatory.

So there must be a reason why browsers inherit the initial value instead of the last specified in a tree.

[maxbarnas]

What the style reducers do now might be fine for our needs and they might be not in line with the spec. It's just that for now, Matcher is incorrectly working because of the missing style. We might as well modify the Matcher instead of reducers - I just wanted to point out that there's a problem.

[108signals]

@maxbarnas @pomek wanted to see if there are any updates on this issue? Unfortunately our users have flagged this a few times since we first reported it here

cc @magda-chrzescian @mlewand

[108signals]

@maxbarnas @pomek wanted to see if are any updates on this issue? We are getting users flagging this issue on a monthly basis.

cc @magda-chrzescian @mlewand @mdabkowska88

[katypodbielski]

Hi CKE Team, I'm writing to see if there are any updates on this issue? Our users continue to flag and follow-up about this ticket. Resolving would improve the experience of using tables. Thank you

@maxbarnas @pomek @magda-chrzescian @mdabkowska88 @mlewand