Bug 241566 - CSS `::marker` does not support defining CSS variables
Summary: CSS `::marker` does not support defining CSS variables
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 15
Hardware: Mac (Apple Silicon) macOS 12
: P2 Normal
Assignee: Nobody
URL:
Keywords: GoodFirstBug, InRadar
: 241576 (view as bug list)
Depends on:
Blocks:
 
Reported: 2022-06-13 13:36 PDT by Jordan Pittman
Modified: 2022-11-27 19:13 PST (History)
7 users (show)

See Also:


Attachments
A file showcasing the issue (803 bytes, text/html)
2022-06-13 13:36 PDT, Jordan Pittman
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Jordan Pittman 2022-06-13 13:36:22 PDT
Created attachment 460211 [details]
A file showcasing the issue

In Gecko- and Blink-based browsers you can define CSS variables on the `::marker` pseudo-element. However, in Safari, these property declarations are thrown out. This is a problem even in the latest Safari Tech Preview.

For instance, the following works:

```
.works {
  --alpha: 0.75;
}

.works ::marker {
  color: rgb(255 119 0 / var(--alpha));
}
```

However, if you define `--alpha` on the ::marker itself any values using it act as if it was not defined at all even though none of them show as invalid in dev tools:
```
.does-not-work ::marker {
  --alpha: 0.75;
  color: rgb(255 119 0 / var(--alpha));
}
```

In this situation, if a parent element defined `--alpha` then the marker would suddenly get a color again but it would have the wrong alpha channel value (the one defined in the parent and not in `::marker`)

I think the CSS spec is possibly underspecified here as it does limit what properties apply to `::marker` pseudo elements but I believe the omission of CSS variables is likely a mistake as variables work in values as long as they're defined in the cascade.

Working Draft: https://www.w3.org/TR/css-lists-3/#marker-properties
Editors Draft: https://drafts.csswg.org/css-lists-3/#marker-properties (this appears to be having issues today — 2022-06-13)

I'd love to send in a patch but I'm a bit too unfamiliar with the WebKit codebase and development process. From a first glance I'd say that https://github.com/WebKit/WebKit/blob/c62798d34562dcd0b8fdc676808ef73b74b5e262/Source/WebCore/style/PropertyCascade.cpp#L212 is probably the appropriate place to start looking?
Comment 1 Alexey Proskuryakov 2022-06-13 22:14:55 PDT
*** Bug 241576 has been marked as a duplicate of this bug. ***
Comment 2 Radar WebKit Bug Importer 2022-06-20 13:37:12 PDT
<rdar://problem/95551387>
Comment 3 Oriol Brufau 2022-11-27 18:23:59 PST
(In reply to Jordan Pittman from comment #0)
> I think the CSS spec is possibly underspecified here as it does limit what
> properties apply to `::marker` pseudo elements

It's specified in https://drafts.csswg.org/css-variables/#defining-variables
> Applies to: all elements and all pseudo-elements (including those with restricted property lists)

> I'd love to send in a patch

Probably it's just a matter of adding CSSPropertyCustom into isValidMarkerStyleProperty.
https://searchfox.org/wubkat/rev/fd9594cdf418745718908fd1869a116307a46e7a/Source/WebCore/style/PropertyAllowlist.cpp#41

::cue may have the same problem.