Bug 224594 - Custom Properties not rendered when used with the shorthands of Logical Properties
Summary: Custom Properties not rendered when used with the shorthands of Logical Prope...
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 14
Hardware: Mac (Intel) macOS 10.15
: P2 Blocker
Assignee: Oriol Brufau
Keywords: InRadar
Depends on:
Reported: 2021-04-15 00:47 PDT by Roman Czerkies
Modified: 2021-04-30 07:24 PDT (History)
16 users (show)

See Also:

logical property shorthand bug repro (110.23 KB, video/mp4)
2021-04-28 09:12 PDT, Adam Argyle
no flags Details
Patch (7.30 KB, patch)
2021-04-29 13:54 PDT, Oriol Brufau
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Roman Czerkies 2021-04-15 00:47:08 PDT
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
Comment 1 Radar WebKit Bug Importer 2021-04-22 00:48:17 PDT
Comment 2 Adam Argyle 2021-04-28 09:12:19 PDT
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.
Comment 3 Adam Argyle 2021-04-28 09:23:18 PDT
shipping the longhands is a viable workaround right now, if possible for authors. 

`padding-inline-start: var(--gap);` works fine
Comment 4 Roman Czerkies 2021-04-28 09:42:38 PDT
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.
Comment 5 Oriol Brufau 2021-04-29 13:54:01 PDT
Created attachment 427373 [details]
Comment 6 EWS Watchlist 2021-04-29 13:54:59 PDT
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
Comment 7 EWS 2021-04-30 07:24:43 PDT
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].