969263 - when border-image is set, border-radius is not respected

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Sebastian Zartner [:sebo]]

Attachment: test.html

Linear gradients as border images were implemented in bug 700926, though they don't recognize the value of border-radius yet.

I attached a test case for this.

Sebastian

Comment 1

[Sebastian Zartner [:sebo]]

Just realized that this doesn't just apply to linear gradients but all kinds of gradients, i.e. linear-gradient, radial-gradient, repeating-linear-gradient and repeating-radial-gradient.

Sebastian

Comment 2

[Nick Cameron [:nrc]]

I'd put money on border-image: -moz-element not respecting border-radius too

Comment 3

[Sebastian Zartner [:sebo]]

Right, wanted to post that right now. Also border-image: url() doesn't respect the radius. Can they be handled altogether or should I create new reports for each?

Sebastian

Comment 4

[Nick Cameron [:nrc]]

Altogether is fine, it will be one chunk of code, I bet.

Comment 5

[Sebastian Zartner [:sebo]]

Ok, in that case you should rephrase the summary once again to just "border-image doesn't recognize border-radius".

Sebastian

Comment 6

[Nick Cameron [:nrc]]

Hmm, so actually the spec (http://www.w3.org/TR/css3-background/#corner-clipping) says:

A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’).

So actually, I think we have the correct behaviour. Although the test case looks really ugly :-( I guess these things are not meant to work together. It would be nicer, I think, to clip the border image to the border with border-radius taken into account. But that is a spec issue.

I'll leave the bug open in case someone is considering changing the spec, or I have mis-read it. But it should probably be closed. needinfo? dbaron to make the call.

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Yep, this is what the spec requires.

The intent was that border-images were things to be designed for the particular use, and they would already have the correct information in them.  I'm not sure that the WG really considered gradients; it might be worth bringing up on www-style.  But I think not clipping definitely does match the WG's intent for url(), given that border-image is allowed to *overhang* the box.

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(That said, I'm not convinced that the use cases for gradients on border-image are strong enough to demand an exception.)

Comment 9

[Sebastian Zartner [:sebo]]

>  But I think not clipping definitely does match the WG's intent for url(), given that border-image is 
> allowed to *overhang* the box.
It should be up to the author whether to let it overhang the box or clip it. Asking here:

http://lists.w3.org/Archives/Public/www-style/2014Feb/0274.html

Sebastian