[css-backgrounds] Clarify how `border-width` and `border-style` affect `border-image`

[SelenIT]

There is a confusion about how border-width and border-style should affect border-image (and should they). In the example of border-image with nonzero border-image-width combined with either border-width:0 or border-style:none, browsers behave differently. Firefox and IE11 render border-image in all these situations, Edge 14 — only if border-style is not none, iOS 10 Safari — only if border-width is not 0, and Chrome requires both to render it.

It seems to be a popular assumption that border-style should override border-image (e.g. see the note 1 on the caniuse.com page for border-image). However, the current spec clearly says that border-style and its sub-components "set the style of the border, unless there is a border image", implying that border-style shouldn't affect border-image if its own sub-components values allow it to be rendered.

The test suite for this section (especially tests border-image-width-005, border-image-width-006, and border-image-width-007) marks the current behavior of Firefox (i.e. ignoring both border-style:noneand border-width:0 if there is valid border-image with explicit non-zero border-image-width) as correct.

But there seems to be a bit of ambiguity in the spec in relation to border-width. The section for this property has the following remark:

When the used width of the border is 0, we say that the border is absent.

And there is no clarification if it is about just "regular" border or about image border, too. Should we add such clarification?

[fantasai]

Boris Zbarsky raised an issue on the "unless there is a border image" wording earlier, and this sentence has now been rewritten. https://drafts.csswg.org/css-backgrounds-3/#the-border-style

In any case, the computed value of 'border-width' is very explicitly defined to be zero for none and hidden borders. Additionally, the border image section is very explicit that none of the properties therein affect layout. Since by default a border image is only drawn in the border area, by default a border-style of none will make it disappear. However, the border-image-outset and border-image-width values can alter the “border” area into which the border image is drawn, extending it into the padding area (in the case of border-image-widths greater than the border-width) or extending it outside the border edge (in the case of border-image-outset greater than zero).

So, border images override border-style in the sense that a border-style-specified border will not be drawn if a border image is specified. But to the extent that border-style influences the border-width it can affect whether the border image is visible or not.

Please let me know if that's clear or if you think some further explanation is needed (here or in the spec).

[fantasai]

When the used width of the border is 0, we say that the border is absent.

The only place that uses this terminology, afaict from a grep, is the css-box spec which is unmaintained and outdated. I will remove the sentence.

[SelenIT]

@fantasai, thanks for removing the ambiguous phrase!

So is it right that if border-image-width is explicitly set in length units and is greater than zero, then the border image should be rendered even if the used value of border-width is 0 (as expected in the testcases)? So Gecko does it correctly and Blink's behavior is currently a bug?

[fantasai]

Yes, per spec it should be rendered. I suppose making ''border-style: none'' disable the border image is an interesting interpretation, though.