[css-easing] The `midpoint` easing function

Insofar as easing functions make it into the CSS gradient syntax, I would like to propose a new easing function, tentatively called midpoint(x), for smooth interpolation between color stops, without the drawbacks of the interpolation hints syntax.

1. In the css-images-4 spec, interpolation hints seem to affect how color stops are positioned, and at least current browser interpretations adhere to that reading of the spec.
2. The proposal to add easing functions to gradients (in particular, the syntax analogous to adding hints between color stops) promises to disentangle the interpolation functions from color stop position computations.

To enable authors to obtain an intuitive effect from interpolation hints without the drawbacks outlined in (1) and without retroactively redefining the behavior of interpolation hints, we can piggy-back on the easings proposal (2) to present authors with similar functionality.

The midpoint easing function takes a single argument x ∈ [0, 1] that controls the relative position of the midpoint between the two color stops A and B. The resulting color is computed (by following the interpolation hint definition) as follows:

1. if x = 0, return color B for any point between the two color stops (equivalent to step-start)
2. if x = 1, return color A for any point between the two color stops (equivalent to step-end)
3. if x ∈ (0, 1):
   1. compute the position t ∈ [0, 1] of the point, relative to the two color stops
   2. obtain the weighting between color stops C = t^log_x(.5)
   3. the color at the point is then a linear blend between the colors of the two color stops, blending (1 - C) of the first stop and C of the second stop.
4. the particular case x = 0.5 is equivalent to linear

These two definitions are equivalent:

linear-gradient: (to right, red, 25%, green);
linear-gradient: (to right, red, midpoint(0.25), green);

I have opted for x ∈ [0, 1] instead of x ∈ [0%, 100%] to make it clear that the value is local to the easing function, and not a position along the gradient line.

Start by reading the CSS Images 4 color-stop fixup section and the linked issues 3931 and 1332 to understand the existing interpolation-hint and easing proposals. Evaluate the midpoint(x) definition and its edge cases with the CSS Working Group; done requires an agreed specification change, not just an implementation.