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:
