Intermediate missing color stops not correctly interpolated

[barklund]

This CSS definition:

linear-gradient(red 10%, green, blue 50%);

Is to be interpolated as:

linear-gradient(red 10%, green 30%, blue 50%);

But this library wrongly interprets it as:

linear-gradient(red 10%, green 50%, blue 50%);

Note the stop for the green color. It should be calculated as the middle of the two surrounding defined values, not as the middle of three values assuming the outer values are also not defined.

This can be taken to even more extremes showing the wrong calculations:

linear-gradient(red 10%, green, blue 20%);

Here green should of course be between red and blue, but your tool still reports the stop as 50%.

I ported your sandbox to also show the gradient in question and this clearly shows, that a definition such as the above is indeed interpreted in the browser as 15% for green, not 50%.

[barklund]

Re-reading the spec, this does not follow all the examples – as negative values, values above 100%, a mixture of px and percent should all be supported and all values should be clamped by their neighbors (so 10%, 0%, 50% should result in 10%, 10%, 50%).

[oceangravity]

Hey @barklund thanks for reporting this, you're absolutely right, in fact, I need to review other edge cases, in example as you said about values mixtures. Cases like: linear-gradient(red, blue 30%, green, blue 50%); can be easy to interpolate, but cases like linear-gradient(red .5em, blue, 28px, green, blue 50%); seems to be ugly...