[conditionial-3] Define if support for custom variable should be tested #7013
Description
A CSS processor is considered to support a declaration (consisting of a property and value) if it accepts that declaration (rather than discarding it as a parse error) within a style rule.
https://drafts.csswg.org/css-conditional-3/#support-definition
All the following declarations used as <supports-condition> for @support are valid declarations in a style rule, but the @support with the declaration that use a custom variable does not apply in Chrome/Firefox.
<style>
:root {
--custom-color: red;
}
@supports (color: --custom-color) {
div:nth-child(1) {
color: red;
}
}
@supports (--foo: orange) {
div:nth-child(2) {
color: orange;
}
}
@supports (color: initial) {
div:nth-child(3) {
color: green;
}
}
</style>
<div>Custom variable</div> <!-- Should be red but is black -->
<div>Custom property</div> <!-- orange -->
<div>Global keyword</div> <!-- green -->I'm probably missing something again, sorry.