1866714 - Mark `var()` fallback value (and the property) invalid if the value does not match the syntax of the registered custom property

Status: NEW

(DevTools :: Inspector: Rules, task)

Description

[Nicolas Chevobbe [:nchevobbe]]

Steps to reproduce

1. Navigate to data:text/html,<meta charset=utf8><style>@property --b { syntax: '<color>'; inherits: true; initial-value: gold; } h1 { color: var(--b, 10px); }</style><h1>hello</h1>
2. Open the inspector, select the <h1> node

Expected results

The color property should be marked as invalid

The fallback value (10px) doesn't match the registered definition stynax (<color>), and as the spec says::

References to registered custom properties using the var() function may provide a fallback. However, the fallback value must match the syntax definition of the custom property being referenced, otherwise the declaration is invalid at computed-value time.

We should surface this information to the user so they know why the declaration is invalid