- From: CSS Meeting Bot via GitHub <sysbot+gh@w3.org>
- Date: Tue, 01 Apr 2025 15:40:06 +0000
- To: public-css-archive@w3.org
The CSS Working Group just discussed ``[css-borders-4] Specify how borders are rendered for `corner-shape` ``, and agreed to the following: * `RESOLVED: Radii are resolved for the outer shape just as for existing border-radius rounded-rect shapes` * `RESOLVED: Inner curve gets clipped as soon as it intersects the inner edge of any adjacent side/corner` * `RESOLVED: smfr and noam to spec the math that makes the inner curve look good` <details><summary>The full IRC log of that discussion</summary> <TabAtkins> noamr: this has been a lot of work<br> <TabAtkins> noamr: how detailed does this need to be in the spec?<br> <TabAtkins> noamr: there's an intricate algorithm to make the corner appear consistent<br> <TabAtkins> noamr: like if you have two adjacent scoops, we want them to cut into each other<br> <TabAtkins> noamr: top-right and bottom-right both "scoop 50%"<br> <TabAtkins> noamr: the outer border follows the shape math. the inner borders can overlap<br> <TabAtkins> noamr: don't have a clear idea of how to do this in the spec, but maybe we wnat to say that the border thicknesses need to be consistent at the start and end<br> <TabAtkins> noamr: border overlap does not constrain the radius<br> <TabAtkins> noamr: and are clipped by the outer radius<br> <TabAtkins> noamr: so you can create shapes that fold into themselves<br> <astearns> ack fantasai<br> <TabAtkins> fantasai: I think the behavior you're takling about is that we determine the radiuses per the formula, we shape the outer border edge, then we shape the inner border edge to match by offsetting the endpoints of the corner shape (where it connects to the straight part of the border) by insetting those normal to the curve, and using that to inperolate the inner line, then clipping the inner curve<br> <TabAtkins> fantasai: so you don't get overlapping<br> <TabAtkins> fantasai: i do think we need to spec it<br> <TabAtkins> noamr: also, for very high or low curvatures, outside of 1/-1, we adjust the inner curvature<br> <TabAtkins> noamr: in this example, the inner and outer have a differnet superellipse value to make the thickness appear consistent<br> <TabAtkins> noamr: so question is to what extent is needed to specify<br> <TabAtkins> fantasai: need to specify as far as getting the same math, so impls can match.<br> <fantasai> fantasai: Can allow for approximation, but we need interop here<br> <fantasai> TabAtkins: Should be testable in WPT with some amount of pixel fuzziness<br> <fantasai> TabAtkins: Is your inner ellipse calculation similar to the interpolation, where you get the diagonal width correct and then figure out the superellipse param?<br> <TabAtkins> noamr: not exactly, it creates a vector... it's not just moving the lines, the superellipse needs the same center too<br> <TabAtkins> noamr: it's all similar math<br> <TabAtkins> noamr: i create a line perpendicular to the hull (two straight lines snug to the superellipse) and make something perpendicular to that<br> <TabAtkins> noamr: i can't use the half corner here<br> <TabAtkins> noamr: i think the important bit here is if we're okay with the behavior here, that the border width doesn't affect the outer-radius shape<br> <TabAtkins> noamr: so it stays the same as for normal rounded rects<br> <TabAtkins> fantasai: i think that makes sense<br> <TabAtkins> +1<br> <fantasai> TabAtkins: In particular, getting the star shape is a desired behavior<br> <fantasai> PROPOSED: Radii are resolved for the outer shape just as for rounded-rect<br> <fantasai> RESOLVED: Radii are resolved for the outer shape just as for existing border-radius rounded-rect shapes<br> <fantasai> fantasai: inner radius gets clipped as soon as it hits any side or other corner<br> <fantasai> PROPOSED: Inner radius gets clipped as soon as it intersects the inner edge of any adjacent side/corner<br> <smfr> q+<br> <fantasai> s/radius/radius curve/<br> <TabAtkins> (exact details matter when the borders are partially-transparent, fwiw)<br> <fantasai> PROPOSED: Inner curve gets clipped as soon as it intersects the inner edge of any adjacent side/corner<br> <astearns> ack smfr<br> <TabAtkins> smfr: i think we do radius cosntraints for existing round rects, we shirnk so they dont' join on the inside?<br> <TabAtkins> fantasai: no, it's the outer curve we care about<br> <TabAtkins> smfr: just want to make sure we have consistent behavior<br> <TabAtkins> fantasai: right, we just now resolved to be consistent with the outer radius.<br> <TabAtkins> fantasai: you don't really have the problem the inner radius for curves<br> <TabAtkins> fantasai: the current formula onlya pplies to the outer radius<br> <TabAtkins> fantasai: and as a consequence the inner radius doesn't intersect<br> <TabAtkins> fantasai: but it's the outer radius that's controlled by border-radius<br> <fantasai> RESOLVED: Inner curve gets clipped as soon as it intersects the inner edge of any adjacent side/corner<br> <fantasai> PROPOSED: smfr and noam to spec the math that makes the inner curve look good<br> <fantasai> RESOLVED: smfr and noam to spec the math that makes the inner curve look good<br> </details> -- GitHub Notification of comment by css-meeting-bot Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11610#issuecomment-2769797194 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 1 April 2025 15:40:07 UTC