Bug 224594

Summary:

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

Product:

WebKit

Reporter:

Roman Czerkies <dev>

Component:

CSS

Assignee:

Oriol Brufau <obrufau>

Status:

RESOLVED FIXED

Severity:

Blocker

CC:

argyle, clopez, dev, esprehn+autocc, ews-watchlist, glenn, graouts, gyuyoung.kim, koivisto, macpherson, menard, obrufau, rego, sarahdhicks, simon.fraser, webkit-bug-importer, youennf

Priority:

Keywords:

InRadar

Version:

Safari 14

Hardware:

Mac (Intel)

OS:

macOS 10.15

See Also:

https://github.com/web-platform-tests/wpt/pull/28751

Attachments:

Description	Flags
logical property shorthand bug repro	none
Patch	none

Roman Czerkies

Reported 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

Attachments
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
View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2021-04-22 00:48:17 PDT

<rdar://problem/77005577>

Adam Argyle

Comment 2 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.1.21.161.3)

Adam Argyle

Comment 3 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

Roman Czerkies

Comment 4 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.

Oriol Brufau

Comment 5 2021-04-29 13:54:01 PDT

Created attachment 427373 [details] Patch

EWS Watchlist

Comment 6 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

EWS

Comment 7 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].

Note You need to log in before you can comment on or make changes to this bug.