[css-lists][css-counter-styles] use counter() / counters() value inside calc()

[ramiy]

Currently we can't use the counter() / counters() value outside on the content: ''; tag.

See this code:

ol {
  counter-reset: my-counter 4;
}

ol > li {
  counter-increment: my-counter 2;
  width: calc( 10% * counter( my-counter ) );   /* Currently this is not possible */
  background-color: red;
}

When using Numeric counters, we should be able to use the counter value inside the calc() functional notation (or any other math function - min(), max() etc).

This will allow us to style the elements based on the location of the element inside the list. Example use case is to use the counter to retrieve the element position in the list and to calculate different gradient designs.

Alternatives

There are some alternatives like the :nth-child(3), but it has no functional notation like counter() that allows you to retrieve the child element position value to be used inside calc().

Powerful Capabilities

Counters can be very powerful as you can set initial values (positive and negative values) and increase / decrement by any integer. But currently we are very limited with their use. Let's change that.

[Loirooriol]

Duplicate of #1026