Check box visibility and log results

HTML

<div class="box" data-box-id="1"></div>

<div class="box d-none" data-box-id="2"></div>

<div class="box v-hidden" data-box-id="3"></div>

<div class="parent v-hidden">
  <!-- The parent element is hidden -->
  <div class="box" data-box-id="4"></div>
</div>

<div class="parent d-none">
  <!-- The parent element is hidden -->
  <div class="box" data-box-id="5"></div>
</div>

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: red;
  margin-bottom: 20px;
}

.d-none {
  display: none;
}

.v-hidden {
  visibility: hidden;
}

JavaScript

// Box 1 should return `true`.
// All other boxes should return `false`.

document.querySelectorAll('[data-box-id]').forEach((box) => {
  const isHidden = !box.checkVisibility({
    visibilityProperty: true,
  })
  console.log(`Box ${box.getAttribute('data-box-id')} hidden = ${isHidden}`)
})