Available since v0.1.0

fs-assert-hidden

Stable

Resolves when an element matching the selector exists in the DOM but has zero layout dimensions. Query-based — runs a point-in-time querySelector and layout check, not a mutation watch. The complement of visible.

Syntax

fs-assert-hidden="<selector>"

When to use it

Collapsible or closeable UI where the element persists but isn't visible (accordions, drawers, modals with display: none)
"This should never appear" invariants (error banners, stuck loading spinners)
Verifying a close/cancel action hides an existing element

If the element is removed entirely (not just hidden), use removed instead.

Example

<button
  fs-assert="modal/close"
  fs-trigger="click"
  fs-assert-hidden=".modal-overlay">
  Close
</button>

Passes when .modal-overlay has zero layout dimensions after the click.

Invariant use — "should never appear"

fs-assert-hidden combined with fs-trigger="invariant" is the idiomatic way to guard against unwanted UI:

<div
  fs-assert="layout/no-error-banner"
  fs-trigger="invariant"
  fs-assert-hidden=".global-error-banner">
</div>

This fails the moment .global-error-banner gains dimensions, and recovers when it goes hidden again.

Pairs well with

fs-trigger="click" — close, dismiss, collapse
fs-trigger="invariant" — canonical "should never appear" pattern
OOB assertions — state-type choice for side-effect checks
[classlist=...] — combine with a class-state check

Gotchas

Element must exist in the DOM. If the element is removed, hidden does not pass — use removed instead.
opacity: 0 is NOT hidden. The element still has dimensions. Use a [classlist=hidden:true] or attribute check for opacity-based hiding.