- From: Oriol Brufau via GitHub <sysbot+gh@w3.org>
- Date: Tue, 02 May 2023 15:38:41 +0000
- To: public-css-archive@w3.org
Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts: == Negative outline-offset is not interoperable and spec is not clear == I'm implementing `outline-offset` in servo-2020, but this is just a big mess. Consider ```html <div style="width: 100px; height: 100px; border-radius: 100% 0 0 0; background: cyan; outline: 10px solid magenta"></div> ``` Then add some `outline-offset`: | `outline-offset` | Expected | Firefox | Chromium | WebKit | | :---: | :---: | :---: | :---: | :---: | | `0px` |  |  |  |  | | `-10px` |  |  |  |  | | `-20px` |  |  |  |  | | `-30px` |  |  |  |  | | `-40px` |  |  |  |  | | `-50px` | ? |  |  |  | I'm basing the "expected" column on https://drafts.csswg.org/css-backgrounds/#corner-shaping > Note that if the center of a corner’s outer curve is past an opposite padding edge (in the border area of a side opposite the corner), the inner curve will not be a full quarter ellipse. >  > Where the border-radius curve extends into the opposite sides' borders, the arc of the padding edge is less than 90°. It also looks the best visually. It just has a problem when interacting with https://drafts.csswg.org/css-ui/#outline-offset > Negative values must cause the outline to shrink into the border box. Both the height and the width of the outside of the shape drawn by the outline should not become smaller than twice the computed value of the [outline-width](https://drafts.csswg.org/css-ui/#propdef-outline-width) property to make sure that an outline can be rendered even with large negative values. What is the "outside of the shape drawn by the outline"? Without `border-radius`, it's just the rectangle of the border area inflated by `outline-width` plus the used `outline-offset`. But with that definition it's not guaranteed that the outline can be rendered when using `border-radius`. Above I used `border-radius: 100% 0 0 0` because I think it's clearer to understand, but the problem becomes worse with `border-radius: 100% 0`. | `outline-offset` | `0px` | `-10px` | `-20px` | `-30px` | `-40px` | | :---: | :---: | :---: | :---: | :---: | :---: | | |  |  |  |  | ? | If my math is correct, - the cyan area inside the outline becomes 0 with `outline-offset: calc(100px*(1/sqrt(2)-1))`, aprox `-29.29px`. - the magenta area of the outline becomes 0 with `outline-offset: calc(100px*(1/sqrt(2)-1) - 10px)`, aprox `-39.29px`. - taken naively, the constraint allows down to `-50px` I guess the solution is taking into account the impact of `border-radius` over the outline shape when computing the minimum `outline-offset`. But the math doesn't seem very easy in general when dealing with elliptical corners. Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8786 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 2 May 2023 15:38:43 UTC