"revert" does not respect inheritance

According to the MDN docs for revert, it respects inheritance. So, in theory, if I have this code:

.container {
  font-weight: normal;
}

.header {
  font-weight: revert;
}

<div class="container">
  <h1 class="header">there</h1>
</div>

the weight of the text should be normal. In theory, revert should first look to its parent (font-weight is an inherited property). Yet, this does not happen. Why?

This is especially odd, considering the fact that I'm applying "revert" directly to the element (so the theory about browser styles overwriting the element styles don't quite hold in this case).

Solution

revert may respect inheritance, but it does not substitute for inherit:

.container {
  /* font-weight: normal; Font weight on div is already normal in this instance */
}

.header1 {
  font-weight: inherit;
}

.header2 {
  font-weight: revert;
}

<div class="container">
  <h1 class="header1">there</h1>
  <h1 class="header2">here</h1>
</div>

As Kosh commented, usually the user agent sets a font-weight on <h1>.

For .header1, we override the user agent styles by explicitly inheriting font weight.

For .header2, we forget any previous styles for font weight that were applied within the current cascade origin, which in this case is our unlayered author styles. Since we have no existing styles for the element from our author styles this essentially does nothing in this instance.

Even though font-weight is an inherited property (e.g. a div would inherit font weight from .container) - since the element is an h1, the browser's default styles assign a font weight which takes precedence in the cascade over inheritance.