Open Bug 1904016 Opened 2 years ago Updated 2 years ago

`var(--x, fallback)` with a cycle css variable value (aka cyclic dependency 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

(Depends on 1 open bug, Blocks 1 open bug)

Details

Steps to reproduce

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

Actual results

We have the following rule:

:root {
	--variant: var(--variant-default);
	--variant-default: var(--variant,);
}
body {
	background-color: var(--variant-default, gold);
}

Where the fallback gold value is striked through, but it shouldn't.
Here when substituting --variant-default, we check its value, which is var(--variant), and substituting --variant gives us --variant-default, so we have a cycle, and --variant-default becomes initial, which means that the fallback is used. (see https://kizu.dev/cyclic-toggles/ for more information)

We should try to apply the same visual decision we applied for Bug 1904013, and indicate in the var() tooltip that a cycle was found, and that the variable is considered initial, and that the fallback value is used.

Severity: -- → S3
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.