1. Run CSS.supports('--foo', 'red') on the JavaScript console What is the expected result? true getting logged in the console What happens instead? false getting logged in the console As custom properties (aka CSS variables) are now supported in Chromium, CSS.supports('--foo', 'red') should return true. The alternative method signature using a conditionText works already correct and returns true for CSS.supports('(--foo: red)') The related specification can be found here: https://drafts.csswg.org/css-conditional-3/#the-css-interface See also: https://crbug.com/584683(Blink fixed)
https://twitter.com/traviskaufman/status/766672149566423040
Visual Demo- https://codepen.io/malyw/pen/OmXMYb
The problem is, that this bug breaks most of the CSS Custom Properties detection examples across the Web. And introduces inconsistencies and confusion as it works in CSS, but not in JS.
<rdar://problem/31770186>
I am able to reproduce this bug using test case from Comment 02 and Safari 15.6 on macOS 12.5 shows "FALSE" for "window.CSS.supports('--a', 0);" while all other browsers (Chrome Canary 106 and Firefox Nightly 105) show "TRUE". Just wanted to share updated test results. Thanks!
Pull request: https://github.com/WebKit/WebKit/pull/2881
Committed 252987@main (69362356a5ab): <https://commits.webkit.org/252987@main> Reviewed commits have been landed. Closing PR #2881 and removing active labels.