Re: [csswg-drafts] [css-values-5] issues with interpolation rules for calc-size() (#10220)

All right, sorry, let's restate the important parts from these stream-of-consciousness posts.

1. A calc-size() with a nested calc-size() as its basis needs to use the nested function's basis, recursively.
2. When interpolating, we want the *final result* of the calc-size() functions to be what's interpolated, so you get linear behavior. If we interpolate the basis *and* the calculation, you get quadratic behavior instead, which is very undesirable.
3. Given current syntax abilities, the only way to achieve (2) is to effectively push any basis calculations into the calculation argument; aka simplifying `calc-size(calc-size(min-content, size * .5), size * .2)` into `calc-size(min-content, size * .1)`.
4. But that opens us up to expansion attacks (see [Oriol's comment](https://github.com/w3c/csswg-drafts/issues/626#issuecomment-1800409960)), so we actually need to preserve the calculations separately and just evaluate them in sequence, feeding each result to the next.
5. So we actually need to reify the concept of "calculation sequences", so we can safely define the simplification from (3), and then actually interpolate that.
6. And also, using a length-percentage as the basis has the same interpolation issues as a nested calc-size().

Proposal: 
1. Introduce the concept of "calculation sequences", either as a new function (`calc-seq()`?) or just by allowing `calc()` to take a comma-separated list of calculations. In a sequence, all the calculations past the first have access to a `result` variable, which represents the result of the preceding calculation. The function ultimately represents the result of the last calculation.
2. Specify that nested calc-size() is simplified by un-nesting, using the nested basis as the outer basis and combining the nesting calculation with the outer calculation using a sequence. So `calc-size(calc-size(min-content, size * .5), size * .2)` simplifies to `calc-size(min-content, calc(size * .5, result * .2))`.
3. Specify that a length-percentage basis simplifies in a similar way, using a new `percent` keyword to represent a 100% size (which might be indefinite). So `calc-size(75%, size + 20px)` "simplifies" to `calc-size(percent, calc(size * .75, result + 20px))`.
4. Change interpolation to solely interpolate the calculation, after ensuring the basises match (or one of them is `none`).

This gives us linear interpolation in all cases, and slightly simplifies the spec text around nested calc-size() or percentage basises.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10220#issuecomment-2093743832 using your GitHub account


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

Received on Friday, 3 May 2024 20:49:41 UTC