Re: [csswg-drafts] [css-values] random() function (#2826)

So, proposal:

```
rand-int(<custom-ident> per-element?, <integer>, <integer>)
rand-val(<custom-ident> per-element?, <numeric>, <numeric>)
nth(<integer>, <value>, <value>, <value>, ...)
```

Like calc(), the rand-* functions evaluates at computed-value time if possible (if their arguments can be resolved at computed-value time), and at used-value time otherwise.  They resolve to either a random integer between the first and second value (inclusive at both ends, so `rand-int(foo, 1, 3)` will resolve to 1, 2, or 3), or a random real-valued value between the first and second value (inclusive of start, exclusive of end, so `rand-val(foo, 100px, 200px)` will give a random length >= 100px and < 200px).

For either function, you must supply a `<custom-ident>` as the first argument. The ident is meaningless, but it ensures that you'll get the same random value from a given function regardless of when it's evaluated - every identical rand-*() invocation, with the same custom-ident, start, and end, will resolve to the same value.

If you additionally pass the `per-element` keyword, then the random value will be different on every element the property is applied to. (But, again, is guaranteed to be the same on every invocation of an identical rand-*() function on that element.)

`rand-int()` is an `<integer>`.  `rand-val()` is the [addition](https://drafts.css-houdini.org/css-typed-om/#cssnumericvalue-add-two-types) of its arguments' types.

The UA maintains a cache of random values, keyed by a tuple of:

* "int" or "val", depending on function called
* custom-ident argument
* fully resolved and absolutized start value
* fully resolved and absolutized end value
* the element the property is resolved on, if `per-element` is specified; `null` otherwise

Whenever you want to resolve a rand-* function, grab a random value from the cache if it exists; otherwise generate a fresh random value and put it in the cache. Then turn that random value into a value in the appropriate range, via whatever means you want. (More than likely, a simple modulo and addition for integers, and a rescale and addition for reals.)

The `nth()` function takes an integer, and a succession of comma-separated values. It returns the nth value (1-indexed, as usual for CSS). You can use this with `rand-int()` to get a random value from a list of pre-supplied ones, such as a set of chosen colors.

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

Received on Thursday, 17 January 2019 21:59:36 UTC