What is the initial value of display property of tr element's style?

Question

I have the following HTML page:

<table>
  <tr id="tr"></tr>
</table>

In Chrome DevTools' Console, I wrote the following code:

var tr = document.getElementById('tr');
var cs = getComputedStyle(tr);
cs.display;
"table-row"

As expected, the display defaults to 'table-row'.

I then set the display to none:

tr.style.display = 'none';
"none"
cs.display;
"none"

Again, that works as expected.

I then used 'unset' to unset the display style:

tr.style.display = 'unset';
"unset"
cs.display;
"inline"

I expected display to be 'table-row' again, but it becomes 'inline'.

I tried using 'revert' but got the same results:

tr.style.display = 'revert';
"revert"
cs.display;
"inline"

'inherit' doesn't work either:

tr.style.display = 'inherit';
"inherit"
cs.display;
"inline"

My question is: is this a bug? Shouldn't 'revert', 'initial', and 'unset' all set the display property back to its initial value?

Edit based on Danield's response @Danield is right that revert is supposed to do what I had expected, but is not yet well supported. Safari does support revert:

Answer 1

In CSS, the 'initial' value is per property, i.e. it doesn't refer to the value which the user agent applied to it based on the type of element.

The initial value of the display property is inline.

See display - MDN :

Initial value inline

So no matter which element you are styling display: initial means display: inline.

Here's a simple example:

div {
  display: initial;
  width: 200px;
  height: 200px;
  background-color: red;
}

<div>hello</div>

In the above example we apply display: initial; to the div.

Even though the user agent applies display: block to a div, the result is display: inline (notice how the width and height is not applied) because the initial value of the display element is inline.

This also explains the why display: unset results in display: inline because

The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not.(MDN)

Now since display isn't an inherited property -

Inherited no

display: unset is actually equivalent to display: initial

---

Now, regarding the revert value - this is the functionality which I believe the OP was looking for... see the spec regarding revert - one of the CSS-wide property values:

Rolls back the cascaded value to the user level, so that the specified value is calculated as if no author-level rules were specified for this property on this element. ...

However the problem is that revert value is currently not (well) supported.

Caniuse on revert actually nicely summarizes:

A CSS keyword value that resets a property's value to the default specified by the browser in its UA stylesheet, as if the webpage had not included any CSS. For example, display:revert on a <div> would result in display:block. This is in contrast to the initial value, which is simply defined on a per-property basis, and for display would be inline.