Displayed and visible not affected by parent styles

[aleksre]

While I can understand that determining if an element is actually "displayed" or "visible" in a document can be tricky, the current implementation seems overly naive, failing to identify an element hidden through ancestry:

<div style="display: none">
  <span>Hidden?</span>
</div>

expect(document.querySelector('span')).to.be.displayed; // Tests passes, but the element is not displayed

IMO, both visible and displayed should return false if any ancestor element is styled with display: none.

[nathanboktae]

Yes that does make sense. I'd be a breaking change though; it can be included in the next major version (I'd like to make chai-dom an ES Module, see #38)

[aleksre]

Thanks. Looking forward to it!

[jimsimon]

This could be implemented now as a new Assertion and not be a breaking change. Maybe call it viewable?

[muratcorlu]

I agree that the current API is misleading and not very helpful. Can we consider to use jQuery's :visible selector approach?

	return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );

...which looks convincing enough about element's visibility.

Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.
https://api.jquery.com/visible-selector/