Re: [csswg-drafts] [css-contain] Add contain-paint-margin CSS property (#4934)

Update on rounded corners: a question was raised during the call yesterday about whether the clip must take into account rounded corners. In the call we said no. Turns out `contain:paint` does [require taking into account corner clipping](https://drafts.csswg.org/css-contain-2/#containment-paint), which makes sense because its clipping behavior is defined to be equivalent to `overflow:clip`.

Chromium and Gecko both implement this behavior for `contain:paint`. Example [here](https://codepen.io/chrishtr/pen/gOaeKQW).

I don't think there will be any significant problem implementing clipping behavior, at least in Chromium there will not. We already implement all of the complexities of these rounded corners, up to and including GPU-composited code paths.

I think the right behavior is to apply the margin before applying the algorithms of [clipping behavior](https://drafts.csswg.org/css-backgrounds-3/#corners). Otherwise I think it would be hard to reason about for developers. Therefore in the example I linked above, if a margin of 20px was applied, the resulting clip shape would be a circle of diameter 140px; it's a circle because the example has `border-radius: 50%`. 




-- 
GitHub Notification of comment by chrishtr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4934#issuecomment-625900832 using your GitHub account

Received on Friday, 8 May 2020 16:34:15 UTC