[css-logical] Allow logical values in CSS gradients

[shadeed]

An improvement to CSS logical properties would be to allow using the logical values within CSS gradients. One use-case for that is having a gradient from left-to-right for LTR and from right-to-left for RTL languages.

Without CSS logical properties, we need to flip the gradient manually.

.hero {
    background-image: linear-gradient(to right, #000, transparent);
}

If we allow using the logical values, it would look like the following.

.hero {
    background-image: linear-gradient(to end, #000, transparent);
}

@jonathantneal has something about that here.

Not sure if there any side effects of implementing this feature. Happy to provide more use-cases and demos!

[fvsch]

The keywords might need to reflect the axis too, I think?

• to right -> to inline-end (when writing-mode: horizontal-tb; direction: rtl)
• to bottom right -> to block-end inline-end
• etc.

Also this works for corners, but what about angles?

For instance you might want a 135deg angle, which is equivalent to to bottom right in a square container but will keep that same 135deg angle in a rectangular container. But in direction: rtl you would want a -135deg angle instead. That can be managed with linear-gradient(calc(135deg * var(--angle-direction), …) where --angle-direction is set to 1 in ltr and to -1 in rtl, but that's a bit awkward.

[JoshuaLindquist]

This is similar to #6270 (regarding RTL for radial and conic gradients).

Regarding angles, could the new keywords be combined with deg but without using calc? Something like linear-gradient(to inline-end -20deg, #000, transparent) meaning "begin at inline start and adjust -20 degrees while moving toward inline end"?

[Loirooriol]

Duplicate of #1724