[css-borders-4] Specify how corner-shape affects outline

[noamr]

Follow up to #11610 (comment).
Outlines are "special" because they create a path that's external to the original border, more like a stroke.
A concave corner (e.g. a star of scoop shape) with a big outline might end up with very long miters.

Note that currently outline rendering is specified in pretty vague terms.

Proposing (based on suggestion from @smfr) to advise implementations to render a round miter for concave corner-shaped outlines.

[tabatkins]

Agree that we should aggressively cap the ability of corners to extend too much in a concave outline. I'm fine with a round miter, tho I don't think that's expressible in SVG right now? (stroke-linecap only affects the ends of segments.) I think that's just a lack in SVG tho; capping the mitered edges with as if stroke-linecap:arc applied to it sounds fine to me.

[fsoder]

I think the property you're looking for is stroke-linejoin (https://svgwg.org/svg2-draft/painting.html#LineJoin)

[noamr]

Proposed async resolution:
Outlines with concave corner-shapes should be rendered as an outer stroke with round caps & joins.

[yisibl]

Thinking further, should outline be rendered as sharp corners when border is not present?

[noamr]

Thinking further, should outline be rendered as sharp corners when border is not present?

I don't think the outline should be affected by the present of a border?

[noamr]

I tried this a bit and it has parts that don't make sense or need further clarification:

• if the whole border is rendered with rounded joins when there is concave corners, a square corner is going to be affected by an unrelated scoop corner.
• Concave corners in themselves are not really problematic, rather it's when the distance between them is smaller than the outline which shoots the join to a distance.

Judging from how current outline wording is written, I believe this can be worded in a way that leaves it to implementations.

[css-meeting-bot]

The CSS Working Group just discussed [css-borders-4] Specify how `corner-shape` affects `outline` , and agreed to the following:

• RESOLVED: Add corner-shape to the border-radius clause in outline definition

The full IRC log of that discussion

<emilio> noamr: there was a question about how does corner-shape matches outline. Current spec is not interoperable, rather handwavy
<emilio> ... spec says it generally should follow the border
<emilio> ... should I continue that path for border-shape?
<florian> q+
<emilio> ... following the border
<emilio> Q+
<emilio> ... should we try to make that interoperable?
<astearns> ack florian
<emilio> florian: I think short term is to extend the current spec
<emilio> ... going beyond it is a big project, there are a lot of other issues with outline
<emilio> ... defining would be a good project but a big project
<astearns> ack emilio
<fantasai> [missed]
<fantasai> emilio: we have the magic thing, which is outline-style: auto
<fantasai> emilio: for easy cases we can more easily define
<fantasai> emilio: handwaving fragmentation cases can be fine
<fantasai> emilio: agree we shouldn't need to fix everything
<fantasai> emilio: but let's get interop on some cases
<fantasai> florian: two resolutions
<fantasai> florian: 1. Follow corner-shape
<fantasai> florian: 2. WG will attempt to outline in more detail
<fantasai> florian: we don't have a definition, but we can try
<fantasai> emilio: the non-auto cases seem pretty definable
<fantasai> florian: definable, but is not currently defined
<fantasai> florian: I used to have an art gallery of interesting outline rendering, so there is a lot to define!
<fantasai> astearns: out of time, but I think it sounded like we have consensus to at least add corner-shape to the bit that defines how we deal with border-radius
<fantasai> astearns: add it to that vagueness, and perhaps a note to better specify this later
<fantasai> noamr: sgtm
<fantasai> florian: I agree with the direction, probably issue rather than note though
<fantasai> noamr: open a separate issue
<fantasai> PROPOSED: Add corner-shape to the border-radius clause in outline
<fantasai> RESOLVED: Add corner-shape to the border-radius clause in outline definition

[Loirooriol]

I want to point out that just using rounded border-radius already breaks spec assumptions about negative outline-offset: #8786. With corner-shape the situation gets crazier.

[frivoal]

@Loirooriol I agree with you that there is a lot of undefined territory in outlines, and that bringing in outline-offset allows for some pretty crazy situations. Reminds me of this old thread: https://x.com/Martijn_Cuppens/status/1015169981368225793
In any case, getting full interop on outlines is going to be an interesting project…

[yisibl]

So what's the conclusion here? Is the outline with rounded corners even if the corner-shape value is notch or bevel?

Please reopen this issue, I think the specification needs to be updated.

[noamr]

So what's the conclusion here? Is the outline with rounded corners even if the corner-shape value is notch or bevel?

No, it should follow the curve, but without specifying more than that, as outline in general is not specified to that extent.

Please reopen this issue, I think the specification needs to be updated.

I agree, there needs to be a note about this before closing. Reopening and will close with a note PR.