[css-overflow-3] Add box-edge values to overflow-clip-margin

[fantasai]

There's a lot of confusion documented in this bug https://bugs.chromium.org/p/chromium/issues/detail?id=99364 about how border-radius affects clipping. (It curves its own box edges, but it doesn't cause an element with overflow: hidden to start clipping its descendants to its content edge instead of its padding edge.)

The use case could be easily handled by adding keywords like content-box/padding-box/border-box to the new overflow-clip-margin property, though. They would set the zero position of the offset to that edge.

CC @laukstein

[css-meeting-bot]

The CSS Working Group just discussed [css-overflow-3] Add box-edge values to overflow-clip-margin, and agreed to the following:

• RESOLVED: Add the box keywords to the overflow-clip-margin

The full IRC log of that discussion

<dael> Topic: [css-overflow-3] Add box-edge values to overflow-clip-margin
<tantek> no objection, though it does feel odd to use terms as "English meaning" that are used more precisely by other specs
<dael> github: https://github.com//issues/5801
<dael> fantasai: A lot of confusion in chrome bug by authors that expected border edge to a box [missed]. It has borders and radius and it clips to the inner edge. In corner with curve it clips to curved edge. Looks a bit weird if contents are only replaced element. Why doesn't it clip to content edge?
<dael> fantasai: If you spec padding and borders on replaced element b/c it curves the edges of the box including content the replaced lement will get a curved edge. But if you do it on a container the contents still show.
<dael> fantasai: Frequently wante.d WE have overflow clip margin that takes a length and let syou clip a little outside the box. Could add content-box padding-box and border-box as keywords that sets hte margin to the appropriate offset.
<dael> fantasai: That's the use case and proposal. Question is do we want to do that?
<dael> astearns: Keywords alone or supply an length?
<dael> fantasai: Keywords alone, length, or combo
<dael> florian: Reasonable. What is impl interest?
<dael> chrishtr: I think it's okay. Tried impl a couple months ago and it was easy
<dael> smfr: I need more pictures, hard to understand. insetting the inner curved border radius by some amount?
<dael> chrishtr: top of issue greena nd red, they want inner and outer curve to match
<dael> smfr: White stripe is padding and they want that curved?
<dael> chrishtr: Yep
<dael> myles: It's possible to achieve that. This prop is to make it earlier?
<dael> fantasai: Yeah, you'd need a wrapper element to get that otherwise. And you'd have to match the radius correctly. You can do it but it's awk
<dael> smfr: Always insert not outset?
<dael> fantasai: A postive value outsets from the edge it would clip. So you can outset or inset. Prop here is add keywords that match the box edge
<dael> smfr: And if you outside child elements paint on top of border?
<dael> fantasai: Year
<dael> smfr: And this is ones without overflow hidden?
<dael> fantasai: You'd need to apply a clip
<dael> smfr: Also about clippath?
<dael> florian: Not clip path. Overflow
<dael> smfr: Inset the rectangle and recompute border radius that's okay.
<dael> fantasai: Just about inset and outset from border edge for overflow prop
<dael> smfr: Okay
<myles> s/earlier/easier/
<fantasai> https://drafts.csswg.org/css-overflow-3/#overflow-clip-margin
<dael> dholbert: It sounds like this is clipping padding sep than clipping content?
<dael> fantasai: Currently have overflop clip margin. If we allow a content-box value we would need to inset. It would clip contents, not the element.
<dael> chrishtr: It already only clips content. This changes dimensions of clip. Size and border radius
<florian> q+ to ask about interaction with corner-shape
<dael> dholbert: Padding is clipped at curved border and that controls wehre content is clipped
<dael> chrishtr: Padding is clipped as normal.
<dael> fantasai: By the background-clip
<dael> chrishtr: What you can already spec as different rectangles. This is only apply to content
<dael> Rossen: Is there any additional implications to box shadow?
<dael> fantasai: Doesn't effect. Only effects content
<astearns> ack florian
<Zakim> florian, you wanted to ask about interaction with corner-shape
<dael> florian: We just talked through how it only effects normal border box. In BG4 we had corner shape prop to cut at an angle. Expectation is will have new corner shapes that might make impl a bit harder.
<dael> florian: Doesn't change usefulness, but does it change concern on impl?
<dael> chrishtr: Does this thing let you spec the angle?
<dael> florian: Only switch from rounded to a straight diaganal line right now. May expand to different corner shapes.
<dael> myles: Not sure there would be consensus this property you desc would grow. Used to have more values and we got rid of them. I'd be surprised if we add a lot more
<dael> chrishtr: I would agree. It already has the need to geometrically expand or contract without complex code. I don't think we would spec difficult cases
<dael> florian: Cool. I was just hoping that we weren't missing a case for complexity
<dael> fantasai: Drawing the complex border is a bigger problem then changing the clip
<dael> astearns: I think I heard q from each implementor
<dael> astearns: Sounds like consensus to add these keywords to overflow-clip-margin
<dael> astearns: Concerns?
<dael> astearns: Add the box keywords to the overflow-clip-margin
<dael> astearns: Obj?
<dael> dholbert: border-box, padding-box, content-box?
<dael> fantasai: Yes
<dael> fantasai: padding-box is default
<dael> chrishtr: Can the syntax be impl incrementally? Someone impl lengths and add this later?
<dael> fantasai: Should be fine. As long as you don't parse the syntax you don't impl it's good
<dael> RESOLVED: Add the box keywords to the overflow-clip-margin

[smfr]

How does this interact with overflow:scroll? Does it affect the placement of scrollbars?

[fantasai]

@smfr The property doesn't apply to scroll containers, only overflow: clip and anything else defined to emulate it.