[csswg-drafts] [css-values] Emulate conditionals with discontinuous function(s) in calc() (#6638)

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

== [css-values] Emulate conditionals with discontinuous function(s) in calc() ==
`calc()` doesn't support conditionals (e.g. `if` statements) today, and that is a good thing. We shouldn't add conditionals.

However, it is pretty natural to want to write piecewise functions with calc(). Conditionals are certainly sufficient for piecewise functions, but they aren't actually necessary - all you need is a discontinuous basis function. `min()` and `max()` are almost expressive enough, but not really.

(This kind of thing is actually pretty common in GPU programming, where programmers often try to write branchless code because branches are particularly slow on many GPUs. I'm cribbing from common patterns in GPU software.)

One way to do this would be if we added a `step()` function, which looks like this:

<img width="333" alt="Screen Shot 2021-09-17 at 11 15 57 PM" src="https://user-images.githubusercontent.com/918903/133878403-2638be17-3b4b-49b5-803e-7175c173a505.png">

For example, if the author wanted to express "use x^2 if x is positive but use 2*x if x is negative" they could do it like this:

```
calc(step(var(--x)) * pow(var(--x), 2) + (1 - step(var(--x))) * 2 * var(--x))
```

A simpler way for authors, but just as expressive, would be to add something like `select(a, b, condition)`. This would result in `a` if `condition` is greater than 0, and `b` otherwise. The same example written this way would be:

```
calc(select(pow(var(--x), 2), 2 * var(--x), var(--x))
```

This seems like not much implementation burden, but a significant increase in power / flexibility for authors.

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


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

Received on Saturday, 18 September 2021 06:21:14 UTC