Open Bug 1904013 Opened 2 years ago Updated 4 months ago

`var(--x, fallback)` with a CSS variable with "initial" value (aka space toggle) strikes through the fallback value, although it's actually used

Categories

(DevTools :: Inspector, defect, P3)

Product:
DevTools
Component:
Inspector
Type:
defect

Tracking

(Not tracked)

People

(Reporter: nchevobbe, Unassigned)

References

(Blocks 2 open bugs)

Details

Steps to reproduce

  1. Go to data:text/html,<meta charset=utf8><style>:root {--if-success: ;}body {--if-success: initial;background-color: var(--if-success, gold);}</style><body>Hello
  2. Open the inspector and inspect the body

Actual results

We have the following rule:

body {
  --if-success: initial;
  background-color: var(--if-success, gold);
}

Where the fallback gold value is striked through.
It shouldn't, because when the variable value is initial, the fallback is being used.
From https://drafts.csswg.org/css-variables/#using-variables

To substitute a var() in a property’s value:

  1. […]
  2. If the value of the custom property named by the first argument to the var() function is anything but the initial value, replace the var() function by the value of the corresponding custom property.
  3. Otherwise, if the var() function has a fallback value as its second argument, replace the var() function by the fallback value. […]

In this case, we shouldn't strike through the fallback value, and maybe add a note in the var() tooltip to indicate that the fallback value is going to be used.
It would also be nice to add the proper color swatch before the var()

Severity: -- → S3
Priority: -- → P3

I'm not sure the Comment 0 is entirely correct, if we're using a registered property

From https://drafts.csswg.org/css-variables/#using-variables:~:text=To%20replace,result%2E :

[…]
2. Substitute arbitrary substitution functions in first arg, then parse it as a <custom-property-name>. If parsing returned a <custom-property-name>, **let result be the computed value of the corresponding custom property **on el. Otherwise, let result be the guaranteed-invalid value.
[…]
4. If result contains the guaranteed-invalid value, and second arg was provided, set result to the result of substitute arbitrary substitution functions on second arg.

And from https://drafts.csswg.org/css-variables/#typedef-custom-property-name :

The CSS-wide keywords can be used in custom properties, with the same meaning as in any another property.

So the reason for the Comment 0 case is more because of https://drafts.csswg.org/css-variables/#guaranteed-invalid:

The initial value of a custom property is a guaranteed-invalid value.
(but for registered custom properties, we may have an actual value)

So, for our case, I think we could check if we have a computed value for the variable (it seems that those invalid guaranteed invalid variables are not being displayed in the Computed panel, so we might already have what we need to properly identify those; note that it wouldn't work for variable in @starting-style rules as we don't get computed value, but that's an edge case we can handle in a follow up)

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