Flipping for `background` mistakes percentages in color functions for background-position

[HumansCanWinElves]

Consider the following definition:

background: hsl(150 30% 30%);

The percent values are about the saturation and lightness of the generated color and are unrelated to directions.

Yet, when passing it through CSSJanus you get:

background: hsl(150 70% 30%);

which is totally wrong.

Another example:

background: color-mix(in srgb, red 30%, blue);

turns into

background: color-mix(in srgb, red 70%, blue);

The root cause is probably this regex which tries to capture background-position values out of the background shorthand property.

---

(As a side note, I'm not sure how this is even supposed to work well for actual position values, considering that the default alignment direction is still "left". For example,

background-position: 30%;

turns into

background-position: 70%;

which seems off)

[Krinkle]

@HumansCanWinElves Thanks for filing this bug. Looks like this is specific to the new space-separated color functions, which CSSJanus does not yet know about.

[HumansCanWinElves]

@Krinkle the issue isn't just about the new space-separated syntax. It is the same with the old comma-separated syntax of the hsl() function, as well as with the mandatory comma-separated syntax of the color-mix() function mentioned in the report.

For example,

background: hsl(150, 30%, 30%);

becomes

background: hsl(150, 70%, 30%);