[css-backgrounds-3] Adjustments to spec needed to implement rounded corner clipping of descendants

[chrishtr]

The spec currently says that background-clip defines a box for clipping the background, as well as overflow clipping of descendants. All browsers implement background-clip correctly for the background, but for descendants it appears they all implement padding-box and do not support any other value. See this testcase. A bug in Chromium has been present for a long time; similar bugs are filed on WebKit and Gecko.

I would like to implement content-box for overflow clipping. However, since browsers implement padding-box, I don't think it is web compatible to obey the spec as-is, since it would mandate border-box by default. I'm also not sure if there is a very good use case for overflow clipping to border-box, since in many cases this would cause descendant content to overlap the border when it paints after that border.

How about this: we change the spec to say that if background-clip is set to content-box, then we use that clip and its curve for overflow contents, and otherwise padding-box.

@frivoal @tabatkins Florian: Tab recommended you as a person who knows this part of the spec?

[fantasai]

Hi, I'm the editor. :) What the spec is trying to say there is that when something is clipped to a particular edge, that clipping is affected by the way the edge is curved by the border radius as described in the previous section. Backgrounds use the edge specified by background-clip. But content does not. Overflowing content is always clipped by the padding edge: the spec here is just saying that this edge is curved at the corners by the border radius. Similarly, the content of a replaced element is always constrained by the content-box; and the spec here is saying that the corners of that box are likewise curved and the replaced element content clipped accordingly.

If you want to clip content to the content edge instead of the padding edge, you'd need a new property to do it. Maybe re-using overflow-clip-margin or whatever we decided to call it, by giving it some keywords.

[chrishtr]

Hi, I'm the editor. :)

Ok cool. I should have figured as much. :)

Overflowing content is always clipped by the padding edge: the spec here is just saying that this edge is curved at the corners by the border radius.

I see. Then just to confirm, you think this test case is working correctly in all browsers according to the spec (i.e. the expectation there is wrong and the browsers are right)? The bug I referenced also referred to a question (a long time ago, I know) that I interpreted as saying otherwise.

I do think it seems useful to clip to the content box as an option. Your suggestion of overflow-clip-margin with a negative outset might work.

[fantasai]

The editors are always listed at the top of the spec for a reason: so that you can pester them with complaints and questions. ;)

I can't load the testcase right now for some reason, but this testcase is correct in Gecko and Blink afaict.

[fantasai]

OK, I rewrote the confusing section in b27601c
You can compare before/after:
https://www.w3.org/TR/css-backgrounds-3/#corner-clipping
https://drafts.csswg.org/css-backgrounds-3/#corner-clipping

Lmk if that looks better (and still correct)!

[chrishtr]

The new text looks good, thanks. I'll close this issue and the Chromium bug.