[csswg-drafts] [css-shapes-1] The handling of flooring values in rect() may have a conflict (#10870)

BorisChiou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-shapes-1] The handling of flooring values in rect() may have a conflict ==
When I looked at the example 7 in `rect()` function, the [spec](https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-rect) says:
> The second (right) and third (bottom) values are floored by the fourth (left) and second (top) values, respectively.

And the example 7 is:
> For example, specifying rect(10px 0 0 20px) would place the bottom edge higher than the top edge, and the right edge further left than the left edge, so both are corrected to not cross over the other edge, identical to specifying rect(10px 20px 10px 20px). 

This seems reasonable. However, we always convert `rect()` into `inset()` for the computed values ([spec](https://drafts.csswg.org/css-shapes-1/#basic-shape-computed-values)):
> All [`<basic-shape-rect>`](https://drafts.csswg.org/css-shapes-1/#typedef-basic-shape-rect) functions compute to the equivalent [inset()](https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-inset) function.

> Note: Given rect(t r b l), the equivalent function is inset(t calc(100% - r) calc(100% - b) l). Given xywh(x y w h), the equivalent function is inset(y calc(100% - x - w) calc(100% - y - h) x).

So, in the example 7, when we specify `rect(10px 0 0 20px)`, it should be converted into `inset(10px 100% 100% 20px)` first, per this formula. And per the [spec section](https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-inset) of `inset()`:
> A pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) use the [CSS Backgrounds 3 § 4.5 Overlapping Curves](https://drafts.csswg.org/css-backgrounds-3/#corner-overlap) rules to proportionally reduce the inset effect to 100%.

> For example, specifying inset(75% 0 50% 0) has the top+bottom edges summing to 125% of the [reference box’s](https://drafts.csswg.org/css-shapes-1/#basic-shape-reference-box) height. They’re proportionally reduced to sum to 100%, identical to specifying inset(60% 0 40% 0).

It uses a different way to handle the case if either dimension of `inset()` is larger than 100%. So we need to apply the algorithm to make sure we find a factor to reduce `20px + 100%`/`10px + 100%` to `100%` or less, for `inset(10px 100% 100% 20px)`. And the result looks different from simply flooring right/bottom values.

I'm wondering should we have to floor the values in `rect()` at computed time? If not, it seems the sentence of flooring values in `rect()` looks redundant because we always convert `rect()` into `inset()` at the computed time.

It seems for now all browsers don't floor values of `rect()` for the computed values.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10870 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 11 September 2024 19:14:49 UTC