Custom Properties not rendered when used with the shorthands of Logical Properties

• Component: CSS
• Status: RESOLVED FIXED

[Roman Czerkies]

In the inspector, the used of custom properties inside shortcuts of logical properties is display as "valid";
But in the rendering, nothing appear and fallback doesn't work (due to the validated case of the inspector).

Simple e.g.
 
--eg: 16rem;
margin-top: var(--eg); <= Fallback not used
margin-block: var(--eg) 0; <= Valid for the inspector but nothing for the rendering

[Radar WebKit Bug Importer]

<rdar://problem/77005577>

[Adam Argyle]

Created attachment 427269 [details]
logical property shorthand bug repro

reduced example here https://codepen.io/argyleink/debug/954f64a41674882fb6aba55836a284a9

the bug is made worse because @supports checks are now true and any use of logical property margin/padding shorthands inside of those support queries don't apply if using custom properties, making the only way forward is to ship all custom properties as static variables.. which is not always possible. 

bug reproduces on Safari 14.1 and 14.2, and only recently became an issue in stable when I upgraded today to Version 14.1 (16611.1.21.161.3)

[Adam Argyle]

shipping the longhands is a viable workaround right now, if possible for authors. 

`padding-inline-start: var(--gap);` works fine

[Roman Czerkies]

Thanks Adam for your example and your tip.

It's exactly what I did on small projects, but rollback on biggest projects is complicated and frustating.

Hope that an updated with a fix, is coming soon as possible.

[Oriol Brufau]

Created attachment 427373 [details]
Patch

[EWS Watchlist]

This patch modifies the imported WPT tests. Please ensure that any changes on the tests (not coming from a WPT import) are exported to WPT. Please see https://trac.webkit.org/wiki/WPTExportProcess

[EWS]

Committed r276837 (237188@main): <https://commits.webkit.org/237188@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 427373 [details].