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).
margin-top: var(--eg); <= Fallback not used
margin-block: var(--eg) 0; <= Valid for the inspector but nothing for the rendering
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 (166220.127.116.11.3)
shipping the longhands is a viable workaround right now, if possible for authors.
`padding-inline-start: var(--gap);` works fine
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.
Created attachment 427373 [details]
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
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].