Value set on style.display in unit test is not on the element in implementation

Question

I understand this is a simplified example, but how come in the test below, the if branch is never executed?

displayValue is always being set to inline , even though in my test I'm setting a value ..

it('should store the display value in an attribute', function() {
  var myElement = document.createElement('myElement');
  myElement.style.display = 'hidden';
  myObject.doSomething(myElement);
  expect(myElement.getAttribute('original-display')).to.equal('hidden');
});

The implementation is like this ..

function doSomething(element) {
  var displayValue = element.style.display !== '' ? element.style.display : 'inline';
  console.log(displayValue); // always prints `inline`
  element.setAttribute('original-display', displayValue);
  element.style.display = 'none';
}

Answer 1

The display attribute of an element will never be an empty string because it always has a default. Also, hidden is an invalid value for the display attribute, so that never gets set. hidden is a value for the visibility attribute. So an element can be display: inline but also be visibility: hidden , for example.