Bug 285370 – CSS custom property with revert-layer treats var() reference as string

• Status: NEW
• Component: CSS

[Shaw Jia]

I understand that currently, only registered, inheriting custom property can use revert-layer keyword:
https://wpt.fyi/results/css/css-variables/variable-css-wide-keywords.html?label=master&label=experimental&aligned

That being said, I found that when I do try to use it for a registered, inheriting custom property, it will treat any value that is a var() reference as plain string.

For the following CSS, we expect the body text color to be red, but Safari renders it as black because revert-layer causes it to treat “ --color: var(--var);” as a plain string assignment rather a variable reference.

body {
  @layer {
    --var:red;
    --color: var(--var);
  }
  @layer {
    --color:revert-layer;
  }
  color:var(--color);
}

@property --color {
  syntax:"*";
  inherits:true;
}

Codepen example: https://codepen.io/Miragecraft/pen/gbYXGGW

[Radar WebKit Bug Importer]

<rdar://problem/142715068>