[css-overflow-3] overflow-clip-margin + border-radius continuity adjustment

[fantasai]

border-radius and box-shadow have a continuity adjustment to ensure that zero radius is pointy. For overflow-clip-margin, do we apply this adjustment to the resulting offsetted position of the overflow clip edge, or do we apply it to the position of its origin edge (border-box/padding-box/content-box) and then apply an absolute offset from that curve?

[fantasai]

Here's an example of the question: suppose we have a border-radius that's less than the thickness of the border (which is, let's say, 10px). The border-edge is curved, the padding edge is square. If we specify overflow-clip-margin as '10px' in reference to the padding-box, do we get a square or round corner?

[frivoal]

I suspect the difference here is not use-case driven, so we should define, but it doesn't particularly matter what we pick as long as it's interoperable.

Do implementers have a preference? How was it done in Blink?

cc: @chrishtr

[chrishtr]

Re implementation: there's a related (not the same) bug I'm looking into at crbug.com/1200163.

[chrishtr]

border-radius applies to the border edge, not to the overflow clip edge. See this comment where I discussed it with @sky2.

I think this means that the question in this issue is moot, unless we want to consider new ways to round corners at places other than the border. Perhaps that should be considered - I've already heard a request to have a way to apply the border radius to the padding or other boxes.

[css-meeting-bot]

The CSS Working Group just discussed overflow-clip-margin and border-radius.

The full IRC log of that discussion

<fantasai> topic: overflow-clip-margin and border-radius
<emeyer> fantasai: The border radius applies to the border edge but it affects the padding contant edges. Are you offsetting from the shape of the offsetting box, or against the border edge?
<emeyer> s/contant/content/
<smfr> github: https://github.com//issues/5896
<emeyer> fantasai: The border radius should not be affected by overflow-clip-margin.
<emeyer> Florian: the question is how these should interact
<fantasai> florian: There's a formula for rounding, it will give different results depending on how you apply it
<fantasai> florian: maybe we just need to spec what's implemented so far?
<fantasai> Rossen: we're at time
<fantasai> chrishtr: sounds like we should go back to issue
<fantasai> [note: smfr asked for pictures also]
<iank_> fantasai: Why was https://github.com//issues/4791 on the adgenda?
<fantasai> Meeting closed.
<fantasai> iank_: good question... I think maye to confirm that we're editing in the 'zero area elements don't take up space' rule?
<iank_> ok sg.

[dbaron]

A bit of background here:

The backgrounds spec describes how to map the rounding of the border edge to rounding of the padding edge, content edge, or margin edge. The last (margin edge) uses a more complicated formula because it has the goal of not creating a lot of curvature where there wasn't much curvature at the border. For example, with a 2px border-radius and a 10px margin, it produces curvature at the margin edge of 6.88px rather than the 12px produced by the naive formula.

The definition of box-shadow separately describes the same formula.

The overflow-clip-margin spec says:

The overflow clip edge is shaped in the corners exactly the same way as a box-shadow with a spread radius of the same cumulative offset from the box’s border edge. See CSS Backgrounds 3 §4.2 Corner Shaping.

which links to the previously-cited section about border-radius (but not the box-shadow section where the rules for box-shadow are defined, in the same way).

---

I think if this formula is generalized to apply to things involving more than one offset from the border edge, it would be best to (1) first combine the offsets and then (2) apply the border-radius adjustment formula a single time, to the combined offset. This will prevent inconsistent curvature resulting from multiple applications of the formula with different combinations of offsets that add to the same or similar results.

[dbaron]

Oh, and the point @chrishtr makes is that §4.3 Corner Clipping defines border-radius combined with clipping as always clipping to the border-edge. In other words, if you interpret the specs as written, two different pieces of the spec are defining two different clips: one at the border edge and one at the overflow-clip-margin edge. The practical result of this is that the smaller clip region is the one that's visible.

I think the intent of the overflow-clip-margin wording is probably that it overrides this behavior, but I don't see a place the spec says to do that.

[fantasai]

@dbaron OK, closed out the issue in line with your recommendation from #5896 (comment) in 7493d0c

As for #5896 (comment) the backgrounds spec doesn't define which edge is clipped to, it just requires that the clipped edges are curved and gives examples, so I'm not convinced there's an actual problem here.

Although border images are not affected by border-radius, other effects that clip painting or event handling to the border, padding, or content edge must clip to their respective curves.

Where overflow-clip-margin defines a different edge than one of these, its rules clearly override.

Agenda+ to confirm with the WG that we accumulate the offset from the border edge and apply the same formulas used for margin/padding/box-shadow edges.