Bug 270739 - [CSS Container Queries][Style queries] Incorrect difference between implicit and explicit initial values for custom properties
Summary: [CSS Container Queries][Style queries] Incorrect difference between implicit ...
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Antti Koivisto
Keywords: BrowserCompat, InRadar
Depends on:
Reported: 2024-03-09 04:39 PST by Roman Komarov
Modified: 2024-04-18 07:39 PDT (History)
4 users (show)

See Also:

Screenshot of the test case from Safari TP (52.87 KB, image/png)
2024-03-09 04:39 PST, Roman Komarov
no flags Details
rendering in safari, firefox, chrome (315.88 KB, image/png)
2024-03-13 00:26 PDT, Karl Dubost
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Roman Komarov 2024-03-09 04:39:26 PST
Created attachment 470261 [details]
Screenshot of the test case from Safari TP

Steps to reproduce: 

1. Go to https://codepen.io/kizu/pen/poBgBMb in Safari TP and Chrome and compare how things render.
2. There is a difference in how Safari and Chrome treat the `initial` in the container style query.

It seems that Safari treats the `initial` in style queries for custom properties when it is an _implicit_ value (never explicitly set to `initial`) and when it is explicitly `--foo: initial` differently. In the example above, uncommenting the `--is-lightgreen: initial;` on the root also leads to the difference.
Comment 1 Ahmad Saleem 2024-03-09 07:33:59 PST
I am able to reproduce this bug on WebKit ToT (275874@main) where the `Checking for initial` does not match `Checking for space` compared to Chrome Canary 124.
Comment 2 Karl Dubost 2024-03-13 00:26:23 PDT
Created attachment 470335 [details]
rendering in safari, firefox, chrome

Safari Technology Preview  190           19619.
Firefox Nightly            125.0a1       12524.3.12
Google Chrome Canary       124.0.6354.0  6354.0
Comment 3 Radar WebKit Bug Importer 2024-03-13 21:19:28 PDT
Comment 4 Roman Komarov 2024-04-17 02:43:33 PDT
I did open a PR adding WPT tests for this case: https://github.com/web-platform-tests/wpt/pull/45759
Comment 5 Antti Koivisto 2024-04-17 05:46:39 PDT

--foo: initial

computes to "guaranteed-invalid value" (https://drafts.csswg.org/css-variables-2/#guaranteed-invalid).

The container query spec says (https://drafts.csswg.org/css-contain-3/#style-container).

"Its query evaluates to true if the computed value of the given property on the query container matches the given value (which is also computed with respect to the query container), and false otherwise."

It seems reasonable that two guaranteed-invalid values "match" but it is not really specified. It might be good to also file a CSSWG issue to clarify this.
Comment 6 Antti Koivisto 2024-04-18 02:11:59 PDT
Pull request: https://github.com/WebKit/WebKit/pull/27438
Comment 7 Antti Koivisto 2024-04-18 02:13:40 PDT
Thanks for the WPT, I also reviewed it.
Comment 8 EWS 2024-04-18 07:39:32 PDT
Committed 277670@main (b5ce791faf9e): <https://commits.webkit.org/277670@main>

Reviewed commits have been landed. Closing PR #27438 and removing active labels.