From 0aef8dc2bd0c28f4bfd1231a0f835780ac711ac0 Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Mon, 27 Oct 2025 15:21:19 -0400
Subject: [PATCH 01/35] migrate visibility tests to static fixtures

---
 .../cypress/e2e/dom/visibility-migration.md   |  197 +++
 .../driver/cypress/e2e/dom/visibility.cy.ts   | 1500 +++--------------
 .../visibility/basic-css-properties.html      |   71 +
 .../cypress/fixtures/visibility/empty.html    |    4 +
 .../fixtures/visibility/form-elements.html    |   65 +
 .../cypress/fixtures/visibility/overflow.html |  273 +++
 .../fixtures/visibility/positioning.html      |  113 ++
 .../cypress/fixtures/visibility/style.css     |   13 +
 .../fixtures/visibility/table-visibility.html |   77 +
 .../fixtures/visibility/transforms.html       |  145 ++
 .../driver/cypress/fixtures/visibility/ux.js  |   37 +
 packages/driver/src/dom/visibility.ts         |    2 +-
 12 files changed, 1243 insertions(+), 1254 deletions(-)
 create mode 100644 packages/driver/cypress/e2e/dom/visibility-migration.md
 create mode 100644 packages/driver/cypress/fixtures/visibility/basic-css-properties.html
 create mode 100644 packages/driver/cypress/fixtures/visibility/empty.html
 create mode 100644 packages/driver/cypress/fixtures/visibility/form-elements.html
 create mode 100644 packages/driver/cypress/fixtures/visibility/overflow.html
 create mode 100644 packages/driver/cypress/fixtures/visibility/positioning.html
 create mode 100644 packages/driver/cypress/fixtures/visibility/style.css
 create mode 100644 packages/driver/cypress/fixtures/visibility/table-visibility.html
 create mode 100644 packages/driver/cypress/fixtures/visibility/transforms.html
 create mode 100644 packages/driver/cypress/fixtures/visibility/ux.js

diff --git a/packages/driver/cypress/e2e/dom/visibility-migration.md b/packages/driver/cypress/e2e/dom/visibility-migration.md
new file mode 100644
index 00000000000..a8ce2d63ed9
--- /dev/null
+++ b/packages/driver/cypress/e2e/dom/visibility-migration.md
@@ -0,0 +1,197 @@
+# Visibility Test Migration Guide
+
+This document outlines the comprehensive matrix of visibility test situations covered in the `hidden/visible overrides` section of `visibility.cy.ts` and tracks their migration status to the declarative format.
+
+### Migration Status Legend
+- ✅ **Migrated** - Covered in declarative HTML fixtures (`visibility scenarios` section)
+- ❌ **Not Migrated** - Still in imperative test cases (`hidden/visible overrides` section)
+- 🔄 **Partially Migrated** - Some scenarios covered, others remain imperative due to technical constraints
+
+## CSS Properties Matrix
+
+| **Element State** | **Parent State** | **Visibility** | **Display** | **Opacity** | **Expected Result** | **Status** |
+|-------------------|------------------|----------------|-------------|-------------|---------------------|------------|
+| Applied to element | - | `hidden` | - | - | Hidden | ✅ |
+| - | Applied to parent | `hidden` | - | - | Child hidden | ✅ |
+| Applied to `<td>` | - | `collapse` | - | - | Hidden | ✅ |
+| Applied to `<tr>` | - | `collapse` | - | - | Hidden | ✅ |
+| - | Applied to parent | `collapse` | - | - | Child hidden | ✅ |
+| `input type="hidden"` | - | - | - | - | Hidden | ✅ |
+| Applied to element | - | - | `none` | - | Hidden | ✅ |
+| - | Applied to parent | - | `none` | - | Child hidden | ✅ |
+| - | Parent has inline | - | `inline` | - | Child with `display: block` visible | ❌ |
+| Applied to element | - | - | - | `0` | Hidden | ✅ |
+| - | Applied to parent | - | - | `0` | Child hidden | ✅ |
+| Applied to element | - | - | - | `0.5` | Visible | ✅ |
+
+## Dimensions Matrix
+
+| **Width** | **Height** | **Content** | **Visibility** | **Display** | **Opacity** | **Expected Result** | **Status** |
+|-----------|------------|-------------|----------------|-------------|-------------|---------------------|------------|
+| 0 | 100px | Text content | - | - | - | Visible | ✅ |
+| 50px | 0 | Text content | - | - | - | Visible | ✅ |
+| 0 | 50px | Whitespace only | - | - | - | Hidden | ✅ |
+| 0 | 100px | No content | - | - | - | Hidden | ✅ |
+| 50px | 0 | No content | - | - | - | Hidden | ✅ |
+| 0 | 100px | - | - | - | - | Child hidden (overflow: hidden) | ✅ |
+| 100px | 0 | - | - | - | - | Child hidden (overflow: hidden) | ✅ |
+| 0 | 100px | - | - | - | - | Descendant hidden (overflow: hidden) | ✅ |
+| 100px | 0 | - | - | - | - | Descendant hidden (overflow: hidden) | ✅ |
+| 100px | 100px | - | - | - | - | Child visible (overflow: hidden) | ✅ |
+| 0 | 0 | - | - | - | - | Child hidden (overflow: auto) | ✅ |
+
+## Positioning Matrix
+
+| **Element Position** | **Parent Position** | **Parent Dimensions** | **Visibility** | **Display** | **Opacity** | **Expected Result** | **Status** |
+|---------------------|---------------------|----------------------|----------------|-------------|-------------|---------------------|------------|
+| `absolute` | - | Zero width | - | - | - | Element visible | ✅ |
+| `absolute` | - | Zero width ancestor | - | - | - | Element visible | ✅ |
+| Static | `absolute` | Zero width | - | - | - | Element hidden | ✅ |
+| `fixed` | - | Normal | - | - | - | Element visible | ✅ |
+| `fixed` | - | Normal ancestor | - | - | - | Element visible | ✅ |
+| `fixed` | - | Normal | Covered by another | - | - | Element hidden | ✅ |
+| `fixed` | - | Normal | Off-screen | - | - | Element hidden | ✅ |
+| `fixed` + `pointer-events: none` | - | Normal | - | - | - | Element visible | ✅ |
+| `fixed` | `pointer-events: none` | Normal | - | - | - | Element visible | ✅ |
+| `fixed` | `pointer-events: none` | Normal | Covered by another | - | - | Element hidden | ✅ |
+| `sticky` | - | Normal | - | - | - | Element visible | ✅ |
+
+## Form Elements Matrix
+
+| **Element Type** | **Parent State** | **Element State** | **Visibility** | **Display** | **Opacity** | **Expected Result** | **Status** |
+|------------------|------------------|-------------------|----------------|-------------|-------------|---------------------|------------|
+| `<option>` | Visible `<select>` | Default | - | - | - | Visible | ✅ |
+| `<optgroup>` | Visible `<select>` | Default | - | - | - | Visible | ✅ |
+| `<option>` | Hidden `<select>` | Default | - | - | - | Hidden | ✅ |
+| `<option>` | Visible `<select>` | - | - | `none` | - | Hidden | ✅ |
+| `<option>` | Outside `<select>` | Default | - | - | - | Follows regular logic | ✅ |
+
+## Overflow Clipping Matrix
+
+| **Overflow Type** | **Element Position** | **Element Location** | **Visibility** | **Display** | **Opacity** | **Expected Result** | **Status** |
+|-------------------|---------------------|---------------------|----------------|-------------|-------------|---------------------|------------|
+| `overflow: hidden` | Static | Out of bounds left | - | - | - | Hidden | ✅ |
+| `overflow: hidden` | Static | Out of bounds right | - | - | - | Hidden | ✅ |
+| `overflow: hidden` | Static | Out of bounds above | - | - | - | Hidden | ✅ |
+| `overflow: hidden` | Static | Out of bounds below | - | - | - | Hidden | ✅ |
+| `overflow-y: hidden` | Static | Out of bounds vertically | - | - | - | Hidden | ✅ |
+| `overflow-x: hidden` | Static | Out of bounds horizontally | - | - | - | Hidden | ✅ |
+| `overflow: hidden` | Static | In bounds | - | - | - | Visible | ✅ |
+| `overflow: auto` | Static | Out of ancestor bounds | - | - | - | Hidden | ✅ |
+| `overflow: scroll` | Static | Out of parent bounds | - | - | - | Hidden | ✅ |
+| `overflow: hidden` | `absolute` | In bounds | - | - | - | Visible | ✅ |
+| `overflow: hidden` | `absolute` | Out of bounds | - | - | - | Hidden | ✅ |
+| `overflow: hidden` | `relative` | Out of ancestor bounds | - | - | - | Hidden | ✅ |
+| `overflow: visible` | `relative` | Out of ancestor bounds | - | - | - | Visible | ✅ |
+| `overflow: hidden` | Flex container | Out of bounds | - | - | - | Hidden | ✅ |
+
+## Transform Matrix
+
+| **Transform Type** | **Scale Value** | **Element Location** | **Visibility** | **Display** | **Opacity** | **Expected Result** | **Status** |
+|-------------------|-----------------|---------------------|----------------|-------------|-------------|---------------------|------------|
+| `transform: scale()` | `(0,0)` | Self | - | - | - | Hidden | ✅ |
+| `transform: scale()` | `(1,1)` | Self | - | - | - | Visible | ✅ |
+| `transform: scale()` | `(0,0)` | Outside parent | - | - | - | Hidden | ✅ |
+| `transform: scale()` | `(1,1)` | Inside parent | - | - | - | Visible | ✅ |
+| `transform: scaleX()` | `0` | Self | - | - | - | Hidden | ✅ |
+| `transform: scaleY()` | `0` | Self | - | - | - | Hidden | ✅ |
+| `transform: scaleZ()` | `0` | Self | - | - | - | Hidden | ✅ |
+| `transform: rotateX()` | `90deg` | Self | - | - | - | Hidden | ✅ |
+| `transform: rotateY()` | `90deg` | Self | - | - | - | Hidden | ✅ |
+| `transform: rotateZ()` | `90deg` | Self | - | - | - | Visible | ✅ |
+| `transform: rotateX() rotateY()` | `90deg, 90deg` | Self | - | - | - | Hidden | ✅ |
+| `transform: translateX()` | Negative offset | Out of ancestor bounds | - | - | - | Hidden | ✅ |
+| `transform: translateX()` | Negative offset | In ancestor bounds | - | - | - | Visible | ✅ |
+| `transform: skew()` | Any value | Self | - | - | - | Visible | ✅ |
+| `transform: rotate()` | Any value | Self | - | - | - | Visible | ✅ |
+| Multiple transforms | With scale(0,0) | Self | - | - | - | Hidden | ✅ |
+| Multiple transforms | With 90° rotation | Self | - | - | - | Hidden | ✅ |
+| Transform + text content | Any value | Self | - | - | - | Visible | ✅ |
+| Transform + zero dimensions | Any value | Self | - | - | - | Visible (with text) | ✅ |
+| Transform + overflow | Any value | Self | - | - | - | Hidden | ✅ |
+| `backface-visibility: hidden` | `rotateX(180deg)` | Self | - | - | - | Hidden | ✅ |
+| `backface-visibility: hidden` | `rotateY(180deg)` | Self | - | - | - | Hidden | ✅ |
+| `backface-visibility: hidden` | `rotateZ(180deg)` | Self | - | - | - | Visible | ✅ |
+| `backface-visibility: hidden` | `rotate3d(180deg)` | Self | - | - | - | Hidden | ✅ |
+| `backface-visibility: visible` | `rotateX(180deg)` | Self | - | - | - | Visible | ✅ |
+| `backface-visibility: hidden` + `preserve-3d` | `rotateY(45deg)` | Self | - | - | - | Visible | ✅ |
+
+## Clip-Path Matrix
+
+| **Clip-Path Type** | **Element Location** | **Mode** | **Visibility** | **Display** | **Opacity** | **Expected Result** | **Status** |
+|-------------------|---------------------|----------|----------------|-------------|-------------|---------------------|------------|
+| `clip-path: polygon(0 0, 0 0, 0 0, 0 0)` | Outside path | Fast only | - | - | - | Hidden | ✅ |
+| `clip-path: circle(100%)` | Inside path | Fast only | - | - | - | Visible | ✅ |
+| `clip-path: inset(25% 25% 25% 25%)` | Outside path | Fast only | - | - | - | Hidden | ✅ |
+| `clip-path: polygon(0% 0%, 100% 0%, 50% 100%)` | Inside path | Fast only | - | - | - | Visible | ✅ |
+| `clip-path: ellipse(50% 50% at 50% 50%)` | Inside path | Fast only | - | - | - | Visible | ✅ |
+| `clip-path: path('M 0 0 L 100 0 L 100 100 L 0 100 Z')` | Inside path | Fast only | - | - | - | Visible | ✅ |
+
+## Special Cases Matrix
+
+| **Category** | **Element** | **State** | **Visibility** | **Display** | **Opacity** | **Expected Result** | **Status** |
+|--------------|-------------|-----------|----------------|-------------|-------------|---------------------|------------|
+| HTML/Body | `<html>` | Default | - | - | - | Always visible | ✅ |
+| HTML/Body | `<body>` | Default | - | - | - | Always visible | ✅ |
+| HTML/Body | `<html>` | - | - | `none` | - | Still visible | ✅ |
+| HTML/Body | `<body>` | - | - | `none` | - | Still visible | ✅ |
+| Detached | Any element | Not in DOM | - | - | - | Hidden | ❌ |
+| Backface | Any element | `backface-visibility: hidden` + `rotateX(180deg)` | - | - | - | Hidden | ✅ |
+| Scroll | Any element | Requires scroll to be visible | - | - | - | Hidden (with scroll suggestion) | ✅ |
+
+## Migration Summary
+
+### ✅ **Fully Migrated Categories:**
+- **Basic CSS Properties** - All visibility, display, opacity, and table collapse scenarios
+- **Dimensions** - All dimensional scenarios including text content edge cases
+- **Positioning** - All positioning scenarios (absolute, fixed, sticky)
+- **Form Elements** - All form element scenarios including options outside select
+- **Display Inline/Block Interactions** - Parent inline with child block
+- **Overflow Clipping** - All overflow scenarios (hidden, auto, scroll, directional overflow)
+- **Transform Effects** - All transform scenarios including scale, rotation, translation, skew, backface-visibility
+- **Clip-Path** - All CSS clip-path scenarios (polygon, circle, inset, ellipse, path)
+- **Special Cases** - HTML/body elements and scroll requirements (migrated to declarative format)
+
+### 🔄 **Partially Migrated Categories:**
+- None - All testable scenarios have been migrated
+
+### ❌ **Not Yet Migrated Categories:**
+- **Detached Elements** - Elements not in DOM (cannot be migrated due to technical constraints)
+
+## Migration Notes
+
+### Declarative Test Structure
+
+The visibility tests have been migrated from imperative test cases to declarative HTML fixtures:
+
+- **`basic-css-properties.html`** - Tests CSS visibility, display, and opacity properties ✅
+- **`overflow.html`** - Tests dimensional scenarios, overflow clipping, and clip-path scenarios ✅
+- **`positioning.html`** - Tests positioning scenarios (absolute, fixed, sticky) ✅
+- **`form-elements.html`** - Tests form element visibility (select, option, optgroup) ✅
+- **`transforms.html`** - Tests CSS transform effects including scale, rotation, translation, skew, and backface-visibility ✅
+
+### Test Case Attributes
+
+Each test case uses these attributes:
+- `cy-expect="visible"` or `cy-expect="hidden"` - Expected visibility state
+- `cy-fast-expect` / `cy-legacy-expect` - Mode-specific expectations when they differ
+- `cy-label` - Descriptive label for test case identification
+- `cy-section` - Groups related test cases together
+
+### Mode Differences
+
+Some test cases behave differently between fast and legacy visibility modes:
+- Zero dimensions with overflow auto
+- Positioning with zero dimensions
+- Clip-path scenarios (fast mode only - legacy mode does not support clip-path)
+
+### Coverage Completeness
+
+This matrix ensures comprehensive coverage of:
+- All CSS properties that affect visibility
+- Dimensional edge cases with text content
+- Positioning scenarios and their interactions
+- Overflow clipping in various contexts
+- Transform effects on visibility
+- Form element special cases
+- Browser-specific behaviors and edge cases
diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index 43c7e31bbbf..a97594245d0 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -1,13 +1,56 @@
 // @ts-ignore
 const { $, dom } = Cypress
 
-describe('src/cypress/dom/visibility', () => {
-  const add = (el) => {
-    return $(el).appendTo(cy.$$('body'))
+describe('src/cypress/dom/visibility', {
+  slowTestThreshold: 500,
+}, () => {
+  function assertVisibilityForEl (el: HTMLElement) {
+    const expected = el.getAttribute('cy-expect') ?? (
+      Cypress.config('experimentalFastVisibility') ?
+        el.getAttribute('cy-fast-expect') :
+        el.getAttribute('cy-legacy-expect')
+    )
+
+    if (!expected) {
+      throw new Error(`Expected attribute 'cy-expect' or 'cy-fast-expect' or 'cy-legacy-expect' not found on test case_ element ${el.outerHTML}`)
+    }
+
+    expect(
+      $(el).is(`:${expected}`),
+      `${el.getAttribute('cy-label') ?? el.textContent ?? 'empty text content'} should be ${expected}`,
+    ).to.be.true
+
+    expect(el).to.be[expected]
+
+    cy.wrap(el).should(`be.${expected}`)
+
+    const opposite = expected === 'hidden' ? 'visible' : 'hidden'
+
+    expect(
+      $(el).is(`:${opposite}`),
+      `${el.getAttribute('cy-label') ?? el.textContent ?? 'empty text content'} should not be ${opposite}`,
+    ).to.be.false
+
+    expect(el).to.not.be[opposite]
+
+    cy.wrap(el).should(`not.be.${opposite}`)
   }
 
-  const reasonIs = ($el: JQuery, str: string) => {
-    expect(dom.getReasonIsHidden($el)).to.eq(str)
+  function prepareFixtureSection (section: string) {
+    cy.get('.test-section').each((el) => el.removeClass('active'))
+    cy.get(`[cy-section="${section}"]`).then((el) => el.addClass('active'))
+    cy.get(`[cy-section="${section}"]`).scrollIntoView()
+  }
+
+  function assertVisibilityForSections (sections: string[]) {
+    for (const section of sections) {
+      it(`detects visibility for ${section} test cases`, () => {
+        prepareFixtureSection(section)
+        cy.get(`[cy-section="${section}"] .testCase`).then((els) => {
+          els.get().forEach(assertVisibilityForEl)
+        })
+      })
+    }
   }
 
   beforeEach(() => {
@@ -169,1337 +212,288 @@ describe('src/cypress/dom/visibility', () => {
     })
   })
 
-  context('hidden/visible overrides', () => {
-    beforeEach(function () {
-      // ensure all tests run against a scrollable window
-      const scrollThisIntoView = add('<div style="height: 1000px;"></div><div>Should be in view</div>')
-
-      this.$visHidden = add('<ul style="visibility: hidden;"></ul>')
-      this.$parentVisHidden = add('<div class="invis" style="visibility: hidden;"><button>parent visibility: hidden</button></div>')
-      this.$displayNone = add('<button style="display: none">display: none</button>')
-      this.$inputHidden = add('<input type="hidden" value="abcdef">')
-      this.$divNoWidth = add('<div style="width: 0; height: 100px;"></div>')
-      this.$divNoHeight = add('<div style="width: 50px; height: 0px;"></div>')
-      this.$divDetached = $('<div>foo</div>')
-      this.$divVisible = add(`<div>visible</div>`)
-
-      this.$optionInSelect = add(`\
-<select>
-  <option>Naruto</option>
-</select>\
-`)
-
-      this.$optgroupInSelect = add(`\
-<select>
-  <optgroup label='Shinobi'>
-    <option>Naruto</option>
-  </optgroup>
-</select>\
-`)
-
-      this.$optionInHiddenSelect = add(`\
-<select style='display: none'>
-  <option>Sasuke</option>
-</select>\
-`)
-
-      this.$optionOutsideSelect = add(`\
-<div style='display: none'>
-  <option id='option-hidden'>Sasuke</option>
-</div>
-<div>
-  <option id='option-visible'>Naruto</option>
-</div>\
-`)
-
-      this.$optionHiddenInSelect = add(`\
-<select>
-  <option>--Select--</option>
-  <option id="hidden-opt" style='display: none'>Sakura</option>
-</select>\
-`)
-
-      this.$btnOpacityZero = add(`\
-<button style="opacity: 0;">opacity: 0</button>\
-`)
-
-      this.$btnOpacityHalf = add(`\
-<button style="opacity: 0.5;">opacity: 0.5</button>\
-`)
-
-      this.$parentOpacityZero = add(`\
-<div style="opacity: 0;">
-  <button>parent opacity: 0</button>
-</div>\
-`)
-
-      this.$tableVisCollapse = add(`\
-<table>
-  <tr>
-    <td>Naruto</td>
-    <td class='collapse' style='visibility: collapse;'>Sasuke</td>
-    <td>Sakura</td>
-  </tr>
-  <tr class='collapse' style='visibility: collapse;'>
-    <td>Kaguya</td>
-    <td><span id='collapse-span'>Madara</span></td>
-    <td>Orochimaro</td>
-  </tr>
-</table>\
-`)
-
-      this.$parentNoWidth = add(`\
-<div style='width: 0; height: 100px; overflow: hidden;'>
-    <span>parent width: 0</span>
-</div>`)
-
-      this.$parentNoHeight = add(`\
-<div style='width: 100px; height: 0px; overflow: hidden;'>
-  <span>parent height: 0</span>
-</div>`)
-
-      this.$parentNoWidthHeightOverflowAuto = add(`\
-<div style='width: 0; height: 0px; overflow: auto;'>
-  <span>parent no size, overflow: auto</span>
-</div>`)
-
-      this.$parentWithWidthHeightNoOverflow = add(`\
-<div style='width: 100px; height: 100px; overflow: hidden;'>
-    <span>parent with size, overflow: hidden</span>
-</div>`)
-
-      this.$ancestorWithWidthHeightNoOverflow = add(`\
-      <div style='width: 100px; height: 100px'>
-          <div><span>parent with size, overflow: hidden</span></div>
-      </div>`)
-
-      this.$ancestorNoWidth = add(`\
-      <div style='width: 0; height: 100px; overflow: hidden;'>
-        <div>
-          <span>ancestor width: 0</span>
-        </div>
-      </div>`)
-
-      this.$ancestorNoHeight = add(`\
-      <div style='width: 100px; height: 0px; overflow: hidden;'>
-        <div>
-          <span>ancestor height: 0</span>
-        </div>
-      </div>`)
-
-      this.$childPosAbs = add(`\
-<div style='width: 0; height: 100px; overflow: hidden;'>
-  <div style='height: 500px; width: 500px;'>
-    <span style='position: absolute;'>position: absolute</span>
-  </div>
-</div>`)
-
-      this.$childPosFixed = add(`\
-<div id="childPosFixed" style='width: 100px; height: 100px; overflow: hidden;'>
-  <button style='position: fixed; top: 0;'>position: fixed</button>
-</div>`)
-
-      this.$childPointerEventsNone = add(`\
-<div style="position: fixed; top: 60px;">
-  <span style="pointer-events: none;">child pointer-events: none</span>
-</div>\
-`)
-
-      this.$descendentPosAbs = add(`\
-<div style='width: 0; height: 100px; overflow: hidden;'>
-  <div style='height: 500px; width: 500px; position: absolute;'>
-    <span>no width, descendant position: absolute</span>
-  </div>
-</div>`)
-
-      this.$descendentPosFixed = add(`\
-<div id="descendentPosFixed" style='width: 0; height: 100px; overflow: hidden;'>
-  <div style='height: 500px; width: 500px; position: fixed; top: 0; right: 0;'>
-    <button>no width, descendant position: fixed</button>
-  </div>
-</div>`)
-
-      this.$descendantInPosFixed = add(`\
-<div>
-  <div id="descendantInPosFixed" style="width: 200px; position: fixed; bottom: 0; right: 0">
-    underneath
-    <div style="width: 200px; position: fixed; bottom: 0; right: 0">on top of the other</div>
-  </div>
-</div>\
-`)
-
-      this.$coveredUpPosFixed = add(`\
-<div>
-  <div id="coveredUpPosFixed" style="position: fixed; bottom: 0; left: 0">underneath</div>
-  <div style="position: fixed; bottom: 0; left: 0">on top</div>
-</div>\
-`)
-
-      this.$offScreenPosFixed = add(`\
-<div id="offScreenPosFixed" style="position: fixed; bottom: 0; left: -100px;">off screen</div>\
-`)
-
-      this.$parentPosAbs = add(`\
-<div style='width: 0; height: 100px; overflow: hidden; position: absolute;'>
-  <div style='height: 500px; width: 500px;'>
-    <span>parent position: absolute</span>
-  </div>
-</div>`)
-
-      this.$parentDisplayNone = add(`\
-<div id="none" style='display: none;'>
-  <span>parent display: none</span>
-</div>\
-`)
-
-      this.$parentPointerEventsNone = add(`\
-<div style="pointer-events: none">
-  <span style="position: fixed; left: 0; top: 50%;">parent pointer-events: none</span>
-</div>\
-`)
-
-      this.$parentPointerEventsNoneCovered = add(`\
-<div style="pointer-events: none;">
-  <span style="position: fixed; top: 40px;">parent pointer-events: none</span>
-</div>
-<span style="position: fixed; top: 40px; background: red;">covering the element with pointer-events: none</span>\
-`)
-
-      this.$parentDisplayInlineChildDisplayBlock = add(`\
-<div>
-  <span>
-    <label style="display: block;">display: block</label>
-  </span>
-</div>\
-`)
-
-      this.$elOutOfParentBoundsToLeft = add(`\
-<div style='width: 100px; height: 100px; overflow: hidden; position: relative;'>
-  <span style='position: absolute; width: 100px; height: 100px; left: -100px; top: 0px;'>position: absolute, out of bounds left</span>
-</div>\
-`)
-
-      this.$elOutOfParentBoundsToRight = add(`\
-<div id="elOutOfParentBoundsToRight" style='width: 100px; height: 100px; overflow: hidden; position: relative;'>
-  <span style='position: absolute; width: 100px; height: 100px; right: -100px; top: 0px;'>position: absolute, out of bounds right</span>
-</div>\
-`)
-
-      this.$elOutOfParentBoundsAbove = add(`\
-<div style='width: 100px; height: 100px; overflow: hidden; position: fixed;'>
-  <span id='elOutOfParentBoundsAbove' style='position: absolute; width: 100px; height: 100px; left: 0px; top: -100px;'>position: absolute, out of bounds above</span>
-</div>\
-`)
-
-      this.$elOutOfParentBoundsBelow = add(`\
-<div id="elOutOfParentBoundsBelow" style='width: 100px; height: 100px; overflow: hidden; position: relative;'>
-  <span style='position: absolute; width: 100px; height: 100px; left: 0px; bottom: -100px;'>position: absolute, out of bounds below</span>
-</div>\
-`)
-
-      this.$elOutOfParentWithOverflowYHiddenBounds = add(`\
-<div style='width: 100px; height: 100px; overflow-y: hidden; position: relative;'>
-  <span style='position: absolute; left: 0px; top: 200px;'>position: absolute, out of bounds below</span>
-</div>\
-`)
-
-      this.$elOutOfParentWithOverflowXHiddenBounds = add(`\
-<div style='width: 100px; height: 100px; overflow-x: hidden; position: relative;'>
-  <span style='position: absolute; left: 200px; top: 0;'>position: absolute, out of bounds below</span>
-</div>\
-`)
-
-      this.$elOutOfParentWithFlexAndOverflowHiddenBounds = add(`\
-<div style="display: flex; overflow: hidden;">
-  <div id="red" style="flex: 0 0 80%; background-color: red;">red</div>
-  <div id="green" style="flex: 0 0 80%; background-color: green;">green</div>
-  <div id="blue" style="background-color: blue;">blue</div>
-</div>\
-`)
-
-      this.$elOutOfParentWithOverflowHiddenBoundsButCloserPositionAbsoluteParent = add(`\
-<div style="border: 1px solid red; width: 200px; height: 200px; overflow: hidden;">
-  <div style="position: absolute; left: 300px; border: 1px solid blue; width: 200px; height: 200px;">
-    <span style="border: 1px solid green;">Hello</span>
-  </div>\
-`)
-
-      this.$elOutOfAncestorOverflowAutoBounds = add(`\
-<div style='width: 100px; height: 100px; overflow: auto;'>
-  <div style='width: 1000px; position: relative;'>
-    <span style='position: absolute; left: 300px; top: 0px;'>out of bounds, parent wide, ancestor overflow: auto</span>
-  </div>
-</div>\
-`)
-
-      this.$elInPosAbsParentsBounds = add(`\
-<div style='width: 200px; height: 200px; overflow: hidden; position: relative;'>
-  <div style='position: absolute;'>
-    <div style='position: absolute;'>
-      <span style='position: absolute; left: 50px; top: 50px;'>in bounds, parent position: absolute</span>
-    </div>
-  </div>
-</div>\
-`)
-
-      this.$elOutOfPosAbsParentsBounds = add(`\
-<div style='width: 100px; height: 100px; overflow: hidden; position: relative; top: 700px; left: 700px;'>
-  <div style='position: absolute;'>
-    <div style='position: absolute;'>
-      <span style='position: absolute; left: -350px; top: 0px;'>out of bounds, parent position: absolute</span>
-    </div>
-  </div>
-</div>\
-`)
-
-      this.$elInParentBounds = add(`\
-<div style='width: 100px; height: 100px; overflow: hidden; position: relative;'>
-  <span style='position: absolute; left: 0px; top: 0px;'>in bounds, position: absolute</span>
-</div>\
-`)
-
-      this.$elOutOfScrollingParentBounds = add(`\
-<div style='width: 100px; height: 100px; overflow: scroll; position: relative; top: 700px; left: 700px;'>
-  <div style='position: absolute;'>
-    <div style='position: absolute;'>
-      <span style='position: absolute; left: 300px; top: 0px;'>out of scrolling bounds, position: absolute</span>
-    </div>
-  </div>
-</div>\
-`)
-
-      this.$elIsOutOfBoundsOfAncestorsOverflowButWithinRelativeAncestor = add(`\
-<div style='padding: 100px; position: relative;'>
-  <div style='overflow: hidden;'>
-    <div>
-      <span style='position: absolute; left: 0; top: 0;'>in bounds of ancestor, position: absolute, parent overflow: hidden</span>
-    </div>
-  </div>
-</div>\
-`)
-
-      this.$elIsRelativeAndOutOfBoundsOfAncestorOverflow = add(`\
-<div style='overflow: hidden;'>
-  <div>
-    <span style='position: relative; left: 0; top: -200px;'>out of bounds, position: relative</span>
-  </div>
-</div>\
-`)
-
-      this.$elIsRelativeAndOutOfBoundsOfAncestorButAncestorShowsOverflow = add(`\
-<div>
-  <div>
-    <span style='position: relative; left: 0; top: -200px;'>out of bounds but visible, position: relative</span>
-  </div>
-</div>\
-`)
-
-      this.$parentOutOfBoundsButElInBounds = add(`\
-<div style='position: relative; padding: 20px;'>
-  <div style='overflow: hidden;'>
-    <div style='position: relative; left: 0; top: -100px;'>
-      <span style='position: relative; left: 0; top: 100px;'>in bounds of ancestor, parent out of bounds</span>
-    </div>
-  </div>
-</div>\
-`)
-
-      this.$parentWithClipPathAbsolutePositionElOutsideClipPath = add(`\
-<div style="position: absolute; clip-path: polygon(0 0, 0 0, 0 0, 0 0);">
-  <span>clip-path</span>
-</div>\
-`)
-
-      this.$parentWithClipPathAbsolutePositionElInsideClipPath = add(`\
-<div style="position: absolute; clip-path: circle(100%);">
-  <span>clip-path</span>
-</div>\
-`)
-
-      this.$parentWithTransformScaleElOutsideScale = add(`\
-<div style="transform: scale(0,0)">
-  <span>TRANSFORMERS</span>
-</div>\
-`)
-
-      this.$parentWithTransformScaleElInsideScale = add(`\
-<div style="transform: scale(1,1)">
-  <span>TRANSFORMERS</span>
-</div>\
-`)
-
-      this.$ancestorTransformMakesElOutOfBoundsOfAncestor = add(`\
-<div style='margin-left: 100px; overflow: hidden; width: 100px;'>
-  <div style='transform: translateX(-100px); width: 200px;'>
-    <div style='width: 100px;'>
-      <span>out of ancestor's bounds due to ancestor translate</span>
-    </div>
-  </div>
-</div>\
-`)
-
-      this.$ancestorTransformMakesElInBoundsOfAncestor = add(`\
-<div style='margin-left: 100px; overflow: hidden; width: 100px;'>
-  <div style='transform: translateX(-100px); width: 300px;'>
-    <div style='display: inline-block; width: 100px;'>
-      <span>out of ancestor's bounds due to ancestor translate</span>
-    </div>
-    <div id='inbounds' style='display: inline-block; width: 100px;'>
-      <span>in ancestor's bounds due to ancestor translate</span>
-    </div>
-  </div>
-</div>\
-`)
-
-      // scroll the 2nd element into view so that
-      // there is always a scrollTop so we ensure
-      // its factored in (window vs viewport) calculations
-      scrollThisIntoView.get(1).scrollIntoView()
-    })
-
-    describe('html or body', () => {
-      it('is visible if html', () => {
-        expect(cy.$$('html').is(':hidden')).to.be.false
-        expect(cy.$$('html').is(':visible')).to.be.true
-
-        expect(cy.$$('html')).not.to.be.hidden
-        expect(cy.$$('html')).to.be.visible
-
-        cy.wrap(cy.$$('html')).should('not.be.hidden')
-        cy.wrap(cy.$$('html')).should('be.visible')
-      })
-
-      it('is visible if body', () => {
-        expect(cy.$$('body').is(':hidden')).to.be.false
-        expect(cy.$$('body').is(':visible')).to.be.true
-
-        expect(cy.$$('body')).not.to.be.hidden
-        expect(cy.$$('body')).to.be.visible
-
-        cy.wrap(cy.$$('body')).should('not.be.hidden')
-        cy.wrap(cy.$$('body')).should('be.visible')
-      })
-
-      it('is visible if display none on body or html', () => {
-        cy.$$('html').css('display', 'none')
-        cy.$$('body').css('display', 'none')
-
-        expect(cy.$$('html')).not.to.be.hidden
-        expect(cy.$$('html')).to.be.visible
-
-        expect(cy.$$('body')).not.to.be.hidden
-        expect(cy.$$('body')).to.be.visible
+  describe('visibility scenarios', () => {
+    describe('html and body overrides', () => {
+      beforeEach(() => {
+        cy.visit('/fixtures/empty.html')
       })
-    })
-
-    describe('css visibility', () => {
-      it('is hidden if .css(visibility) is hidden', function () {
-        expect(this.$visHidden.is(':hidden')).to.be.true
-        expect(this.$visHidden.is(':visible')).to.be.false
-
-        expect(this.$visHidden).to.be.hidden
-        expect(this.$visHidden).to.not.be.visible
-
-        cy.wrap(this.$visHidden).should('be.hidden')
-        cy.wrap(this.$visHidden).should('not.be.visible')
-      })
-
-      it('is hidden if parents have .css(visibility) hidden', function () {
-        expect(this.$parentVisHidden.find('button').is(':hidden')).to.be.true
-        expect(this.$parentVisHidden.find('button').is(':visible')).to.be.false
-
-        expect(this.$parentVisHidden.find('button')).to.be.hidden
-        expect(this.$parentVisHidden.find('button')).to.not.be.visible
-
-        cy.wrap(this.$parentVisHidden).find('button').should('be.hidden')
-        cy.wrap(this.$parentVisHidden).find('button').should('not.be.visible')
-      })
-
-      it('is hidden if visibility collapse', function () {
-        expect(this.$tableVisCollapse.find('td.collapse')).to.be.hidden
-        expect(this.$tableVisCollapse.find('td.collapse')).to.not.be.visible
-
-        expect(this.$tableVisCollapse.find('tr.collapse')).to.be.hidden
-        expect(this.$tableVisCollapse.find('tr.collapse')).to.not.be.visible
-
-        expect(this.$tableVisCollapse.find('tr.collapse td')).to.be.hidden
-        expect(this.$tableVisCollapse.find('tr.collapse td')).to.not.be.visible
-      })
-
-      it('is hidden if parent has visibility collapse', function () {
-        expect(this.$tableVisCollapse.find('tr.collapse td')).to.be.hidden
-        expect(this.$tableVisCollapse.find('tr.collapse td')).to.not.be.visible
-
-        expect(this.$tableVisCollapse.find('#collapse-span')).to.be.hidden
-        expect(this.$tableVisCollapse.find('#collapse-span')).to.not.be.visible
-      })
-
-      it('is hidden if input type hidden', function () {
-        expect(this.$inputHidden.is(':hidden')).to.be.true
-        expect(this.$inputHidden.is(':visible')).to.be.false
-
-        expect(this.$inputHidden).to.be.hidden
-        expect(this.$inputHidden).to.not.be.visible
-
-        cy.wrap(this.$inputHidden).should('be.hidden')
-        cy.wrap(this.$inputHidden).should('not.be.visible')
-      })
-    })
-
-    describe('option and optgroup', () => {
-      it('is visible if option in visible select', function () {
-        expect(this.$optionInSelect.find('option').is(':hidden')).to.be.false
-        expect(this.$optionInSelect.find('option').is(':visible')).to.be.true
-
-        expect(this.$optionInSelect.find('option')).not.to.be.hidden
-        expect(this.$optionInSelect.find('option')).to.be.visible
-
-        cy.wrap(this.$optionInSelect.find('option')).should('not.be.hidden')
-        cy.wrap(this.$optionInSelect.find('option')).should('be.visible')
-      })
-
-      it('is visible if optgroup in visible select', function () {
-        expect(this.$optgroupInSelect.find('optgroup').is(':hidden')).to.be.false
-        expect(this.$optgroupInSelect.find('optgroup').is(':visible')).to.be.true
-
-        expect(this.$optgroupInSelect.find('optgroup')).not.to.be.hidden
-        expect(this.$optgroupInSelect.find('optgroup')).to.be.visible
-
-        cy.wrap(this.$optgroupInSelect.find('optgroup')).should('not.be.hidden')
-        cy.wrap(this.$optgroupInSelect.find('optgroup')).should('be.visible')
-      })
-
-      it('is hidden if option in hidden select', function () {
-        expect(this.$optionInHiddenSelect.find('option').is(':hidden')).to.be.true
-        expect(this.$optionInHiddenSelect.find('option').is(':visible')).to.be.false
-
-        expect(this.$optionInHiddenSelect.find('option')).to.be.hidden
-        expect(this.$optionInHiddenSelect.find('option')).not.to.be.visible
 
-        cy.wrap(this.$optionInHiddenSelect.find('option')).should('be.hidden')
-        cy.wrap(this.$optionInHiddenSelect.find('option')).should('not.be.visible')
-      })
-
-      it('is hidden if option is display none', function () {
-        expect(this.$optionHiddenInSelect.find('#hidden-opt').is(':hidden')).to.be.true
-        expect(this.$optionHiddenInSelect.find('#hidden-opt').is(':visible')).to.be.false
-
-        expect(this.$optionHiddenInSelect.find('#hidden-opt')).to.be.hidden
-        expect(this.$optionHiddenInSelect.find('#hidden-opt')).not.to.be.visible
-
-        cy.wrap(this.$optionHiddenInSelect.find('#hidden-opt')).should('be.hidden')
-        cy.wrap(this.$optionHiddenInSelect.find('#hidden-opt')).should('not.be.visible')
-      })
-
-      it('follows regular visibility logic if option outside of select', { browser: '!webkit' }, function () {
-        expect(this.$optionOutsideSelect.find('#option-hidden').is(':hidden')).to.be.true
-        expect(this.$optionOutsideSelect.find('#option-hidden')).to.be.hidden
-        cy.wrap(this.$optionOutsideSelect.find('#option-hidden')).should('be.hidden')
-
-        expect(this.$optionOutsideSelect.find('#option-visible').is(':visible')).to.be.true
-        expect(this.$optionOutsideSelect.find('#option-visible')).to.be.visible
-
-        cy.wrap(this.$optionOutsideSelect.find('#option-visible')).should('be.visible')
-      })
-    })
+      describe('html is display none', () => {
+        beforeEach(() => {
+          cy.get('html').then(($el) => {
+            $el.css('display', 'none')
+          })
+        })
 
-    describe('css opacity', () => {
-      it('is hidden if opacity is 0', function () {
-        expect(this.$btnOpacityZero.is(':hidden')).to.be.true
-        expect(this.$btnOpacityZero.is(':visible')).to.be.false
+        it('is always visible', () => {
+          expect(cy.$$('html').is(':hidden')).to.be.false
+          expect(cy.$$('html').is(':visible')).to.be.true
 
-        expect(this.$btnOpacityZero).to.be.hidden
-        expect(this.$btnOpacityZero).not.to.be.visible
+          expect(cy.$$('html')).not.to.be.hidden
+          expect(cy.$$('html')).to.be.visible
 
-        cy.wrap(this.$btnOpacityZero).should('be.hidden')
-        cy.wrap(this.$btnOpacityZero).should('not.be.visible')
+          cy.wrap(cy.$$('html')).should('not.be.hidden')
+          cy.wrap(cy.$$('html')).should('be.visible')
+        })
       })
 
-      it('is hidden if parent has `opacity: 0`', function () {
-        expect(this.$parentOpacityZero.find('button').is(':hidden')).to.be.true
-        expect(this.$parentOpacityZero.find('button').is(':visible')).to.be.false
-
-        expect(this.$parentOpacityZero.find('button')).to.be.hidden
-        expect(this.$parentOpacityZero.find('button')).not.to.be.visible
-
-        cy.wrap(this.$parentOpacityZero.find('button')).should('be.hidden')
-        cy.wrap(this.$parentOpacityZero.find('button')).should('not.be.visible')
-      })
+      describe('body', () => {
+        beforeEach(() => {
+          cy.get('body').then(($el) => {
+            $el.css('display', 'none')
+          })
+        })
 
-      it('is visible if opacity is greater than 0 but less than 1', function () {
-        expect(this.$btnOpacityHalf.is(':visible')).to.be.true
-        expect(this.$btnOpacityHalf.is(':hidden')).to.be.false
+        it('is always visible', () => {
+          expect(cy.$$('body').is(':hidden')).to.be.false
+          expect(cy.$$('body').is(':visible')).to.be.true
 
-        expect(this.$btnOpacityHalf).to.be.visible
-        expect(this.$btnOpacityHalf).not.to.be.hidden
+          expect(cy.$$('body')).not.to.be.hidden
+          expect(cy.$$('body')).to.be.visible
 
-        cy.wrap(this.$btnOpacityHalf).should('be.visible')
-        cy.wrap(this.$btnOpacityHalf).should('not.be.hidden')
+          cy
+        })
       })
     })
 
-    describe('width and height', () => {
-      it('is visible when el.textContent, even if offsetWidth is 0', function () {
-        this.$divNoWidthTextContent = add('<div style="width: 0; height: 100px;">width: 0</div>')
-
-        expect(this.$divNoWidthTextContent.is(':hidden')).to.be.false
-        expect(this.$divNoWidthTextContent.is(':visible')).to.be.true
-
-        expect(this.$divNoWidthTextContent).to.not.be.hidden
-        expect(this.$divNoWidthTextContent).to.be.visible
-
-        cy.wrap(this.$divNoWidthTextContent).should('be.not.hidden')
-        cy.wrap(this.$divNoWidthTextContent).should('be.visible')
+    describe('basic CSS properties', () => {
+      beforeEach(() => {
+        cy.visit('/fixtures/visibility/basic-css-properties.html')
       })
 
-      it('is visible when el.textContent, even if offsetHeight is 0', function () {
-        this.$divNoHeightTextContent = add('<div style="width: 50px; height: 0px;">height: 0</div>')
-
-        expect(this.$divNoHeightTextContent.is(':hidden')).to.be.false
-        expect(this.$divNoHeightTextContent.is(':visible')).to.be.true
-
-        expect(this.$divNoHeightTextContent).to.not.be.hidden
-        expect(this.$divNoHeightTextContent).to.be.visible
-
-        cy.wrap(this.$divNoHeightTextContent).should('be.not.hidden')
-        cy.wrap(this.$divNoHeightTextContent).should('be.visible')
-      })
-
-      it('is hidden when when el.textContent contains only whitespace and offsetWidth is 0', function () {
-        this.$divNoHeightBlankTextContent = add('<div style="width: 0px; height: 50px;">   \n   \t  </div>')
-
-        expect(this.$divNoHeightBlankTextContent.is(':hidden')).to.be.true
-        expect(this.$divNoHeightBlankTextContent.is(':visible')).to.be.false
-
-        expect(this.$divNoHeightBlankTextContent).to.be.hidden
-        expect(this.$divNoHeightBlankTextContent).to.not.be.visible
-
-        cy.wrap(this.$divNoHeightBlankTextContent).should('be.hidden')
-        cy.wrap(this.$divNoHeightBlankTextContent).should('not.be.visible')
-      })
-
-      it('is hidden when no el.textContent with offsetHeight is 0', function () {
-        expect(this.$divNoHeight.is(':hidden')).to.be.true
-        expect(this.$divNoHeight.is(':visible')).to.be.false
-
-        expect(this.$divNoHeight).to.be.hidden
-        expect(this.$divNoHeight).to.not.be.visible
-
-        cy.wrap(this.$divNoHeight).should('be.hidden')
-        cy.wrap(this.$divNoHeight).should('not.be.visible')
-      })
-
-      it('is hidden when no el.textContent with offsetWidth is 0', function () {
-        expect(this.$divNoWidth.is(':hidden')).to.be.true
-        expect(this.$divNoWidth.is(':visible')).to.be.false
-
-        expect(this.$divNoWidth).to.be.hidden
-        expect(this.$divNoWidth).to.not.be.visible
-
-        cy.wrap(this.$divNoWidth).should('be.hidden')
-        cy.wrap(this.$divNoWidth).should('not.be.visible')
-      })
-
-      it('is hidden if parent has overflow: hidden and no width', function () {
-        expect(this.$parentNoWidth.find('span')).to.be.hidden
-        expect(this.$parentNoWidth.find('span')).to.not.be.visible
-      })
-
-      it('is hidden if parent has overflow: hidden and no height', function () {
-        expect(this.$parentNoHeight.find('span')).to.be.hidden
-        expect(this.$parentNoHeight.find('span')).to.not.be.visible
-      })
-
-      it('is hidden if ancestor has overflow:hidden and no width', function () {
-        expect(this.$ancestorNoWidth.find('span')).to.be.hidden
-        expect(this.$ancestorNoWidth.find('span')).to.not.be.visible
-      })
-
-      it('is hidden if ancestor has overflow:hidden and no height', function () {
-        expect(this.$ancestorNoHeight.find('span')).to.be.hidden
-        expect(this.$ancestorNoHeight.find('span')).to.not.be.visible
-      })
-
-      it('is visible when parent has positive dimensions even with overflow hidden', function () {
-        expect(this.$parentWithWidthHeightNoOverflow.find('span')).to.be.visible
-        expect(this.$parentWithWidthHeightNoOverflow.find('span')).to.not.be.hidden
-      })
-
-      it('is visible when ancestor has positive dimensions even with overflow hidden', function () {
-        expect(this.$ancestorWithWidthHeightNoOverflow.find('span')).to.be.visible
-        expect(this.$ancestorWithWidthHeightNoOverflow.find('span')).to.not.be.hidden
-      })
+      assertVisibilityForSections([
+        'visibility-property',
+        'display-property',
+        'opacity-property',
+        'input-elements',
+        'table-elements',
+        'box-interactions',
+      ])
     })
 
-    describe('css position', () => {
-      it('is visible if child has position: absolute', function () {
-        expect(this.$childPosAbs.find('span')).to.be.visible
-        expect(this.$childPosAbs.find('span')).not.be.hidden
-      })
-
-      it('is visible if child has position: fixed', function () {
-        expect(this.$childPosFixed.find('button')).to.be.visible
-        expect(this.$childPosFixed.find('button')).not.to.be.hidden
-      })
-
-      it('is visible if descendent from parent has position: fixed', function () {
-        expect(this.$descendentPosFixed.find('button')).to.be.visible
-        expect(this.$descendentPosFixed.find('button')).not.to.be.hidden
-      })
-
-      it('is visible if has position: fixed and descendent is found', function () {
-        expect(this.$descendantInPosFixed.find('#descendantInPosFixed')).to.be.visible
-        expect(this.$descendantInPosFixed.find('#descendantInPosFixed')).not.to.be.hidden
-      })
-
-      it('is hidden if position: fixed and covered up', function () {
-        expect(this.$coveredUpPosFixed.find('#coveredUpPosFixed')).to.be.hidden
-        expect(this.$coveredUpPosFixed.find('#coveredUpPosFixed')).not.to.be.visible
-      })
-
-      it('is hidden if position: fixed and off screen', function () {
-        expect(this.$offScreenPosFixed).to.be.hidden
-        expect(this.$offScreenPosFixed).not.to.be.visible
+    describe('form elements', () => {
+      beforeEach(() => {
+        cy.visit('/fixtures/visibility/form-elements.html')
       })
 
-      it('is visible if descendent from parent has position: absolute', function () {
-        expect(this.$descendentPosAbs.find('span')).to.be.visible
-        expect(this.$descendentPosAbs.find('span')).to.not.be.hidden
-      })
-
-      it('is hidden if only the parent has position absolute', function () {
-        expect(this.$parentPosAbs.find('span')).to.be.hidden
-        expect(this.$parentPosAbs.find('span')).to.not.be.visible
-      })
-
-      it('is visible if position: fixed and parent has pointer-events: none', function () {
-        expect(this.$parentPointerEventsNone.find('span')).to.be.visible
-        expect(this.$parentPointerEventsNone.find('span')).to.not.be.hidden
-      })
-
-      it('is not visible if covered when position: fixed and parent has pointer-events: none', function () {
-        expect(this.$parentPointerEventsNoneCovered.find('span')).to.be.hidden
-        expect(this.$parentPointerEventsNoneCovered.find('span')).to.not.be.visible
-      })
-
-      it('is visible if pointer-events: none and parent has position: fixed', function () {
-        expect(this.$childPointerEventsNone.find('span')).to.be.visible
-        expect(this.$childPointerEventsNone.find('span')).to.not.be.hidden
-      })
-
-      it('is visible when position: sticky', () => {
-        cy.visit('fixtures/sticky.html')
-        cy.get('#button').should('be.visible')
-      })
+      assertVisibilityForSections([
+        'select-and-option-elements',
+        'optgroup-elements',
+        'options-outside-select',
+        'hidden-options-within-visible-select',
+        'input-elements',
+      ])
     })
 
-    describe('css display', function () {
-      // https://github.com/cypress-io/cypress/issues/6183
-      it('parent is visible if display inline and child has display block', function () {
-        expect(this.$parentDisplayInlineChildDisplayBlock.find('span')).to.be.visible
-        expect(this.$parentDisplayInlineChildDisplayBlock.find('span')).to.not.be.hidden
-      })
+    describe('overflow', () => {
+      beforeEach(() => {
+        cy.visit('/fixtures/visibility/overflow.html')
+      })
+
+      assertVisibilityForSections([
+        'zero-dimensions-with-overflow-hidden',
+        'text-content-with-zero-dimensions',
+        'positive-dimensions-with-overflow-hidden',
+        'overflow-auto-with-zero-dimensions',
+        'mixed-dimension-scenarios',
+        'overflow-hidden',
+        'overflow-y-hidden',
+        'overflow-x-hidden',
+        'overflow-auto-scenarios',
+        'overflow-scroll-scenarios',
+        'overflow-relative-positioning',
+        'overflow-flex-container',
+        'overflow-complex-scenarios',
+        'clip-path-scenarios',
+      ])
     })
 
-    describe('css overflow', () => {
-      it('is hidden when parent overflow auto and no width/height', function () {
-        expect(this.$parentNoWidthHeightOverflowAuto.find('span')).to.not.be.visible
-        expect(this.$parentNoWidthHeightOverflowAuto.find('span')).to.be.hidden
-      })
-
-      it('is hidden when parent overflow hidden and out of bounds to left', function () {
-        expect(this.$elOutOfParentBoundsToLeft.find('span')).to.be.hidden
-      })
-
-      it('is hidden when parent overflow hidden and out of bounds to right', function () {
-        expect(this.$elOutOfParentBoundsToRight.find('span')).to.be.hidden
-      })
-
-      it('is hidden when parent overflow hidden and out of bounds above', function () {
-        expect(this.$elOutOfParentBoundsAbove.find('span#elOutOfParentBoundsAbove')).to.be.hidden
-      })
-
-      it('is hidden when parent overflow hidden and out of bounds below', function () {
-        expect(this.$elOutOfParentBoundsBelow.find('span')).to.be.hidden
-      })
-
-      it('is hidden when parent overflow-y hidden and out of bounds', function () {
-        expect(this.$elOutOfParentWithOverflowYHiddenBounds.find('span')).to.be.hidden
-      })
-
-      it('is hidden when parent overflow-x hidden and out of bounds', function () {
-        expect(this.$elOutOfParentWithOverflowXHiddenBounds.find('span')).to.be.hidden
-      })
-
-      it('is visible when parent overflow hidden but el in a closer parent with position absolute', function () {
-        expect(this.$elOutOfParentWithOverflowHiddenBoundsButCloserPositionAbsoluteParent.find('span')).to.be.visible
-      })
-
-      it('is hidden when parent flex and overflow hidden and el out of bounds', function () {
-        expect(this.$elOutOfParentWithFlexAndOverflowHiddenBounds.find('#red')).to.be.visible
-        expect(this.$elOutOfParentWithFlexAndOverflowHiddenBounds.find('#green')).to.be.visible
-        expect(this.$elOutOfParentWithFlexAndOverflowHiddenBounds.find('#blue')).to.be.hidden
-      })
-
-      it('is hidden when parent is wide and ancestor is overflow auto', function () {
-        expect(this.$elOutOfAncestorOverflowAutoBounds.find('span')).to.be.hidden
-      })
-
-      it('is hidden when parent overflow scroll and out of bounds', function () {
-        expect(this.$elOutOfScrollingParentBounds.find('span')).to.be.hidden
-      })
-
-      it('is hidden when parent absolutely positioned and overflow hidden and out of bounds', function () {
-        expect(this.$elOutOfPosAbsParentsBounds.find('span')).to.be.hidden
-      })
-
-      it('is visible when parent absolutely positioned and overflow hidden and not out of bounds', function () {
-        expect(this.$elInPosAbsParentsBounds.find('span')).to.be.visible
-      })
-
-      it('is visible when parent overflow hidden and not out of bounds', function () {
-        expect(this.$elInParentBounds.find('span')).to.be.visible
-      })
-
-      it('is hidden when parent overflow clip and height is 0', function () {
-        cy.$$('body').empty()
-
-        const el = add('<div style="height: 0; overflow: clip;"><div id="hidden">I am not visible</div></div>')
-
-        expect(el.find('#hidden')).to.be.hidden
-        reasonIs(el.find('#hidden'), 'This element `<div#hidden>` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: `hidden`, `clip`, `scroll` or `auto`')
-      })
-
-      it('is visible when parent overflow clip and height is non-0', function () {
-        cy.$$('body').empty()
-
-        const el = add('<div style="height: 5px; overflow: clip;"><div id="visible">I am visible</div></div>')
-
-        expect(el.find('#visible')).to.be.visible
-      })
-
-      it('is visible when ancestor is overflow hidden but more distant ancestor is the offset parent', function () {
-        expect(this.$elIsOutOfBoundsOfAncestorsOverflowButWithinRelativeAncestor.find('span')).to.be.visible
-      })
-
-      it('is hidden when relatively positioned outside ancestor with overflow hidden', function () {
-        expect(this.$elIsRelativeAndOutOfBoundsOfAncestorOverflow.find('span')).to.be.hidden
-      })
-
-      it('is visible when el is relatively positioned outside ancestor that does not hide overflow', function () {
-        expect(this.$elIsRelativeAndOutOfBoundsOfAncestorButAncestorShowsOverflow.find('span')).to.be.visible
-      })
-
-      it('is visible when parent is relatively positioned out of bounds but el is relatively positioned back in bounds', function () {
-        expect(this.$parentOutOfBoundsButElInBounds.find('span')).to.be.visible
-      })
-
-      it('is visible when element is statically positioned and parent element is absolutely positioned and ancestor has overflow hidden', function () {
-        cy.$$('body').empty()
-
-        const el = add(`
-          <div id="breaking-container" style="overflow: hidden">
-            <div>
-              <div style="position: absolute; bottom: 5px">
-                <button id="visible-button">Try me</button>
-              </div>
-            </div>
-          </div>
-        `)
-
-        expect(el.find('#visible-button')).to.be.visible
-      })
-
-      it('is visible when element is relatively positioned and parent element is absolutely positioned and ancestor has overflow auto', function () {
-        cy.$$('body').empty()
-
-        const el = add(`
-          <div style="height: 200px; position: relative; display: flex">
-            <div style="border: 5px solid red">
-              <div
-                id="breaking-container"
-                style="overflow: auto; border: 5px solid green"
-              >
-                <div>
-                  <h1>Example</h1>
-                  <div style="position: absolute; bottom: 5px">
-                    <button id="visible-button" style="position: relative">
-                      Try me
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        `)
-
-        expect(el.find('#visible-button')).to.be.visible
-      })
-
-      it('is hidden when parent element is absolutely position and offset parent is a decendent of the ancestor', function () {
-        cy.$$('body').empty()
-
-        add(`
-          <div style="display: grid; grid-template-columns: 332px 1fr; grid-template-rows: 62px 1fr;">
-            <div style="overflow-y: auto;">
-              <div style="height: 297px; position: relative;">
-                <div style="height: 96px; position: absolute; left: 0; top: 0;">
-                  <a href="">test test-1</a>
-                </div>
-                <div style="height: 36px; position: absolute; left: 0; top: 96px; background-color: red;">
-                  <a href="">test test-2</a>
-                </div>
-              </div>
-            </div>
-          </div>
-        `)
-
-        cy.contains('test-2').should('not.be.visible')
-        cy.contains('test-1').should('be.visible')
-      })
-
-      it('is hidden when element is an option and the parent has overflow clip', function () {
-        cy.$$('body').empty()
-
-        add(`
-          <div style="width: 150px; height: 20px; overflow: clip;">
-            <div style="width: 150px; height: 25px;"></div>
-            <select>
-              <optgroup label='Shinobi'>
-                <option>Naruto</option>
-              </optgroup>
-            </select>
-          </div>
-        `)
-
-        cy.get('option').should('not.be.visible').then(($el) => {
-          reasonIs($el, 'This element `<option>` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: `hidden`, `clip`, `scroll` or `auto`')
-        })
-
-        cy.get('optgroup').should('not.be.visible').then(($el) => {
-          reasonIs($el, 'This element `<optgroup>` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: `hidden`, `clip`, `scroll` or `auto`')
-        })
-
-        cy.get('select').should('not.be.visible').then(($el) => {
-          reasonIs($el, 'This element `<select>` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: `hidden`, `clip`, `scroll` or `auto`')
-        })
-      })
-
-      it('is visible when element is an option and the parent has overflow clip but is within the bounds', function () {
-        cy.$$('body').empty()
-
-        add(`
-          <div style="width: 150px; height: 20px; overflow: clip;">
-            <select>
-              <optgroup label='Shinobi'>
-                <option>Naruto</option>
-              </optgroup>
-            </select>
-          </div>
-        `)
-
-        cy.get('option').should('be.visible')
-        cy.get('optgroup').should('be.visible')
-        cy.get('select').should('be.visible')
-      })
-
-      it('is visible when x direction is clip but element is visible in y direction', () => {
-        cy.$$('body').empty()
-
-        add(`
-          <div style="overflow-x: clip">
-            <div style="height: 100px; width: 500px;">
-              <div style="height: 100px; width: 500px;"></div>
-              <input type="radio"/>
-              <label>Visible</label>
-            </div>
-          </div>
-        `)
-
-        cy.get('label').should('be.visible')
-      })
-
-      it('is hidden when x direction is hidden and y direction is coerced by browser to auto', () => {
-        cy.$$('body').empty()
-
-        add(`
-          <div style="overflow-x: hidden">
-            <div style="height: 100px; width: 500px;">
-              <div style="height: 100px; width: 500px;"></div>
-              <input type="radio"/>
-              <label>Hidden</label>
-            </div>
-          </div>
-        `)
-
-        cy.get('label').should('not.be.visible')
-      })
-
-      it('is hidden when x direction is auto and y direction is coerced by browser to auto', () => {
-        cy.$$('body').empty()
-
-        add(`
-          <div style="overflow-x: auto">
-            <div style="height: 100px; width: 500px;">
-              <div style="height: 100px; width: 500px;"></div>
-              <input type="radio"/>
-              <label>Hidden</label>
-            </div>
-          </div>
-        `)
-
-        cy.get('label').should('not.be.visible')
+    describe('positioning', () => {
+      beforeEach(() => {
+        cy.visit('/fixtures/visibility/positioning.html')
       })
 
-      it('is hidden when y direction is hidden and x direction is set to clip but coerced by browser to hidden', () => {
-        cy.$$('body').empty()
-
-        add(`
-          <div style="overflow-x: clip; overflow-y: hidden">
-            <div style="height: 100px; width: 500px;">
-              <div style="height: 100px; width: 500px;"></div>
-              <input type="radio"/>
-              <label>Hidden</label>
-            </div>
-          </div>
-        `)
-
-        cy.get('label').should('not.be.visible')
-      })
-
-      it('is hidden when y direction is auto and x direction is set to clip but coerced by browser to hidden', () => {
-        cy.$$('body').empty()
-
-        add(`
-          <div style="overflow-x: clip; overflow-y: auto">
-            <div style="height: 100px; width: 500px;">
-              <div style="height: 100px; width: 500px;"></div>
-              <input type="radio"/>
-              <label>Hidden</label>
-            </div>
-          </div>
-        `)
-
-        cy.get('label').should('not.be.visible')
-      })
-
-      it('is visible when x direction is clip and y direction is visible', () => {
-        cy.$$('body').empty()
-
-        add(`
-          <div style="overflow-x: clip; overflow-y: visible">
-            <div style="height: 100px; width: 500px;">
-              <div style="height: 100px; width: 500px;"></div>
-              <input type="radio"/>
-              <label>Visible</label>
-            </div>
-          </div>
-        `)
-
-        cy.get('label').should('be.visible')
-      })
-
-      it('is hidden when y direction is overriden by setting overflow to clip', () => {
-        cy.$$('body').empty()
-
-        add(`
-          <div style="overflow-y: visible; overflow: clip;">
-            <div style="height: 100px; width: 500px;">
-              <div style="height: 100px; width: 500px;"></div>
-              <input type="radio"/>
-              <label>Hidden</label>
-            </div>
-          </div>
-        `)
-
-        cy.get('label').should('not.be.visible')
-      })
+      assertVisibilityForSections([
+        'position-fixed-element-covered-by-another',
+        'static-ancestor-fixed-descendant',
+        'static-parent-fixed-child',
+        'positioning-with-zero-dimensions',
+        'fixed-positioning-with-zero-dimensions',
+        'position-absolute-scenarios',
+        'position-sticky-scenarios',
+      ])
     })
 
-    describe('css clip-path', () => {
-      // TODO: handle clip path 'hidden' equivalents
-      it.skip('is hidden when outside of parents clip-path', function () {
-        expect(this.$parentWithClipPathAbsolutePositionElOutsideClipPath.find('span')).to.be.hidden
-      })
-
-      it('is visible when inside of parents clip-path', function () {
-        expect(this.$parentWithClipPathAbsolutePositionElInsideClipPath.find('span')).to.be.visible
-      })
+    describe('transforms', () => {
+      beforeEach(() => {
+        cy.visit('/fixtures/visibility/transforms.html')
+      })
+
+      assertVisibilityForSections([
+        'scaling',
+        'translation',
+        'rotation',
+        'skew',
+        'matrix',
+        'perspective',
+        'multiple',
+        'multiple-3d',
+        'backface-visibility',
+      ])
     })
+  })
 
-    describe('css transform', () => {
-      describe('element visibility by css transform', () => {
-        it('is visible when an element is translated a bit', () => {
-          const el = add(`<div style="transform: translate(10px, 10px)">Translated</div>`)
-
-          expect(el).to.be.visible
-        })
-
-        it('is visible when an element is only skewed', () => {
-          const el = add(`<div style="transform: skew(10deg, 15deg)">Skewed</div>`)
-
-          expect(el).to.be.visible
-        })
-
-        it('is visible when an element is only rotated', () => {
-          const el = add(`<div style="transform: rotate(20deg)">Rotated</div>`)
-
-          expect(el).to.be.visible
-        })
-
-        it('is visible when an element is scaled by non-zero', () => {
-          const el = add(`<div style="transform: scale(2, 3)">Scaled</div>`)
-
-          expect(el).to.be.visible
-        })
-
-        it('is visible when an element is transformed in multiple ways but not scaled to zero', () => {
-          const el = add(`<div style="transform: translate(10px, 15px) skew(30deg) rotate(30deg) scale(4, 1)">Multiple transform</div>`)
-
-          expect(el).to.be.visible
-        })
-
-        it('is visible when an element is rotateZ(90deg)', () => {
-          const el = add(`<div style="transform: rotateZ(90deg)">rotateZ(90deg)</div>`)
-
-          expect(el).to.be.visible
-        })
-
-        // https://github.com/cypress-io/cypress/issues/6745
-        it('is visible even if there is a dangling element in the tree', () => {
-          cy.visit('/fixtures/dangling-element.html')
-          cy.get('.hello')
-        })
-
-        it('is hidden when an element is scaled to X axis in 0', () => {
-          const el = add(`<div style="transform: scaleX(0)">ScaleX(0)</div>`)
-
-          expect(el).to.be.hidden
-        })
-
-        it('is hidden when an element is scaled to Y axis in 0', () => {
-          const el = add(`<div style="transform: scaleY(0)">ScaleY(0)</div>`)
-
-          expect(el).to.be.hidden
-        })
-
-        it('is hidden when an element is scaled to Z axis in 0', () => {
-          const el = add(`<div style="transform: scaleZ(0)">ScaleZ(0)</div>`)
-
-          expect(el).to.be.hidden
-        })
-
-        it('is hidden when an element is transformed in multiple ways but scaled to 0 in one axis', () => {
-          const el = add(`<div style="transform: translate(15px, 30px) skew(20deg) rotate(40deg) scale(0, 0)">Multiple 2</div>`)
-
-          expect(el).to.be.hidden
-        })
-
-        it('is hidden when an element is rotateX(90deg)', () => {
-          const el = add(`<div style="transform: rotateX(90deg)">rotateX(90deg)</div>`)
-
-          expect(el).to.be.hidden
-        })
-
-        it('is hidden when an element is rotateY(90deg)', () => {
-          const el = add(`<div style="transform: rotateX(90deg)">rotateY(90deg)</div>`)
-
-          expect(el).to.be.hidden
-        })
-
-        it('is hidden when an element is rotateX(90deg) rotateY(90deg)', () => {
-          const el = add(`<div style="transform: rotateX(90deg) rotateY(90deg)">rotateX(90deg)</div>`)
-
-          expect(el).to.be.hidden
-        })
-
-        it('is hidden when an element is transformed in multiple ways but rotated to 90 deg in X or Y axis', () => {
-          const el = add(`<div style="transform: rotateX(90deg) skew(30deg, 50deg) translate(15px, 60px) scale(3.5)">rotateX(90deg)</div>`)
-
-          expect(el).to.be.hidden
-
-          const el2 = add(`<div style="transform: rotateY(90deg) skew(30deg, 50deg) translate(15px, 60px) scale(3.5)">rotateX(90deg)</div>`)
-
-          expect(el2).to.be.hidden
-
-          const el3 = add(`<div style="transform: rotateX(90deg) rotateY(90deg) skew(30deg, 50deg) translate(15px, 60px) scale(3.5)">rotateX(90deg)</div>`)
-
-          expect(el3).to.be.hidden
-        })
-      })
-
-      describe('when height/width is set', () => {
-        it('is visible when transform is not 0, but height is 0', () => {
-          const el = add('<div style="transform: translate(0, 0); height: 0;">Text</div>')
-
-          expect(el).to.be.visible
-        })
-
-        it('is visible when transform is not 0, but width is 0', () => {
-          const el = add('<p style="transform: rotateX(30deg); width: 0;">Text</p>')
-
-          expect(el).to.be.visible
-        })
-
-        it('is visible when parent transform is not 0, but height is 0', () => {
-          const el = add('<div style="transform: translate(0, 0); height: 0;"><p id="tr-p-0">Text</p></div>')
-
-          expect(el.find('#tr-p-0')).to.be.visible
-        })
-
-        it('is visible when parent transform is not 0, but width is 0', () => {
-          const el = add('<div style="transform: translate(0, 0); height: 0%;"><p id="tr-p-1">Test</p></div>')
-
-          expect(el.find('#tr-p-1')).to.be.visible
-        })
-
-        it('is invisible when parent transform is 0, but height is not 0', () => {
-          const el = add('<div style="transform: scaleX(0); height: 10px"><p id="tr-p-2">Test</p></div>')
-
-          expect(el.find('#tr-p-2')).to.be.hidden
-        })
-
-        describe('invisible when overflow: hidden', () => {
-          it('height: 0 + overflow', () => {
-            const el = add('<div style="height: 0px; transform: translate(1, 2); overflow: hidden"><p id="h0th">Test</p></div>')
-
-            expect(el.find('#h0th')).to.be.hidden
-          })
-
-          it('height: 0 + overflow-x', () => {
-            const el = add('<div style="height: 0px; transform: translate(1, 2); overflow-x: hidden"><p id="h0th">Test</p></div>')
-
-            expect(el.find('#h0th')).to.be.hidden
-          })
-
-          it('height: 0 + overflow-y', () => {
-            const el = add('<div style="height: 0px; transform: translate(1, 2); overflow-y: hidden"><p id="h0th">Test</p></div>')
-
-            expect(el.find('#h0th')).to.be.hidden
-          })
-
-          it('width: 0 + overflow', () => {
-            const el = add('<div style="width: 0px; transform: translate(1, 2); overflow: hidden"><p id="h0th">Test</p></div>')
-
-            expect(el.find('#h0th')).to.be.hidden
-          })
-
-          it('width: 0 + overflow-x', () => {
-            const el = add('<div style="width: 0px; transform: translate(1, 2); overflow-x: hidden"><p id="h0th">Test</p></div>')
-
-            expect(el.find('#h0th')).to.be.hidden
-          })
-
-          it('width: 0 + overflow-y', () => {
-            const el = add('<div style="width: 0px; transform: translate(1, 2); overflow-y: hidden"><p id="h0th">Test</p></div>')
-
-            expect(el.find('#h0th')).to.be.hidden
-          })
-        })
-      })
-
-      it('is hidden when outside parents transform scale', function () {
-        expect(this.$parentWithTransformScaleElOutsideScale.find('span')).to.be.hidden
-      })
-
-      it('is visible when inside of parents transform scale', function () {
-        expect(this.$parentWithTransformScaleElInsideScale.find('span')).to.be.visible
-      })
-
-      it('is hidden when out of ancestor\'s bounds due to ancestor\'s transform', function () {
-        expect(this.$ancestorTransformMakesElOutOfBoundsOfAncestor.find('span')).to.be.hidden
-      })
+  context('#getReasonIsHidden', () => {
+    const reasonIs = ($el: JQuery, str: string) => {
+      expect(dom.getReasonIsHidden($el)).to.eq(str)
+    }
 
-      it('is visible when in ancestor\'s bounds due to ancestor\'s transform', function () {
-        expect(this.$ancestorTransformMakesElInBoundsOfAncestor.find('#inbounds')).to.be.visible
+    describe('basic css / box model', () => {
+      beforeEach(() => {
+        cy.visit('/fixtures/visibility/basic-css-properties.html')
       })
-    })
 
-    describe('#getReasonIsHidden', () => {
       it('has `display: none`', function () {
-        reasonIs(this.$displayNone, 'This element `<button>` is not visible because it has CSS property: `display: none`')
+        prepareFixtureSection('display-property')
+        cy.get('[cy-section="display-property"] .testCase[cy-expect="hidden"]:first').then(($el) => {
+          reasonIs($el, 'This element `<div.testCase>` is not visible because it has CSS property: `display: none`')
+        })
       })
 
       it('has a parent with `display: none`', function () {
-        reasonIs(this.$parentDisplayNone.find('span'), 'This element `<span>` is not visible because its parent `<div#none>` has CSS property: `display: none`')
+        cy.visit('/fixtures/visibility/basic-css-properties.html')
+        prepareFixtureSection('display-property')
+        cy.get('[cy-section="display-property"] .testCase[cy-expect="hidden"] span').then(($el) => {
+          reasonIs($el, 'This element `<span.testCase>` is not visible because its parent `<div.testCase>` has CSS property: `display: none`')
+        })
       })
 
       it('has `visibility: hidden`', function () {
-        reasonIs(this.$visHidden, 'This element `<ul>` is not visible because it has CSS property: `visibility: hidden`')
+        prepareFixtureSection('visibility-property')
+        cy.get('[cy-section="visibility-property"] .testCase[cy-expect="hidden"]').then((el) => {
+          reasonIs($(el).first(), 'This element `<div.testCase>` is not visible because it has CSS property: `visibility: hidden`')
+        })
       })
 
       it('has parent with `visibility: hidden`', function () {
-        reasonIs(this.$parentVisHidden.find('button'), 'This element `<button>` is not visible because its parent `<div.invis>` has CSS property: `visibility: hidden`')
+        prepareFixtureSection('visibility-property')
+        cy.get('[cy-section="visibility-property"] .testCase[cy-expect="hidden"] button').then((el) => {
+          reasonIs($(el).first(), 'This element `<button.testCase>` is not visible because its parent `<div.testCase>` has CSS property: `visibility: hidden`')
+        })
       })
 
       it('has `visibility: collapse`', function () {
-        reasonIs(this.$tableVisCollapse.find('td.collapse'), 'This element `<td.collapse>` is not visible because it has CSS property: `visibility: collapse`')
+        prepareFixtureSection('table-elements')
+        cy.get('[cy-section="table-elements"] td[style*="visibility: collapse"]').then(($el) => {
+          reasonIs($el, 'This element `<td.testCase>` is not visible because it has CSS property: `visibility: collapse`')
+        })
       })
 
       it('has parent with `visibility: collapse`', function () {
-        reasonIs(this.$tableVisCollapse.find('tr.collapse td:first'), 'This element `<td>` is not visible because its parent `<tr.collapse>` has CSS property: `visibility: collapse`')
+        prepareFixtureSection('table-elements')
+        cy.get('[cy-section="table-elements"] tr[style*="visibility: collapse"] td').then(($el) => {
+          reasonIs($el, 'This element `<td>` is not visible because its parent `<tr.testCase>` has CSS property: `visibility: collapse`')
+        })
       })
 
       it('has `opacity: 0`', function () {
-        reasonIs(this.$btnOpacityZero, 'This element `<button>` is not visible because it has CSS property: `opacity: 0`')
+        prepareFixtureSection('opacity-property')
+        cy.get('[cy-section="opacity-property"] .testCase[cy-expect="hidden"]').then(($el) => {
+          reasonIs($($el).first(), 'This element `<div.testCase>` is not visible because it has CSS property: `opacity: 0`')
+        })
       })
 
       it('has parent with `opacity: 0`', function () {
-        reasonIs(this.$parentOpacityZero.find('button'), 'This element `<button>` is not visible because its parent `<div>` has CSS property: `opacity: 0`')
+        prepareFixtureSection('opacity-property')
+        cy.get('[cy-section="opacity-property"] .testCase[cy-expect="hidden"] button').then(($el) => {
+          reasonIs($el, 'This element `<button.testCase>` is not visible because its parent `<div.testCase>` has CSS property: `opacity: 0`')
+        })
       })
+    })
+
+    it('is detached from the DOM', function () {
+      const divDetached = $('<div>Detached</div>')
+
+      reasonIs(divDetached, 'This element `<div>` is not visible because it is detached from the DOM')
+    })
 
-      it('is detached from the DOM', function () {
-        reasonIs(this.$divDetached, 'This element `<div>` is not visible because it is detached from the DOM')
+    describe('overflow-related', () => {
+      beforeEach(() => {
+        cy.visit('/fixtures/visibility/overflow.html')
       })
 
       it('has effective zero width', function () {
-        reasonIs(this.$divNoWidth, 'This element `<div>` is not visible because it has an effective width and height of: `0 x 100` pixels.')
+        prepareFixtureSection('zero-dimensions-with-overflow-hidden')
+        cy.get('[cy-section="zero-dimensions-with-overflow-hidden"] .testCase[cy-label="Zero width ancestor, parent, self"]').then(($el) => {
+          reasonIs($el, 'This element `<div.testCase>` is not visible because it has an effective width and height of: `0 x 100` pixels.')
+        })
       })
 
       it('has effective zero height', function () {
-        reasonIs(this.$divNoHeight, 'This element `<div>` is not visible because it has an effective width and height of: `50 x 0` pixels.')
+        prepareFixtureSection('zero-dimensions-with-overflow-hidden')
+        cy.get('[cy-section="zero-dimensions-with-overflow-hidden"] .testCase[cy-label="Zero height ancestor, parent, self"]').then(($el) => {
+          reasonIs($el, 'This element `<div.testCase>` is not visible because it has an effective width and height of: `100 x 0` pixels.')
+        })
       })
 
       it('has a parent with an effective zero width and overflow: hidden', function () {
-        reasonIs(this.$parentNoHeight.find('span'), 'This element `<span>` is not visible because its parent `<div>` has CSS property: `overflow: hidden` and an effective width and height of: `100 x 0` pixels.')
+        prepareFixtureSection('zero-dimensions-with-overflow-hidden')
+        cy.get('[cy-section="zero-dimensions-with-overflow-hidden"] .testCase[cy-label="Zero height ancestor, parent, self"] span').then(($el) => {
+          reasonIs($el, 'This element `<span.testCase>` is not visible because its parent `<div.testCase>` has CSS property: `overflow: hidden` and an effective width and height of: `100 x 0` pixels.')
+        })
       })
 
       it('element sits outside boundaries of parent with overflow clipping', function () {
-        reasonIs(this.$elOutOfParentBoundsToRight.find('span'), 'This element `<span>` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: `hidden`, `clip`, `scroll` or `auto`')
+        prepareFixtureSection('overflow-hidden')
+        cy.get('[cy-section="overflow-hidden"] .testCase[cy-label="Element out of bounds right"]').then(($el) => {
+          reasonIs($el, 'This element `<div.testCase>` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: `hidden`, `clip`, `scroll` or `auto`')
+        })
       })
+    })
 
-      it('is hidden because it is backface', function () {
-        const el = cy.$$('body').append(`<div id="backface-invisible" style="backface-visibility:hidden; transform: rotateX(180deg)">Hello world</div>`)
-
-        reasonIs(el.find('#backface-invisible'), `This element \`<div#backface-invisible>\` is not visible because it is rotated and its backface is hidden.`)
+    it('is hidden because it is backface', function () {
+      cy.visit('/fixtures/visibility/transforms.html')
+      prepareFixtureSection('backface-visibility')
+      cy.get('[cy-section="backface-visibility"] .testCase[cy-label="RotateX 180deg with hidden backface"]').then(($el) => {
+        reasonIs($el, 'This element `<div.testCase>` is not visible because it is rotated and its backface is hidden.')
       })
+    })
 
-      it('is hidden by transform', function () {
-        const el = cy.$$('body').append(`<div id="invisible-transform" style="transform: scaleX(0)">Hello world</div>`)
-
-        reasonIs(el.find('#invisible-transform'), `This element \`<div#invisible-transform>\` is not visible because it is hidden by transform.`)
+    it('is hidden by transform', function () {
+      cy.visit('/fixtures/visibility/transforms.html')
+      prepareFixtureSection('scaling')
+      cy.get('[cy-section="scaling"] .testCase[cy-label="ScaleX to zero"]').then(($el) => {
+        reasonIs($el, 'This element `<div.testCase>` is not visible because it is hidden by transform.')
       })
+    })
 
-      it('element is fixed and being covered', function () {
-        reasonIs(this.$coveredUpPosFixed.find('#coveredUpPosFixed'), `\This element \`<div#coveredUpPosFixed>\` is not visible because it has CSS property: \`position: fixed\` and it's being covered by another element:\n\n\`<div style="position: fixed; bottom: 0; left: 0">on top</div>\``)
+    it('element is fixed and being covered', function () {
+      cy.visit('/fixtures/visibility/positioning.html')
+      prepareFixtureSection('position-fixed-element-covered-by-another')
+      cy.get('[cy-section="position-fixed-element-covered-by-another"] .testCase[cy-label="Fixed positioned element covered by another"]').then(($el) => {
+        reasonIs($el, 'This element `<div.testCase>` is not visible because it has CSS property: `position: fixed` and it\'s being covered by another element:\n\n`<div class="testCase" cy-expect="visible" cy-label="Element covering fixed positioned element" style="position: fixed; bottom: 0; left: 0; background: lightskyblue; width: 100px; height: 100px;">on top</div>`')
       })
+    })
 
-      it('needs scroll', function () {
-        const el = cy.$$('body').append(`
+    it('needs scroll', function () {
+      cy.visit('/fixtures/visibility/empty.html')
+      const el = cy.$$('body').append(`
           <div style="position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: auto;">
             <div style="height: 800px">Big Element</div>
             <button id="needsScroll">MyButton</button>
           </div>
         `)
 
-        reasonIs(el.find('#needsScroll'), `This element \`<button#needsScroll>\` is not visible because its ancestor has \`position: fixed\` CSS property and it is overflowed by other elements. How about scrolling to the element with \`cy.scrollIntoView()\`?`)
-      })
+      reasonIs(el.find('#needsScroll'), `This element \`<button#needsScroll>\` is not visible because its ancestor has \`position: fixed\` CSS property and it is overflowed by other elements. How about scrolling to the element with \`cy.scrollIntoView()\`?`)
+    })
 
-      it('cannot determine why element is not visible', function () {
-        // this element is actually visible
-        // but used here as an example that does not match any of the above
-        reasonIs(this.$divVisible, 'This element `<div>` is not visible.')
-      })
+    it('cannot determine why element is not visible', function () {
+      // this element is actually visible
+      // but used here as an example that does not match any of the above
+      const visible = cy.$$('<div>Visible</div>')
+
+      cy.$$('body').append(visible)
+      reasonIs(visible, 'This element `<div>` is not visible.')
     })
   })
 })
diff --git a/packages/driver/cypress/fixtures/visibility/basic-css-properties.html b/packages/driver/cypress/fixtures/visibility/basic-css-properties.html
new file mode 100644
index 00000000000..703af69b25f
--- /dev/null
+++ b/packages/driver/cypress/fixtures/visibility/basic-css-properties.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Basic CSS Properties Visibility Tests</title>
+  <style>
+    body { margin: 20px; font-family: Arial, sans-serif; }
+    .test-section { display:none; margin: 20px 0; padding: 10px; border: 1px solid #ccc; }
+    .test-section h3 { margin-top: 0; }
+    .test-section.active { display: block; }
+  </style>
+</head>
+<body>
+  <h1>Basic CSS Properties Visibility Tests</h1>
+  
+  <div class="test-section" cy-section="visibility-property">
+    <h3>Visibility Property</h3>
+    <div class="testCase" cy-expect="hidden" style="visibility: hidden;">Hidden by visibility</div>
+    <div class="testCase" cy-expect="visible" style="visibility: visible;">Visible by visibility</div>
+    <div class="testCase" cy-expect="hidden" style="visibility: hidden;">
+      <button class="testCase" cy-expect="hidden">Child of hidden parent</button>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="display-property">
+    <h3>Display Property</h3>
+    <div class="testCase" cy-expect="hidden" style="display: none;">Hidden by display: none</div>
+    <div class="testCase" cy-expect="visible" style="display: block;">Visible by display: block</div>
+    <div class="testCase" cy-expect="hidden" style="display: none;">
+      <span class="testCase" cy-expect="hidden">Child of display: none parent</span>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="opacity-property">
+    <h3>Opacity Property</h3>
+    <div class="testCase" cy-expect="hidden" style="opacity: 0;">Hidden by opacity: 0</div>
+    <div class="testCase" cy-expect="visible" style="opacity: 0.5;">Semi-transparent (opacity: 0.5)</div>
+    <div class="testCase" cy-expect="visible" style="opacity: 1;">Fully opaque (opacity: 1)</div>
+    <div class="testCase" cy-expect="hidden" style="opacity: 0;">
+      <button class="testCase" cy-expect="hidden">Child of opacity: 0 parent</button>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="input-elements">
+    <h3>Input Elements</h3>
+    <input class="testCase" cy-expect="hidden" type="hidden" value="hidden input">
+    <input class="testCase" cy-expect="visible" type="text" value="visible input">
+  </div>
+  
+  <div class="test-section" cy-section="table-elements">
+    <h3>Table Elements</h3>
+    <table>
+      <tr>
+        <td class="testCase" cy-expect="visible"">Normal Cell</td>
+        <td class="testCase" cy-expect="visible">Normal Cell</td>
+        <td class="testCase" cy-expect="hidden" style="visibility: collapse;">Cell by visibility: collapse</td>
+      </tr>
+
+      <tr class="testCase" cy-expect="hidden" style="visibility: collapse;">
+        <td className="testCase" cy-expect="hidden">Cell hidden by row's visibility: collapse</td>
+      </tr>
+    </table>
+  </div>
+  <div class="test-section" cy-section="box-interactions">
+    <div>
+      <span class="testCase" cy-expect="visible">
+        <label style="display: block">Block element inside an inline element</label>
+      </span>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/packages/driver/cypress/fixtures/visibility/empty.html b/packages/driver/cypress/fixtures/visibility/empty.html
new file mode 100644
index 00000000000..f799f0cb387
--- /dev/null
+++ b/packages/driver/cypress/fixtures/visibility/empty.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<body>
+  <div />
+</body>
\ No newline at end of file
diff --git a/packages/driver/cypress/fixtures/visibility/form-elements.html b/packages/driver/cypress/fixtures/visibility/form-elements.html
new file mode 100644
index 00000000000..bac1d20d04f
--- /dev/null
+++ b/packages/driver/cypress/fixtures/visibility/form-elements.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Form Elements Visibility Tests</title>
+  <link rel="stylesheet" href="./style.css">
+  <script src="./ux.js"></script>
+</head>
+<body>
+  <h1>Form Elements Visibility Tests</h1>
+  
+  <div class="test-section" cy-section="select-and-option-elements" cy-has-conflicts="true">
+    <h3>Select and Option Elements</h3>
+    <select class="testCase" cy-expect="visible" id="visible-select">
+      <option class="testCase" cy-fast-expect="hidden" cy-legacy-expect="visible" id="visible-option" cy-label="first option">Visible Option</option>
+      <option class="testCase" cy-fast-expect="hidden" cy-legacy-expect="visible" id="visible-option-2">Another Visible Option</option>
+    </select>
+    
+    <select class="testCase" cy-expect="hidden" id="hidden-select" style="display: none;">
+      <option class="testCase" cy-expect="hidden" id="hidden-option">Hidden Option</option>
+    </select>
+  </div>
+
+  <div class="test-section" cy-section="optgroup-elements" cy-has-conflicts="true">
+    <h3>Optgroup Elements</h3>
+    <select class="testCase" cy-expect="visible" id="select-with-optgroup" cy-label="select with optgroup">
+      <optgroup class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" id="visible-optgroup" cy-label="Visible opt Group">
+        <option class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden">Option 1</option>
+        <option class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden">Option 2</option>
+      </optgroup>
+    </select>
+    
+    <select class="testCase" cy-expect="hidden" id="hidden-select-with-optgroup" style="display: none;">
+      <optgroup class="testCase" cy-expect="hidden" id="hidden-optgroup" label="Hidden Group">
+        <option class="testCase" cy-expect="hidden">Hidden Option 1</option>
+        <option class="testCase" cy-expect="hidden">Hidden Option 2</option>
+      </optgroup>
+    </select>
+  </div>
+
+  <div class="test-section" cy-section="options-outside-select">
+    <h3>Options Outside Select</h3>
+    <div class="testCase" cy-expect="hidden" style="display: none;">
+      <option class="testCase" cy-expect="hidden" id="detached-option">Detached Option</option>
+    </div>
+    <div class="testCase" cy-expect="visible">
+      <option class="testCase" cy-expect="visible" id="standalone-option">Standalone Option</option>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="hidden-options-within-visible-select" cy-has-conflicts="true">
+    <h3>Hidden Options Within Visible Select</h3>
+    <select class="testCase" cy-expect="visible" id="select-with-hidden-option">
+      <option class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" id="visible-option-in-select">Visible Option</option>
+      <option class="testCase" cy-expect="hidden" id="hidden-option-in-select" style="display: none;">Hidden Option</option>
+    </select>
+  </div>
+
+  <div class="test-section" cy-section="input-elements">
+    <h3>Input Elements</h3>
+    <input class="testCase" cy-expect="hidden" id="input-hidden" type="hidden" value="hidden input">
+    <input class="testCase" cy-expect="visible" id="input-visible" type="text" value="visible input">
+    <input class="testCase" cy-expect="hidden" id="input-display-none" type="text" value="display none input" style="display: none;">
+  </div>
+</body>
+</html>
diff --git a/packages/driver/cypress/fixtures/visibility/overflow.html b/packages/driver/cypress/fixtures/visibility/overflow.html
new file mode 100644
index 00000000000..0080dbc697f
--- /dev/null
+++ b/packages/driver/cypress/fixtures/visibility/overflow.html
@@ -0,0 +1,273 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Overflow Visibility Tests</title>
+  <link rel="stylesheet" href="./style.css">
+  <script src="./ux.js"></script>
+  </script>
+</head>
+<body cy-has-conflicts="true">
+  <h1>Overflow Visibility Tests</h1>
+
+  <div class="test-section" cy-section="zero-dimensions-with-overflow-hidden">
+    <h3>Zero Dimensions with Overflow Hidden</h3>
+    
+    <!-- Zero width ancestor, parent, self -->
+    <div class="testCase" cy-expect="hidden" cy-label="Zero width ancestor, parent, self" style="width: 0; height: 100px; overflow: hidden; background: lightcoral;">
+      <div class="testCase" cy-expect="hidden" cy-label="Zero width parent" style="width: 0; height: 100px; overflow: hidden; background: lightcoral;">
+        <span class="testCase" cy-expect="hidden" cy-label="Zero width self">Zero width ancestor, parent, self</span>
+      </div>
+    </div>
+
+    <!-- Zero height ancestor, parent, self -->
+    <div class="testCase" cy-expect="hidden" cy-label="Zero height ancestor, parent, self" style="width: 100px; height: 0; overflow: hidden; background: lightcoral;">
+      <div class="testCase" cy-expect="hidden" cy-label="Zero height parent" style="width: 100px; height: 0; overflow: hidden; background: lightcoral;">
+        <span class="testCase" cy-expect="hidden" cy-label="Zero height self">Zero height ancestor, parent, self</span>
+      </div>
+    </div>
+
+    <!-- Zero width ancestor, positive parent, self -->
+    <div class="testCase" cy-expect="hidden" cy-label="Zero width ancestor with positive parent" style="width: 0; height: 100px; overflow: hidden; background: lightcoral;">
+      <div class="testCase" cy-expect="hidden" cy-label="Positive parent under zero width ancestor" style="width: 100px; height: 100px; overflow: hidden; background: lightcoral;">
+        <span class="testCase" cy-expect="hidden" cy-label="Self under zero width ancestor">Zero width ancestor, positive parent</span>
+      </div>
+    </div>
+
+    <!-- Zero height ancestor, positive parent, self -->
+    <div class="testCase" cy-expect="hidden" cy-label="Zero height ancestor with positive parent" style="width: 100px; height: 0; overflow: hidden; background: lightcoral;">
+      <div class="testCase" cy-expect="hidden" cy-label="Positive parent under zero height ancestor" style="width: 100px; height: 100px; overflow: hidden; background: lightcoral;">
+        <span class="testCase" cy-expect="hidden" cy-label="Self under zero height ancestor">Zero height ancestor, positive parent</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="text-content-with-zero-dimensions">
+    <h3>Text Content with Zero Dimensions</h3>
+    
+    <!-- Self with text content, zero width -->
+    <div class="testCase" cy-expect="visible" cy-label="Self with text content and zero width" style="width: 0; height: 100px; background: lightgreen;">
+      lorem ipsum dolor sit amet
+    </div>
+
+    <!-- Self with text content, zero height -->
+    <div class="testCase" cy-expect="visible" cy-label="Self with text content and zero height" style="width: 50px; height: 0px; background: lightgreen;">
+      lorem ipsum dolor sit amet
+    </div>
+
+    <!-- Self with whitespace only, zero width -->
+    <div class="testCase" cy-expect="hidden" cy-label="Self with only whitespace content and zero width" style="width: 0px; height: 50px; background: lightcoral;">
+      
+    </div>
+
+    <!-- Ancestor with text content, zero width -->
+    <div class="testCase" cy-expect="visible" cy-label="Ancestor with text content and zero width" style="width: 0; height: 100px; background: lightgreen;">
+      <div class="testCase" cy-expect="visible" cy-label="Parent under zero width ancestor with text">
+        <span class="testCase" cy-expect="visible" cy-label="Self under zero width ancestor with text">ancestor width: 0</span>
+      </div>
+    </div>
+
+    <!-- Ancestor with text content, zero height -->
+    <div class="testCase" cy-expect="visible" cy-label="Ancestor with text content and zero height" style="width: 100px; height: 0px; background: lightgreen;">
+      <div class="testCase" cy-expect="visible" cy-label="Parent under zero height ancestor with text">
+        <span class="testCase" cy-expect="visible" cy-label="Self under zero height ancestor with text">ancestor height: 0</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="positive-dimensions-with-overflow-hidden">
+    <h3>Positive Dimensions with Overflow Hidden</h3>
+    
+    <!-- Positive ancestor, parent, self -->
+    <div class="testCase" cy-expect="visible" cy-label="Positive ancestor with overflow hidden parent" style="width: 100px; height: 100px; background: lightgreen;">
+      <div class="testCase" cy-expect="visible" cy-label="Positive parent with overflow hidden" style="width: 100px; height: 100px; overflow: hidden; background: lightgreen;">
+        <span class="testCase" cy-expect="visible" cy-label="Self under positive dimensions with overflow hidden">ancestor with size, parent with size &amp; overflow: hidden</span>
+      </div>
+    </div>
+
+    <!-- Positive ancestor, zero parent, self -->
+    <div class="testCase" cy-expect="visible" cy-label="Positive ancestor with zero width parent" style="width: 100px; height: 100px; background: lightgreen;">
+      <div class="testCase" cy-expect="hidden" cy-label="Zero width parent under positive ancestor" style="width: 0; height: 100px; overflow: hidden; background: lightcoral;">
+        <span class="testCase" cy-expect="hidden" cy-label="Self under zero width parent">positive ancestor, zero parent</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="overflow-auto-with-zero-dimensions">
+    <h3>Overflow Auto with Zero Dimensions</h3>
+    
+    <!-- Zero dimensions with overflow auto -->
+    <div class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Zero dimensions with overflow auto" style="width: 0; height: 0px; overflow: auto; background: lightgreen;">
+      <span class="testCase" cy-expect="hidden" cy-label="Self under zero dimensions with overflow auto">parent no size, overflow: auto</span>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="mixed-dimension-scenarios">
+    <h3>Mixed Dimension Scenarios</h3>
+    
+    <!-- Zero width, positive height -->
+    <div class="testCase" cy-expect="visible" cy-label="Zero width with text content" style="width: 0; height: 100px; background: lightgreen;">Zero width</div>
+    <div class="testCase" cy-expect="visible" cy-label="Zero width with text content (blue)" style="width: 0; height: 100px; background: lightgreen;">Has text content</div>
+    <div class="testCase" cy-expect="hidden" cy-label="Zero width with whitespace only" style="width: 0; height: 50px; background: lightcoral;">      </div>
+
+    <!-- Positive width, zero height -->
+    <div class="testCase" cy-expect="hidden" cy-label="Zero height without text content" style="width: 100px; height: 0; background: lightcoral;"></div>
+    <div class="testCase" cy-expect="visible" cy-label="Zero height with text content" style="width: 100px; height: 0; background: lightgreen;">Has text content</div>
+    <div class="testCase" cy-expect="hidden" cy-label="Zero height with whitespace only" style="width: 50px; height: 0; background: lightcoral;">        </div>
+
+    <!-- Zero dimensions -->
+    <div style="width: 10; height: 10; background: lightyellow">
+      <div class="testCase" cy-expect="hidden" cy-label="Zero dimensions without content" style="width:0; height:0"></div>
+    </div>
+  </div>
+  <div class="test-section" cy-section="overflow-hidden">
+    <h3>Overflow Hidden scenarios</h3>
+    <div class="testCase" cy-expect="visible" cy-label="Overflow hidden with positive dimensions" style="width: 100px; height: 100px; overflow: hidden; background: lightgreen; position:relative;">
+      <div class="testCase" cy-expect="hidden" cy-label="Element out of bounds left" style="width:100px; height:100px; background: lightcoral; position:absolute; left: 100px"></div>
+      <div class="testCase" cy-expect="hidden" cy-label="Element out of bounds right" style="width:100px; height:100px; background: lightcoral; position:absolute; right: 100px"></div>
+      <div class="testCase" cy-expect="hidden" cy-label="Element out of bounds top" style="width:100px; height:100px; background: lightcoral; position:absolute; top: 100px"></div>
+      <div class="testCase" cy-expect="hidden" cy-label="Element out of bounds bottom" style="width:100px; height:100px; background: lightcoral; position:absolute; bottom: 100px"></div>
+      <div class="testCase" cy-expect="visible" cy-label="Element in bounds" style="width:50px; height:50px; background: lightgreen; position:absolute; left: 50px; top: 50px;"></div>
+    </div>
+  </div>
+  <div class="test-section" cy-section="overflow-y-hidden">
+    <h3>Overflow Y Hidden scenarios</h3>
+    <div class="testCase" cy-expect="visible" cy-label="Overflow y hidden with positive dimensions" style="width: 100px; height: 100px; overflow-y: hidden; background: lightgreen; position:relative;">
+      <div class="testCase" cy-expect="hidden" cy-label="Element out of bounds top" style="width:100px; height:100px; background: lightcoral; position:absolute; top: 100px"></div>
+      <div class="testCase" cy-expect="hidden" cy-label="Element out of bounds bottom" style="width:100px; height:100px; background: lightcoral; position:absolute; bottom: 100px"></div>
+      <div class="testCase" cy-expect="visible" cy-label="Element in bounds" style="width:50px; height:50px; background: lightgreen; position:absolute; left: 50px; top: 50px;"></div>
+    </div>
+  </div>
+  <div class="test-section" cy-section="overflow-x-hidden">
+    <h3>Overflow X Hidden scenarios</h3>
+    <div class="testCase" cy-expect="visible" cy-label="Overflow x hidden with positive dimensions" style="width: 100px; height: 100px; overflow-x: hidden; background: lightgreen; position:relative;">
+      <div class="testCase" cy-expect="hidden" cy-label="Element out of bounds left" style="width:100px; height:100px; background: lightcoral; position:absolute; left: 100px"></div>
+      <div class="testCase" cy-expect="hidden" cy-label="Element out of bounds right" style="width:100px; height:100px; background: lightcoral; position:absolute; right: 100px"></div>
+      <div class="testCase" cy-expect="visible" cy-label="Element in bounds" style="width:50px; height:50px; background: lightgreen; position:absolute; left: 50px; top: 50px;"></div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="overflow-auto-scenarios">
+    <h3>Overflow Auto Scenarios</h3>
+    
+    <!-- Overflow auto with wide parent -->
+    <div class="testCase" cy-expect="visible" cy-label="Overflow auto container with wide parent" style="width: 100px; height: 100px; overflow: auto; background: lightgreen;">
+      <div class="testCase" cy-expect="visible" cy-label="Wide parent container" style="width: 1000px; height: 100px; position: relative;">
+        <span class="testCase" cy-expect="hidden" cy-label="Element out of bounds with ancestor overflow auto" style="position: absolute; left: 300px; top: 0px;">out of bounds, parent wide, ancestor overflow: auto</span>
+      </div>
+    </div>
+
+    <!-- Overflow auto with zero dimensions -->
+    <div class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Zero dimensions with overflow auto" style="width: 0; height: 0px; overflow: auto; background: lightgreen;">
+      <span class="testCase" cy-expect="hidden" cy-label="Child under zero dimensions with overflow auto">parent no size, overflow: auto</span>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="overflow-scroll-scenarios">
+    <h3>Overflow Scroll Scenarios</h3>
+    
+    <!-- Overflow scroll out of bounds -->
+    <div class="testCase" cy-expect="visible" cy-label="Overflow scroll container" style="width: 100px; height: 100px; overflow: scroll; position: relative; background: lightgreen;">
+      <div class="testCase" cy-expect="hidden" cy-label="Parent container in scroll scenario">
+        <div class="testCase" cy-expect="hidden" cy-label="Child container in scroll scenario">
+          <span class="testCase" cy-expect="hidden" cy-label="Element out of scrolling bounds" style="position: absolute; left: 300px; top: 0px;">out of scrolling bounds, position: absolute</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="overflow-relative-positioning">
+    <h3>Overflow with Relative Positioning</h3>
+    
+    <!-- Overflow hidden with relative positioning -->
+    <div class="testCase" cy-expect="visible" cy-label="Overflow hidden container" style="overflow: hidden; background: lightgreen;">
+      <div class="testCase" cy-expect="visible" cy-label="Parent container">
+        <span class="testCase" cy-expect="hidden" cy-label="Relatively positioned element out of bounds" style="position: relative; left: 0; top: -200px;">out of bounds, position: relative</span>
+      </div>
+    </div>
+
+    <!-- Overflow visible with relative positioning -->
+    <div class="testCase" cy-expect="visible" cy-label="Overflow visible container" style="background: lightgreen;">
+      <div class="testCase" cy-expect="visible" cy-label="Parent container">
+        <span class="testCase" cy-expect="visible" cy-label="Relatively positioned element out of bounds but visible" style="position: relative; left: 0; top: 100px;">out of bounds but visible, position: relative</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="overflow-flex-container">
+    <h3>Overflow with Flex Container</h3>
+    
+    <!-- Flex container with overflow hidden -->
+    <div class="testCase" cy-expect="visible" cy-label="Flex container with overflow hidden" style="display: flex; overflow: hidden; background: lightgreen;">
+      <div class="testCase" cy-expect="visible" cy-label="Flex item 1" id="red" style="flex: 0 0 80%; background-color: lightgreen;">red</div>
+      <div class="testCase" cy-expect="visible" cy-label="Flex item 2" id="green" style="flex: 0 0 80%; background-color: lightgreen;">green</div>
+      <div class="testCase" cy-expect="hidden" cy-label="Flex item 3 out of bounds" id="blue" style="background-color: lightcoral;">blue</div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="overflow-complex-scenarios">
+    <h3>Complex Overflow Scenarios</h3>
+    
+    <!-- Overflow auto with flex layout -->
+    <div class="testCase" cy-expect="visible" cy-label="Flex layout with overflow auto" style="height: 200px; position: relative; display: flex; background: lightgreen;">
+      <div class="testCase" cy-expect="visible" cy-label="Flex item with border" style="border: 5px solid red;">
+        <div class="testCase" cy-expect="visible" cy-label="Overflow auto container" id="breaking-container" style="overflow: auto; border: 5px solid green;">
+          <div class="testCase" cy-expect="visible" cy-label="Content container">
+            <h3 class="testCase" cy-expect="visible" cy-label="Heading">Example</h3>
+            <div class="testCase" cy-expect="visible" cy-label="Absolute positioned container" style="position: absolute; bottom: 5px;">
+              <button class="testCase" cy-expect="visible" cy-label="Relatively positioned button" id="visible-button" style="position: relative;">Try me</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Grid layout with overflow-y auto -->
+    <div class="testCase" cy-expect="visible" cy-label="Grid layout with overflow-y auto" style="display: grid; grid-template-columns: 332px 1fr; grid-template-rows: 62px 1fr; background: lightgreen;">
+      <div class="testCase" cy-expect="visible" cy-label="Grid item with overflow-y auto" style="overflow-y: auto;">
+        <div class="testCase" cy-expect="visible" cy-label="Relative positioned container" style="height: 297px; position: relative;">
+          <div class="testCase" cy-expect="visible" cy-label="Absolute positioned item 1" style="height: 96px; position: absolute; left: 0; top: 0;">
+            <a class="testCase" cy-expect="visible" cy-label="Link 1" href="">test test-1</a>
+          </div>
+          <div class="testCase" cy-expect="hidden" cy-label="Absolute positioned item 2" style="height: 36px; position: absolute; left: 0; top: 96px; background-color: lightcoral;">
+            <a class="testCase" cy-expect="hidden" cy-label="Link 2" href="">test test-2</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="clip-path-scenarios">
+    <h3>Clip-Path Scenarios (note: legacy mode does not support clip-path)</h3>
+    
+    <!-- Clip-path polygon that clips everything -->
+    <div class="testCase" cy-fast-expect="hidden" cy-legacy-expect="visible" cy-label="Parent with clip-path polygon that clips everything" style="position: relative; clip-path: polygon(0 0, 0 0, 0 0, 0 0); background: lightgreen;">
+      <span class="testCase" cy-fast-expect="hidden" cy-legacy-expect="visible" cy-label="Element outside clip-path polygon" style="background: lightcoral;">clip-path child of polygon that clips everything</span>
+    </div>
+
+    <!-- Clip-path circle that shows everything -->
+    <div class="testCase" cy-expect="visible" cy-label="Parent with clip-path circle" style="position: relative; clip-path: circle(100%);">
+      <span class="testCase" cy-expect="visible" cy-label="Element inside clip-path circle" style="background: lightgreen;">clip-path</span>
+    </div>
+
+    <!-- Clip-path inset that clips content -->
+    <div class="testCase" cy-expect="visible" cy-label="Parent with clip-path inset" style="position: relative; clip-path: inset(25% 25% 25% 25%);">
+      <span class="testCase" cy-fast-expect="hidden" cy-legacy-expect="visible" cy-label="Element outside clip-path inset" style="background: lightcoral;">clipped content</span>
+    </div>
+
+    <!-- Clip-path with complex polygon -->
+    <div class="testCase" cy-expect="visible" cy-label="Parent with complex clip-path" style="position: relative; clip-path: polygon(0% 0%, 100% 0%, 50% 100%);">
+      <span class="testCase" cy-expect="visible" cy-label="Element inside complex clip-path" style="background: lightgreen;">visible content</span>
+    </div>
+
+    <!-- Clip-path with ellipse -->
+    <div class="testCase" cy-expect="visible" cy-label="Parent with clip-path ellipse" style="position: relative; clip-path: ellipse(50% 50% at 50% 50%);">
+      <span class="testCase" cy-expect="visible" cy-label="Element inside clip-path ellipse" style="background: lightgreen;">elliptical content</span>
+    </div>
+
+    <!-- Clip-path with path (SVG path) -->
+    <div class="testCase" cy-expect="visible" cy-label="Parent with clip-path path" style="position: relative; clip-path: path('M 0 0 L 100 0 L 100 100 L 0 100 Z');">
+      <span class="testCase" cy-expect="visible" cy-label="Element inside clip-path path" style="background: lightgreen;">path content</span>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/packages/driver/cypress/fixtures/visibility/positioning.html b/packages/driver/cypress/fixtures/visibility/positioning.html
new file mode 100644
index 00000000000..0dbb50eacf9
--- /dev/null
+++ b/packages/driver/cypress/fixtures/visibility/positioning.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Positioning Visibility Tests</title>
+  <link rel="stylesheet" href="./style.css">
+  <script src="./ux.js"></script>
+</head>
+<body>
+    <h1>Positioning Visibility Tests</h1>
+    <div class="test-section" cy-section="positioning-with-zero-dimensions">
+      <h3>Positioning with Zero Dimensions</h3>
+      <div class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Zero dimensions parent with absolute positioned child" style="width: 0; height: 0; background: lightyellow">
+        <span class="testCase" cy-expect="visible" cy-label="Absolute positioned child under zero dimensions parent" style="position: absolute; top: 10px; left: 10px; background: white; padding: 5px;">Child with absolute positioning</span>
+      </div>
+    </div>
+  
+  <div class="test-section" cy-section="fixed-positioning-with-zero-dimensions">
+    <h3>Fixed Positioning with Zero Dimensions</h3>
+    
+    <!-- Zero dimensions parent with absolute positioned child -->
+
+    <!-- Zero dimensions ancestor with fixed positioned child -->
+    <div class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Zero dimensions ancestor with fixed positioned child" style="width: 0; height: 0; position: relative; background: green">
+      <div class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Parent under zero dimensions ancestor">
+        <span class="testCase" cy-expect="visible" cy-label="Fixed positioned child under zero dimensions ancestor" style="position: fixed; top: 10px; left: 10px; background: white; padding: 5px;">Child with position: fixed</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="static-ancestor-fixed-descendant">
+    <h3>Static ancestor with fixed positioned descendant</h3>
+    <!-- Position fixed descendant under normal ancestor -->
+    <div class="testCase" cy-expect="visible" cy-label="Normal ancestor with fixed positioned descendant" style="width: 100px; height: 100px; overflow: hidden; background: lightgreen;">
+      <div class="testCase" cy-expect="hidden" cy-label="Parent under normal ancestor">
+        <button class="testCase" cy-expect="visible" cy-label="Fixed positioned descendant under normal ancestor" style="position: fixed; top: 0; right: 0;">no width, descendant position: fixed</button>
+      </div>
+    </div>
+  </div>  
+
+  <div class="test-section" cy-section="position-fixed-element-covered-by-another">
+
+    <!-- Position fixed element covered by another element -->
+    <div class="testCase" cy-expect="hidden" cy-label="Fixed positioned element covered by another" style="position: fixed; bottom: 0; left: 0; background: lightcoral; width: 100px; height: 100px;">underneath</div>
+    <div class="testCase" cy-expect="visible" cy-label="Element covering fixed positioned element" style="position: fixed; bottom: 0; left: 0; background: lightskyblue; width: 100px; height: 100px;">on top</div>
+  </div>
+
+  <div class="test-section" cy-section="static-parent-fixed-child">
+    <h3>Static parent with a fixed child</h3>
+    
+    <!-- Position fixed child under normal parent -->
+    <div class="testCase" cy-expect="visible" cy-label="Normal parent with fixed positioned child" style="width: 100px; height: 100px; overflow: hidden; background: lightblue;">
+      <button class="testCase" cy-expect="visible" cy-label="Fixed positioned child under normal parent" style="position: fixed; top: 0;">position: fixed</button>
+    </div>
+  </div>
+  <div class="test-section" cy-section="position-fixed-element-off-screen">
+    <!-- Position fixed element off screen -->
+    <div class="testCase" cy-expect="hidden" cy-label="Fixed positioned element off screen" style="position: fixed; bottom: 0; left: -100px; background: lightgray;">off screen</div>
+
+    <!-- Position fixed element with pointer-events: none -->
+    <div class="testCase" cy-expect="visible" cy-label="Fixed positioned element with pointer-events none" style="position: fixed; top: 60px; background: lightcyan;">
+      <span class="testCase" cy-expect="visible" cy-label="Child with pointer-events none" style="pointer-events: none;">child pointer-events: none</span>
+    </div>
+  </div>
+  <div class="test-section" cy-section="parent-with-pointer-events-none">
+    <h3>Parent with pointer-events: none</h3>
+      <!-- Parent with pointer-events: none containing fixed positioned child -->
+      <div class="testCase" cy-expect="visible" cy-label="Parent with pointer-events none containing fixed child" style="pointer-events: none; background: lightyellow;">
+        <span class="testCase" cy-expect="visible" cy-label="Fixed child under pointer-events none parent" style="position: fixed; left: 0; top: 50%;">parent pointer-events: none</span>
+      </div>
+
+      <!-- Parent with pointer-events: none covered by another element -->
+      <div class="testCase" cy-expect="hidden" cy-label="Fixed child under pointer-events none parent covered by another" style="pointer-events: none; background: lightsteelblue;">
+        <span class="testCase" cy-expect="hidden" cy-label="Fixed child covered by another element" style="position: fixed; top: 40px;">parent pointer-events: none</span>
+      </div>
+      <div class="testCase" cy-expect="visible" cy-label="Element covering fixed child with pointer-events none parent" style="position: fixed; top: 40px; background: red;">covering the element with pointer-events: none</div>
+
+  </div>
+  <div class="test-section" cy-section="position-absolute-scenarios">
+    <h3>Position Absolute Scenarios</h3>
+    
+    <!-- Position absolute child under normal parent -->
+    <div class="testCase" cy-legacy-expect="hidden" cy-fast-expect="visible" cy-label="Normal parent with absolute positioned child" style="width: 0; height: 100px; overflow: hidden; background: lightblue;">
+      <div class="testCase" cy-legacy-expect="hidden" cy-fast-expect="visible" cy-label="Parent container for absolute child" style="height: 500px; width: 500px;">
+        <span class="testCase" cy-expect="visible" cy-label="Absolute positioned child" style="position: absolute;">position: absolute</span>
+      </div>
+    </div>
+
+    <!-- Position absolute descendant under normal ancestor -->
+    <div class="testCase" cy-legacy-expect="hidden" cy-fast-expect="visible" cy-label="Normal ancestor with absolute positioned descendant" style="width: 0; height: 100px; overflow: hidden; background: lightgreen;">
+      <div class="testCase" cy-expect="visible" cy-label="Parent container for absolute descendant" style="height: 500px; width: 500px; position: absolute;">
+        <span class="testCase" cy-expect="visible" cy-label="Absolute positioned descendant" style="position: absolute;">no width, descendant position: absolute</span>
+      </div>
+    </div>
+
+    <!-- Parent with position absolute but child not positioned -->
+    <div class="testCase" cy-expect="hidden" cy-label="Parent with absolute positioning but child not positioned" style="width: 0; height: 100px; overflow: hidden; position: absolute; background: lightcoral;">
+      <div class="testCase" cy-expect="hidden" cy-label="Child container under absolute parent" style="height: 500px; width: 500px;">
+        <span class="testCase" cy-expect="hidden" cy-label="Non-positioned child under absolute parent">parent position: absolute</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="position-sticky-scenarios">
+    <h3>Position Sticky Scenarios</h3>
+    
+    <!-- Position sticky element -->
+    <div class="testCase" cy-expect="visible" cy-label="Sticky positioned element" style="position: sticky; top: 0; background: lightcyan; padding: 10px;">
+      <button class="testCase" cy-expect="visible" cy-label="Button inside sticky element" id="button">Sticky Button</button>
+    </div>
+  </div>
+
+</body>
+</html>
diff --git a/packages/driver/cypress/fixtures/visibility/style.css b/packages/driver/cypress/fixtures/visibility/style.css
new file mode 100644
index 00000000000..d8795def1b9
--- /dev/null
+++ b/packages/driver/cypress/fixtures/visibility/style.css
@@ -0,0 +1,13 @@
+body { margin: 20px; font-family: Arial, sans-serif; }
+.test-section { display:none; margin: 20px 0; padding: 10px; border: 1px solid #ccc; }
+.test-section h3 { margin-top: 0; }
+.test-section.active { display: block; }
+table { border-collapse: collapse; margin: 10px 0; }
+td, th { border: 1px solid #ccc; padding: 5px; }
+nav {
+  display: block;
+}
+nav li {
+  display: inline-block;
+  list-style: none;
+}
\ No newline at end of file
diff --git a/packages/driver/cypress/fixtures/visibility/table-visibility.html b/packages/driver/cypress/fixtures/visibility/table-visibility.html
new file mode 100644
index 00000000000..0d533e0995c
--- /dev/null
+++ b/packages/driver/cypress/fixtures/visibility/table-visibility.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Table Visibility Tests</title>
+  <link rel="stylesheet" href="./style.css">
+  <script src="./ux.js"></script>
+</head>
+<body>
+  <h1>Table Visibility Tests</h1>
+  
+  <div class="test-section">
+    <h3>Visibility Collapse on Table Cells</h3>
+    <table>
+      <tr>
+        <td>Normal Cell</td>
+        <td id="collapse-cell" style="visibility: collapse;">Collapsed Cell</td>
+        <td>Another Normal Cell</td>
+      </tr>
+    </table>
+  </div>
+
+  <div class="test-section">
+    <h3>Visibility Collapse on Table Rows</h3>
+    <table>
+      <tr>
+        <td>Normal Row</td>
+        <td>Normal Row</td>
+      </tr>
+      <tr id="collapse-row" style="visibility: collapse;">
+        <td>Hidden Row Cell 1</td>
+        <td id="collapse-row-cell">Hidden Row Cell 2</td>
+      </tr>
+      <tr>
+        <td>Another Normal Row</td>
+        <td>Another Normal Row</td>
+      </tr>
+    </table>
+  </div>
+
+  <div class="test-section">
+    <h3>Mixed Visibility States</h3>
+    <table>
+      <tr>
+        <td>Normal</td>
+        <td id="mixed-collapse-cell" style="visibility: collapse;">Collapsed</td>
+        <td>Normal</td>
+      </tr>
+      <tr id="mixed-collapse-row" style="visibility: collapse;">
+        <td>Hidden Row</td>
+        <td id="mixed-collapse-row-cell">Hidden Row Cell</td>
+        <td>Hidden Row</td>
+      </tr>
+      <tr>
+        <td>Normal</td>
+        <td>Normal</td>
+        <td>Normal</td>
+      </tr>
+    </table>
+  </div>
+
+  <div class="test-section">
+    <h3>Normal Table (All Visible)</h3>
+    <table>
+      <tr>
+        <td>Normal Cell 1</td>
+        <td>Normal Cell 2</td>
+        <td>Normal Cell 3</td>
+      </tr>
+      <tr>
+        <td>Normal Row 2</td>
+        <td>Normal Row 2</td>
+        <td>Normal Row 2</td>
+      </tr>
+    </table>
+  </div>
+</body>
+</html>
diff --git a/packages/driver/cypress/fixtures/visibility/transforms.html b/packages/driver/cypress/fixtures/visibility/transforms.html
new file mode 100644
index 00000000000..210195cbd92
--- /dev/null
+++ b/packages/driver/cypress/fixtures/visibility/transforms.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Transform Visibility Tests</title>
+  <link rel="stylesheet" href="./style.css">
+  <script src="./ux.js"></script>
+</head>
+<body>
+  <h1>CSS Transform Scenarios</h1>
+
+  <div class="test-section" cy-section="scaling">
+    <h3>Scaling</h3>
+    <div class="testCase" cy-expect="hidden" cy-label="Scale to zero dimensions" style="transform: scale(0,0)">
+      <span class="testCase" cy-expect="hidden" cy-label="Child of scale(0,0)">Scaling(0,0)</span>
+    </div>
+    <div class="testCase" cy-expect="visible" cy-label="Scale to normal dimensions" style="display: block; width: 100px; height: 100px; background: lightgreen;transform: scale(1,1)">
+      <span class="testCase" cy-expect="visible" cy-label="Child of scale(1,1)">Scaling(1,1)</span>
+    </div>
+    <div class="testCase" cy-expect="visible" cy-label="Scale up dimensions" style="transform: scale(2, 3)">Scaled</div>
+    
+    <!-- Individual scale axes -->
+    <div class="testCase" cy-expect="hidden" cy-label="ScaleX to zero" style="transform: scaleX(0)">ScaleX(0)</div>
+    <div class="testCase" cy-expect="hidden" cy-label="ScaleY to zero" style="transform: scaleY(0)">ScaleY(0)</div>
+    <div class="testCase" cy-expect="hidden" cy-label="ScaleZ to zero" style="transform: scaleZ(0)">ScaleZ(0)</div>
+    
+    <!-- Multiple transforms with scale to zero -->
+    <div class="testCase" cy-expect="hidden" cy-label="Multiple transforms with scale to zero" style="transform: translate(15px, 30px) skew(20deg) rotate(40deg) scale(0, 0)">Multiple transforms with scale(0,0)</div>
+  </div>
+  <div class="test-section" cy-section="translation">
+    <h3>Translation</h3>
+    <div class="testCase" cy-expect="visible" cy-label="Translate X negative" style="transform: translateX(-10px)">
+      <span class="testCase" cy-expect="visible" cy-label="Child of translateX(-10px)">Translation(-10px)</span>
+    </div>
+    <div class="testCase" cy-expect="visible" cy-label="Translate Y positive" style="transform: translateY(10px)">
+      <span class="testCase" cy-expect="visible" cy-label="Child of translateY(10px)">Translation(10px)</span>
+    </div>
+    <div class="testCase" cy-expect="visible" cy-label="Translate 2D" style="transform: translate(10px, 15px)">Translated in 2 dimensions</div>
+    <div class="testCase" cy-expect="visible" cy-label="Translate Z" style="transform: translateZ(10px)">Translated in 3rd dimension</div>
+    <div class="testCase" cy-expect="visible" cy-label="Translate 3D" style="transform: translate3d(10px, 15px, 20px)">Translated in 3 dimensions</div>
+  </div>
+  <div class="test-section" cy-section="rotation">
+    <h3>Rotation</h3>
+    <div class="testCase" cy-expect="visible" cy-label="Rotate X axis" style="transform: rotateX(45deg)">Rotated on X axis</div>
+    <div class="testCase" cy-expect="visible" cy-label="Rotate Y axis" style="transform: rotateY(45deg)">Rotated on Y axis</div>
+    <div class="testCase" cy-expect="visible" cy-label="Rotate Z axis" style="transform: rotateZ(45deg)">Rotated on Z axis</div>
+    <div class="testCase" cy-expect="visible" cy-label="Rotate 3D" style="transform: rotate3d(1, 1, 1, 45deg)">Rotated on 3 axes</div>
+    
+    <!-- 90° rotations (which should be HIDDEN) -->
+    <div class="testCase" cy-expect="hidden" cy-label="RotateX 90deg" style="transform: rotateX(90deg)">RotateX(90deg)</div>
+    <div class="testCase" cy-expect="hidden" cy-label="RotateY 90deg" style="transform: rotateY(90deg)">RotateY(90deg)</div>
+    <div class="testCase" cy-expect="visible" cy-label="RotateZ 90deg" style="transform: rotateZ(90deg)">RotateZ(90deg)</div>
+    
+    <!-- Combined 90° rotations -->
+    <div class="testCase" cy-expect="hidden" cy-label="RotateX and RotateY 90deg" style="transform: rotateX(90deg) rotateY(90deg)">RotateX(90deg) rotateY(90deg)</div>
+    
+    <!-- Multiple transforms with 90° rotation -->
+    <div class="testCase" cy-expect="hidden" cy-label="Multiple transforms with rotateX 90deg" style="transform: rotateX(90deg) skew(30deg, 50deg) translate(15px, 60px) scale(3.5)">Multiple with rotateX(90deg)</div>
+    <div class="testCase" cy-expect="hidden" cy-label="Multiple transforms with rotateY 90deg" style="transform: rotateY(90deg) skew(30deg, 50deg) translate(15px, 60px) scale(3.5)">Multiple with rotateY(90deg)</div>
+    <div class="testCase" cy-expect="hidden" cy-label="Multiple transforms with rotateX and rotateY 90deg" style="transform: rotateX(90deg) rotateY(90deg) skew(30deg, 50deg) translate(15px, 60px) scale(3.5)">Multiple with rotateX(90deg) rotateY(90deg)</div>
+  </div>
+  <div class="test-section" cy-section="skew">
+    <h3>Skew</h3>
+    <div class="testCase" cy-expect="visible" cy-label="Skew X axis" style="transform: skewX(45deg)">Skewed on X axis</div>
+    <div class="testCase" cy-expect="visible" cy-label="Skew Y axis" style="transform: skewY(45deg)">Skewed on Y axis</div>
+    <div class="testCase" cy-expect="visible" cy-label="Skew 2D" style="transform: skew(15deg, 15deg)">Skewed on 2 axes</div>
+  </div>
+  <div class="test-section" cy-section="matrix">
+    <h3>Matrix</h3>
+    <div class="testCase" cy-expect="visible" cy-label="Identity matrix 2D" style="transform: matrix(1, 0, 0, 1, 0, 0)">Matrix(1, 0, 0, 1, 0, 0)</div>
+    <div class="testCase" cy-expect="visible" cy-label="Identity matrix 3D" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)">Matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)</div>
+  </div>
+  <div class="test-section" cy-section="perspective">
+    <h3>Perspective</h3>
+    <div class="testCase" cy-expect="visible" cy-label="Perspective only" style="transform: perspective(100px)">Perspective(100px)</div>
+    <div class="testCase" cy-expect="visible" cy-label="Perspective with translateZ" style="transform: perspective(100px) translateZ(10px);background:lightgreen;">Perspective(100px) translateZ(10px)</div>
+    <div class="testCase" cy-expect="visible" cy-label="Perspective with rotateX" style="transform: perspective(100px) rotateX(45deg);background:lightgreen;">Perspective(100px) rotateX(45deg)</div>
+    <div class="testCase" cy-fast-expect="hidden" cy-legacy-expect="visible" cy-label="Perspective with rotateY" style="transform: perspective(100px) rotateY(45deg); background:red;">Perspective(100px) rotateY(45deg)</div>
+    <div class="testCase" cy-expect="visible" cy-label="Perspective with rotateZ" style="transform: perspective(100px) rotateZ(45deg); background:lightgreen;">Perspective(100px) rotateZ(45deg)</div>
+  </div>
+  <div class="test-section" cy-section="multiple">
+    <h3>Multiple</h3>
+    <div class="testCase" cy-expect="visible" cy-label="Multiple 2D transforms" style="transform: scale(2, 3) translate(1px, 1px) rotate(45deg) skew(15deg, 15deg) perspective(100px);width: 100px;height: 100px;background: lightgreen;">Multiple transforms</div>
+  </div>
+  <div class="test-section" cy-section="multiple-3d">
+    <h3>Multiple 3D</h3>
+    <div class="testCase" cy-expect="visible" cy-label="Multiple 3D transforms" style="transform: scale3d(2, 3, 4) translate3d(10px, 15px, 20px) rotate3d(1, 1, 1, 45deg) skew3d(45deg, 45deg, 45deg) perspective3d(100px)">Multiple 3D transforms</div>
+  </div>
+
+  <div class="test-section" cy-section="transform-edge-cases">
+    <h3>Transform Edge Cases</h3>
+    
+    <!-- Transform with text content -->
+    <div class="testCase" cy-expect="visible" cy-label="Transform with text content" style="transform: translate(10px, 10px)">Translated with text</div>
+    <div class="testCase" cy-expect="visible" cy-label="Transform with skew only" style="transform: skew(10deg, 15deg)">Skewed with text</div>
+    <div class="testCase" cy-expect="visible" cy-label="Transform with rotation only" style="transform: rotate(20deg)">Rotated with text</div>
+    
+    <!-- Transform with zero dimensions but text content -->
+    <div class="testCase" cy-expect="visible" cy-label="Transform with zero height but text content" style="transform: translate(0, 0); height: 0;">Text content</div>
+    <div class="testCase" cy-expect="visible" cy-label="Transform with zero width but text content" style="transform: rotateX(30deg); width: 0;">Text content</div>
+    
+    <!-- Transform with zero dimensions and overflow -->
+    <div class="testCase" cy-expect="hidden" cy-label="ScaleX(0) with height and overflow hidden" style="transform: scaleX(0); height: 10px; overflow: hidden">
+      <p class="testCase" cy-expect="hidden" cy-label="Child of scaleX(0) with overflow hidden">Test</p>
+    </div>
+    
+    <!-- Transform with zero dimensions and overflow (different axes) -->
+    <div class="testCase" cy-expect="hidden" cy-label="Height 0 + transform + overflow hidden" style="height: 0px; transform: translate(1, 2); overflow: hidden">
+      <p class="testCase" cy-expect="hidden" cy-label="Child with height 0 + transform + overflow hidden">Test</p>
+    </div>
+    <div class="testCase" cy-expect="hidden" cy-label="Height 0 + transform + overflow-x hidden" style="height: 0px; transform: translate(1, 2); overflow-x: hidden">
+      <p class="testCase" cy-expect="hidden" cy-label="Child with height 0 + transform + overflow-x hidden">Test</p>
+    </div>
+    <div class="testCase" cy-expect="hidden" cy-label="Height 0 + transform + overflow-y hidden" style="height: 0px; transform: translate(1, 2); overflow-y: hidden">
+      <p class="testCase" cy-expect="hidden" cy-label="Child with height 0 + transform + overflow-y hidden">Test</p>
+    </div>
+    <div class="testCase" cy-expect="hidden" cy-label="Width 0 + transform + overflow hidden" style="width: 0px; transform: translate(1, 2); overflow: hidden">
+      <p class="testCase" cy-expect="hidden" cy-label="Child with width 0 + transform + overflow hidden">Test</p>
+    </div>
+    <div class="testCase" cy-expect="hidden" cy-label="Width 0 + transform + overflow-x hidden" style="width: 0px; transform: translate(1, 2); overflow-x: hidden">
+      <p class="testCase" cy-expect="hidden" cy-label="Child with width 0 + transform + overflow-x hidden">Test</p>
+    </div>
+    <div class="testCase" cy-expect="hidden" cy-label="Width 0 + transform + overflow-y hidden" style="width: 0px; transform: translate(1, 2); overflow-y: hidden">
+      <p class="testCase" cy-expect="hidden" cy-label="Child with width 0 + transform + overflow-y hidden">Test</p>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="backface-visibility">
+    <h3>Backface Visibility</h3>
+    <div class="testCase" cy-expect="hidden" cy-label="RotateX 180deg with hidden backface" style="transform: rotateX(180deg); backface-visibility: hidden">Backface hidden on X axis</div>
+    <div class="testCase" cy-expect="hidden" cy-label="RotateY 180deg with hidden backface" style="transform: rotateY(180deg); backface-visibility: hidden">Backface hidden on Y axis</div>
+    <div class="testCase" cy-expect="visible" cy-label="RotateZ 180deg with hidden backface" style="transform: rotateZ(180deg); backface-visibility: hidden">Backface hidden on Z axis</div>
+    <div class="testCase" cy-expect="hidden" cy-label="Rotate3d 180deg with hidden backface" style="transform: rotate3d(1, 1, 1, 180deg); backface-visibility: hidden">Backface hidden on 3 axes</div>
+    <div class="testCase" cy-expect="visible" cy-label="RotateX 180deg with visible backface" style="transform: rotateX(180deg); backface-visibility: visible">Backface visible</div>
+    <div class="testCase" cy-expect="visible" cy-label="RotateY 45deg with hidden backface and no preserve-3d" style="transform: rotateY(45deg); backface-visibility: hidden;">
+      <div class="testCase" cy-expect="visible" cy-label="Nested rotateY 45deg with hidden backface but no preserve-3d" style="transform: rotateY(45deg); backface-visibility: hidden">Backface hidden on Y axis</div>
+    </div>
+    <div class="testCase" cy-expect="visible" cy-label="RotateY 45deg with visible backface and preserve-3d" style="transform: rotateY(45deg); backface-visibility: visible; transform-style: preserve-3d;">
+      <div>RotateY(45deg) with visible backface and preserve-3d</div>
+      <div class="testCase" cy-expect="hidden" cy-label="Nested rotateY 45deg with hidden backface and preserve-3d" style="transform: rotateY(45deg); backface-visibility: hidden; transform-style: preserve-3d">Backface hidden on Y axis</div>
+     
+      <div class="testCase" cy-expect="visible" cy-label="Nested rotateY -90deg with hidden backface and preserve-3d" style="transform: rotateY(-90deg); backface-visibility: hidden; transform-style: preserve-3d">Backface visible on Y axis</div>
+    </div>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/packages/driver/cypress/fixtures/visibility/ux.js b/packages/driver/cypress/fixtures/visibility/ux.js
new file mode 100644
index 00000000000..b5e7e4cb9de
--- /dev/null
+++ b/packages/driver/cypress/fixtures/visibility/ux.js
@@ -0,0 +1,37 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const sections = document.querySelectorAll('.test-section').values().map((el) => {
+    return {
+      label: el.querySelector('h3')?.textContent ?? el.getAttribute('cy-section'),
+      section: el.getAttribute('cy-section'),
+    }
+  })
+  const nav = document.createElement('nav')
+
+  const list = document.createElement('ul')
+
+  nav.appendChild(list)
+  sections.forEach(({ label, section }) => {
+    const li = document.createElement('li')
+    const a = document.createElement('a')
+
+    a.href = `#${section}`
+    a.textContent = label
+    li.appendChild(a)
+    list.appendChild(li)
+  })
+
+  document.body.appendChild(nav)
+})
+
+document.addEventListener('click', (ev) => {
+  const [, section] = ev.target?.href?.split('#') ?? []
+
+  if (!section) return
+
+  document.querySelectorAll('.test-section.active').forEach((el) => {
+    el.classList.remove('active')
+  })
+
+  document.querySelector(`[cy-section="${section}"]`)?.classList.add('active')
+  document.querySelector(`[cy-section="${section}"]`)?.scrollIntoView()
+})
diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index abbf8476259..a4f8b317a93 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -604,7 +604,7 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true }
   if (elOrAncestorIsFixedOrSticky($el)) {
     if (elIsNotElementFromPoint($el)) {
       // show the long element here
-      const covered = stringifyElement(elAtCenterPoint($el))
+      const covered = stringifyElement(elAtCenterPoint($el), 'long')
 
       if (covered) {
         return `This element \`${node}\` is not visible because it has CSS property: \`position: fixed\` and it's being covered by another element:\n\n\`${covered}\``

From f1c8f3d4d200193eae3146c77645630534cc46fb Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Mon, 27 Oct 2025 15:34:06 -0400
Subject: [PATCH 02/35] clean up the html a little bit, remove ref to
 experimentalFastVisibility

---
 .../driver/cypress/e2e/dom/visibility.cy.ts   | 10 ++--
 .../visibility/basic-css-properties.html      | 52 +++++++++----------
 .../cypress/fixtures/visibility/overflow.html |  1 -
 .../cypress/fixtures/visibility/style.css     | 10 +++-
 4 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index a97594245d0..2e9c437ff29 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -5,14 +5,12 @@ describe('src/cypress/dom/visibility', {
   slowTestThreshold: 500,
 }, () => {
   function assertVisibilityForEl (el: HTMLElement) {
-    const expected = el.getAttribute('cy-expect') ?? (
-      Cypress.config('experimentalFastVisibility') ?
-        el.getAttribute('cy-fast-expect') :
-        el.getAttribute('cy-legacy-expect')
-    )
+    // once experimentalFastVisibility is added, switch based on the config value
+    // and use `cy-fast-expect` instead of `cy-legacy-expect` when it is enabled.
+    const expected = el.getAttribute('cy-expect') ?? el.getAttribute('cy-legacy-expect')
 
     if (!expected) {
-      throw new Error(`Expected attribute 'cy-expect' or 'cy-fast-expect' or 'cy-legacy-expect' not found on test case_ element ${el.outerHTML}`)
+      throw new Error(`Expected attribute 'cy-expect' or 'cy-legacy-expect' not found on test case_ element ${el.outerHTML}`)
     }
 
     expect(
diff --git a/packages/driver/cypress/fixtures/visibility/basic-css-properties.html b/packages/driver/cypress/fixtures/visibility/basic-css-properties.html
index 703af69b25f..726195b1993 100644
--- a/packages/driver/cypress/fixtures/visibility/basic-css-properties.html
+++ b/packages/driver/cypress/fixtures/visibility/basic-css-properties.html
@@ -2,68 +2,64 @@
 <html>
 <head>
   <title>Basic CSS Properties Visibility Tests</title>
-  <style>
-    body { margin: 20px; font-family: Arial, sans-serif; }
-    .test-section { display:none; margin: 20px 0; padding: 10px; border: 1px solid #ccc; }
-    .test-section h3 { margin-top: 0; }
-    .test-section.active { display: block; }
-  </style>
+  <link rel="stylesheet" href="./style.css">
+  <script src="./ux.js"></script>
 </head>
 <body>
   <h1>Basic CSS Properties Visibility Tests</h1>
   
   <div class="test-section" cy-section="visibility-property">
     <h3>Visibility Property</h3>
-    <div class="testCase" cy-expect="hidden" style="visibility: hidden;">Hidden by visibility</div>
-    <div class="testCase" cy-expect="visible" style="visibility: visible;">Visible by visibility</div>
-    <div class="testCase" cy-expect="hidden" style="visibility: hidden;">
-      <button class="testCase" cy-expect="hidden">Child of hidden parent</button>
+    <div class="testCase" cy-expect="hidden" cy-label="Hidden by visibility" style="visibility: hidden;">Hidden by visibility</div>
+    <div class="testCase" cy-expect="visible" cy-label="Visible by visibility" style="visibility: visible;">Visible by visibility</div>
+    <div class="testCase" cy-expect="hidden" cy-label="Parent hidden by visibility" style="visibility: hidden;">
+      <button class="testCase" cy-expect="hidden" cy-label="Child of hidden parent">Child of hidden parent</button>
     </div>
   </div>
 
   <div class="test-section" cy-section="display-property">
     <h3>Display Property</h3>
-    <div class="testCase" cy-expect="hidden" style="display: none;">Hidden by display: none</div>
-    <div class="testCase" cy-expect="visible" style="display: block;">Visible by display: block</div>
-    <div class="testCase" cy-expect="hidden" style="display: none;">
-      <span class="testCase" cy-expect="hidden">Child of display: none parent</span>
+    <div class="testCase" cy-expect="hidden" cy-label="Hidden by display: none" style="display: none;">Hidden by display: none</div>
+    <div class="testCase" cy-expect="visible" cy-label="Visible by display: block" style="display: block;">Visible by display: block</div>
+    <div class="testCase" cy-expect="hidden" cy-label="Parent hidden by display: none" style="display: none;">
+      <span class="testCase" cy-expect="hidden" cy-label="Child of display: none parent">Child of display: none parent</span>
     </div>
   </div>
 
   <div class="test-section" cy-section="opacity-property">
     <h3>Opacity Property</h3>
-    <div class="testCase" cy-expect="hidden" style="opacity: 0;">Hidden by opacity: 0</div>
-    <div class="testCase" cy-expect="visible" style="opacity: 0.5;">Semi-transparent (opacity: 0.5)</div>
-    <div class="testCase" cy-expect="visible" style="opacity: 1;">Fully opaque (opacity: 1)</div>
-    <div class="testCase" cy-expect="hidden" style="opacity: 0;">
-      <button class="testCase" cy-expect="hidden">Child of opacity: 0 parent</button>
+    <div class="testCase" cy-expect="hidden" cy-label="Hidden by opacity: 0" style="opacity: 0;">Hidden by opacity: 0</div>
+    <div class="testCase" cy-expect="visible" cy-label="Semi-transparent (opacity: 0.5)" style="opacity: 0.5;">Semi-transparent (opacity: 0.5)</div>
+    <div class="testCase" cy-expect="visible" cy-label="Fully opaque (opacity: 1)" style="opacity: 1;">Fully opaque (opacity: 1)</div>
+    <div class="testCase" cy-expect="hidden" cy-label="Parent hidden by opacity: 0" style="opacity: 0;">
+      <button class="testCase" cy-expect="hidden" cy-label="Child of opacity: 0 parent">Child of opacity: 0 parent</button>
     </div>
   </div>
 
   <div class="test-section" cy-section="input-elements">
     <h3>Input Elements</h3>
-    <input class="testCase" cy-expect="hidden" type="hidden" value="hidden input">
-    <input class="testCase" cy-expect="visible" type="text" value="visible input">
+    <input class="testCase" cy-expect="hidden" cy-label="Hidden input" type="hidden" value="hidden input">
+    <input class="testCase" cy-expect="visible" cy-label="Visible input" type="text" value="visible input">
   </div>
   
   <div class="test-section" cy-section="table-elements">
     <h3>Table Elements</h3>
     <table>
       <tr>
-        <td class="testCase" cy-expect="visible"">Normal Cell</td>
-        <td class="testCase" cy-expect="visible">Normal Cell</td>
-        <td class="testCase" cy-expect="hidden" style="visibility: collapse;">Cell by visibility: collapse</td>
+        <td class="testCase" cy-expect="visible" cy-label="Normal Cell">Normal Cell</td>
+        <td class="testCase" cy-expect="visible" cy-label="Normal Cell">Normal Cell</td>
+        <td class="testCase" cy-expect="hidden" cy-label="Cell by visibility: collapse" style="visibility: collapse;">Cell by visibility: collapse</td>
       </tr>
 
-      <tr class="testCase" cy-expect="hidden" style="visibility: collapse;">
-        <td className="testCase" cy-expect="hidden">Cell hidden by row's visibility: collapse</td>
+      <tr class="testCase" cy-expect="hidden" cy-label="Row hidden by visibility: collapse" style="visibility: collapse;">
+        <td class="testCase" cy-expect="hidden" cy-label="Cell hidden by row's visibility: collapse">Cell hidden by row's visibility: collapse</td>
       </tr>
     </table>
   </div>
   <div class="test-section" cy-section="box-interactions">
     <div>
-      <span class="testCase" cy-expect="visible">
-        <label style="display: block">Block element inside an inline element</label>
+      <span class="testCase" cy-expect="visible" cy-label="Span container for block element">
+        <label class="testCase" cy-expect="visible" cy-label="Block element inside an inline element" style="display: block">Block element inside an inline element</label>
       </span>
     </div>
   </div>
diff --git a/packages/driver/cypress/fixtures/visibility/overflow.html b/packages/driver/cypress/fixtures/visibility/overflow.html
index 0080dbc697f..589691779dd 100644
--- a/packages/driver/cypress/fixtures/visibility/overflow.html
+++ b/packages/driver/cypress/fixtures/visibility/overflow.html
@@ -4,7 +4,6 @@
   <title>Overflow Visibility Tests</title>
   <link rel="stylesheet" href="./style.css">
   <script src="./ux.js"></script>
-  </script>
 </head>
 <body cy-has-conflicts="true">
   <h1>Overflow Visibility Tests</h1>
diff --git a/packages/driver/cypress/fixtures/visibility/style.css b/packages/driver/cypress/fixtures/visibility/style.css
index d8795def1b9..e95a616f443 100644
--- a/packages/driver/cypress/fixtures/visibility/style.css
+++ b/packages/driver/cypress/fixtures/visibility/style.css
@@ -10,4 +10,12 @@ nav {
 nav li {
   display: inline-block;
   list-style: none;
-}
\ No newline at end of file
+}
+
+[cy-expect="hidden"], [cy-legacy-expect="hidden"], [cy-fast-expect="hidden"] {
+  background-color: lightcoral;
+}
+
+[cy-expect="visible"], [cy-legacy-expect="visible"], [cy-fast-expect="visible"] {
+  background-color: lightgreen;
+}

From 611569748993187acae12f698464c790826e7bae Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacieprins@users.noreply.github.com>
Date: Mon, 27 Oct 2025 15:39:20 -0400
Subject: [PATCH 03/35] Delete
 packages/driver/cypress/e2e/dom/visibility-migration.md

---
 .../cypress/e2e/dom/visibility-migration.md   | 197 ------------------
 1 file changed, 197 deletions(-)
 delete mode 100644 packages/driver/cypress/e2e/dom/visibility-migration.md

diff --git a/packages/driver/cypress/e2e/dom/visibility-migration.md b/packages/driver/cypress/e2e/dom/visibility-migration.md
deleted file mode 100644
index a8ce2d63ed9..00000000000
--- a/packages/driver/cypress/e2e/dom/visibility-migration.md
+++ /dev/null
@@ -1,197 +0,0 @@
-# Visibility Test Migration Guide
-
-This document outlines the comprehensive matrix of visibility test situations covered in the `hidden/visible overrides` section of `visibility.cy.ts` and tracks their migration status to the declarative format.
-
-### Migration Status Legend
-- ✅ **Migrated** - Covered in declarative HTML fixtures (`visibility scenarios` section)
-- ❌ **Not Migrated** - Still in imperative test cases (`hidden/visible overrides` section)
-- 🔄 **Partially Migrated** - Some scenarios covered, others remain imperative due to technical constraints
-
-## CSS Properties Matrix
-
-| **Element State** | **Parent State** | **Visibility** | **Display** | **Opacity** | **Expected Result** | **Status** |
-|-------------------|------------------|----------------|-------------|-------------|---------------------|------------|
-| Applied to element | - | `hidden` | - | - | Hidden | ✅ |
-| - | Applied to parent | `hidden` | - | - | Child hidden | ✅ |
-| Applied to `<td>` | - | `collapse` | - | - | Hidden | ✅ |
-| Applied to `<tr>` | - | `collapse` | - | - | Hidden | ✅ |
-| - | Applied to parent | `collapse` | - | - | Child hidden | ✅ |
-| `input type="hidden"` | - | - | - | - | Hidden | ✅ |
-| Applied to element | - | - | `none` | - | Hidden | ✅ |
-| - | Applied to parent | - | `none` | - | Child hidden | ✅ |
-| - | Parent has inline | - | `inline` | - | Child with `display: block` visible | ❌ |
-| Applied to element | - | - | - | `0` | Hidden | ✅ |
-| - | Applied to parent | - | - | `0` | Child hidden | ✅ |
-| Applied to element | - | - | - | `0.5` | Visible | ✅ |
-
-## Dimensions Matrix
-
-| **Width** | **Height** | **Content** | **Visibility** | **Display** | **Opacity** | **Expected Result** | **Status** |
-|-----------|------------|-------------|----------------|-------------|-------------|---------------------|------------|
-| 0 | 100px | Text content | - | - | - | Visible | ✅ |
-| 50px | 0 | Text content | - | - | - | Visible | ✅ |
-| 0 | 50px | Whitespace only | - | - | - | Hidden | ✅ |
-| 0 | 100px | No content | - | - | - | Hidden | ✅ |
-| 50px | 0 | No content | - | - | - | Hidden | ✅ |
-| 0 | 100px | - | - | - | - | Child hidden (overflow: hidden) | ✅ |
-| 100px | 0 | - | - | - | - | Child hidden (overflow: hidden) | ✅ |
-| 0 | 100px | - | - | - | - | Descendant hidden (overflow: hidden) | ✅ |
-| 100px | 0 | - | - | - | - | Descendant hidden (overflow: hidden) | ✅ |
-| 100px | 100px | - | - | - | - | Child visible (overflow: hidden) | ✅ |
-| 0 | 0 | - | - | - | - | Child hidden (overflow: auto) | ✅ |
-
-## Positioning Matrix
-
-| **Element Position** | **Parent Position** | **Parent Dimensions** | **Visibility** | **Display** | **Opacity** | **Expected Result** | **Status** |
-|---------------------|---------------------|----------------------|----------------|-------------|-------------|---------------------|------------|
-| `absolute` | - | Zero width | - | - | - | Element visible | ✅ |
-| `absolute` | - | Zero width ancestor | - | - | - | Element visible | ✅ |
-| Static | `absolute` | Zero width | - | - | - | Element hidden | ✅ |
-| `fixed` | - | Normal | - | - | - | Element visible | ✅ |
-| `fixed` | - | Normal ancestor | - | - | - | Element visible | ✅ |
-| `fixed` | - | Normal | Covered by another | - | - | Element hidden | ✅ |
-| `fixed` | - | Normal | Off-screen | - | - | Element hidden | ✅ |
-| `fixed` + `pointer-events: none` | - | Normal | - | - | - | Element visible | ✅ |
-| `fixed` | `pointer-events: none` | Normal | - | - | - | Element visible | ✅ |
-| `fixed` | `pointer-events: none` | Normal | Covered by another | - | - | Element hidden | ✅ |
-| `sticky` | - | Normal | - | - | - | Element visible | ✅ |
-
-## Form Elements Matrix
-
-| **Element Type** | **Parent State** | **Element State** | **Visibility** | **Display** | **Opacity** | **Expected Result** | **Status** |
-|------------------|------------------|-------------------|----------------|-------------|-------------|---------------------|------------|
-| `<option>` | Visible `<select>` | Default | - | - | - | Visible | ✅ |
-| `<optgroup>` | Visible `<select>` | Default | - | - | - | Visible | ✅ |
-| `<option>` | Hidden `<select>` | Default | - | - | - | Hidden | ✅ |
-| `<option>` | Visible `<select>` | - | - | `none` | - | Hidden | ✅ |
-| `<option>` | Outside `<select>` | Default | - | - | - | Follows regular logic | ✅ |
-
-## Overflow Clipping Matrix
-
-| **Overflow Type** | **Element Position** | **Element Location** | **Visibility** | **Display** | **Opacity** | **Expected Result** | **Status** |
-|-------------------|---------------------|---------------------|----------------|-------------|-------------|---------------------|------------|
-| `overflow: hidden` | Static | Out of bounds left | - | - | - | Hidden | ✅ |
-| `overflow: hidden` | Static | Out of bounds right | - | - | - | Hidden | ✅ |
-| `overflow: hidden` | Static | Out of bounds above | - | - | - | Hidden | ✅ |
-| `overflow: hidden` | Static | Out of bounds below | - | - | - | Hidden | ✅ |
-| `overflow-y: hidden` | Static | Out of bounds vertically | - | - | - | Hidden | ✅ |
-| `overflow-x: hidden` | Static | Out of bounds horizontally | - | - | - | Hidden | ✅ |
-| `overflow: hidden` | Static | In bounds | - | - | - | Visible | ✅ |
-| `overflow: auto` | Static | Out of ancestor bounds | - | - | - | Hidden | ✅ |
-| `overflow: scroll` | Static | Out of parent bounds | - | - | - | Hidden | ✅ |
-| `overflow: hidden` | `absolute` | In bounds | - | - | - | Visible | ✅ |
-| `overflow: hidden` | `absolute` | Out of bounds | - | - | - | Hidden | ✅ |
-| `overflow: hidden` | `relative` | Out of ancestor bounds | - | - | - | Hidden | ✅ |
-| `overflow: visible` | `relative` | Out of ancestor bounds | - | - | - | Visible | ✅ |
-| `overflow: hidden` | Flex container | Out of bounds | - | - | - | Hidden | ✅ |
-
-## Transform Matrix
-
-| **Transform Type** | **Scale Value** | **Element Location** | **Visibility** | **Display** | **Opacity** | **Expected Result** | **Status** |
-|-------------------|-----------------|---------------------|----------------|-------------|-------------|---------------------|------------|
-| `transform: scale()` | `(0,0)` | Self | - | - | - | Hidden | ✅ |
-| `transform: scale()` | `(1,1)` | Self | - | - | - | Visible | ✅ |
-| `transform: scale()` | `(0,0)` | Outside parent | - | - | - | Hidden | ✅ |
-| `transform: scale()` | `(1,1)` | Inside parent | - | - | - | Visible | ✅ |
-| `transform: scaleX()` | `0` | Self | - | - | - | Hidden | ✅ |
-| `transform: scaleY()` | `0` | Self | - | - | - | Hidden | ✅ |
-| `transform: scaleZ()` | `0` | Self | - | - | - | Hidden | ✅ |
-| `transform: rotateX()` | `90deg` | Self | - | - | - | Hidden | ✅ |
-| `transform: rotateY()` | `90deg` | Self | - | - | - | Hidden | ✅ |
-| `transform: rotateZ()` | `90deg` | Self | - | - | - | Visible | ✅ |
-| `transform: rotateX() rotateY()` | `90deg, 90deg` | Self | - | - | - | Hidden | ✅ |
-| `transform: translateX()` | Negative offset | Out of ancestor bounds | - | - | - | Hidden | ✅ |
-| `transform: translateX()` | Negative offset | In ancestor bounds | - | - | - | Visible | ✅ |
-| `transform: skew()` | Any value | Self | - | - | - | Visible | ✅ |
-| `transform: rotate()` | Any value | Self | - | - | - | Visible | ✅ |
-| Multiple transforms | With scale(0,0) | Self | - | - | - | Hidden | ✅ |
-| Multiple transforms | With 90° rotation | Self | - | - | - | Hidden | ✅ |
-| Transform + text content | Any value | Self | - | - | - | Visible | ✅ |
-| Transform + zero dimensions | Any value | Self | - | - | - | Visible (with text) | ✅ |
-| Transform + overflow | Any value | Self | - | - | - | Hidden | ✅ |
-| `backface-visibility: hidden` | `rotateX(180deg)` | Self | - | - | - | Hidden | ✅ |
-| `backface-visibility: hidden` | `rotateY(180deg)` | Self | - | - | - | Hidden | ✅ |
-| `backface-visibility: hidden` | `rotateZ(180deg)` | Self | - | - | - | Visible | ✅ |
-| `backface-visibility: hidden` | `rotate3d(180deg)` | Self | - | - | - | Hidden | ✅ |
-| `backface-visibility: visible` | `rotateX(180deg)` | Self | - | - | - | Visible | ✅ |
-| `backface-visibility: hidden` + `preserve-3d` | `rotateY(45deg)` | Self | - | - | - | Visible | ✅ |
-
-## Clip-Path Matrix
-
-| **Clip-Path Type** | **Element Location** | **Mode** | **Visibility** | **Display** | **Opacity** | **Expected Result** | **Status** |
-|-------------------|---------------------|----------|----------------|-------------|-------------|---------------------|------------|
-| `clip-path: polygon(0 0, 0 0, 0 0, 0 0)` | Outside path | Fast only | - | - | - | Hidden | ✅ |
-| `clip-path: circle(100%)` | Inside path | Fast only | - | - | - | Visible | ✅ |
-| `clip-path: inset(25% 25% 25% 25%)` | Outside path | Fast only | - | - | - | Hidden | ✅ |
-| `clip-path: polygon(0% 0%, 100% 0%, 50% 100%)` | Inside path | Fast only | - | - | - | Visible | ✅ |
-| `clip-path: ellipse(50% 50% at 50% 50%)` | Inside path | Fast only | - | - | - | Visible | ✅ |
-| `clip-path: path('M 0 0 L 100 0 L 100 100 L 0 100 Z')` | Inside path | Fast only | - | - | - | Visible | ✅ |
-
-## Special Cases Matrix
-
-| **Category** | **Element** | **State** | **Visibility** | **Display** | **Opacity** | **Expected Result** | **Status** |
-|--------------|-------------|-----------|----------------|-------------|-------------|---------------------|------------|
-| HTML/Body | `<html>` | Default | - | - | - | Always visible | ✅ |
-| HTML/Body | `<body>` | Default | - | - | - | Always visible | ✅ |
-| HTML/Body | `<html>` | - | - | `none` | - | Still visible | ✅ |
-| HTML/Body | `<body>` | - | - | `none` | - | Still visible | ✅ |
-| Detached | Any element | Not in DOM | - | - | - | Hidden | ❌ |
-| Backface | Any element | `backface-visibility: hidden` + `rotateX(180deg)` | - | - | - | Hidden | ✅ |
-| Scroll | Any element | Requires scroll to be visible | - | - | - | Hidden (with scroll suggestion) | ✅ |
-
-## Migration Summary
-
-### ✅ **Fully Migrated Categories:**
-- **Basic CSS Properties** - All visibility, display, opacity, and table collapse scenarios
-- **Dimensions** - All dimensional scenarios including text content edge cases
-- **Positioning** - All positioning scenarios (absolute, fixed, sticky)
-- **Form Elements** - All form element scenarios including options outside select
-- **Display Inline/Block Interactions** - Parent inline with child block
-- **Overflow Clipping** - All overflow scenarios (hidden, auto, scroll, directional overflow)
-- **Transform Effects** - All transform scenarios including scale, rotation, translation, skew, backface-visibility
-- **Clip-Path** - All CSS clip-path scenarios (polygon, circle, inset, ellipse, path)
-- **Special Cases** - HTML/body elements and scroll requirements (migrated to declarative format)
-
-### 🔄 **Partially Migrated Categories:**
-- None - All testable scenarios have been migrated
-
-### ❌ **Not Yet Migrated Categories:**
-- **Detached Elements** - Elements not in DOM (cannot be migrated due to technical constraints)
-
-## Migration Notes
-
-### Declarative Test Structure
-
-The visibility tests have been migrated from imperative test cases to declarative HTML fixtures:
-
-- **`basic-css-properties.html`** - Tests CSS visibility, display, and opacity properties ✅
-- **`overflow.html`** - Tests dimensional scenarios, overflow clipping, and clip-path scenarios ✅
-- **`positioning.html`** - Tests positioning scenarios (absolute, fixed, sticky) ✅
-- **`form-elements.html`** - Tests form element visibility (select, option, optgroup) ✅
-- **`transforms.html`** - Tests CSS transform effects including scale, rotation, translation, skew, and backface-visibility ✅
-
-### Test Case Attributes
-
-Each test case uses these attributes:
-- `cy-expect="visible"` or `cy-expect="hidden"` - Expected visibility state
-- `cy-fast-expect` / `cy-legacy-expect` - Mode-specific expectations when they differ
-- `cy-label` - Descriptive label for test case identification
-- `cy-section` - Groups related test cases together
-
-### Mode Differences
-
-Some test cases behave differently between fast and legacy visibility modes:
-- Zero dimensions with overflow auto
-- Positioning with zero dimensions
-- Clip-path scenarios (fast mode only - legacy mode does not support clip-path)
-
-### Coverage Completeness
-
-This matrix ensures comprehensive coverage of:
-- All CSS properties that affect visibility
-- Dimensional edge cases with text content
-- Positioning scenarios and their interactions
-- Overflow clipping in various contexts
-- Transform effects on visibility
-- Form element special cases
-- Browser-specific behaviors and edge cases

From 35defaeda13eb7f2859598ca3768c61fff957c7c Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacieprins@users.noreply.github.com>
Date: Mon, 27 Oct 2025 15:40:02 -0400
Subject: [PATCH 04/35] Update visibility.ts

---
 packages/driver/src/dom/visibility.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index a4f8b317a93..abbf8476259 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -604,7 +604,7 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true }
   if (elOrAncestorIsFixedOrSticky($el)) {
     if (elIsNotElementFromPoint($el)) {
       // show the long element here
-      const covered = stringifyElement(elAtCenterPoint($el), 'long')
+      const covered = stringifyElement(elAtCenterPoint($el))
 
       if (covered) {
         return `This element \`${node}\` is not visible because it has CSS property: \`position: fixed\` and it's being covered by another element:\n\n\`${covered}\``

From a3c5abbc25ed326ead8d444916c1e702ee313ace Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Mon, 27 Oct 2025 16:14:12 -0400
Subject: [PATCH 05/35] fix assertion

---
 packages/driver/cypress/e2e/dom/visibility.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index 2e9c437ff29..d292389e601 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -390,7 +390,7 @@ describe('src/cypress/dom/visibility', {
       it('has parent with `visibility: collapse`', function () {
         prepareFixtureSection('table-elements')
         cy.get('[cy-section="table-elements"] tr[style*="visibility: collapse"] td').then(($el) => {
-          reasonIs($el, 'This element `<td>` is not visible because its parent `<tr.testCase>` has CSS property: `visibility: collapse`')
+          reasonIs($el, 'This element `<td.testCase>` is not visible because its parent `<tr.testCase>` has CSS property: `visibility: collapse`')
         })
       })
 

From eb84c4b9e563f561134221a88e3291b1174d9cbc Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Mon, 27 Oct 2025 16:45:13 -0400
Subject: [PATCH 06/35] fix incomplete

---
 packages/driver/cypress/e2e/dom/visibility.cy.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index d292389e601..9d5b49bb875 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -248,8 +248,6 @@ describe('src/cypress/dom/visibility', {
 
           expect(cy.$$('body')).not.to.be.hidden
           expect(cy.$$('body')).to.be.visible
-
-          cy
         })
       })
     })

From 232183ac17848f4c0fe78789db2057cb2a27b359 Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Mon, 20 Oct 2025 09:49:09 -0400
Subject: [PATCH 07/35] stress test for visibility

---
 .../e2e/memory/virtual-scroll-stress.cy.js    | 433 ++++++++++++
 .../fixtures/virtual-scroll-stress-test.html  | 654 ++++++++++++++++++
 2 files changed, 1087 insertions(+)
 create mode 100644 packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
 create mode 100644 packages/driver/cypress/fixtures/virtual-scroll-stress-test.html

diff --git a/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js b/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
new file mode 100644
index 00000000000..ae42920b33e
--- /dev/null
+++ b/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
@@ -0,0 +1,433 @@
+/**
+ * React Virtuoso Browser Crash Tests
+ *
+ * This test suite is designed to reproduce browser crashes when scrolling
+ * with react-virtuoso library, as reported by users.
+ *
+ * Test scenarios include:
+ * - Basic virtual list scrolling
+ * - Dynamic height virtual lists
+ * - Multiple virtual lists simultaneously
+ * - Extreme stress tests with large datasets
+ * - Rapid scrolling patterns that may cause crashes
+ */
+
+describe('React Virtuoso Browser Crash Tests', () => {
+  beforeEach(() => {
+    // Visit the react-virtuoso test website
+    cy.visit('/fixtures/virtual-scroll-stress-test.html')
+
+    // Wait for React to load
+    cy.get('.header').should('be.visible')
+
+    // Clear any existing data
+    cy.window().then((win) => {
+      if (win.clearBasicList) win.clearBasicList()
+
+      if (win.clearDynamicList) win.clearDynamicList()
+
+      if (win.clearMultipleLists) win.clearMultipleLists()
+
+      if (win.clearExtremeList) win.clearExtremeList()
+    })
+  })
+
+  describe('Basic Virtual List Tests', () => {
+    it('should load basic virtual list without crashing', () => {
+      cy.get('button').contains('Load Basic List').click()
+
+      cy.get('#basicList .item')
+      .should('have.length.greaterThan', 0)
+    })
+
+    it('should handle normal scrolling without crashing', () => {
+      // Load the basic list
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      // Perform normal scrolling
+      cy.get('#basicList').scrollTo(0, 1000)
+      cy.get('#basicList').scrollTo(0, 2000)
+      cy.get('#basicList').scrollTo(0, 5000)
+
+      // Verify scroll counter is working
+      cy.get('#basicScrolls').should('contain', '3')
+    })
+
+    it('should handle rapid scrolling without crashing', () => {
+      // Load the basic list
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      // Perform rapid scrolling
+      cy.get('#basicList').scrollTo(0, 100)
+      cy.get('#basicList').scrollTo(0, 300)
+      cy.get('#basicList').scrollTo(0, 600)
+      cy.get('#basicList').scrollTo(0, 1000)
+      cy.get('#basicList').scrollTo(0, 1500)
+      cy.get('#basicList').scrollTo(0, 2000)
+
+      // Verify scroll counter is working
+      cy.get('#basicScrolls').should('contain', '6')
+    })
+
+    it('should handle stress scrolling without crashing', () => {
+      // Load the basic list
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      // Trigger stress scrolling
+      cy.get('button').contains('Stress Scroll').click()
+
+      // Wait for stress scrolling to complete
+      cy.wait(2000)
+
+      // Verify the page is still responsive
+      cy.get('#basicScrolls').should('be.visible')
+      cy.get('#basicItems').should('contain', '10000')
+    })
+
+    it('should handle scrolling to bottom and back to top', () => {
+      // Load the basic list
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      // Scroll to bottom
+      cy.get('#basicList').scrollTo('bottom')
+      cy.wait(500)
+
+      // Scroll back to top
+      cy.get('#basicList').scrollTo('top')
+      cy.wait(500)
+
+      // Verify page is still responsive
+      cy.get('#basicScrolls').should('be.visible')
+    })
+  })
+
+  describe('Dynamic Height Virtual List Tests', () => {
+    it('should load dynamic height list without crashing', () => {
+      // Load the dynamic list
+      cy.get('button').contains('Load Dynamic List').click()
+
+      // Wait for items to load
+      cy.get('#dynamicItems').should('contain', '5000')
+      cy.get('.loading').should('not.exist')
+
+      // Verify the virtual list is rendered
+      cy.get('#dynamicList').should('be.visible')
+      cy.get('#dynamicList .item').should('have.length.greaterThan', 0)
+    })
+
+    it('should handle scrolling with dynamic heights without crashing', () => {
+      // Load the dynamic list
+      cy.get('button').contains('Load Dynamic List').click()
+      cy.get('#dynamicItems').should('contain', '5000')
+
+      // Perform scrolling with dynamic heights
+      cy.get('#dynamicList').scrollTo(0, 500)
+      cy.get('#dynamicList').scrollTo(0, 1000)
+      cy.get('#dynamicList').scrollTo(0, 2000)
+
+      // Verify scroll counter is working
+      cy.get('#dynamicScrolls').should('contain', '3')
+    })
+
+    it('should handle rapid scrolling with dynamic heights', () => {
+      // Load the dynamic list
+      cy.get('button').contains('Load Dynamic List').click()
+      cy.get('#dynamicItems').should('contain', '5000')
+
+      // Trigger rapid scrolling
+      cy.get('button').contains('Rapid Scroll').click()
+
+      // Wait for rapid scrolling to complete
+      cy.wait(1500)
+
+      // Verify the page is still responsive
+      cy.get('#dynamicScrolls').should('be.visible')
+      cy.get('#dynamicItems').should('contain', '5000')
+    })
+  })
+
+  describe('Multiple Virtual Lists Tests', () => {
+    it('should load multiple lists without crashing', () => {
+      // Load multiple lists
+      cy.get('button').contains('Load Multiple Lists').click()
+
+      // Wait for items to load
+      cy.get('#multipleItems').should('contain', '6000')
+      cy.get('.loading').should('not.exist')
+
+      // Verify both lists are rendered
+      cy.get('#multipleListA').should('be.visible')
+      cy.get('#multipleListB').should('be.visible')
+      cy.get('#multipleListA .item').should('have.length.greaterThan', 0)
+      cy.get('#multipleListB .item').should('have.length.greaterThan', 0)
+    })
+
+    it('should handle simultaneous scrolling of multiple lists', () => {
+      // Load multiple lists
+      cy.get('button').contains('Load Multiple Lists').click()
+      cy.get('#multipleItems').should('contain', '6000')
+
+      // Scroll both lists simultaneously
+      cy.get('#multipleListA').scrollTo(0, 1000)
+      cy.get('#multipleListB').scrollTo(0, 1500)
+
+      // Verify scroll counter is working
+      cy.get('#multipleScrolls').should('contain', '2')
+    })
+
+    it('should handle stress scrolling multiple lists', () => {
+      // Load multiple lists
+      cy.get('button').contains('Load Multiple Lists').click()
+      cy.get('#multipleItems').should('contain', '6000')
+
+      // Trigger stress scrolling on multiple lists
+      cy.get('button').contains('Stress Test All').click()
+
+      // Wait for stress scrolling to complete
+      cy.wait(3000)
+
+      // Verify the page is still responsive
+      cy.get('#multipleScrolls').should('be.visible')
+      cy.get('#multipleItems').should('contain', '6000')
+    })
+
+    it('should handle alternating scroll between lists', () => {
+      // Load multiple lists
+      cy.get('button').contains('Load Multiple Lists').click()
+      cy.get('#multipleItems').should('contain', '6000')
+
+      // Alternate scrolling between lists
+      cy.get('#multipleListA').scrollTo(0, 500)
+      cy.get('#multipleListB').scrollTo(0, 500)
+      cy.get('#multipleListA').scrollTo(0, 1000)
+      cy.get('#multipleListB').scrollTo(0, 1000)
+      cy.get('#multipleListA').scrollTo(0, 1500)
+      cy.get('#multipleListB').scrollTo(0, 1500)
+
+      // Verify scroll counter is working
+      cy.get('#multipleScrolls').should('contain', '6')
+    })
+  })
+
+  describe('Extreme Stress Tests', () => {
+    it('should load extreme list without crashing', () => {
+      // Load the extreme list
+      cy.get('button').contains('Load Extreme List').click()
+
+      // Wait for items to load (this may take longer)
+      cy.get('#extremeItems', { timeout: 10000 }).should('contain', '50000')
+      cy.get('.loading').should('not.exist')
+
+      // Verify the virtual list is rendered
+      cy.get('#extremeList').should('be.visible')
+      cy.get('#extremeList .item').should('have.length.greaterThan', 0)
+    })
+
+    it('should handle extreme scrolling without crashing', () => {
+      // Load the extreme list
+      cy.get('button').contains('Load Extreme List').click()
+      cy.get('#extremeItems', { timeout: 10000 }).should('contain', '50000')
+
+      // Perform extreme scrolling
+      cy.get('#extremeList').scrollTo(0, 5000)
+      cy.get('#extremeList').scrollTo(0, 10000)
+      cy.get('#extremeList').scrollTo(0, 20000)
+
+      // Verify scroll counter is working
+      cy.get('#extremeScrolls').should('contain', '3')
+    })
+
+    it('should handle extreme stress scrolling test', () => {
+      // Load the extreme list
+      cy.get('button').contains('Load Extreme List').click()
+      cy.get('#extremeItems', { timeout: 10000 }).should('contain', '50000')
+
+      // Trigger extreme scroll test
+      cy.get('button').contains('Extreme Scroll Test').click()
+
+      // Wait for extreme scrolling to complete
+      cy.wait(5000)
+
+      // Verify the page is still responsive
+      cy.get('#extremeScrolls').should('be.visible')
+      cy.get('#extremeItems').should('contain', '50000')
+    })
+
+    it('should handle rapid scrolling with heavy operations', () => {
+      // Load the extreme list
+      cy.get('button').contains('Load Extreme List').click()
+      cy.get('#extremeItems', { timeout: 10000 }).should('contain', '50000')
+
+      // Click heavy operation buttons while scrolling
+      cy.get('#extremeList').scrollTo(0, 1000)
+      cy.get('#extremeList .item-btn').first().click()
+      cy.get('#extremeList').scrollTo(0, 2000)
+      cy.get('#extremeList .item-btn').eq(1).click()
+      cy.get('#extremeList').scrollTo(0, 3000)
+      cy.get('#extremeList .item-btn').eq(2).click()
+
+      // Verify scroll counter is working
+      cy.get('#extremeScrolls').should('contain', '3')
+    })
+  })
+
+  describe('Memory and Performance Tests', () => {
+    it('should handle memory pressure from multiple large lists', () => {
+      // Load all lists simultaneously
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('button').contains('Load Dynamic List').click()
+      cy.get('button').contains('Load Multiple Lists').click()
+      cy.get('button').contains('Load Extreme List').click()
+
+      // Wait for all lists to load
+      cy.get('#basicItems').should('contain', '10000')
+      cy.get('#dynamicItems').should('contain', '5000')
+      cy.get('#multipleItems').should('contain', '6000')
+      cy.get('#extremeItems', { timeout: 15000 }).should('contain', '50000')
+
+      // Perform scrolling on all lists
+      cy.get('#basicList').scrollTo(0, 1000)
+      cy.get('#dynamicList').scrollTo(0, 1000)
+      cy.get('#multipleListA').scrollTo(0, 1000)
+      cy.get('#multipleListB').scrollTo(0, 1000)
+      cy.get('#extremeList').scrollTo(0, 1000)
+
+      // Verify all scroll counters are working
+      cy.get('#basicScrolls').should('contain', '1')
+      cy.get('#dynamicScrolls').should('contain', '1')
+      cy.get('#multipleScrolls').should('contain', '2')
+      cy.get('#extremeScrolls').should('contain', '1')
+    })
+
+    it('should handle rapid scroll direction changes', () => {
+      // Load the basic list
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      // Rapid scroll direction changes
+      cy.get('#basicList').scrollTo(0, 1000)
+      cy.get('#basicList').scrollTo(0, 500)
+      cy.get('#basicList').scrollTo(0, 1500)
+      cy.get('#basicList').scrollTo(0, 800)
+      cy.get('#basicList').scrollTo(0, 2000)
+      cy.get('#basicList').scrollTo(0, 1200)
+
+      // Verify scroll counter is working
+      cy.get('#basicScrolls').should('contain', '6')
+    })
+
+    it('should handle scroll with rapid item interactions', () => {
+      // Load the basic list
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      // Scroll and interact with items rapidly
+      cy.get('#basicList').scrollTo(0, 1000)
+      cy.get('#basicList .item-btn').first().click()
+      cy.get('#basicList').scrollTo(0, 2000)
+      cy.get('#basicList .item-btn').eq(1).click()
+      cy.get('#basicList').scrollTo(0, 3000)
+      cy.get('#basicList .item-btn').eq(2).click()
+
+      // Verify scroll counter is working
+      cy.get('#basicScrolls').should('contain', '3')
+    })
+  })
+
+  describe('Browser Crash Detection Tests', () => {
+    it('should detect if browser becomes unresponsive', () => {
+      // Load the extreme list
+      cy.get('button').contains('Load Extreme List').click()
+      cy.get('#extremeItems', { timeout: 10000 }).should('contain', '50000')
+
+      // Perform operations that might cause crashes
+      cy.get('button').contains('Extreme Scroll Test').click()
+
+      // Wait and check if page is still responsive
+      cy.wait(2000)
+
+      // Try to interact with the page
+      cy.get('#extremeScrolls').should('be.visible')
+      cy.get('button').contains('Clear List').should('be.visible')
+
+      // Try to scroll the main page
+      cy.scrollTo(0, 500)
+      cy.scrollTo(0, 0)
+    })
+
+    it('should detect memory leaks during extended scrolling', () => {
+      // Load the basic list
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      // Perform extended scrolling
+      for (let i = 0; i < 10; i++) {
+        cy.get('#basicList').scrollTo(0, i * 1000)
+        cy.wait(100)
+      }
+
+      // Verify the page is still responsive
+      cy.get('#basicScrolls').should('be.visible')
+      cy.get('#basicItems').should('contain', '10000')
+    })
+
+    it('should handle scroll with rapid list clearing and reloading', () => {
+      // Load the basic list
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      // Scroll a bit
+      cy.get('#basicList').scrollTo(0, 1000)
+
+      // Clear and reload multiple times
+      cy.get('button').contains('Clear List').click()
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      cy.get('button').contains('Clear List').click()
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      // Verify the page is still responsive
+      cy.get('#basicScrolls').should('be.visible')
+    })
+  })
+
+  describe('Cross-Browser Compatibility Tests', () => {
+    it('should work with different scroll behaviors', () => {
+      // Load the basic list
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+
+      // Test different scroll methods
+      cy.get('#basicList').scrollTo(0, 1000)
+      cy.get('#basicList').scrollTo('bottom')
+      cy.get('#basicList').scrollTo('top')
+      cy.get('#basicList').scrollTo(0, 5000)
+
+      // Verify scroll counter is working
+      cy.get('#basicScrolls').should('contain', '4')
+    })
+
+    it('should handle scroll with different viewport sizes', () => {
+      // Test with different viewport sizes
+      cy.viewport(1920, 1080)
+      cy.get('button').contains('Load Basic List').click()
+      cy.get('#basicItems').should('contain', '10000')
+      cy.get('#basicList').scrollTo(0, 1000)
+
+      cy.viewport(1366, 768)
+      cy.get('#basicList').scrollTo(0, 2000)
+
+      cy.viewport(1024, 768)
+      cy.get('#basicList').scrollTo(0, 3000)
+
+      // Verify scroll counter is working
+      cy.get('#basicScrolls').should('contain', '3')
+    })
+  })
+})
diff --git a/packages/driver/cypress/fixtures/virtual-scroll-stress-test.html b/packages/driver/cypress/fixtures/virtual-scroll-stress-test.html
new file mode 100644
index 00000000000..b9a6b84a7db
--- /dev/null
+++ b/packages/driver/cypress/fixtures/virtual-scroll-stress-test.html
@@ -0,0 +1,654 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>React Virtuoso Test Website - Browser Crash Reproduction</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 20px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+            background-color: #f5f5f5;
+        }
+        
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        
+        .header {
+            text-align: center;
+            margin-bottom: 30px;
+            padding: 20px;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        
+        .test-section {
+            margin-bottom: 30px;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+        
+        .section-header {
+            background: #007acc;
+            color: white;
+            padding: 15px 20px;
+            margin: 0;
+            font-size: 18px;
+            font-weight: 600;
+        }
+        
+        .section-content {
+            padding: 20px;
+        }
+        
+        .controls {
+            margin-bottom: 20px;
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+        
+        .btn {
+            padding: 8px 16px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: background-color 0.2s;
+        }
+        
+        .btn-primary {
+            background: #007acc;
+            color: white;
+        }
+        
+        .btn-primary:hover {
+            background: #005a9e;
+        }
+        
+        .btn-danger {
+            background: #dc3545;
+            color: white;
+        }
+        
+        .btn-danger:hover {
+            background: #c82333;
+        }
+        
+        .btn-success {
+            background: #28a745;
+            color: white;
+        }
+        
+        .btn-success:hover {
+            background: #218838;
+        }
+        
+        .status {
+            padding: 10px;
+            border-radius: 4px;
+            margin-bottom: 15px;
+            font-weight: 500;
+        }
+        
+        .status-info {
+            background: #d1ecf1;
+            color: #0c5460;
+            border: 1px solid #bee5eb;
+        }
+        
+        .status-warning {
+            background: #fff3cd;
+            color: #856404;
+            border: 1px solid #ffeaa7;
+        }
+        
+        .status-error {
+            background: #f8d7da;
+            color: #721c24;
+            border: 1px solid #f5c6cb;
+        }
+        
+        .virtual-container {
+            border: 2px solid #e0e0e0;
+            border-radius: 4px;
+            background: white;
+            overflow-y: auto;
+            position: relative;
+        }
+        
+        .item {
+            padding: 15px;
+            border-bottom: 1px solid #f0f0f0;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            min-height: 60px;
+        }
+        
+        .item:last-child {
+            border-bottom: none;
+        }
+        
+        .item-content {
+            flex: 1;
+        }
+        
+        .item-title {
+            font-weight: 600;
+            margin-bottom: 5px;
+        }
+        
+        .item-description {
+            color: #666;
+            font-size: 14px;
+        }
+        
+        .item-actions {
+            display: flex;
+            gap: 5px;
+        }
+        
+        .item-btn {
+            padding: 4px 8px;
+            border: 1px solid #ddd;
+            border-radius: 3px;
+            background: white;
+            cursor: pointer;
+            font-size: 12px;
+        }
+        
+        .item-btn:hover {
+            background: #f8f9fa;
+        }
+        
+        .loading {
+            text-align: center;
+            padding: 20px;
+            color: #666;
+        }
+        
+        .error {
+            text-align: center;
+            padding: 20px;
+            color: #dc3545;
+            background: #f8d7da;
+            border-radius: 4px;
+            margin: 10px 0;
+        }
+        
+        .metrics {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+        
+        .metric {
+            background: #f8f9fa;
+            padding: 15px;
+            border-radius: 4px;
+            text-align: center;
+        }
+        
+        .metric-value {
+            font-size: 24px;
+            font-weight: bold;
+            color: #007acc;
+        }
+        
+        .metric-label {
+            font-size: 14px;
+            color: #666;
+            margin-top: 5px;
+        }
+        
+        .scroll-indicator {
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            background: rgba(0,0,0,0.8);
+            color: white;
+            padding: 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            z-index: 1000;
+        }
+        
+        .fallback-message {
+            background: #fff3cd;
+            color: #856404;
+            border: 1px solid #ffeaa7;
+            padding: 15px;
+            border-radius: 4px;
+            margin-bottom: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="scroll-indicator" id="scrollIndicator">
+        Scroll: <span id="scrollPosition">0</span>px
+    </div>
+    
+    <div class="container">
+        <div class="header">
+            <h1>React Virtuoso Browser Crash Test</h1>
+            <p>This website is designed to reproduce browser crashes when scrolling with react-virtuoso library</p>
+            <div class="status status-warning">
+                ⚠️ Warning: This test may cause browser crashes or performance issues. Use with caution!
+            </div>
+            <div class="fallback-message">
+                <strong>Fallback Mode:</strong> Using native scrolling simulation instead of React Virtuoso library.
+                This still reproduces the same crash scenarios with high-performance scrolling.
+            </div>
+        </div>
+        
+        <!-- Test Section 1: Basic Virtual List -->
+        <div class="test-section">
+            <h2 class="section-header">Test 1: Basic Virtual List (10,000 items)</h2>
+            <div class="section-content">
+                <div class="controls">
+                    <button class="btn btn-primary" onclick="loadBasicList()">Load Basic List</button>
+                    <button class="btn btn-danger" onclick="clearBasicList()">Clear List</button>
+                    <button class="btn btn-success" onclick="stressScrollBasic()">Stress Scroll</button>
+                </div>
+                <div class="metrics">
+                    <div class="metric">
+                        <div class="metric-value" id="basicItems">0</div>
+                        <div class="metric-label">Items Rendered</div>
+                    </div>
+                    <div class="metric">
+                        <div class="metric-value" id="basicScrolls">0</div>
+                        <div class="metric-label">Scroll Events</div>
+                    </div>
+                </div>
+                <div id="basicList" class="virtual-container" style="height: 400px;"></div>
+            </div>
+        </div>
+        
+        <!-- Test Section 2: Dynamic Height Virtual List -->
+        <div class="test-section">
+            <h2 class="section-header">Test 2: Dynamic Height Virtual List (5,000 items)</h2>
+            <div class="section-content">
+                <div class="controls">
+                    <button class="btn btn-primary" onclick="loadDynamicList()">Load Dynamic List</button>
+                    <button class="btn btn-danger" onclick="clearDynamicList()">Clear List</button>
+                    <button class="btn btn-success" onclick="stressScrollDynamic()">Rapid Scroll</button>
+                </div>
+                <div class="metrics">
+                    <div class="metric">
+                        <div class="metric-value" id="dynamicItems">0</div>
+                        <div class="metric-label">Items Rendered</div>
+                    </div>
+                    <div class="metric">
+                        <div class="metric-value" id="dynamicScrolls">0</div>
+                        <div class="metric-label">Scroll Events</div>
+                    </div>
+                </div>
+                <div id="dynamicList" class="virtual-container" style="height: 400px;"></div>
+            </div>
+        </div>
+        
+        <!-- Test Section 3: Multiple Virtual Lists -->
+        <div class="test-section">
+            <h2 class="section-header">Test 3: Multiple Virtual Lists (Crash Test)</h2>
+            <div class="section-content">
+                <div class="controls">
+                    <button class="btn btn-primary" onclick="loadMultipleLists()">Load Multiple Lists</button>
+                    <button class="btn btn-danger" onclick="clearMultipleLists()">Clear All</button>
+                    <button class="btn btn-success" onclick="stressScrollMultiple()">Stress Test All</button>
+                </div>
+                <div class="metrics">
+                    <div class="metric">
+                        <div class="metric-value" id="multipleItems">0</div>
+                        <div class="metric-label">Total Items</div>
+                    </div>
+                    <div class="metric">
+                        <div class="metric-value" id="multipleScrolls">0</div>
+                        <div class="metric-label">Total Scrolls</div>
+                    </div>
+                </div>
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
+                    <div>
+                        <h4>List A (3,000 items)</h4>
+                        <div id="multipleListA" class="virtual-container" style="height: 300px;"></div>
+                    </div>
+                    <div>
+                        <h4>List B (3,000 items)</h4>
+                        <div id="multipleListB" class="virtual-container" style="height: 300px;"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Test Section 4: Extreme Stress Test -->
+        <div class="test-section">
+            <h2 class="section-header">Test 4: Extreme Stress Test (50,000 items)</h2>
+            <div class="section-content">
+                <div class="controls">
+                    <button class="btn btn-primary" onclick="loadExtremeList()">Load Extreme List</button>
+                    <button class="btn btn-danger" onclick="clearExtremeList()">Clear List</button>
+                    <button class="btn btn-success" onclick="extremeScrollTest()">Extreme Scroll Test</button>
+                </div>
+                <div class="status status-error">
+                    ⚠️ This test uses 50,000 items and aggressive scrolling. It may crash your browser!
+                </div>
+                <div class="metrics">
+                    <div class="metric">
+                        <div class="metric-value" id="extremeItems">0</div>
+                        <div class="metric-label">Items Rendered</div>
+                    </div>
+                    <div class="metric">
+                        <div class="metric-value" id="extremeScrolls">0</div>
+                        <div class="metric-label">Scroll Events</div>
+                    </div>
+                </div>
+                <div id="extremeList" class="virtual-container" style="height: 500px;"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Global state for tracking
+        let scrollCounters = {
+            basic: 0,
+            dynamic: 0,
+            multiple: 0,
+            extreme: 0
+        };
+
+        // Update scroll indicator
+        function updateScrollIndicator() {
+            const indicator = document.getElementById('scrollIndicator');
+            const position = window.pageYOffset;
+            document.getElementById('scrollPosition').textContent = position;
+        }
+
+        window.addEventListener('scroll', updateScrollIndicator);
+
+        // Create item element
+        function createItem(index, item, isDynamic = false) {
+            const itemDiv = document.createElement('div');
+            itemDiv.className = 'item';
+            
+            if (isDynamic) {
+                const height = 50 + (index % 5) * 20;
+                itemDiv.style.height = `${height}px`;
+            }
+            
+            itemDiv.innerHTML = `
+                <div class="item-content">
+                    <div class="item-title">${isDynamic ? 'Dynamic' : 'Item'} #${index + 1}</div>
+                    <div class="item-description">${item.description}</div>
+                    ${isDynamic ? `<div style="font-size: 12px; color: #999;">Height: ${50 + (index % 5) * 20}px | Index: ${index}</div>` : ''}
+                </div>
+                <div class="item-actions">
+                    <button class="item-btn" onclick="console.log('Click', ${index})">Click</button>
+                    <button class="item-btn" onclick="console.log('Edit', ${index})">Edit</button>
+                </div>
+            `;
+            
+            return itemDiv;
+        }
+
+        // Create extreme item element
+        function createExtremeItem(index, item) {
+            const itemDiv = document.createElement('div');
+            itemDiv.className = 'item';
+            itemDiv.style.padding = '10px';
+            
+            itemDiv.innerHTML = `
+                <div class="item-content">
+                    <div class="item-title">Extreme Item #${index + 1}</div>
+                    <div class="item-description">${item.description}</div>
+                    <div style="font-size: 12px; color: #999;">Complex data: ${item.complexData}</div>
+                </div>
+                <div class="item-actions">
+                    <button class="item-btn" onclick="for(let i = 0; i < 1000; i++) Math.random();">Heavy</button>
+                </div>
+            `;
+            
+            return itemDiv;
+        }
+
+        // Basic List Functions
+        function loadBasicList() {
+            const container = document.getElementById('basicList');
+            container.innerHTML = '<div class="loading">Loading items...</div>';
+            
+            setTimeout(() => {
+                container.innerHTML = '';
+                const items = Array.from({ length: 5000 }, (_, i) => ({
+                    id: i,
+                    description: `This is item number ${i + 1} with some additional content to make it more realistic. Lorem ipsum dolor sit amet, consectetur adipiscing elit.`
+                }));
+                
+                items.forEach((item, index) => {
+                    container.appendChild(createItem(index, item));
+                });
+                
+                document.getElementById('basicItems').textContent = items.length;
+                
+                // Add scroll listener
+                container.addEventListener('scroll', () => {
+                    scrollCounters.basic++;
+                    document.getElementById('basicScrolls').textContent = scrollCounters.basic;
+                });
+            }, 100);
+        }
+
+        function clearBasicList() {
+            const container = document.getElementById('basicList');
+            container.innerHTML = '';
+            document.getElementById('basicItems').textContent = '0';
+            document.getElementById('basicScrolls').textContent = '0';
+            scrollCounters.basic = 0;
+        }
+
+        function stressScrollBasic() {
+            const container = document.getElementById('basicList');
+            if (container.children.length > 0) {
+                let scrollPosition = 0;
+                const interval = setInterval(() => {
+                    scrollPosition += 100;
+                    container.scrollTop = scrollPosition;
+                    if (scrollPosition > 10000) {
+                        clearInterval(interval);
+                    }
+                }, 10);
+            }
+        }
+
+        // Dynamic List Functions
+        function loadDynamicList() {
+            const container = document.getElementById('dynamicList');
+            container.innerHTML = '<div class="loading">Loading dynamic items...</div>';
+            
+            setTimeout(() => {
+                container.innerHTML = '';
+                const items = Array.from({ length: 5000 }, (_, i) => ({
+                    id: i,
+                    description: `Dynamic item ${i + 1} with variable height content. This item has different heights to test dynamic sizing.`
+                }));
+                
+                items.forEach((item, index) => {
+                    container.appendChild(createItem(index, item, true));
+                });
+                
+                document.getElementById('dynamicItems').textContent = items.length;
+                
+                // Add scroll listener
+                container.addEventListener('scroll', () => {
+                    scrollCounters.dynamic++;
+                    document.getElementById('dynamicScrolls').textContent = scrollCounters.dynamic;
+                });
+            }, 100);
+        }
+
+        function clearDynamicList() {
+            const container = document.getElementById('dynamicList');
+            container.innerHTML = '';
+            document.getElementById('dynamicItems').textContent = '0';
+            document.getElementById('dynamicScrolls').textContent = '0';
+            scrollCounters.dynamic = 0;
+        }
+
+        function stressScrollDynamic() {
+            const container = document.getElementById('dynamicList');
+            if (container.children.length > 0) {
+                let scrollPosition = 0;
+                const interval = setInterval(() => {
+                    scrollPosition += 50;
+                    container.scrollTop = scrollPosition;
+                    if (scrollPosition > 5000) {
+                        clearInterval(interval);
+                    }
+                }, 5);
+            }
+        }
+
+        // Multiple Lists Functions
+        function loadMultipleLists() {
+            const containerA = document.getElementById('multipleListA');
+            const containerB = document.getElementById('multipleListB');
+            
+            containerA.innerHTML = '<div class="loading">Loading List A...</div>';
+            containerB.innerHTML = '<div class="loading">Loading List B...</div>';
+            
+            setTimeout(() => {
+                containerA.innerHTML = '';
+                containerB.innerHTML = '';
+                
+                const itemsA = Array.from({ length: 3000 }, (_, i) => ({
+                    id: i,
+                    description: `List A Item ${i + 1}`
+                }));
+                
+                const itemsB = Array.from({ length: 3000 }, (_, i) => ({
+                    id: i,
+                    description: `List B Item ${i + 1}`
+                }));
+                
+                itemsA.forEach((item, index) => {
+                    containerA.appendChild(createItem(index, item));
+                });
+                
+                itemsB.forEach((item, index) => {
+                    containerB.appendChild(createItem(index, item));
+                });
+                
+                document.getElementById('multipleItems').textContent = itemsA.length + itemsB.length;
+                
+                // Add scroll listeners
+                containerA.addEventListener('scroll', () => {
+                    scrollCounters.multiple++;
+                    document.getElementById('multipleScrolls').textContent = scrollCounters.multiple;
+                });
+                
+                containerB.addEventListener('scroll', () => {
+                    scrollCounters.multiple++;
+                    document.getElementById('multipleScrolls').textContent = scrollCounters.multiple;
+                });
+            }, 100);
+        }
+
+        function clearMultipleLists() {
+            const containerA = document.getElementById('multipleListA');
+            const containerB = document.getElementById('multipleListB');
+            
+            containerA.innerHTML = '';
+            containerB.innerHTML = '';
+            
+            document.getElementById('multipleItems').textContent = '0';
+            document.getElementById('multipleScrolls').textContent = '0';
+            scrollCounters.multiple = 0;
+        }
+
+        function stressScrollMultiple() {
+            const containerA = document.getElementById('multipleListA');
+            const containerB = document.getElementById('multipleListB');
+            
+            if (containerA.children.length > 0 && containerB.children.length > 0) {
+                let scrollPositionA = 0;
+                let scrollPositionB = 0;
+                
+                const interval = setInterval(() => {
+                    scrollPositionA += 100;
+                    scrollPositionB += 150;
+                    
+                    containerA.scrollTop = scrollPositionA;
+                    containerB.scrollTop = scrollPositionB;
+                    
+                    if (scrollPositionA > 5000 && scrollPositionB > 5000) {
+                        clearInterval(interval);
+                    }
+                }, 10);
+            }
+        }
+
+        // Extreme List Functions
+        function loadExtremeList() {
+            const container = document.getElementById('extremeList');
+            container.innerHTML = '<div class="loading">Loading extreme test items...</div>';
+            
+            setTimeout(() => {
+                container.innerHTML = '';
+                const items = Array.from({ length: 50000 }, (_, i) => ({
+                    id: i,
+                    description: `Extreme test item ${i + 1} with complex data and heavy operations`,
+                    complexData: `Complex-${i}-${Math.random().toString(36).substr(2, 9)}`
+                }));
+                
+                items.forEach((item, index) => {
+                    container.appendChild(createExtremeItem(index, item));
+                });
+                
+                document.getElementById('extremeItems').textContent = items.length;
+                
+                // Add scroll listener
+                container.addEventListener('scroll', () => {
+                    scrollCounters.extreme++;
+                    document.getElementById('extremeScrolls').textContent = scrollCounters.extreme;
+                });
+            }, 100);
+        }
+
+        function clearExtremeList() {
+            const container = document.getElementById('extremeList');
+            container.innerHTML = '';
+            document.getElementById('extremeItems').textContent = '0';
+            document.getElementById('extremeScrolls').textContent = '0';
+            scrollCounters.extreme = 0;
+        }
+
+        function extremeScrollTest() {
+            const container = document.getElementById('extremeList');
+            if (container.children.length > 0) {
+                let scrollPosition = 0;
+                const interval = setInterval(() => {
+                    scrollPosition += 200;
+                    container.scrollTop = scrollPosition;
+                    if (scrollPosition > 100000) {
+                        clearInterval(interval);
+                    }
+                }, 1); // Very fast scrolling
+            }
+        }
+
+        // Initialize
+        console.log('React Virtuoso Test Website loaded in fallback mode');
+        console.log('All functions are available:', {
+            loadBasicList: typeof loadBasicList,
+            loadDynamicList: typeof loadDynamicList,
+            loadMultipleLists: typeof loadMultipleLists,
+            loadExtremeList: typeof loadExtremeList
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file

From 2ceca61d7cde6b52982c63ab4baa204905a60368 Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Mon, 20 Oct 2025 11:25:35 -0400
Subject: [PATCH 08/35] splits up visibility into multiple files for easier
 grokking

---
 packages/driver/src/dom/visibility.ts         | 625 +-----------------
 .../dom/visibility/ComputedStyleSnapshot.d.ts |  40 ++
 .../src/dom/visibility/geReasonIsHidden.ts    | 174 +++++
 .../driver/src/dom/visibility/isVisible.ts    | 454 +++++++++++++
 4 files changed, 670 insertions(+), 623 deletions(-)
 create mode 100644 packages/driver/src/dom/visibility/ComputedStyleSnapshot.d.ts
 create mode 100644 packages/driver/src/dom/visibility/geReasonIsHidden.ts
 create mode 100644 packages/driver/src/dom/visibility/isVisible.ts

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index abbf8476259..3038ab74b03 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -1,626 +1,5 @@
-import _ from 'lodash'
-import $jquery from './jquery'
-import $document from './document'
-import $elements from './elements'
-import $coordinates from './coordinates'
-import * as $transform from './transform'
-
-const { isElement, isBody, isHTML, isOption, isOptgroup, getParent, getFirstParentWithTagName, isAncestor, isChild, getAllParents, isDescendent, isUndefinedOrHTMLBodyDoc, elOrAncestorIsFixedOrSticky, isDetached, isFocusable, stringify: stringifyElement } = $elements
-
-const fixedOrAbsoluteRe = /(fixed|absolute)/
-
-const OVERFLOW_PROPS = ['hidden', 'clip', 'scroll', 'auto']
-
-const isVisible = (el) => {
-  return !isHidden(el, 'isVisible()')
-}
-
-const { wrap } = $jquery
-
-// TODO: we should prob update dom
-// to be passed in $utils as a dependency
-// because of circular references
-// the ignoreOpacity option exists for checking actionability
-// as elements with `opacity: 0` are hidden yet actionable
-const isHidden = (el, methodName = 'isHidden()', options = { checkOpacity: true }) => {
-  if (isStrictlyHidden(el, methodName, options, isHidden)) {
-    return true
-  }
-
-  return isHiddenByAncestors(el, methodName, options)
-}
-
-const ensureEl = (el, methodName) => {
-  if (!isElement(el)) {
-    throw new Error(`\`Cypress.dom.${methodName}\` failed because it requires a DOM element. The subject received was: \`${el}\``)
-  }
-}
-
-const getFirstSelectParentFromEl = ($el: JQuery) => {
-  const $select = getFirstParentWithTagName($el, 'select')
-
-  // check $select.length here first
-  // they may have not put the option into a select el
-  if ($select?.length) {
-    return $select
-  }
-
-  return null
-}
-
-const isStrictlyHidden = (el: HTMLElement, methodName = 'isStrictlyHidden()', options = { checkOpacity: true }, recurse?) => {
-  ensureEl(el, methodName)
-  const $el = $jquery.wrap(el)
-
-  // the body and html are always visible
-  if (isBody(el) || isHTML(el)) {
-    return false // is visible
-  }
-
-  // an option is considered visible if its parent select is visible
-  if (isOption(el) || isOptgroup(el)) {
-    // they could have just set to hide the option
-    if (elHasDisplayNone($el)) {
-      return true
-    }
-
-    // if its parent select is visible, then it's not hidden
-    const $select = getFirstSelectParentFromEl($el)
-
-    if ($select) {
-      return recurse ? recurse($select[0], methodName, options) : isStrictlyHidden($select[0], methodName, options)
-    }
-  }
-
-  // in Cypress-land we consider the element hidden if
-  // either its clientHeight or clientWidth is 0 because
-  // it is impossible for the user to interact with this element
-  if (elHasNoEffectiveWidthOrHeight($el)) {
-    // https://github.com/cypress-io/cypress/issues/6183
-    if (elHasDisplayInline($el)) {
-      return !elHasVisibleChild($el)
-    }
-
-    return true // is hidden
-  }
-
-  // additionally if the effective visibility of the element
-  // is hidden (which includes any parent nodes) then the user
-  // cannot interact with this element and thus it is hidden
-  if (elHasVisibilityHiddenOrCollapse($el)) {
-    return true // is hidden
-  }
-
-  // when an element is scaled to 0 in one axis
-  // it is not visible to users.
-  // So, it is hidden.
-  if ($transform.detectVisibility($el) !== 'visible') {
-    return true
-  }
-
-  // a transparent element is hidden
-  if (elHasOpacityZero($el) && options.checkOpacity) {
-    return true
-  }
-
-  return false
-}
-
-const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options = { checkOpacity: true }) => {
-  ensureEl(el, methodName)
-  const $el = $jquery.wrap(el)
-
-  // an option is considered hidden by ancestors if its parent select is hidden
-  if (isOption(el) || isOptgroup(el)) {
-    const $select = getFirstSelectParentFromEl($el)
-
-    if ($select) {
-      return isHiddenByAncestors($select[0], methodName, options)
-    }
-  }
-
-  // we do some calculations taking into account the parents
-  // to see if its hidden by a parent
-  if (elIsHiddenByAncestors($el, options.checkOpacity)) {
-    return true // is hidden
-  }
-
-  if (elOrAncestorIsFixedOrSticky($el)) {
-    return elIsNotElementFromPoint($el)
-  }
-
-  // else check if el is outside the bounds
-  // of its ancestors overflow
-  return elIsOutOfBoundsOfAncestorsOverflow($el)
-}
-
-const elHasNoEffectiveWidthOrHeight = ($el: JQuery) => {
-  // Is the element's CSS width OR height, including any borders,
-  // padding, and vertical scrollbars (if rendered) less than 0?
-  //
-  // elClientWidth:
-  // If the element is hidden (for example, by setting style.display
-  // on the element or one of its ancestors to "none"), then 0 is returned.
-
-  // $el[0].getClientRects().length:
-  // For HTML <area> elements, SVG elements that do not render anything themselves,
-  // display:none elements, and generally any elements that are not directly rendered,
-  // an empty list is returned.
-  const el = $el[0]
-
-  const style = getComputedStyle(el)
-  let transform = style.getPropertyValue('transform')
-
-  if (!transform.length) {
-    transform = 'none'
-  }
-
-  const hasTextContent = !!el.textContent?.trim().length
-
-  const width = elClientWidth($el)
-  const height = elClientHeight($el)
-
-  return (isZeroLengthAndTransformNone(width, height, transform) && !hasTextContent) ||
-  isZeroLengthAndOverflowHidden(width, height, elHasOverflowHidden($el)) ||
-  (el.getClientRects().length <= 0)
-}
-
-const isZeroLengthAndTransformNone = (width, height, transform) => {
-  // From https://github.com/cypress-io/cypress/issues/5974,
-  // we learned that when an element has non-'none' transform style value like "translate(0, 0)",
-  // it is visible even with `height: 0` or `width: 0`.
-  // That's why we're checking `transform === 'none'` together with elClientWidth/Height.
-  return (width <= 0 && transform === 'none') || (height <= 0 && transform === 'none')
-}
-
-const isZeroLengthAndOverflowHidden = (width, height, overflowHidden) => {
-  return (width <= 0 && overflowHidden) || (height <= 0 && overflowHidden)
-}
-
-const elHasNoClientWidthOrHeight = ($el) => {
-  return (elClientWidth($el) <= 0) || (elClientHeight($el) <= 0)
-}
-
-const elementBoundingRect = ($el: JQuery) => $el[0].getBoundingClientRect()
-
-const elClientHeight = ($el) => elementBoundingRect($el).height
-
-const elClientWidth = ($el) => elementBoundingRect($el).width
-
-const elHasVisibilityHiddenOrCollapse = ($el) => {
-  return elHasVisibilityHidden($el) || elHasVisibilityCollapse($el)
-}
-
-const elHasVisibilityHidden = ($el) => {
-  return $el.css('visibility') === 'hidden'
-}
-
-const elHasVisibilityCollapse = ($el) => {
-  return $el.css('visibility') === 'collapse'
-}
-
-const elHasOpacityZero = ($el) => {
-  return $el.css('opacity') === '0'
-}
-
-const elHasDisplayContents = ($el) => {
-  return $el.css('display') === 'contents'
-}
-
-const elHasDisplayNone = ($el) => {
-  return $el.css('display') === 'none'
-}
-
-const elHasDisplayInline = ($el) => {
-  return $el.css('display') === 'inline'
-}
-
-const elHasOverflowHidden = function ($el) {
-  const cssOverflow = [$el.css('overflow'), $el.css('overflow-y'), $el.css('overflow-x')]
-
-  return cssOverflow.includes('hidden')
-}
-
-const elHasPositionRelative = ($el: JQuery<HTMLElement>) => {
-  return $el.css('position') === 'relative'
-}
-
-const elHasPositionStatic = ($el: JQuery<HTMLElement>) => {
-  return $el.css('position') == null || $el.css('position') === 'static'
-}
-
-const elHasPositionAbsolute = ($el: JQuery<HTMLElement>) => {
-  return $el.css('position') === 'absolute'
-}
-
-const elHasClippableOverflow = function ($el) {
-  return OVERFLOW_PROPS.includes($el.css('overflow')) ||
-          OVERFLOW_PROPS.includes($el.css('overflow-y')) ||
-            OVERFLOW_PROPS.includes($el.css('overflow-x'))
-}
-
-const canClipContent = function ($el: JQuery<HTMLElement>, $ancestor: JQuery<HTMLElement>) {
-  // can't clip without overflow properties
-  if (!elHasClippableOverflow($ancestor)) {
-    return false
-  }
-
-  if (elHasDisplayContents($ancestor)) {
-    return false
-  }
-
-  // the closest parent with position relative, absolute, or fixed
-  const $offsetParent = $el.offsetParent()
-
-  // even if ancestors' overflow is clippable, if the element's offset parent
-  // is a parent of the ancestor, the ancestor will not clip the element
-  // unless the element is position relative
-  if (!elHasPositionRelative($el) && isAncestor($ancestor, $offsetParent)) {
-    return false
-  }
-
-  // even if ancestors' overflow is clippable, if the element's offset parent
-  // is a child of the ancestor, the ancestor will not clip the element
-  // unless the ancestor has a position that is not absolute
-  if (elHasPositionAbsolute($offsetParent) && isChild($ancestor, $offsetParent)) {
-    return false
-  }
-
-  // even if ancestors' overflow is clippable,
-  // if the element is position static or relative,
-  // and the element's offset parent is positioned absolute, a descendent of the ancestor, has no clippable overflow, and
-  // the offsetParent's offset parent is not descendent of the ancestor,
-  // then the ancestor will not clip the element
-  const $offsetParentOffsetParent = $offsetParent.offsetParent()
-
-  if ((elHasPositionStatic($el) || elHasPositionRelative($el))
-    && elHasPositionAbsolute($offsetParent) && isDescendent($ancestor, $offsetParent)
-    && !elHasClippableOverflow($offsetParent) && !isDescendent($ancestor, $offsetParentOffsetParent)
-  ) {
-    return false
-  }
-
-  return true
-}
-
-export const isW3CRendered = (el) => {
-  // @see https://html.spec.whatwg.org/multipage/rendering.html#being-rendered
-  return !(parentHasDisplayNone(wrap(el)) || wrap(el).css('visibility') === 'hidden')
-}
-
-export const isW3CFocusable = (el) => {
-  // @see https://html.spec.whatwg.org/multipage/interaction.html#focusable-area
-  return isFocusable(wrap(el)) && isW3CRendered(el)
-}
-
-const elAtCenterPoint = function ($el: JQuery<HTMLElement>) {
-  const doc = $document.getDocumentFromElement($el.get(0))
-  const elProps = $coordinates.getElementPositioning($el)
-
-  const { topCenter, leftCenter } = elProps.fromElViewport
-
-  const el = $coordinates.getElementAtPointFromViewport(doc, leftCenter, topCenter)
-
-  if (el) {
-    return $jquery.wrap(el)
-  }
-
-  return undefined
-}
-
-const elDescendentsHavePositionFixedOrAbsolute = function ($parent, $child) {
-  // create an array of all elements between $parent and $child
-  // including child but excluding parent
-  // and check if these have position fixed|absolute
-  const parents = getAllParents($child[0], $parent)
-  const $els = $jquery.wrap(parents).add($child)
-
-  return _.some($els.get(), (el) => {
-    return fixedOrAbsoluteRe.test($jquery.wrap(el).css('position'))
-  })
-}
-
-const elHasVisibleChild = function ($el) {
-  return _.some($el.children(), (el) => {
-    return isVisible(el)
-  })
-}
-
-const elIsNotElementFromPoint = function ($el: JQuery<HTMLElement>) {
-  // if we have a fixed position element that means
-  // it is fixed 'relative' to the viewport which means
-  // it MUST be available with elementFromPoint because
-  // that is also relative to the viewport
-  const $elAtPoint = elAtCenterPoint($el)
-
-  // if the element at point is not a descendent
-  // of our $el then we know it's being covered or its
-  // not visible
-  if (isDescendent($el, $elAtPoint)) {
-    return false
-  }
-
-  // we also check if the element at point is a
-  // parent since pointer-events: none
-  // will cause elAtCenterPoint to fall through to parent
-  if (
-    ($el.css('pointer-events') === 'none' || $el.parent().css('pointer-events') === 'none') &&
-    ($elAtPoint && isAncestor($el, $elAtPoint))
-  ) {
-    return false
-  }
-
-  return true
-}
-
-const elIsOutOfBoundsOfAncestorsOverflow = function ($el: JQuery<any>, $ancestor = getParent($el)) {
-  // no ancestor, not out of bounds!
-  // if we've reached the top parent, which is not a normal DOM el
-  // then we're in bounds all the way up, return false
-  if (isUndefinedOrHTMLBodyDoc($ancestor)) {
-    return false
-  }
-
-  if (elHasDisplayContents($el)) {
-    return false
-  }
-
-  if (canClipContent($el, $ancestor)) {
-    const ancestorProps = $ancestor.get(0).getBoundingClientRect()
-
-    if (elHasPositionAbsolute($el) && (ancestorProps.width === 0 || ancestorProps.height === 0)) {
-      return elIsOutOfBoundsOfAncestorsOverflow($el, getParent($ancestor))
-    }
-
-    const elProps = $el.get(0).getBoundingClientRect()
-
-    // only check if the target el is out of bounds if the overflow is clippable in that direction
-    const checkXOverflow = OVERFLOW_PROPS.includes($ancestor.css('overflow-x'))
-    const checkYOverflow = OVERFLOW_PROPS.includes($ancestor.css('overflow-y'))
-
-    // target el is out of bounds
-    if (
-      // target el is to the right of the ancestor's visible area
-      (checkXOverflow && (elProps.left >= (ancestorProps.width + ancestorProps.left))) ||
-
-      // target el is to the left of the ancestor's visible area
-      (checkXOverflow && ((elProps.left + elProps.width) <= ancestorProps.left)) ||
-
-      // target el is under the ancestor's visible area
-      (checkYOverflow && (elProps.top >= (ancestorProps.height + ancestorProps.top))) ||
-
-      // target el is above the ancestor's visible area
-      (checkYOverflow && ((elProps.top + elProps.height) <= ancestorProps.top))
-    ) {
-      return true
-    }
-  }
-
-  return elIsOutOfBoundsOfAncestorsOverflow($el, getParent($ancestor))
-}
-
-const elIsHiddenByAncestors = function ($el, checkOpacity, $origEl = $el) {
-  // walk up to each parent until we reach the body
-  // if any parent has opacity: 0
-  // or has an effective clientHeight of 0
-  // and its set overflow: hidden then our child element
-  // is effectively hidden
-  // -----UNLESS------
-  // the parent or a descendent has position: absolute|fixed
-  const $parent = getParent($el)
-
-  // stop if we've reached the body or html
-  // in case there is no body
-  // or if parent is the document which can
-  // happen if we already have an <html> element
-  if (isUndefinedOrHTMLBodyDoc($parent)) {
-    return false
-  }
-
-  if (elHasDisplayContents($el)) {
-    let $parent = getParent($el)
-
-    return elIsHiddenByAncestors($parent, checkOpacity, $parent)
-  }
-
-  // a child can never have a computed opacity
-  // greater than that of its parent
-  // so if the parent has an opacity of 0, so does the child
-  if (elHasOpacityZero($parent) && checkOpacity) {
-    return true
-  }
-
-  if (elHasOverflowHidden($parent) && !elHasDisplayContents($parent) && elHasNoEffectiveWidthOrHeight($parent)) {
-    // if any of the elements between the parent and origEl have fixed or position absolute
-    return !elDescendentsHavePositionFixedOrAbsolute($parent, $origEl)
-  }
-
-  // continue to recursively walk up the chain until we reach body or html
-  return elIsHiddenByAncestors($parent, checkOpacity, $origEl)
-}
-
-const parentHasNoClientWidthOrHeightAndOverflowHidden = function ($el: JQuery<HTMLElement>) {
-  // if we've walked all the way up to body or html then return false
-  if (isUndefinedOrHTMLBodyDoc($el)) {
-    return false
-  }
-
-  // if we have overflow hidden and no effective width or height
-  if (elHasOverflowHidden($el) && elHasNoEffectiveWidthOrHeight($el)) {
-    return $el
-  }
-
-  // continue walking
-  return parentHasNoClientWidthOrHeightAndOverflowHidden(getParent($el))
-}
-
-const parentHasDisplayNone = function ($el) {
-  // if we have no $el or we've walked all the way up to document
-  // then return false
-  if (!$el.length || $document.isDocument($el)) {
-    return false
-  }
-
-  // if we have display none then return the $el
-  if (elHasDisplayNone($el)) {
-    return $el
-  }
-
-  // continue walking
-  return parentHasDisplayNone(getParent($el))
-}
-
-const parentHasVisibilityHidden = function ($el) {
-  // if we've walked all the way up to document then return false
-  if (!$el.length || $document.isDocument($el)) {
-    return false
-  }
-
-  // if we have display none then return the $el
-  if (elHasVisibilityHidden($el)) {
-    return $el
-  }
-
-  // continue walking
-  return parentHasVisibilityHidden(getParent($el))
-}
-
-const parentHasVisibilityCollapse = function ($el) {
-  // if we've walked all the way up to document then return false
-  if (!$el.length || $document.isDocument($el)) {
-    return false
-  }
-
-  // if we have display none then return the $el
-  if (elHasVisibilityCollapse($el)) {
-    return $el
-  }
-
-  // continue walking
-  return parentHasVisibilityCollapse(getParent($el))
-}
-
-const parentHasOpacityZero = function ($el) {
-  // if we've walked all the way up to document then return false
-  if (!$el.length || $document.isDocument($el)) {
-    return false
-  }
-
-  // if we have opacity: 0 then return the $el
-  if (elHasOpacityZero($el)) {
-    return $el
-  }
-
-  // continue walking
-  return parentHasOpacityZero($el.parent())
-}
-
-/* eslint-disable no-cond-assign */
-export const getReasonIsHidden = function ($el, options = { checkOpacity: true }) {
-  // TODO: need to add in the reason an element
-  // is hidden when its fixed position and its
-  // either being covered or there is no el
-
-  const node = stringifyElement($el, 'short')
-  let width = elClientWidth($el)
-  let height = elClientHeight($el)
-  let $parent
-  let parentNode
-  let $select
-
-  // if the element is an option or optgroup then we need to get the
-  // select so it can be used when determining the hidden reason
-  if (isOption($el[0]) || isOptgroup($el[0])) {
-    $select = getFirstSelectParentFromEl($el)
-  }
-
-  // returns the reason in human terms why an element is considered not visible
-  if (elHasDisplayNone($el)) {
-    return `This element \`${node}\` is not visible because it has CSS property: \`display: none\``
-  }
-
-  if ($parent = parentHasDisplayNone(getParent($el))) {
-    parentNode = stringifyElement($parent, 'short')
-
-    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`display: none\``
-  }
-
-  if ($parent = parentHasVisibilityHidden(getParent($el))) {
-    parentNode = stringifyElement($parent, 'short')
-
-    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`visibility: hidden\``
-  }
-
-  if ($parent = parentHasVisibilityCollapse(getParent($el))) {
-    parentNode = stringifyElement($parent, 'short')
-
-    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`visibility: collapse\``
-  }
-
-  if (isDetached($el)) {
-    return `This element \`${node}\` is not visible because it is detached from the DOM`
-  }
-
-  if (elHasVisibilityHidden($el)) {
-    return `This element \`${node}\` is not visible because it has CSS property: \`visibility: hidden\``
-  }
-
-  if (elHasVisibilityCollapse($el)) {
-    return `This element \`${node}\` is not visible because it has CSS property: \`visibility: collapse\``
-  }
-
-  if (elHasOpacityZero($el) && options.checkOpacity) {
-    return `This element \`${node}\` is not visible because it has CSS property: \`opacity: 0\``
-  }
-
-  if (($parent = parentHasOpacityZero($el.parent())) && options.checkOpacity) {
-    parentNode = stringifyElement($parent, 'short')
-
-    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`opacity: 0\``
-  }
-
-  const transformResult = $transform.detectVisibility($el)
-
-  if (transformResult === 'transformed') {
-    return `This element \`${node}\` is not visible because it is hidden by transform.`
-  }
-
-  if (elHasNoClientWidthOrHeight($select || $el)) {
-    return `This element \`${node}\` is not visible because it has an effective width and height of: \`${width} x ${height}\` pixels.`
-  }
-
-  if (transformResult === 'backface') {
-    return `This element \`${node}\` is not visible because it is rotated and its backface is hidden.`
-  }
-
-  if ($parent = parentHasNoClientWidthOrHeightAndOverflowHidden(getParent($el))) {
-    parentNode = stringifyElement($parent, 'short')
-    let width = elClientWidth($parent)
-    let height = elClientHeight($parent)
-
-    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`overflow: hidden\` and an effective width and height of: \`${width} x ${height}\` pixels.`
-  }
-
-  if (elOrAncestorIsFixedOrSticky($el)) {
-    if (elIsNotElementFromPoint($el)) {
-      // show the long element here
-      const covered = stringifyElement(elAtCenterPoint($el))
-
-      if (covered) {
-        return `This element \`${node}\` is not visible because it has CSS property: \`position: fixed\` and it's being covered by another element:\n\n\`${covered}\``
-      }
-
-      return `This element \`${node}\` is not visible because its ancestor has \`position: fixed\` CSS property and it is overflowed by other elements. How about scrolling to the element with \`cy.scrollIntoView()\`?`
-    }
-  } else {
-    if (elIsOutOfBoundsOfAncestorsOverflow($el)) {
-      return `This element \`${node}\` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: \`hidden\`, \`clip\`, \`scroll\` or \`auto\``
-    }
-  }
-
-  return `This element \`${node}\` is not visible.`
-}
-/* eslint-enable no-cond-assign */
+import { isW3CFocusable, isW3CRendered, isHidden, isStrictlyHidden, isHiddenByAncestors, isVisible } from './visibility/isVisible'
+import { getReasonIsHidden } from './visibility/geReasonIsHidden'
 
 export default {
   isVisible,
diff --git a/packages/driver/src/dom/visibility/ComputedStyleSnapshot.d.ts b/packages/driver/src/dom/visibility/ComputedStyleSnapshot.d.ts
new file mode 100644
index 00000000000..000dfede1a0
--- /dev/null
+++ b/packages/driver/src/dom/visibility/ComputedStyleSnapshot.d.ts
@@ -0,0 +1,40 @@
+type ComputedStyles = {
+  width: number
+  height: number
+  overflowHidden: boolean
+  opacity: number
+  visibility: string
+  display: string
+  transform: string
+  position: string
+  zIndex: number
+  parentWidth: number
+  parentHeight: number
+  parentOverflowHidden: boolean
+  boundingClientRect: DOMRect
+  overflowX: string
+  overflowY: string
+  overflow: string
+}
+
+export class ComputedStyleSnapshot extends Map {
+  constructor (styles?: Partial<ComputedStyles>) {
+    super(Object.entries(styles ?? {}))
+  }
+
+  get <K extends keyof ComputedStyles> (key: K): ComputedStyles[K] | undefined {
+    return super.get(key)
+  }
+
+  set<K extends keyof ComputedStyles> (key: K, value: ComputedStyles[K]): this {
+    return super.set(key, value)
+  }
+
+  delete<K extends keyof ComputedStyles> (key: K): boolean {
+    return super.delete(key)
+  }
+
+  has<K extends keyof ComputedStyles> (key: K): boolean {
+    return super.has(key)
+  }
+}
diff --git a/packages/driver/src/dom/visibility/geReasonIsHidden.ts b/packages/driver/src/dom/visibility/geReasonIsHidden.ts
new file mode 100644
index 00000000000..9dedb656487
--- /dev/null
+++ b/packages/driver/src/dom/visibility/geReasonIsHidden.ts
@@ -0,0 +1,174 @@
+import { elHasOverflowHidden, elHasNoEffectiveWidthOrHeight, elHasOpacityZero, elAtCenterPoint, elIsOutOfBoundsOfAncestorsOverflow, elIsNotElementFromPoint, elClientHeight, elClientWidth, elHasVisibilityCollapse, elHasVisibilityHidden, getFirstSelectParentFromEl, elHasDisplayNone, parentHasDisplayNone } from './isVisible'
+import $elements from '../elements'
+import * as $transform from '../transform'
+import $document from '../document'
+
+const { isUndefinedOrHTMLBodyDoc, isOptgroup, isOption, stringify, getParent, isDetached, elOrAncestorIsFixedOrSticky } = $elements
+
+/* eslint-disable no-cond-assign */
+export const getReasonIsHidden = function ($el, options = { checkOpacity: true }) {
+  // TODO: need to add in the reason an element
+  // is hidden when its fixed position and its
+  // either being covered or there is no el
+
+  const node = stringify($el, 'short')
+  let width = elClientWidth($el)
+  let height = elClientHeight($el)
+  let $parent
+  let parentNode
+  let $select
+
+  // if the element is an option or optgroup then we need to get the
+  // select so it can be used when determining the hidden reason
+  if (isOption($el[0]) || isOptgroup($el[0])) {
+    $select = getFirstSelectParentFromEl($el)
+  }
+
+  // returns the reason in human terms why an element is considered not visible
+  if (elHasDisplayNone($el)) {
+    return `This element \`${node}\` is not visible because it has CSS property: \`display: none\``
+  }
+
+  if ($parent = parentHasDisplayNone(getParent($el))) {
+    parentNode = stringify($parent, 'short')
+
+    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`display: none\``
+  }
+
+  if ($parent = parentHasVisibilityHidden(getParent($el))) {
+    parentNode = stringify($parent, 'short')
+
+    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`visibility: hidden\``
+  }
+
+  if ($parent = parentHasVisibilityCollapse(getParent($el))) {
+    parentNode = stringify($parent, 'short')
+
+    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`visibility: collapse\``
+  }
+
+  if (isDetached($el)) {
+    return `This element \`${node}\` is not visible because it is detached from the DOM`
+  }
+
+  if (elHasVisibilityHidden($el)) {
+    return `This element \`${node}\` is not visible because it has CSS property: \`visibility: hidden\``
+  }
+
+  if (elHasVisibilityCollapse($el)) {
+    return `This element \`${node}\` is not visible because it has CSS property: \`visibility: collapse\``
+  }
+
+  if (elHasOpacityZero($el) && options.checkOpacity) {
+    return `This element \`${node}\` is not visible because it has CSS property: \`opacity: 0\``
+  }
+
+  if (($parent = parentHasOpacityZero($el.parent())) && options.checkOpacity) {
+    parentNode = stringify($parent, 'short')
+
+    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`opacity: 0\``
+  }
+
+  const transformResult = $transform.detectVisibility($el)
+
+  if (transformResult === 'transformed') {
+    return `This element \`${node}\` is not visible because it is hidden by transform.`
+  }
+
+  if (elHasNoClientWidthOrHeight($select || $el)) {
+    return `This element \`${node}\` is not visible because it has an effective width and height of: \`${width} x ${height}\` pixels.`
+  }
+
+  if (transformResult === 'backface') {
+    return `This element \`${node}\` is not visible because it is rotated and its backface is hidden.`
+  }
+
+  if ($parent = parentHasNoClientWidthOrHeightAndOverflowHidden(getParent($el))) {
+    parentNode = stringify($parent, 'short')
+    let width = elClientWidth($parent)
+    let height = elClientHeight($parent)
+
+    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`overflow: hidden\` and an effective width and height of: \`${width} x ${height}\` pixels.`
+  }
+
+  if (elOrAncestorIsFixedOrSticky($el)) {
+    if (elIsNotElementFromPoint($el)) {
+      // show the long element here
+      const covered = stringify(elAtCenterPoint($el))
+
+      if (covered) {
+        return `This element \`${node}\` is not visible because it has CSS property: \`position: fixed\` and it's being covered by another element:\n\n\`${covered}\``
+      }
+
+      return `This element \`${node}\` is not visible because its ancestor has \`position: fixed\` CSS property and it is overflowed by other elements. How about scrolling to the element with \`cy.scrollIntoView()\`?`
+    }
+  } else {
+    if (elIsOutOfBoundsOfAncestorsOverflow($el)) {
+      return `This element \`${node}\` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: \`hidden\`, \`clip\`, \`scroll\` or \`auto\``
+    }
+  }
+
+  return `This element \`${node}\` is not visible.`
+}
+
+function parentHasVisibilityHidden ($el) {
+  // if we've walked all the way up to document then return false
+  if (!$el.length || $document.isDocument($el)) {
+    return false
+  }
+
+  // if we have display none then return the $el
+  if (elHasVisibilityHidden($el)) {
+    return $el
+  }
+
+  // continue walking
+  return parentHasVisibilityHidden(getParent($el))
+}
+
+function parentHasVisibilityCollapse ($el) {
+  // if we've walked all the way up to document then return false
+  if (!$el.length || $document.isDocument($el)) {
+    return false
+  }
+
+  // if we have display none then return the $el
+  if (elHasVisibilityCollapse($el)) {
+    return $el
+  }
+
+  // continue walking
+  return parentHasVisibilityCollapse(getParent($el))
+}
+function elHasNoClientWidthOrHeight ($el) {
+  return (elClientWidth($el) <= 0) || (elClientHeight($el) <= 0)
+}
+function parentHasOpacityZero ($el) {
+  // if we've walked all the way up to document then return false
+  if (!$el.length || $document.isDocument($el)) {
+    return false
+  }
+
+  // if we have opacity: 0 then return the $el
+  if (elHasOpacityZero($el)) {
+    return $el
+  }
+
+  // continue walking
+  return parentHasOpacityZero($el.parent())
+}
+
+function parentHasNoClientWidthOrHeightAndOverflowHidden ($el: JQuery<HTMLElement>) {
+  // if we've walked all the way up to body or html then return false
+  if (isUndefinedOrHTMLBodyDoc($el)) {
+    return false
+  }
+
+  // if we have overflow hidden and no effective width or height
+  if (elHasOverflowHidden($el) && elHasNoEffectiveWidthOrHeight($el)) {
+    return $el
+  }
+
+  // continue walking
+  return parentHasNoClientWidthOrHeightAndOverflowHidden(getParent($el))
+}
diff --git a/packages/driver/src/dom/visibility/isVisible.ts b/packages/driver/src/dom/visibility/isVisible.ts
new file mode 100644
index 00000000000..39578b3d065
--- /dev/null
+++ b/packages/driver/src/dom/visibility/isVisible.ts
@@ -0,0 +1,454 @@
+import $jquery from '../jquery'
+import $elements from '../elements'
+import $document from '../document'
+import $coordinates from '../coordinates'
+import * as $transform from '../transform'
+
+const { isElement, isBody, isHTML, isOption, isOptgroup, getParent, getFirstParentWithTagName, isAncestor, isChild, getAllParents, isDescendent, isUndefinedOrHTMLBodyDoc, elOrAncestorIsFixedOrSticky, isFocusable } = $elements
+const { wrap } = $jquery
+
+export function isVisible (el: HTMLElement, methodName = 'isVisible()', options = { checkOpacity: true }): boolean {
+  return !isHidden(el, methodName, options)
+}
+
+// TODO: we should prob update dom
+// to be passed in $utils as a dependency
+// because of circular references
+// the ignoreOpacity option exists for checking actionability
+// as elements with `opacity: 0` are hidden yet actionable
+export function isHidden (el, methodName = 'isHidden()', options = { checkOpacity: true }) {
+  if (isStrictlyHidden(el, methodName, options, isHidden)) {
+    return true
+  }
+
+  return isHiddenByAncestors(el, methodName, options)
+}
+
+export function isStrictlyHidden (el: HTMLElement, methodName = 'isStrictlyHidden()', options = { checkOpacity: true }, recurse?) {
+  ensureEl(el, methodName)
+  const $el = $jquery.wrap(el)
+
+  // the body and html are always visible
+  if (isBody(el) || isHTML(el)) {
+    return false // is visible
+  }
+
+  // an option is considered visible if its parent select is visible
+  if (isOption(el) || isOptgroup(el)) {
+    // they could have just set to hide the option
+    if (elHasDisplayNone($el)) {
+      return true
+    }
+
+    // if its parent select is visible, then it's not hidden
+    const $select = getFirstSelectParentFromEl($el)
+
+    if ($select) {
+      return recurse ? recurse($select[0], methodName, options) : isStrictlyHidden($select[0], methodName, options)
+    }
+  }
+
+  // in Cypress-land we consider the element hidden if
+  // either its clientHeight or clientWidth is 0 because
+  // it is impossible for the user to interact with this element
+  if (elHasNoEffectiveWidthOrHeight($el)) {
+    // https://github.com/cypress-io/cypress/issues/6183
+    if (elHasDisplayInline($el)) {
+      return !elHasVisibleChild($el)
+    }
+
+    return true // is hidden
+  }
+
+  // additionally if the effective visibility of the element
+  // is hidden (which includes any parent nodes) then the user
+  // cannot interact with this element and thus it is hidden
+  if (elHasVisibilityHiddenOrCollapse($el)) {
+    return true // is hidden
+  }
+
+  // when an element is scaled to 0 in one axis
+  // it is not visible to users.
+  // So, it is hidden.
+  if ($transform.detectVisibility($el) !== 'visible') {
+    return true
+  }
+
+  // a transparent element is hidden
+  if (elHasOpacityZero($el) && options.checkOpacity) {
+    return true
+  }
+
+  return false
+}
+
+export function getFirstSelectParentFromEl ($el: JQuery) {
+  const $select = getFirstParentWithTagName($el, 'select')
+
+  // check $select.length here first
+  // they may have not put the option into a select el
+  if ($select?.length) {
+    return $select
+  }
+
+  return null
+}
+
+function ensureEl (el: HTMLElement, methodName: string) {
+  if (!isElement(el)) {
+    throw new Error(`\`Cypress.dom.${methodName}\` failed because it requires a DOM element. The subject received was: \`${el}\``)
+  }
+}
+
+export function elHasDisplayNone ($el) {
+  return $el.css('display') === 'none'
+}
+
+export function isHiddenByAncestors (el, methodName = 'isHiddenByAncestors()', options = { checkOpacity: true }) {
+  ensureEl(el, methodName)
+  const $el = $jquery.wrap(el)
+
+  // an option is considered hidden by ancestors if its parent select is hidden
+  if (isOption(el) || isOptgroup(el)) {
+    const $select = getFirstSelectParentFromEl($el)
+
+    if ($select) {
+      return isHiddenByAncestors($select[0], methodName, options)
+    }
+  }
+
+  // we do some calculations taking into account the parents
+  // to see if its hidden by a parent
+  if (elIsHiddenByAncestors($el, options.checkOpacity)) {
+    return true // is hidden
+  }
+
+  if (elOrAncestorIsFixedOrSticky($el)) {
+    return elIsNotElementFromPoint($el)
+  }
+
+  // else check if el is outside the bounds
+  // of its ancestors overflow
+  return elIsOutOfBoundsOfAncestorsOverflow($el)
+}
+
+function elIsHiddenByAncestors ($el, checkOpacity, $origEl = $el) {
+  // walk up to each parent until we reach the body
+  // if any parent has opacity: 0
+  // or has an effective clientHeight of 0
+  // and its set overflow: hidden then our child element
+  // is effectively hidden
+  // -----UNLESS------
+  // the parent or a descendent has position: absolute|fixed
+  const $parent = getParent($el)
+
+  // stop if we've reached the body or html
+  // in case there is no body
+  // or if parent is the document which can
+  // happen if we already have an <html> element
+  if (isUndefinedOrHTMLBodyDoc($parent)) {
+    return false
+  }
+
+  if (elHasDisplayContents($el)) {
+    let $parent = getParent($el)
+
+    return elIsHiddenByAncestors($parent, checkOpacity, $parent)
+  }
+
+  // a child can never have a computed opacity
+  // greater than that of its parent
+  // so if the parent has an opacity of 0, so does the child
+  if (elHasOpacityZero($parent) && checkOpacity) {
+    return true
+  }
+
+  if (elHasOverflowHidden($parent) && !elHasDisplayContents($parent) && elHasNoEffectiveWidthOrHeight($parent)) {
+    // if any of the elements between the parent and origEl have fixed or position absolute
+    return !elDescendentsHavePositionFixedOrAbsolute($parent, $origEl)
+  }
+
+  // continue to recursively walk up the chain until we reach body or html
+  return elIsHiddenByAncestors($parent, checkOpacity, $origEl)
+}
+
+export function elIsNotElementFromPoint ($el: JQuery<HTMLElement>) {
+  // if we have a fixed position element that means
+  // it is fixed 'relative' to the viewport which means
+  // it MUST be available with elementFromPoint because
+  // that is also relative to the viewport
+  const $elAtPoint = elAtCenterPoint($el)
+
+  // if the element at point is not a descendent
+  // of our $el then we know it's being covered or its
+  // not visible
+  if (isDescendent($el, $elAtPoint)) {
+    return false
+  }
+
+  // we also check if the element at point is a
+  // parent since pointer-events: none
+  // will cause elAtCenterPoint to fall through to parent
+  if (
+    ($el.css('pointer-events') === 'none' || $el.parent().css('pointer-events') === 'none') &&
+    ($elAtPoint && isAncestor($el, $elAtPoint))
+  ) {
+    return false
+  }
+
+  return true
+}
+
+export function elAtCenterPoint ($el: JQuery<HTMLElement>) {
+  const doc = $document.getDocumentFromElement($el.get(0))
+  const elProps = $coordinates.getElementPositioning($el)
+
+  const { topCenter, leftCenter } = elProps.fromElViewport
+
+  const el = $coordinates.getElementAtPointFromViewport(doc, leftCenter, topCenter)
+
+  if (el) {
+    return $jquery.wrap(el)
+  }
+
+  return undefined
+}
+
+export function elIsOutOfBoundsOfAncestorsOverflow ($el: JQuery<any>, $ancestor = getParent($el)) {
+  // no ancestor, not out of bounds!
+  // if we've reached the top parent, which is not a normal DOM el
+  // then we're in bounds all the way up, return false
+  if (isUndefinedOrHTMLBodyDoc($ancestor)) {
+    return false
+  }
+
+  if (elHasDisplayContents($el)) {
+    return false
+  }
+
+  if (canClipContent($el, $ancestor)) {
+    const ancestorProps = $ancestor.get(0).getBoundingClientRect()
+
+    if (elHasPositionAbsolute($el) && (ancestorProps.width === 0 || ancestorProps.height === 0)) {
+      return elIsOutOfBoundsOfAncestorsOverflow($el, getParent($ancestor))
+    }
+
+    const elProps = $el.get(0).getBoundingClientRect()
+
+    // only check if the target el is out of bounds if the overflow is clippable in that direction
+    const checkXOverflow = OVERFLOW_PROPS.includes($ancestor.css('overflow-x'))
+    const checkYOverflow = OVERFLOW_PROPS.includes($ancestor.css('overflow-y'))
+
+    // target el is out of bounds
+    if (
+      // target el is to the right of the ancestor's visible area
+      (checkXOverflow && (elProps.left >= (ancestorProps.width + ancestorProps.left))) ||
+
+      // target el is to the left of the ancestor's visible area
+      (checkXOverflow && ((elProps.left + elProps.width) <= ancestorProps.left)) ||
+
+      // target el is under the ancestor's visible area
+      (checkYOverflow && (elProps.top >= (ancestorProps.height + ancestorProps.top))) ||
+
+      // target el is above the ancestor's visible area
+      (checkYOverflow && ((elProps.top + elProps.height) <= ancestorProps.top))
+    ) {
+      return true
+    }
+  }
+
+  return elIsOutOfBoundsOfAncestorsOverflow($el, getParent($ancestor))
+}
+
+function elHasDisplayContents ($el) {
+  return $el.css('display') === 'contents'
+}
+
+export function elHasOpacityZero ($el) {
+  return $el.css('opacity') === '0'
+}
+
+function elHasDisplayInline ($el) {
+  return $el.css('display') === 'inline'
+}
+
+function elHasVisibilityHiddenOrCollapse ($el) {
+  return elHasVisibilityHidden($el) || elHasVisibilityCollapse($el)
+}
+
+export function elHasVisibilityHidden ($el) {
+  return $el.css('visibility') === 'hidden'
+}
+
+export function elHasVisibilityCollapse ($el) {
+  return $el.css('visibility') === 'collapse'
+}
+
+export function elHasOverflowHidden ($el) {
+  const cssOverflow = [$el.css('overflow'), $el.css('overflow-y'), $el.css('overflow-x')]
+
+  return cssOverflow.includes('hidden')
+}
+
+function elHasPositionRelative ($el: JQuery<HTMLElement>) {
+  return $el.css('position') === 'relative'
+}
+
+function elHasPositionStatic ($el: JQuery<HTMLElement>) {
+  return $el.css('position') == null || $el.css('position') === 'static'
+}
+
+function elHasPositionAbsolute ($el: JQuery<HTMLElement>) {
+  return $el.css('position') === 'absolute'
+}
+
+const OVERFLOW_PROPS = ['hidden', 'clip', 'scroll', 'auto']
+
+function elHasClippableOverflow ($el) {
+  return OVERFLOW_PROPS.includes($el.css('overflow')) ||
+          OVERFLOW_PROPS.includes($el.css('overflow-y')) ||
+            OVERFLOW_PROPS.includes($el.css('overflow-x'))
+}
+
+function elDescendentsHavePositionFixedOrAbsolute ($parent, $child) {
+  // create an array of all elements between $parent and $child
+  // including child but excluding parent
+  // and check if these have position fixed|absolute
+  const parents = getAllParents($child[0], $parent)
+  const $els = $jquery.wrap(parents).add($child)
+
+  return _.some($els.get(), (el) => {
+    return /(fixed|absolute)/.test($jquery.wrap(el).css('position'))
+  })
+}
+
+function elHasVisibleChild ($el) {
+  return _.some($el.children(), (el) => {
+    return isVisible(el)
+  })
+}
+
+export function elHasNoEffectiveWidthOrHeight ($el: JQuery) {
+  // Is the element's CSS width OR height, including any borders,
+  // padding, and vertical scrollbars (if rendered) less than 0?
+  //
+  // elClientWidth:
+  // If the element is hidden (for example, by setting style.display
+  // on the element or one of its ancestors to "none"), then 0 is returned.
+
+  // $el[0].getClientRects().length:
+  // For HTML <area> elements, SVG elements that do not render anything themselves,
+  // display:none elements, and generally any elements that are not directly rendered,
+  // an empty list is returned.
+  const el = $el[0]
+
+  const style = getComputedStyle(el)
+  let transform = style.getPropertyValue('transform')
+
+  if (!transform.length) {
+    transform = 'none'
+  }
+
+  const hasTextContent = !!el.textContent?.trim().length
+
+  const width = elClientWidth($el)
+  const height = elClientHeight($el)
+
+  return (isZeroLengthAndTransformNone(width, height, transform) && !hasTextContent) ||
+  isZeroLengthAndOverflowHidden(width, height, elHasOverflowHidden($el)) ||
+  (el.getClientRects().length <= 0)
+}
+
+function isZeroLengthAndTransformNone (width, height, transform) {
+  // From https://github.com/cypress-io/cypress/issues/5974,
+  // we learned that when an element has non-'none' transform style value like "translate(0, 0)",
+  // it is visible even with `height: 0` or `width: 0`.
+  // That's why we're checking `transform === 'none'` together with elClientWidth/Height.
+  return (width <= 0 && transform === 'none') || (height <= 0 && transform === 'none')
+}
+
+function isZeroLengthAndOverflowHidden (width, height, overflowHidden) {
+  return (width <= 0 && overflowHidden) || (height <= 0 && overflowHidden)
+}
+
+function elementBoundingRect ($el: JQuery) {
+  return $el[0].getBoundingClientRect()
+}
+
+export function elClientHeight ($el) {
+  return elementBoundingRect($el).height
+}
+
+export function elClientWidth ($el) {
+  return elementBoundingRect($el).width
+}
+
+function canClipContent ($el: JQuery<HTMLElement>, $ancestor: JQuery<HTMLElement>) {
+  // can't clip without overflow properties
+  if (!elHasClippableOverflow($ancestor)) {
+    return false
+  }
+
+  if (elHasDisplayContents($ancestor)) {
+    return false
+  }
+
+  // the closest parent with position relative, absolute, or fixed
+  const $offsetParent = $el.offsetParent()
+
+  // even if ancestors' overflow is clippable, if the element's offset parent
+  // is a parent of the ancestor, the ancestor will not clip the element
+  // unless the element is position relative
+  if (!elHasPositionRelative($el) && isAncestor($ancestor, $offsetParent)) {
+    return false
+  }
+
+  // even if ancestors' overflow is clippable, if the element's offset parent
+  // is a child of the ancestor, the ancestor will not clip the element
+  // unless the ancestor has a position that is not absolute
+  if (elHasPositionAbsolute($offsetParent) && isChild($ancestor, $offsetParent)) {
+    return false
+  }
+
+  // even if ancestors' overflow is clippable,
+  // if the element is position static or relative,
+  // and the element's offset parent is positioned absolute, a descendent of the ancestor, has no clippable overflow, and
+  // the offsetParent's offset parent is not descendent of the ancestor,
+  // then the ancestor will not clip the element
+  const $offsetParentOffsetParent = $offsetParent.offsetParent()
+
+  if ((elHasPositionStatic($el) || elHasPositionRelative($el))
+    && elHasPositionAbsolute($offsetParent) && isDescendent($ancestor, $offsetParent)
+    && !elHasClippableOverflow($offsetParent) && !isDescendent($ancestor, $offsetParentOffsetParent)
+  ) {
+    return false
+  }
+
+  return true
+}
+
+export const isW3CRendered = (el) => {
+  // @see https://html.spec.whatwg.org/multipage/rendering.html#being-rendered
+  return !(parentHasDisplayNone(wrap(el)) || wrap(el).css('visibility') === 'hidden')
+}
+
+export const isW3CFocusable = (el) => {
+  // @see https://html.spec.whatwg.org/multipage/interaction.html#focusable-area
+  return isFocusable(wrap(el)) && isW3CRendered(el)
+}
+
+export function parentHasDisplayNone ($el) {
+  // if we have no $el or we've walked all the way up to document
+  // then return false
+  if (!$el.length || $document.isDocument($el)) {
+    return false
+  }
+
+  // if we have display none then return the $el
+  if (elHasDisplayNone($el)) {
+    return $el
+  }
+
+  // continue walking
+  return parentHasDisplayNone(getParent($el))
+}

From 32d54660d5264a09e7f26ebaec6de7a39c451fde Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Mon, 20 Oct 2025 11:58:17 -0400
Subject: [PATCH 09/35] middle of refactoring to un-hide the recursion

---
 packages/driver/src/dom/jquery.ts             |  2 +-
 .../driver/src/dom/visibility/isVisible.ts    | 96 +++++++++++++++++--
 2 files changed, 87 insertions(+), 11 deletions(-)

diff --git a/packages/driver/src/dom/jquery.ts b/packages/driver/src/dom/jquery.ts
index e39b8366725..93db0f5314f 100644
--- a/packages/driver/src/dom/jquery.ts
+++ b/packages/driver/src/dom/jquery.ts
@@ -2,7 +2,7 @@ import $ from 'jquery'
 import _ from 'lodash'
 
 // wrap the object in jquery
-const wrap = (obj) => {
+const wrap = <T extends HTMLElement | Window | Document>(obj: T): JQuery<T> => {
   return $(obj)
 }
 
diff --git a/packages/driver/src/dom/visibility/isVisible.ts b/packages/driver/src/dom/visibility/isVisible.ts
index 39578b3d065..7fb543863c5 100644
--- a/packages/driver/src/dom/visibility/isVisible.ts
+++ b/packages/driver/src/dom/visibility/isVisible.ts
@@ -7,6 +7,14 @@ import * as $transform from '../transform'
 const { isElement, isBody, isHTML, isOption, isOptgroup, getParent, getFirstParentWithTagName, isAncestor, isChild, getAllParents, isDescendent, isUndefinedOrHTMLBodyDoc, elOrAncestorIsFixedOrSticky, isFocusable } = $elements
 const { wrap } = $jquery
 
+
+const OVERFLOW_PROPS = ['hidden', 'clip', 'scroll', 'auto']
+
+
+interface VisibilityOptions {
+  checkOpacity: boolean
+}
+
 export function isVisible (el: HTMLElement, methodName = 'isVisible()', options = { checkOpacity: true }): boolean {
   return !isHidden(el, methodName, options)
 }
@@ -104,27 +112,97 @@ export function elHasDisplayNone ($el) {
   return $el.css('display') === 'none'
 }
 
-export function isHiddenByAncestors (el, methodName = 'isHiddenByAncestors()', options = { checkOpacity: true }) {
+export function isHiddenByAncestors (el: HTMLElement, methodName = 'isHiddenByAncestors()', options: VisibilityOptions = { checkOpacity: true }) {
   ensureEl(el, methodName)
   const $el = $jquery.wrap(el)
 
-  // an option is considered hidden by ancestors if its parent select is hidden
+  // get the parent element
+
   if (isOption(el) || isOptgroup(el)) {
     const $select = getFirstSelectParentFromEl($el)
 
     if ($select) {
+      // recursive
       return isHiddenByAncestors($select[0], methodName, options)
     }
   }
 
-  // we do some calculations taking into account the parents
-  // to see if its hidden by a parent
-  if (elIsHiddenByAncestors($el, options.checkOpacity)) {
-    return true // is hidden
+  let $parent = getParent($el)
+
+  while (parent && !isUndefinedOrHTMLBodyDoc($parent)) {
+    if (elHasOpacityZero($parent) && options.checkOpacity) {
+      return true
+    }
+
+    if (elHasOverflowHidden($parent) && !elHasDisplayContents($parent) && elHasNoEffectiveWidthOrHeight($parent)) {
+      // recursive
+      const childrenCheck = !elDescendentsHavePositionFixedOrAbsolute($parent, $el)
+
+      if (childrenCheck) {
+        return true
+      }
+    }
+
+    $parent = getParent($parent)
+  }
+
+  $parent = getParent($el)
+  let stickyOrFixedParent: JQuery<HTMLElement> | undefined = undefined
+
+  while (parent && !isUndefinedOrHTMLBodyDoc($parent)) {
+    const fixedOrSticky = /(fixed|sticky)/.test($parent.css('position'))
+
+    if (fixedOrSticky) {
+      stickyOrFixedParent = $parent
+      break
+    }
+
+    $parent = getParent($parent)
   }
 
-  if (elOrAncestorIsFixedOrSticky($el)) {
-    return elIsNotElementFromPoint($el)
+  if (stickyOrFixedParent) {
+    return elIsNotElementFromPoint(stickyOrFixedParent)
+  }
+
+  $parent = getParent($el)
+
+  while ($parent && !isUndefinedOrHTMLBodyDoc($parent)) {
+    if (elHasDisplayContents($parent)) {
+      return false
+    }
+    if (canClipContent($el, $parent)) {
+      const ancestorProps = $parent.get(0).getBoundingClientRect()
+
+    if (elHasPositionAbsolute($el) && (ancestorProps.width === 0 || ancestorProps.height === 0)) {
+      $parent = getParent($parent)
+      continue
+    }
+
+    const elProps = $el.get(0).getBoundingClientRect()
+
+    // only check if the target el is out of bounds if the overflow is clippable in that direction
+    const checkXOverflow = OVERFLOW_PROPS.includes($ancestor.css('overflow-x'))
+    const checkYOverflow = OVERFLOW_PROPS.includes($ancestor.css('overflow-y'))
+
+    // target el is out of bounds
+    if (
+      // target el is to the right of the ancestor's visible area
+      (checkXOverflow && (elProps.left >= (ancestorProps.width + ancestorProps.left))) ||
+
+      // target el is to the left of the ancestor's visible area
+      (checkXOverflow && ((elProps.left + elProps.width) <= ancestorProps.left)) ||
+
+      // target el is under the ancestor's visible area
+      (checkYOverflow && (elProps.top >= (ancestorProps.height + ancestorProps.top))) ||
+
+      // target el is above the ancestor's visible area
+      (checkYOverflow && ((elProps.top + elProps.height) <= ancestorProps.top))
+    ) {
+      return true
+    }
+
+  if (elIsOutOfBoundsOfAncestorsOverflow($parent)) {
+    return true
   }
 
   // else check if el is outside the bounds
@@ -302,8 +380,6 @@ function elHasPositionAbsolute ($el: JQuery<HTMLElement>) {
   return $el.css('position') === 'absolute'
 }
 
-const OVERFLOW_PROPS = ['hidden', 'clip', 'scroll', 'auto']
-
 function elHasClippableOverflow ($el) {
   return OVERFLOW_PROPS.includes($el.css('overflow')) ||
           OVERFLOW_PROPS.includes($el.css('overflow-y')) ||

From 8460439f29394d9fb200b62c9cf5528c1a3de1c9 Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Mon, 20 Oct 2025 11:58:33 -0400
Subject: [PATCH 10/35] notes to help with visibility efficiencyn

---
 visibility-algorithm.dot |  217 ++++++++
 visibility-algorithm.svg | 1145 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 1362 insertions(+)
 create mode 100644 visibility-algorithm.dot
 create mode 100644 visibility-algorithm.svg

diff --git a/visibility-algorithm.dot b/visibility-algorithm.dot
new file mode 100644
index 00000000000..6d5e7d80d96
--- /dev/null
+++ b/visibility-algorithm.dot
@@ -0,0 +1,217 @@
+digraph VisibilityAlgorithm {
+  rankdir=TB;
+  node [shape=box, style=filled, fillcolor=lightblue];
+  edge [color=gray];
+  
+  // Entry point
+  isVisible [label="isVisible(el)", fillcolor=lightgreen, style=filled];
+  
+  // Main flow
+  isVisible -> isHidden [label="!isHidden()"];
+  
+  // isHidden branches
+  isHidden -> isStrictlyHidden [label="Check element itself"];
+  isHidden -> isHiddenByAncestors [label="Check ancestors"];
+  
+  // isStrictlyHidden checks
+  isStrictlyHidden -> ensureEl [label="Validate element"];
+  isStrictlyHidden -> bodyHtmlCheck [label="Body/HTML always visible"];
+  isStrictlyHidden -> optionCheck [label="Option/Optgroup handling"];
+  isStrictlyHidden -> sizeCheck [label="Size & dimensions"];
+  isStrictlyHidden -> visibilityCheck [label="Visibility properties"];
+  isStrictlyHidden -> transformCheck [label="Transform scaling"];
+  isStrictlyHidden -> opacityCheck [label="Opacity check"];
+  
+  // Size check details
+  sizeCheck -> elHasNoEffectiveWidthOrHeight [label="Check effective size"];
+  elHasNoEffectiveWidthOrHeight -> elClientWidth [label="Get width"];
+  elHasNoEffectiveWidthOrHeight -> elClientHeight [label="Get height"];
+  elHasNoEffectiveWidthOrHeight -> getClientRects [label="Check rects"];
+  elHasNoEffectiveWidthOrHeight -> transformNone [label="Transform = none"];
+  elHasNoEffectiveWidthOrHeight -> overflowHidden [label="Overflow hidden"];
+  
+  // Visibility check details
+  visibilityCheck -> elHasVisibilityHiddenOrCollapse [label="Check visibility"];
+  elHasVisibilityHiddenOrCollapse -> elHasVisibilityHidden [label="visibility: hidden"];
+  elHasVisibilityHiddenOrCollapse -> elHasVisibilityCollapse [label="visibility: collapse"];
+  
+  // Option handling
+  optionCheck -> elHasDisplayNone [label="Check display: none"];
+  optionCheck -> getFirstSelectParentFromEl [label="Get select parent"];
+  getFirstSelectParentFromEl -> isStrictlyHidden [label="Recursive check", style=dashed];
+  
+  // Ancestor checks
+  isHiddenByAncestors -> optionAncestorCheck [label="Option ancestor handling"];
+  isHiddenByAncestors -> elIsHiddenByAncestors [label="Ancestor chain check"];
+  isHiddenByAncestors -> fixedStickyCheck [label="Fixed/Sticky position"];
+  isHiddenByAncestors -> overflowBoundsCheck [label="Overflow bounds"];
+  
+  // Ancestor chain walking
+  elIsHiddenByAncestors -> parentWalk [label="Walk up parent chain"];
+  parentWalk -> parentOpacity [label="Check parent opacity"];
+  parentWalk -> parentOverflow [label="Check parent overflow"];
+  parentWalk -> parentSize [label="Check parent size"];
+  parentWalk -> positionCheck [label="Check position fixed/absolute"];
+  
+  // Position checks
+  positionCheck -> elDescendentsHavePositionFixedOrAbsolute [label="Check descendants"];
+  elDescendentsHavePositionFixedOrAbsolute -> getAllParents [label="Get all parents"];
+  elDescendentsHavePositionFixedOrAbsolute -> positionRegex [label="Check position regex"];
+  
+  // Fixed/Sticky handling
+  fixedStickyCheck -> elOrAncestorIsFixedOrSticky [label="Check if fixed/sticky"];
+  elOrAncestorIsFixedOrSticky -> elIsNotElementFromPoint [label="Check element coverage"];
+  elIsNotElementFromPoint -> elAtCenterPoint [label="Get element at center"];
+  elAtCenterPoint -> getDocumentFromElement [label="Get document"];
+  elAtCenterPoint -> getElementPositioning [label="Get positioning"];
+  elAtCenterPoint -> getElementAtPointFromViewport [label="Get element at point"];
+  
+  // Overflow bounds checking
+  overflowBoundsCheck -> elIsOutOfBoundsOfAncestorsOverflow [label="Check bounds"];
+  elIsOutOfBoundsOfAncestorsOverflow -> ancestorWalk [label="Walk ancestors"];
+  ancestorWalk -> canClipContent [label="Check if can clip"];
+  canClipContent -> elHasClippableOverflow [label="Check overflow props"];
+  canClipContent -> elHasDisplayContents [label="Check display: contents"];
+  canClipContent -> offsetParentCheck [label="Check offset parent"];
+  
+  // Offset parent checks
+  offsetParentCheck -> elHasPositionRelative [label="Check position: relative"];
+  offsetParentCheck -> elHasPositionAbsolute [label="Check position: absolute"];
+  offsetParentCheck -> isAncestor [label="Check ancestor relationship"];
+  offsetParentCheck -> isChild [label="Check child relationship"];
+  offsetParentCheck -> isDescendent [label="Check descendant relationship"];
+  
+  // Bounds calculation
+  ancestorWalk -> getBoundingClientRect [label="Get ancestor bounds"];
+  ancestorWalk -> getBoundingClientRect2 [label="Get element bounds"];
+  ancestorWalk -> overflowXCheck [label="Check overflow-x"];
+  ancestorWalk -> overflowYCheck [label="Check overflow-y"];
+  ancestorWalk -> boundsComparison [label="Compare bounds"];
+  
+  // Helper functions for property checks
+  elHasDisplayNone -> cssDisplay [label="Check CSS display"];
+  elHasVisibilityHidden -> cssVisibility [label="Check CSS visibility"];
+  elHasVisibilityCollapse -> cssVisibility2 [label="Check CSS visibility"];
+  elHasOpacityZero -> cssOpacity [label="Check CSS opacity"];
+  elHasOverflowHidden -> cssOverflow [label="Check CSS overflow"];
+  
+  // Parent property checks (recursive)
+  parentHasDisplayNone -> parentWalk2 [label="Walk up parents"];
+  parentHasVisibilityHidden -> parentWalk3 [label="Walk up parents"];
+  parentHasVisibilityCollapse -> parentWalk4 [label="Walk up parents"];
+  parentHasOpacityZero -> parentWalk5 [label="Walk up parents"];
+  
+  // Position property checks
+  elHasPositionRelative -> cssPosition [label="Check CSS position"];
+  elHasPositionStatic -> cssPosition2 [label="Check CSS position"];
+  elHasPositionAbsolute -> cssPosition3 [label="Check CSS position"];
+  
+  // Display property checks
+  elHasDisplayContents -> cssDisplay2 [label="Check CSS display"];
+  elHasDisplayInline -> cssDisplay3 [label="Check CSS display"];
+  
+  // Client dimension helpers
+  elClientWidth -> elementBoundingRect [label="Get bounding rect"];
+  elClientHeight -> elementBoundingRect2 [label="Get bounding rect"];
+  elementBoundingRect -> getBoundingClientRect3 [label="Call getBoundingClientRect()"];
+  elementBoundingRect2 -> getBoundingClientRect4 [label="Call getBoundingClientRect()"];
+  
+  // Transform and overflow helpers
+  transformNone -> getComputedStyle [label="Get computed style"];
+  transformNone -> getPropertyValue [label="Get transform value"];
+  overflowHidden -> elHasOverflowHidden [label="Check overflow hidden"];
+  
+  // Constants and regex
+  OVERFLOW_PROPS [label="OVERFLOW_PROPS\n['hidden', 'clip', 'scroll', 'auto']", fillcolor=lightyellow];
+  positionRegex [label="/(fixed|absolute)/", fillcolor=lightyellow];
+  
+  // CSS property checks
+  cssDisplay [label="$el.css('display')", fillcolor=lightcoral];
+  cssVisibility [label="$el.css('visibility')", fillcolor=lightcoral];
+  cssOpacity [label="$el.css('opacity')", fillcolor=lightcoral];
+  cssOverflow [label="$el.css('overflow')", fillcolor=lightcoral];
+  cssPosition [label="$el.css('position')", fillcolor=lightcoral];
+  
+  // DOM API calls
+  getBoundingClientRect [label="getBoundingClientRect()", fillcolor=lightpink];
+  getClientRects [label="getClientRects()", fillcolor=lightpink];
+  getComputedStyle [label="getComputedStyle()", fillcolor=lightpink];
+  
+  // External dependencies
+  transformDetect [label="$transform.detectVisibility()", fillcolor=lightgray];
+  coordinatesAPI [label="$coordinates API", fillcolor=lightgray];
+  documentAPI [label="$document API", fillcolor=lightgray];
+  elementsAPI [label="$elements API", fillcolor=lightgray];
+  
+  // Connect external dependencies
+  transformCheck -> transformDetect;
+  elAtCenterPoint -> coordinatesAPI;
+  elAtCenterPoint -> documentAPI;
+  isStrictlyHidden -> elementsAPI;
+  
+  // Styling for different types of nodes
+  subgraph cluster_checks {
+    label="Element Property Checks";
+    style=filled;
+    fillcolor=lightblue;
+    elHasDisplayNone;
+    elHasVisibilityHidden;
+    elHasVisibilityCollapse;
+    elHasOpacityZero;
+    elHasOverflowHidden;
+  }
+  
+  subgraph cluster_ancestors {
+    label="Ancestor Chain Checks";
+    style=filled;
+    fillcolor=lightgreen;
+    elIsHiddenByAncestors;
+    parentHasDisplayNone;
+    parentHasVisibilityHidden;
+    parentHasVisibilityCollapse;
+    parentHasOpacityZero;
+  }
+  
+  subgraph cluster_position {
+    label="Position & Layout Checks";
+    style=filled;
+    fillcolor=lightyellow;
+    elHasPositionRelative;
+    elHasPositionStatic;
+    elHasPositionAbsolute;
+    elOrAncestorIsFixedOrSticky;
+    elIsNotElementFromPoint;
+  }
+  
+  subgraph cluster_overflow {
+    label="Overflow & Clipping Checks";
+    style=filled;
+    fillcolor=lightcoral;
+    elHasClippableOverflow;
+    canClipContent;
+    elIsOutOfBoundsOfAncestorsOverflow;
+  }
+  
+  subgraph cluster_dimensions {
+    label="Size & Dimension Checks";
+    style=filled;
+    fillcolor=lightpink;
+    elHasNoEffectiveWidthOrHeight;
+    elClientWidth;
+    elClientHeight;
+    elementBoundingRect;
+  }
+  
+  // Performance annotations
+  isVisible [label="isVisible(el)\n[ENTRY POINT]", fillcolor=lightgreen];
+  isHidden [label="isHidden(el)\n[MAIN BRANCH]", fillcolor=lightgreen];
+  isStrictlyHidden [label="isStrictlyHidden(el)\n[ELEMENT CHECKS]", fillcolor=lightblue];
+  isHiddenByAncestors [label="isHiddenByAncestors(el)\n[ANCESTOR CHECKS]", fillcolor=lightgreen];
+  
+  // Add performance notes
+  elIsHiddenByAncestors [label="elIsHiddenByAncestors($el)\n[RECURSIVE - WALKS UP TREE]", fillcolor=orange];
+  elIsOutOfBoundsOfAncestorsOverflow [label="elIsOutOfBoundsOfAncestorsOverflow($el)\n[RECURSIVE - WALKS UP TREE]", fillcolor=orange];
+  elAtCenterPoint [label="elAtCenterPoint($el)\n[EXPENSIVE - DOM QUERY]", fillcolor=red];
+  getBoundingClientRect [label="getBoundingClientRect()\n[EXPENSIVE - LAYOUT CALCULATION]", fillcolor=red];
+  getComputedStyle [label="getComputedStyle()\n[EXPENSIVE - STYLE CALCULATION]", fillcolor=red];
+}
diff --git a/visibility-algorithm.svg b/visibility-algorithm.svg
new file mode 100644
index 00000000000..c44a7620903
--- /dev/null
+++ b/visibility-algorithm.svg
@@ -0,0 +1,1145 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Generated by graphviz version 13.1.0 (20250701.0955)
+ -->
+<!-- Title: VisibilityAlgorithm Pages: 1 -->
+<svg width="3925pt" height="941pt"
+ viewBox="0.00 0.00 3925.00 941.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 936.5)">
+<title>VisibilityAlgorithm</title>
+<polygon fill="white" stroke="none" points="-4,4 -4,-936.5 3920.74,-936.5 3920.74,4 -4,4"/>
+<g id="clust1" class="cluster">
+<title>cluster_checks</title>
+<polygon fill="lightblue" stroke="black" points="91.12,-265 91.12,-341.5 833.12,-341.5 833.12,-265 91.12,-265"/>
+<text xml:space="preserve" text-anchor="middle" x="462.12" y="-324.2" font-family="Times,serif" font-size="14.00">Element Property Checks</text>
+</g>
+<g id="clust2" class="cluster">
+<title>cluster_ancestors</title>
+<polygon fill="lightgreen" stroke="black" points="1404.12,-580.5 1404.12,-662 2320.12,-662 2320.12,-580.5 1404.12,-580.5"/>
+<text xml:space="preserve" text-anchor="middle" x="1862.12" y="-644.7" font-family="Times,serif" font-size="14.00">Ancestor Chain Checks</text>
+</g>
+<g id="clust3" class="cluster">
+<title>cluster_position</title>
+<polygon fill="lightyellow" stroke="black" points="2835.12,-174 2835.12,-341.5 3481.12,-341.5 3481.12,-174 2835.12,-174"/>
+<text xml:space="preserve" text-anchor="middle" x="3158.12" y="-324.2" font-family="Times,serif" font-size="14.00">Position &amp; Layout Checks</text>
+</g>
+<g id="clust4" class="cluster">
+<title>cluster_overflow</title>
+<polygon fill="lightcoral" stroke="black" points="2293.12,-376 2293.12,-546 2684.12,-546 2684.12,-376 2293.12,-376"/>
+<text xml:space="preserve" text-anchor="middle" x="2488.62" y="-528.7" font-family="Times,serif" font-size="14.00">Overflow &amp; Clipping Checks</text>
+</g>
+<g id="clust5" class="cluster">
+<title>cluster_dimensions</title>
+<polygon fill="lightpink" stroke="black" points="995.12,-265 995.12,-543.5 1217.12,-543.5 1217.12,-265 995.12,-265"/>
+<text xml:space="preserve" text-anchor="middle" x="1106.12" y="-526.2" font-family="Times,serif" font-size="14.00">Size &amp; Dimension Checks</text>
+</g>
+<!-- isVisible -->
+<g id="node1" class="node">
+<title>isVisible</title>
+<polygon fill="lightgreen" stroke="black" points="1539.5,-932.5 1426.75,-932.5 1426.75,-891.5 1539.5,-891.5 1539.5,-932.5"/>
+<text xml:space="preserve" text-anchor="middle" x="1483.12" y="-915.2" font-family="Times,serif" font-size="14.00">isVisible(el)</text>
+<text xml:space="preserve" text-anchor="middle" x="1483.12" y="-898.7" font-family="Times,serif" font-size="14.00">[ENTRY POINT]</text>
+</g>
+<!-- isHidden -->
+<g id="node2" class="node">
+<title>isHidden</title>
+<polygon fill="lightgreen" stroke="black" points="1544,-839 1422.25,-839 1422.25,-798 1544,-798 1544,-839"/>
+<text xml:space="preserve" text-anchor="middle" x="1483.12" y="-821.7" font-family="Times,serif" font-size="14.00">isHidden(el)</text>
+<text xml:space="preserve" text-anchor="middle" x="1483.12" y="-805.2" font-family="Times,serif" font-size="14.00">[MAIN BRANCH]</text>
+</g>
+<!-- isVisible&#45;&gt;isHidden -->
+<g id="edge1" class="edge">
+<title>isVisible&#45;&gt;isHidden</title>
+<path fill="none" stroke="gray" d="M1483.12,-891.15C1483.12,-879.28 1483.12,-863.94 1483.12,-850.5"/>
+<polygon fill="gray" stroke="gray" points="1486.63,-850.83 1483.13,-840.83 1479.63,-850.83 1486.63,-850.83"/>
+<text xml:space="preserve" text-anchor="middle" x="1514.25" y="-860.2" font-family="Times,serif" font-size="14.00">!isHidden()</text>
+</g>
+<!-- isStrictlyHidden -->
+<g id="node3" class="node">
+<title>isStrictlyHidden</title>
+<polygon fill="lightblue" stroke="black" points="671.62,-745.5 526.62,-745.5 526.62,-704.5 671.62,-704.5 671.62,-745.5"/>
+<text xml:space="preserve" text-anchor="middle" x="599.12" y="-728.2" font-family="Times,serif" font-size="14.00">isStrictlyHidden(el)</text>
+<text xml:space="preserve" text-anchor="middle" x="599.12" y="-711.7" font-family="Times,serif" font-size="14.00">[ELEMENT CHECKS]</text>
+</g>
+<!-- isHidden&#45;&gt;isStrictlyHidden -->
+<g id="edge2" class="edge">
+<title>isHidden&#45;&gt;isStrictlyHidden</title>
+<path fill="none" stroke="gray" d="M1422.02,-811.17C1267.33,-795.16 860.02,-753 683.13,-734.69"/>
+<polygon fill="gray" stroke="gray" points="683.63,-731.23 673.32,-733.68 682.91,-738.19 683.63,-731.23"/>
+<text xml:space="preserve" text-anchor="middle" x="1176.55" y="-766.7" font-family="Times,serif" font-size="14.00">Check element itself</text>
+</g>
+<!-- isHiddenByAncestors -->
+<g id="node4" class="node">
+<title>isHiddenByAncestors</title>
+<polygon fill="lightgreen" stroke="black" points="2505.75,-745.5 2352.5,-745.5 2352.5,-704.5 2505.75,-704.5 2505.75,-745.5"/>
+<text xml:space="preserve" text-anchor="middle" x="2429.12" y="-728.2" font-family="Times,serif" font-size="14.00">isHiddenByAncestors(el)</text>
+<text xml:space="preserve" text-anchor="middle" x="2429.12" y="-711.7" font-family="Times,serif" font-size="14.00">[ANCESTOR CHECKS]</text>
+</g>
+<!-- isHidden&#45;&gt;isHiddenByAncestors -->
+<g id="edge3" class="edge">
+<title>isHidden&#45;&gt;isHiddenByAncestors</title>
+<path fill="none" stroke="gray" d="M1544.21,-802.39C1552.22,-800.74 1560.35,-799.21 1568.12,-798 1848.28,-754.38 2184.12,-735.92 2340.68,-729.25"/>
+<polygon fill="gray" stroke="gray" points="2340.74,-732.75 2350.58,-728.83 2340.44,-725.76 2340.74,-732.75"/>
+<text xml:space="preserve" text-anchor="middle" x="1871.41" y="-766.7" font-family="Times,serif" font-size="14.00">Check ancestors</text>
+</g>
+<!-- ensureEl -->
+<g id="node5" class="node">
+<title>ensureEl</title>
+<polygon fill="lightblue" stroke="black" points="177.75,-627 114.5,-627 114.5,-591 177.75,-591 177.75,-627"/>
+<text xml:space="preserve" text-anchor="middle" x="146.12" y="-603.95" font-family="Times,serif" font-size="14.00">ensureEl</text>
+</g>
+<!-- isStrictlyHidden&#45;&gt;ensureEl -->
+<g id="edge4" class="edge">
+<title>isStrictlyHidden&#45;&gt;ensureEl</title>
+<path fill="none" stroke="gray" d="M526.39,-722.67C407.94,-719.79 183.9,-711.13 157.62,-686.5 144.85,-674.53 142.11,-654.91 142.49,-638.54"/>
+<polygon fill="gray" stroke="gray" points="145.96,-639.07 143.12,-628.86 138.97,-638.61 145.96,-639.07"/>
+<text xml:space="preserve" text-anchor="middle" x="203.38" y="-673.2" font-family="Times,serif" font-size="14.00">Validate element</text>
+</g>
+<!-- bodyHtmlCheck -->
+<g id="node6" class="node">
+<title>bodyHtmlCheck</title>
+<polygon fill="lightblue" stroke="black" points="314.12,-627 208.12,-627 208.12,-591 314.12,-591 314.12,-627"/>
+<text xml:space="preserve" text-anchor="middle" x="261.12" y="-603.95" font-family="Times,serif" font-size="14.00">bodyHtmlCheck</text>
+</g>
+<!-- isStrictlyHidden&#45;&gt;bodyHtmlCheck -->
+<g id="edge5" class="edge">
+<title>isStrictlyHidden&#45;&gt;bodyHtmlCheck</title>
+<path fill="none" stroke="gray" d="M526.4,-720.96C432.58,-716.27 279.28,-705.76 261.88,-686.5 250.34,-673.73 250.28,-654.3 253.05,-638.21"/>
+<polygon fill="gray" stroke="gray" points="256.41,-639.23 255.11,-628.71 249.57,-637.74 256.41,-639.23"/>
+<text xml:space="preserve" text-anchor="middle" x="338" y="-673.2" font-family="Times,serif" font-size="14.00">Body/HTML always visible</text>
+</g>
+<!-- optionCheck -->
+<g id="node7" class="node">
+<title>optionCheck</title>
+<polygon fill="lightblue" stroke="black" points="848.62,-627 763.62,-627 763.62,-591 848.62,-591 848.62,-627"/>
+<text xml:space="preserve" text-anchor="middle" x="806.12" y="-603.95" font-family="Times,serif" font-size="14.00">optionCheck</text>
+</g>
+<!-- isStrictlyHidden&#45;&gt;optionCheck -->
+<g id="edge6" class="edge">
+<title>isStrictlyHidden&#45;&gt;optionCheck</title>
+<path fill="none" stroke="gray" d="M636.42,-704.13C663.65,-689.74 697.01,-672.4 704.12,-670 723.37,-663.5 730.9,-670.98 749.12,-662 762.14,-655.59 774.34,-645.3 784.09,-635.56"/>
+<polygon fill="gray" stroke="gray" points="786.59,-638.01 790.94,-628.35 781.51,-633.18 786.59,-638.01"/>
+<text xml:space="preserve" text-anchor="middle" x="776.12" y="-673.2" font-family="Times,serif" font-size="14.00">Option/Optgroup handling</text>
+</g>
+<!-- sizeCheck -->
+<g id="node8" class="node">
+<title>sizeCheck</title>
+<polygon fill="lightblue" stroke="black" points="937.88,-627 866.38,-627 866.38,-591 937.88,-591 937.88,-627"/>
+<text xml:space="preserve" text-anchor="middle" x="902.12" y="-603.95" font-family="Times,serif" font-size="14.00">sizeCheck</text>
+</g>
+<!-- isStrictlyHidden&#45;&gt;sizeCheck -->
+<g id="edge7" class="edge">
+<title>isStrictlyHidden&#45;&gt;sizeCheck</title>
+<path fill="none" stroke="gray" d="M671.96,-719.35C734.64,-714.22 819.38,-704.23 848.12,-686.5 866.8,-674.98 880.8,-654.34 889.85,-637.4"/>
+<polygon fill="gray" stroke="gray" points="892.81,-639.3 894.17,-628.8 886.56,-636.16 892.81,-639.3"/>
+<text xml:space="preserve" text-anchor="middle" x="919.47" y="-673.2" font-family="Times,serif" font-size="14.00">Size &amp; dimensions</text>
+</g>
+<!-- visibilityCheck -->
+<g id="node9" class="node">
+<title>visibilityCheck</title>
+<polygon fill="lightblue" stroke="black" points="404.38,-511 305.88,-511 305.88,-475 404.38,-475 404.38,-511"/>
+<text xml:space="preserve" text-anchor="middle" x="355.12" y="-487.95" font-family="Times,serif" font-size="14.00">visibilityCheck</text>
+</g>
+<!-- isStrictlyHidden&#45;&gt;visibilityCheck -->
+<g id="edge8" class="edge">
+<title>isStrictlyHidden&#45;&gt;visibilityCheck</title>
+<path fill="none" stroke="gray" d="M528.74,-704.02C472.8,-687.86 403.15,-667.01 398.38,-662 362.15,-624.01 355.2,-559.87 354.46,-522.8"/>
+<polygon fill="gray" stroke="gray" points="357.96,-522.85 354.42,-512.86 350.96,-522.88 357.96,-522.85"/>
+<text xml:space="preserve" text-anchor="middle" x="452.75" y="-603.95" font-family="Times,serif" font-size="14.00">Visibility properties</text>
+</g>
+<!-- transformCheck -->
+<g id="node10" class="node">
+<title>transformCheck</title>
+<polygon fill="lightblue" stroke="black" points="620,-627 516.25,-627 516.25,-591 620,-591 620,-627"/>
+<text xml:space="preserve" text-anchor="middle" x="568.12" y="-603.95" font-family="Times,serif" font-size="14.00">transformCheck</text>
+</g>
+<!-- isStrictlyHidden&#45;&gt;transformCheck -->
+<g id="edge9" class="edge">
+<title>isStrictlyHidden&#45;&gt;transformCheck</title>
+<path fill="none" stroke="gray" d="M557.85,-704.04C551.63,-699.18 546.07,-693.36 542.38,-686.5 534.02,-670.96 540.11,-652.19 548.47,-637.14"/>
+<polygon fill="gray" stroke="gray" points="551.41,-639.03 553.67,-628.68 545.45,-635.37 551.41,-639.03"/>
+<text xml:space="preserve" text-anchor="middle" x="592.25" y="-673.2" font-family="Times,serif" font-size="14.00">Transform scaling</text>
+</g>
+<!-- opacityCheck -->
+<g id="node11" class="node">
+<title>opacityCheck</title>
+<polygon fill="lightblue" stroke="black" points="1046.25,-627 956,-627 956,-591 1046.25,-591 1046.25,-627"/>
+<text xml:space="preserve" text-anchor="middle" x="1001.12" y="-603.95" font-family="Times,serif" font-size="14.00">opacityCheck</text>
+</g>
+<!-- isStrictlyHidden&#45;&gt;opacityCheck -->
+<g id="edge10" class="edge">
+<title>isStrictlyHidden&#45;&gt;opacityCheck</title>
+<path fill="none" stroke="gray" d="M671.9,-720.94C774.53,-716 951.95,-704.91 975.12,-686.5 989.53,-675.06 996,-655.26 998.88,-638.67"/>
+<polygon fill="gray" stroke="gray" points="1002.34,-639.2 1000.21,-628.82 995.41,-638.27 1002.34,-639.2"/>
+<text xml:space="preserve" text-anchor="middle" x="1026.56" y="-673.2" font-family="Times,serif" font-size="14.00">Opacity check</text>
+</g>
+<!-- elementsAPI -->
+<g id="node89" class="node">
+<title>elementsAPI</title>
+<polygon fill="lightgray" stroke="black" points="96.25,-627 0,-627 0,-591 96.25,-591 96.25,-627"/>
+<text xml:space="preserve" text-anchor="middle" x="48.12" y="-603.95" font-family="Times,serif" font-size="14.00">$elements API</text>
+</g>
+<!-- isStrictlyHidden&#45;&gt;elementsAPI -->
+<g id="edge81" class="edge">
+<title>isStrictlyHidden&#45;&gt;elementsAPI</title>
+<path fill="none" stroke="gray" d="M526.27,-722.31C415.95,-719.02 212.04,-709.9 143.12,-686.5 114.09,-676.64 87.5,-653.45 69.89,-635.17"/>
+<polygon fill="gray" stroke="gray" points="72.85,-633.23 63.48,-628.29 67.73,-638 72.85,-633.23"/>
+</g>
+<!-- optionAncestorCheck -->
+<g id="node23" class="node">
+<title>optionAncestorCheck</title>
+<polygon fill="lightblue" stroke="black" points="3099,-627 2965.25,-627 2965.25,-591 3099,-591 3099,-627"/>
+<text xml:space="preserve" text-anchor="middle" x="3032.12" y="-603.95" font-family="Times,serif" font-size="14.00">optionAncestorCheck</text>
+</g>
+<!-- isHiddenByAncestors&#45;&gt;optionAncestorCheck -->
+<g id="edge23" class="edge">
+<title>isHiddenByAncestors&#45;&gt;optionAncestorCheck</title>
+<path fill="none" stroke="gray" d="M2506,-724.75C2631.32,-724.93 2873.46,-720.65 2951.12,-686.5 2976,-675.56 2997.97,-653.58 3012.73,-635.98"/>
+<polygon fill="gray" stroke="gray" points="3015.27,-638.42 3018.82,-628.44 3009.82,-634.02 3015.27,-638.42"/>
+<text xml:space="preserve" text-anchor="middle" x="3045.58" y="-673.2" font-family="Times,serif" font-size="14.00">Option ancestor handling</text>
+</g>
+<!-- elIsHiddenByAncestors -->
+<g id="node24" class="node">
+<title>elIsHiddenByAncestors</title>
+<polygon fill="orange" stroke="black" points="1971.88,-629.5 1756.38,-629.5 1756.38,-588.5 1971.88,-588.5 1971.88,-629.5"/>
+<text xml:space="preserve" text-anchor="middle" x="1864.12" y="-612.2" font-family="Times,serif" font-size="14.00">elIsHiddenByAncestors($el)</text>
+<text xml:space="preserve" text-anchor="middle" x="1864.12" y="-595.7" font-family="Times,serif" font-size="14.00">[RECURSIVE &#45; WALKS UP TREE]</text>
+</g>
+<!-- isHiddenByAncestors&#45;&gt;elIsHiddenByAncestors -->
+<g id="edge24" class="edge">
+<title>isHiddenByAncestors&#45;&gt;elIsHiddenByAncestors</title>
+<path fill="none" stroke="gray" d="M2352.08,-719.91C2261.73,-713.62 2108.17,-698.24 1981.12,-662 1957.54,-655.27 1932.54,-644.68 1911.74,-634.81"/>
+<polygon fill="gray" stroke="gray" points="1913.47,-631.76 1902.94,-630.55 1910.42,-638.06 1913.47,-631.76"/>
+<text xml:space="preserve" text-anchor="middle" x="2135.83" y="-673.2" font-family="Times,serif" font-size="14.00">Ancestor chain check</text>
+</g>
+<!-- fixedStickyCheck -->
+<g id="node25" class="node">
+<title>fixedStickyCheck</title>
+<polygon fill="lightblue" stroke="black" points="3082.5,-420 2969.75,-420 2969.75,-384 3082.5,-384 3082.5,-420"/>
+<text xml:space="preserve" text-anchor="middle" x="3026.12" y="-396.95" font-family="Times,serif" font-size="14.00">fixedStickyCheck</text>
+</g>
+<!-- isHiddenByAncestors&#45;&gt;fixedStickyCheck -->
+<g id="edge25" class="edge">
+<title>isHiddenByAncestors&#45;&gt;fixedStickyCheck</title>
+<path fill="none" stroke="gray" d="M2486.3,-704.07C2500.16,-698.77 2514.82,-692.76 2528.12,-686.5 2707.4,-602.14 2909.13,-477.46 2989.88,-426.25"/>
+<polygon fill="gray" stroke="gray" points="2991.28,-429.51 2997.84,-421.19 2987.53,-423.6 2991.28,-429.51"/>
+<text xml:space="preserve" text-anchor="middle" x="2836.35" y="-557.2" font-family="Times,serif" font-size="14.00">Fixed/Sticky position</text>
+</g>
+<!-- overflowBoundsCheck -->
+<g id="node26" class="node">
+<title>overflowBoundsCheck</title>
+<polygon fill="lightblue" stroke="black" points="2499.38,-627 2358.88,-627 2358.88,-591 2499.38,-591 2499.38,-627"/>
+<text xml:space="preserve" text-anchor="middle" x="2429.12" y="-603.95" font-family="Times,serif" font-size="14.00">overflowBoundsCheck</text>
+</g>
+<!-- isHiddenByAncestors&#45;&gt;overflowBoundsCheck -->
+<g id="edge26" class="edge">
+<title>isHiddenByAncestors&#45;&gt;overflowBoundsCheck</title>
+<path fill="none" stroke="gray" d="M2429.12,-704.14C2429.12,-686.1 2429.12,-659.25 2429.12,-638.84"/>
+<polygon fill="gray" stroke="gray" points="2432.63,-638.91 2429.13,-628.91 2425.63,-638.91 2432.63,-638.91"/>
+<text xml:space="preserve" text-anchor="middle" x="2476.38" y="-673.2" font-family="Times,serif" font-size="14.00">Overflow bounds</text>
+</g>
+<!-- elHasDisplayNone -->
+<g id="node21" class="node">
+<title>elHasDisplayNone</title>
+<polygon fill="lightblue" stroke="black" points="669.12,-309 551.12,-309 551.12,-273 669.12,-273 669.12,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="610.12" y="-285.95" font-family="Times,serif" font-size="14.00">elHasDisplayNone</text>
+</g>
+<!-- optionCheck&#45;&gt;elHasDisplayNone -->
+<g id="edge20" class="edge">
+<title>optionCheck&#45;&gt;elHasDisplayNone</title>
+<path fill="none" stroke="gray" d="M807.05,-590.74C807.78,-563.98 806.32,-511.5 787.12,-472.5 753.94,-405.1 686.01,-347.14 644.62,-316.12"/>
+<polygon fill="gray" stroke="gray" points="646.81,-313.39 636.68,-310.27 642.66,-319.02 646.81,-313.39"/>
+<text xml:space="preserve" text-anchor="middle" x="832.63" y="-441.2" font-family="Times,serif" font-size="14.00">Check display: none</text>
+</g>
+<!-- getFirstSelectParentFromEl -->
+<g id="node22" class="node">
+<title>getFirstSelectParentFromEl</title>
+<polygon fill="lightblue" stroke="black" points="778.5,-511 611.75,-511 611.75,-475 778.5,-475 778.5,-511"/>
+<text xml:space="preserve" text-anchor="middle" x="695.12" y="-487.95" font-family="Times,serif" font-size="14.00">getFirstSelectParentFromEl</text>
+</g>
+<!-- optionCheck&#45;&gt;getFirstSelectParentFromEl -->
+<g id="edge21" class="edge">
+<title>optionCheck&#45;&gt;getFirstSelectParentFromEl</title>
+<path fill="none" stroke="gray" d="M773.55,-590.59C765.71,-586.87 757.24,-583.25 749.12,-580.5 728.28,-573.44 715.13,-587.05 700.62,-570.5 689.44,-557.73 688.03,-538.71 689.43,-522.82"/>
+<polygon fill="gray" stroke="gray" points="692.9,-523.32 690.74,-512.95 685.96,-522.4 692.9,-523.32"/>
+<text xml:space="preserve" text-anchor="middle" x="746.38" y="-557.2" font-family="Times,serif" font-size="14.00">Get select parent</text>
+</g>
+<!-- elHasNoEffectiveWidthOrHeight -->
+<g id="node12" class="node">
+<title>elHasNoEffectiveWidthOrHeight</title>
+<polygon fill="lightblue" stroke="black" points="1204.88,-511 1007.38,-511 1007.38,-475 1204.88,-475 1204.88,-511"/>
+<text xml:space="preserve" text-anchor="middle" x="1106.12" y="-487.95" font-family="Times,serif" font-size="14.00">elHasNoEffectiveWidthOrHeight</text>
+</g>
+<!-- sizeCheck&#45;&gt;elHasNoEffectiveWidthOrHeight -->
+<g id="edge11" class="edge">
+<title>sizeCheck&#45;&gt;elHasNoEffectiveWidthOrHeight</title>
+<path fill="none" stroke="gray" d="M930.08,-590.62C935.69,-587.21 941.57,-583.7 947.12,-580.5 985.93,-558.11 1030.83,-533.83 1063,-516.71"/>
+<polygon fill="gray" stroke="gray" points="1064.44,-519.9 1071.63,-512.12 1061.16,-513.72 1064.44,-519.9"/>
+<text xml:space="preserve" text-anchor="middle" x="1045.54" y="-557.2" font-family="Times,serif" font-size="14.00">Check effective size</text>
+</g>
+<!-- elHasVisibilityHiddenOrCollapse -->
+<g id="node18" class="node">
+<title>elHasVisibilityHiddenOrCollapse</title>
+<polygon fill="lightblue" stroke="black" points="454.62,-420 255.62,-420 255.62,-384 454.62,-384 454.62,-420"/>
+<text xml:space="preserve" text-anchor="middle" x="355.12" y="-396.95" font-family="Times,serif" font-size="14.00">elHasVisibilityHiddenOrCollapse</text>
+</g>
+<!-- visibilityCheck&#45;&gt;elHasVisibilityHiddenOrCollapse -->
+<g id="edge17" class="edge">
+<title>visibilityCheck&#45;&gt;elHasVisibilityHiddenOrCollapse</title>
+<path fill="none" stroke="gray" d="M355.12,-474.84C355.12,-462.61 355.12,-445.87 355.12,-431.63"/>
+<polygon fill="gray" stroke="gray" points="358.63,-431.92 355.13,-421.92 351.63,-431.92 358.63,-431.92"/>
+<text xml:space="preserve" text-anchor="middle" x="398.25" y="-441.2" font-family="Times,serif" font-size="14.00">Check visibility</text>
+</g>
+<!-- transformDetect -->
+<g id="node86" class="node">
+<title>transformDetect</title>
+<polygon fill="lightgray" stroke="black" points="594.12,-511 422.12,-511 422.12,-475 594.12,-475 594.12,-511"/>
+<text xml:space="preserve" text-anchor="middle" x="508.12" y="-487.95" font-family="Times,serif" font-size="14.00">$transform.detectVisibility()</text>
+</g>
+<!-- transformCheck&#45;&gt;transformDetect -->
+<g id="edge78" class="edge">
+<title>transformCheck&#45;&gt;transformDetect</title>
+<path fill="none" stroke="gray" d="M559.01,-590.69C549.36,-572.36 534,-543.16 522.67,-521.64"/>
+<polygon fill="gray" stroke="gray" points="525.78,-520.04 518.03,-512.82 519.59,-523.3 525.78,-520.04"/>
+</g>
+<!-- elClientWidth -->
+<g id="node13" class="node">
+<title>elClientWidth</title>
+<polygon fill="lightblue" stroke="black" points="1209.38,-420 1116.88,-420 1116.88,-384 1209.38,-384 1209.38,-420"/>
+<text xml:space="preserve" text-anchor="middle" x="1163.12" y="-396.95" font-family="Times,serif" font-size="14.00">elClientWidth</text>
+</g>
+<!-- elHasNoEffectiveWidthOrHeight&#45;&gt;elClientWidth -->
+<g id="edge12" class="edge">
+<title>elHasNoEffectiveWidthOrHeight&#45;&gt;elClientWidth</title>
+<path fill="none" stroke="gray" d="M1117.94,-474.52C1122.15,-468.24 1126.89,-461.08 1131.12,-454.5 1136.25,-446.53 1141.73,-437.8 1146.68,-429.83"/>
+<polygon fill="gray" stroke="gray" points="1149.52,-431.89 1151.8,-421.54 1143.57,-428.21 1149.52,-431.89"/>
+<text xml:space="preserve" text-anchor="middle" x="1167.95" y="-441.2" font-family="Times,serif" font-size="14.00">Get width</text>
+</g>
+<!-- elClientHeight -->
+<g id="node14" class="node">
+<title>elClientHeight</title>
+<polygon fill="lightblue" stroke="black" points="1098.88,-420 1003.38,-420 1003.38,-384 1098.88,-384 1098.88,-420"/>
+<text xml:space="preserve" text-anchor="middle" x="1051.12" y="-396.95" font-family="Times,serif" font-size="14.00">elClientHeight</text>
+</g>
+<!-- elHasNoEffectiveWidthOrHeight&#45;&gt;elClientHeight -->
+<g id="edge13" class="edge">
+<title>elHasNoEffectiveWidthOrHeight&#45;&gt;elClientHeight</title>
+<path fill="none" stroke="gray" d="M1089.39,-474.51C1084.11,-468.46 1078.51,-461.45 1074.12,-454.5 1069.51,-447.18 1065.33,-438.78 1061.85,-430.92"/>
+<polygon fill="gray" stroke="gray" points="1065.09,-429.59 1058,-421.72 1058.64,-432.3 1065.09,-429.59"/>
+<text xml:space="preserve" text-anchor="middle" x="1102.62" y="-441.2" font-family="Times,serif" font-size="14.00">Get height</text>
+</g>
+<!-- getClientRects -->
+<g id="node15" class="node">
+<title>getClientRects</title>
+<polygon fill="lightpink" stroke="black" points="1509.38,-420 1404.88,-420 1404.88,-384 1509.38,-384 1509.38,-420"/>
+<text xml:space="preserve" text-anchor="middle" x="1457.12" y="-396.95" font-family="Times,serif" font-size="14.00">getClientRects()</text>
+</g>
+<!-- elHasNoEffectiveWidthOrHeight&#45;&gt;getClientRects -->
+<g id="edge14" class="edge">
+<title>elHasNoEffectiveWidthOrHeight&#45;&gt;getClientRects</title>
+<path fill="none" stroke="gray" d="M1205.31,-482.81C1249.11,-477.15 1300.83,-468.25 1346.12,-454.5 1370.01,-447.25 1395.36,-435.8 1415.79,-425.54"/>
+<polygon fill="gray" stroke="gray" points="1417.35,-428.68 1424.65,-421 1414.15,-422.45 1417.35,-428.68"/>
+<text xml:space="preserve" text-anchor="middle" x="1418.84" y="-441.2" font-family="Times,serif" font-size="14.00">Check rects</text>
+</g>
+<!-- transformNone -->
+<g id="node16" class="node">
+<title>transformNone</title>
+<polygon fill="lightblue" stroke="black" points="1386.38,-420 1287.88,-420 1287.88,-384 1386.38,-384 1386.38,-420"/>
+<text xml:space="preserve" text-anchor="middle" x="1337.12" y="-396.95" font-family="Times,serif" font-size="14.00">transformNone</text>
+</g>
+<!-- elHasNoEffectiveWidthOrHeight&#45;&gt;transformNone -->
+<g id="edge15" class="edge">
+<title>elHasNoEffectiveWidthOrHeight&#45;&gt;transformNone</title>
+<path fill="none" stroke="gray" d="M1151.49,-474.52C1188.68,-460.19 1241.48,-439.85 1281.27,-424.52"/>
+<polygon fill="gray" stroke="gray" points="1282.38,-427.84 1290.45,-420.98 1279.86,-421.31 1282.38,-427.84"/>
+<text xml:space="preserve" text-anchor="middle" x="1292.19" y="-441.2" font-family="Times,serif" font-size="14.00">Transform = none</text>
+</g>
+<!-- overflowHidden -->
+<g id="node17" class="node">
+<title>overflowHidden</title>
+<polygon fill="lightblue" stroke="black" points="961.38,-420 856.88,-420 856.88,-384 961.38,-384 961.38,-420"/>
+<text xml:space="preserve" text-anchor="middle" x="909.12" y="-396.95" font-family="Times,serif" font-size="14.00">overflowHidden</text>
+</g>
+<!-- elHasNoEffectiveWidthOrHeight&#45;&gt;overflowHidden -->
+<g id="edge16" class="edge">
+<title>elHasNoEffectiveWidthOrHeight&#45;&gt;overflowHidden</title>
+<path fill="none" stroke="gray" d="M1019.31,-474.57C1002.05,-469.38 984.47,-462.8 968.88,-454.5 955.84,-447.56 943.19,-437.34 932.91,-427.82"/>
+<polygon fill="gray" stroke="gray" points="935.59,-425.55 925.96,-421.13 930.74,-430.59 935.59,-425.55"/>
+<text xml:space="preserve" text-anchor="middle" x="1015" y="-441.2" font-family="Times,serif" font-size="14.00">Overflow hidden</text>
+</g>
+<!-- elementBoundingRect -->
+<g id="node79" class="node">
+<title>elementBoundingRect</title>
+<polygon fill="lightblue" stroke="black" points="1179.88,-309 1042.38,-309 1042.38,-273 1179.88,-273 1179.88,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="1111.12" y="-285.95" font-family="Times,serif" font-size="14.00">elementBoundingRect</text>
+</g>
+<!-- elClientWidth&#45;&gt;elementBoundingRect -->
+<g id="edge71" class="edge">
+<title>elClientWidth&#45;&gt;elementBoundingRect</title>
+<path fill="none" stroke="gray" d="M1155,-383.97C1146.77,-366.71 1133.9,-339.74 1124.23,-319.46"/>
+<polygon fill="gray" stroke="gray" points="1127.48,-318.16 1120.02,-310.64 1121.16,-321.17 1127.48,-318.16"/>
+<text xml:space="preserve" text-anchor="middle" x="1195.43" y="-352.7" font-family="Times,serif" font-size="14.00">Get bounding rect</text>
+</g>
+<!-- elementBoundingRect2 -->
+<g id="node80" class="node">
+<title>elementBoundingRect2</title>
+<polygon fill="lightblue" stroke="black" points="987.25,-309 843,-309 843,-273 987.25,-273 987.25,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="915.12" y="-285.95" font-family="Times,serif" font-size="14.00">elementBoundingRect2</text>
+</g>
+<!-- elClientHeight&#45;&gt;elementBoundingRect2 -->
+<g id="edge72" class="edge">
+<title>elClientHeight&#45;&gt;elementBoundingRect2</title>
+<path fill="none" stroke="gray" d="M1029.58,-383.73C1006.9,-365.55 971.01,-336.79 945.47,-316.32"/>
+<polygon fill="gray" stroke="gray" points="947.75,-313.66 937.75,-310.14 943.37,-319.12 947.75,-313.66"/>
+<text xml:space="preserve" text-anchor="middle" x="1056.26" y="-352.7" font-family="Times,serif" font-size="14.00">Get bounding rect</text>
+</g>
+<!-- getComputedStyle -->
+<g id="node83" class="node">
+<title>getComputedStyle</title>
+<polygon fill="red" stroke="black" points="1475.5,-311.5 1224.75,-311.5 1224.75,-270.5 1475.5,-270.5 1475.5,-311.5"/>
+<text xml:space="preserve" text-anchor="middle" x="1350.12" y="-294.2" font-family="Times,serif" font-size="14.00">getComputedStyle()</text>
+<text xml:space="preserve" text-anchor="middle" x="1350.12" y="-277.7" font-family="Times,serif" font-size="14.00">[EXPENSIVE &#45; STYLE CALCULATION]</text>
+</g>
+<!-- transformNone&#45;&gt;getComputedStyle -->
+<g id="edge75" class="edge">
+<title>transformNone&#45;&gt;getComputedStyle</title>
+<path fill="none" stroke="gray" d="M1339.16,-383.97C1341.09,-367.73 1344.06,-342.88 1346.41,-323.11"/>
+<polygon fill="gray" stroke="gray" points="1349.87,-323.71 1347.58,-313.37 1342.92,-322.88 1349.87,-323.71"/>
+<text xml:space="preserve" text-anchor="middle" x="1396.49" y="-352.7" font-family="Times,serif" font-size="14.00">Get computed style</text>
+</g>
+<!-- getPropertyValue -->
+<g id="node84" class="node">
+<title>getPropertyValue</title>
+<polygon fill="lightblue" stroke="black" points="1603,-309 1493.25,-309 1493.25,-273 1603,-273 1603,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="1548.12" y="-285.95" font-family="Times,serif" font-size="14.00">getPropertyValue</text>
+</g>
+<!-- transformNone&#45;&gt;getPropertyValue -->
+<g id="edge76" class="edge">
+<title>transformNone&#45;&gt;getPropertyValue</title>
+<path fill="none" stroke="gray" d="M1374.74,-383.55C1381.75,-380.73 1389.08,-378.07 1396.12,-376 1421.22,-368.63 1430.23,-376.64 1454.12,-366 1480.38,-354.31 1505.71,-333.64 1523.45,-317.11"/>
+<polygon fill="gray" stroke="gray" points="1525.62,-319.88 1530.43,-310.44 1520.78,-314.82 1525.62,-319.88"/>
+<text xml:space="preserve" text-anchor="middle" x="1537.3" y="-352.7" font-family="Times,serif" font-size="14.00">Get transform value</text>
+</g>
+<!-- elHasOverflowHidden -->
+<g id="node62" class="node">
+<title>elHasOverflowHidden</title>
+<polygon fill="lightblue" stroke="black" points="825.25,-309 687,-309 687,-273 825.25,-273 825.25,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="756.12" y="-285.95" font-family="Times,serif" font-size="14.00">elHasOverflowHidden</text>
+</g>
+<!-- overflowHidden&#45;&gt;elHasOverflowHidden -->
+<g id="edge77" class="edge">
+<title>overflowHidden&#45;&gt;elHasOverflowHidden</title>
+<path fill="none" stroke="gray" d="M884.88,-383.73C859.22,-365.45 818.53,-336.45 789.76,-315.97"/>
+<polygon fill="gray" stroke="gray" points="791.92,-313.2 781.74,-310.25 787.85,-318.9 791.92,-313.2"/>
+<text xml:space="preserve" text-anchor="middle" x="923.39" y="-352.7" font-family="Times,serif" font-size="14.00">Check overflow hidden</text>
+</g>
+<!-- elHasVisibilityHidden -->
+<g id="node19" class="node">
+<title>elHasVisibilityHidden</title>
+<polygon fill="lightblue" stroke="black" points="369.88,-309 232.38,-309 232.38,-273 369.88,-273 369.88,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="301.12" y="-285.95" font-family="Times,serif" font-size="14.00">elHasVisibilityHidden</text>
+</g>
+<!-- elHasVisibilityHiddenOrCollapse&#45;&gt;elHasVisibilityHidden -->
+<g id="edge18" class="edge">
+<title>elHasVisibilityHiddenOrCollapse&#45;&gt;elHasVisibilityHidden</title>
+<path fill="none" stroke="gray" d="M344.69,-383.74C341.43,-378.14 337.9,-371.86 334.88,-366 327.11,-350.95 319.21,-333.76 313.01,-319.74"/>
+<polygon fill="gray" stroke="gray" points="316.26,-318.42 309.04,-310.66 309.84,-321.22 316.26,-318.42"/>
+<text xml:space="preserve" text-anchor="middle" x="381" y="-352.7" font-family="Times,serif" font-size="14.00">visibility: hidden</text>
+</g>
+<!-- elHasVisibilityCollapse -->
+<g id="node20" class="node">
+<title>elHasVisibilityCollapse</title>
+<polygon fill="lightblue" stroke="black" points="532.62,-309 387.62,-309 387.62,-273 532.62,-273 532.62,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="460.12" y="-285.95" font-family="Times,serif" font-size="14.00">elHasVisibilityCollapse</text>
+</g>
+<!-- elHasVisibilityHiddenOrCollapse&#45;&gt;elHasVisibilityCollapse -->
+<g id="edge19" class="edge">
+<title>elHasVisibilityHiddenOrCollapse&#45;&gt;elHasVisibilityCollapse</title>
+<path fill="none" stroke="gray" d="M402.83,-383.69C411.67,-378.94 420.26,-373.09 427.12,-366 439.44,-353.27 447.62,-335.16 452.76,-320.05"/>
+<polygon fill="gray" stroke="gray" points="456.06,-321.24 455.67,-310.65 449.37,-319.17 456.06,-321.24"/>
+<text xml:space="preserve" text-anchor="middle" x="488.91" y="-352.7" font-family="Times,serif" font-size="14.00">visibility: collapse</text>
+</g>
+<!-- cssVisibility -->
+<g id="node58" class="node">
+<title>cssVisibility</title>
+<polygon fill="lightcoral" stroke="black" points="358.25,-218 244,-218 244,-182 358.25,-182 358.25,-218"/>
+<text xml:space="preserve" text-anchor="middle" x="301.12" y="-194.95" font-family="Times,serif" font-size="14.00">$el.css(&#39;visibility&#39;)</text>
+</g>
+<!-- elHasVisibilityHidden&#45;&gt;cssVisibility -->
+<g id="edge58" class="edge">
+<title>elHasVisibilityHidden&#45;&gt;cssVisibility</title>
+<path fill="none" stroke="gray" d="M301.12,-272.84C301.12,-260.61 301.12,-243.87 301.12,-229.63"/>
+<polygon fill="gray" stroke="gray" points="304.63,-229.92 301.13,-219.92 297.63,-229.92 304.63,-229.92"/>
+<text xml:space="preserve" text-anchor="middle" x="358.12" y="-239.2" font-family="Times,serif" font-size="14.00">Check CSS visibility</text>
+</g>
+<!-- cssVisibility2 -->
+<g id="node59" class="node">
+<title>cssVisibility2</title>
+<polygon fill="lightblue" stroke="black" points="505.25,-218 415,-218 415,-182 505.25,-182 505.25,-218"/>
+<text xml:space="preserve" text-anchor="middle" x="460.12" y="-194.95" font-family="Times,serif" font-size="14.00">cssVisibility2</text>
+</g>
+<!-- elHasVisibilityCollapse&#45;&gt;cssVisibility2 -->
+<g id="edge59" class="edge">
+<title>elHasVisibilityCollapse&#45;&gt;cssVisibility2</title>
+<path fill="none" stroke="gray" d="M460.12,-272.84C460.12,-260.61 460.12,-243.87 460.12,-229.63"/>
+<polygon fill="gray" stroke="gray" points="463.63,-229.92 460.13,-219.92 456.63,-229.92 463.63,-229.92"/>
+<text xml:space="preserve" text-anchor="middle" x="517.12" y="-239.2" font-family="Times,serif" font-size="14.00">Check CSS visibility</text>
+</g>
+<!-- cssDisplay -->
+<g id="node57" class="node">
+<title>cssDisplay</title>
+<polygon fill="lightcoral" stroke="black" points="662.75,-218 557.5,-218 557.5,-182 662.75,-182 662.75,-218"/>
+<text xml:space="preserve" text-anchor="middle" x="610.12" y="-194.95" font-family="Times,serif" font-size="14.00">$el.css(&#39;display&#39;)</text>
+</g>
+<!-- elHasDisplayNone&#45;&gt;cssDisplay -->
+<g id="edge57" class="edge">
+<title>elHasDisplayNone&#45;&gt;cssDisplay</title>
+<path fill="none" stroke="gray" d="M610.12,-272.84C610.12,-260.61 610.12,-243.87 610.12,-229.63"/>
+<polygon fill="gray" stroke="gray" points="613.63,-229.92 610.13,-219.92 606.63,-229.92 613.63,-229.92"/>
+<text xml:space="preserve" text-anchor="middle" x="662.62" y="-239.2" font-family="Times,serif" font-size="14.00">Check CSS display</text>
+</g>
+<!-- getFirstSelectParentFromEl&#45;&gt;isStrictlyHidden -->
+<g id="edge22" class="edge">
+<title>getFirstSelectParentFromEl&#45;&gt;isStrictlyHidden</title>
+<path fill="none" stroke="gray" stroke-dasharray="5,2" d="M688.64,-511.39C682.31,-528.74 672.68,-556.23 665.88,-580.5 652.85,-626.99 666.82,-645.02 642.12,-686.5 640.14,-689.84 637.75,-693.03 635.14,-696.04"/>
+<polygon fill="gray" stroke="gray" points="632.85,-693.37 628.35,-702.97 637.85,-698.27 632.85,-693.37"/>
+<text xml:space="preserve" text-anchor="middle" x="710.5" y="-603.95" font-family="Times,serif" font-size="14.00">Recursive check</text>
+</g>
+<!-- parentWalk -->
+<g id="node27" class="node">
+<title>parentWalk</title>
+<polygon fill="lightblue" stroke="black" points="1890.62,-511 1811.62,-511 1811.62,-475 1890.62,-475 1890.62,-511"/>
+<text xml:space="preserve" text-anchor="middle" x="1851.12" y="-487.95" font-family="Times,serif" font-size="14.00">parentWalk</text>
+</g>
+<!-- elIsHiddenByAncestors&#45;&gt;parentWalk -->
+<g id="edge27" class="edge">
+<title>elIsHiddenByAncestors&#45;&gt;parentWalk</title>
+<path fill="none" stroke="gray" d="M1861.86,-588.14C1859.79,-570.01 1856.71,-543 1854.38,-522.55"/>
+<polygon fill="gray" stroke="gray" points="1857.89,-522.43 1853.28,-512.9 1850.94,-523.23 1857.89,-522.43"/>
+<text xml:space="preserve" text-anchor="middle" x="1918.05" y="-557.2" font-family="Times,serif" font-size="14.00">Walk up parent chain</text>
+</g>
+<!-- elOrAncestorIsFixedOrSticky -->
+<g id="node35" class="node">
+<title>elOrAncestorIsFixedOrSticky</title>
+<polygon fill="lightblue" stroke="black" points="3473.12,-309 3295.12,-309 3295.12,-273 3473.12,-273 3473.12,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="3384.12" y="-285.95" font-family="Times,serif" font-size="14.00">elOrAncestorIsFixedOrSticky</text>
+</g>
+<!-- fixedStickyCheck&#45;&gt;elOrAncestorIsFixedOrSticky -->
+<g id="edge35" class="edge">
+<title>fixedStickyCheck&#45;&gt;elOrAncestorIsFixedOrSticky</title>
+<path fill="none" stroke="gray" d="M3049.74,-383.72C3067.56,-371.72 3093.14,-356.66 3118.12,-349.5 3189.99,-328.92 3213.84,-360.55 3286.12,-341.5 3307.54,-335.86 3329.71,-325.14 3347.53,-315.11"/>
+<polygon fill="gray" stroke="gray" points="3349.28,-318.14 3356.17,-310.1 3345.77,-312.09 3349.28,-318.14"/>
+<text xml:space="preserve" text-anchor="middle" x="3175.12" y="-352.7" font-family="Times,serif" font-size="14.00">Check if fixed/sticky</text>
+</g>
+<!-- elIsOutOfBoundsOfAncestorsOverflow -->
+<g id="node41" class="node">
+<title>elIsOutOfBoundsOfAncestorsOverflow</title>
+<polygon fill="orange" stroke="black" points="2557.5,-513.5 2300.75,-513.5 2300.75,-472.5 2557.5,-472.5 2557.5,-513.5"/>
+<text xml:space="preserve" text-anchor="middle" x="2429.12" y="-496.2" font-family="Times,serif" font-size="14.00">elIsOutOfBoundsOfAncestorsOverflow($el)</text>
+<text xml:space="preserve" text-anchor="middle" x="2429.12" y="-479.7" font-family="Times,serif" font-size="14.00">[RECURSIVE &#45; WALKS UP TREE]</text>
+</g>
+<!-- overflowBoundsCheck&#45;&gt;elIsOutOfBoundsOfAncestorsOverflow -->
+<g id="edge41" class="edge">
+<title>overflowBoundsCheck&#45;&gt;elIsOutOfBoundsOfAncestorsOverflow</title>
+<path fill="none" stroke="gray" d="M2429.12,-590.69C2429.12,-573.32 2429.12,-546.19 2429.12,-525.09"/>
+<polygon fill="gray" stroke="gray" points="2432.63,-525.29 2429.13,-515.29 2425.63,-525.29 2432.63,-525.29"/>
+<text xml:space="preserve" text-anchor="middle" x="2467.75" y="-557.2" font-family="Times,serif" font-size="14.00">Check bounds</text>
+</g>
+<!-- parentOpacity -->
+<g id="node28" class="node">
+<title>parentOpacity</title>
+<polygon fill="lightblue" stroke="black" points="2082.38,-420 1989.88,-420 1989.88,-384 2082.38,-384 2082.38,-420"/>
+<text xml:space="preserve" text-anchor="middle" x="2036.12" y="-396.95" font-family="Times,serif" font-size="14.00">parentOpacity</text>
+</g>
+<!-- parentWalk&#45;&gt;parentOpacity -->
+<g id="edge28" class="edge">
+<title>parentWalk&#45;&gt;parentOpacity</title>
+<path fill="none" stroke="gray" d="M1891.1,-492.36C1926.82,-490.65 1978.7,-482.86 2013.12,-454.5 2020.46,-448.46 2025.54,-439.6 2029.02,-430.92"/>
+<polygon fill="gray" stroke="gray" points="2032.25,-432.29 2032.13,-421.7 2025.62,-430.05 2032.25,-432.29"/>
+<text xml:space="preserve" text-anchor="middle" x="2082.99" y="-441.2" font-family="Times,serif" font-size="14.00">Check parent opacity</text>
+</g>
+<!-- parentOverflow -->
+<g id="node29" class="node">
+<title>parentOverflow</title>
+<polygon fill="lightblue" stroke="black" points="1633.88,-420 1532.38,-420 1532.38,-384 1633.88,-384 1633.88,-420"/>
+<text xml:space="preserve" text-anchor="middle" x="1583.12" y="-396.95" font-family="Times,serif" font-size="14.00">parentOverflow</text>
+</g>
+<!-- parentWalk&#45;&gt;parentOverflow -->
+<g id="edge29" class="edge">
+<title>parentWalk&#45;&gt;parentOverflow</title>
+<path fill="none" stroke="gray" d="M1811.39,-486C1742.63,-475.6 1608.65,-455.26 1607.62,-454.5 1599.72,-448.62 1594.26,-439.52 1590.53,-430.61"/>
+<polygon fill="gray" stroke="gray" points="1593.94,-429.74 1587.31,-421.47 1587.34,-432.06 1593.94,-429.74"/>
+<text xml:space="preserve" text-anchor="middle" x="1669.88" y="-441.2" font-family="Times,serif" font-size="14.00">Check parent overflow</text>
+</g>
+<!-- parentSize -->
+<g id="node30" class="node">
+<title>parentSize</title>
+<polygon fill="lightblue" stroke="black" points="1767.62,-420 1694.62,-420 1694.62,-384 1767.62,-384 1767.62,-420"/>
+<text xml:space="preserve" text-anchor="middle" x="1731.12" y="-396.95" font-family="Times,serif" font-size="14.00">parentSize</text>
+</g>
+<!-- parentWalk&#45;&gt;parentSize -->
+<g id="edge30" class="edge">
+<title>parentWalk&#45;&gt;parentSize</title>
+<path fill="none" stroke="gray" d="M1811.26,-486.99C1789.01,-482.19 1762.44,-472.82 1745.38,-454.5 1739.53,-448.23 1736.05,-439.77 1733.98,-431.52"/>
+<polygon fill="gray" stroke="gray" points="1737.44,-430.95 1732.19,-421.74 1730.55,-432.21 1737.44,-430.95"/>
+<text xml:space="preserve" text-anchor="middle" x="1793.75" y="-441.2" font-family="Times,serif" font-size="14.00">Check parent size</text>
+</g>
+<!-- positionCheck -->
+<g id="node31" class="node">
+<title>positionCheck</title>
+<polygon fill="lightblue" stroke="black" points="1889.12,-420 1795.12,-420 1795.12,-384 1889.12,-384 1889.12,-420"/>
+<text xml:space="preserve" text-anchor="middle" x="1842.12" y="-396.95" font-family="Times,serif" font-size="14.00">positionCheck</text>
+</g>
+<!-- parentWalk&#45;&gt;positionCheck -->
+<g id="edge31" class="edge">
+<title>parentWalk&#45;&gt;positionCheck</title>
+<path fill="none" stroke="gray" d="M1849.39,-474.84C1848.15,-462.61 1846.46,-445.87 1845.02,-431.63"/>
+<polygon fill="gray" stroke="gray" points="1848.53,-431.51 1844.04,-421.92 1841.56,-432.22 1848.53,-431.51"/>
+<text xml:space="preserve" text-anchor="middle" x="1928.16" y="-441.2" font-family="Times,serif" font-size="14.00">Check position fixed/absolute</text>
+</g>
+<!-- elDescendentsHavePositionFixedOrAbsolute -->
+<g id="node32" class="node">
+<title>elDescendentsHavePositionFixedOrAbsolute</title>
+<polygon fill="lightblue" stroke="black" points="1881.38,-309 1620.88,-309 1620.88,-273 1881.38,-273 1881.38,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="1751.12" y="-285.95" font-family="Times,serif" font-size="14.00">elDescendentsHavePositionFixedOrAbsolute</text>
+</g>
+<!-- positionCheck&#45;&gt;elDescendentsHavePositionFixedOrAbsolute -->
+<g id="edge32" class="edge">
+<title>positionCheck&#45;&gt;elDescendentsHavePositionFixedOrAbsolute</title>
+<path fill="none" stroke="gray" d="M1827.91,-383.97C1813.17,-366.31 1789.94,-338.49 1772.89,-318.07"/>
+<polygon fill="gray" stroke="gray" points="1775.61,-315.87 1766.51,-310.43 1770.24,-320.35 1775.61,-315.87"/>
+<text xml:space="preserve" text-anchor="middle" x="1864.44" y="-352.7" font-family="Times,serif" font-size="14.00">Check descendants</text>
+</g>
+<!-- getAllParents -->
+<g id="node33" class="node">
+<title>getAllParents</title>
+<polygon fill="lightblue" stroke="black" points="1737.88,-218 1648.38,-218 1648.38,-182 1737.88,-182 1737.88,-218"/>
+<text xml:space="preserve" text-anchor="middle" x="1693.12" y="-194.95" font-family="Times,serif" font-size="14.00">getAllParents</text>
+</g>
+<!-- elDescendentsHavePositionFixedOrAbsolute&#45;&gt;getAllParents -->
+<g id="edge33" class="edge">
+<title>elDescendentsHavePositionFixedOrAbsolute&#45;&gt;getAllParents</title>
+<path fill="none" stroke="gray" d="M1726.72,-272.55C1720.08,-266.8 1713.4,-259.96 1708.62,-252.5 1704.16,-245.53 1700.92,-237.21 1698.61,-229.31"/>
+<polygon fill="gray" stroke="gray" points="1702.03,-228.56 1696.2,-219.71 1695.24,-230.26 1702.03,-228.56"/>
+<text xml:space="preserve" text-anchor="middle" x="1748.38" y="-239.2" font-family="Times,serif" font-size="14.00">Get all parents</text>
+</g>
+<!-- positionRegex -->
+<g id="node34" class="node">
+<title>positionRegex</title>
+<polygon fill="lightyellow" stroke="black" points="1864.25,-218 1756,-218 1756,-182 1864.25,-182 1864.25,-218"/>
+<text xml:space="preserve" text-anchor="middle" x="1810.12" y="-194.95" font-family="Times,serif" font-size="14.00">/(fixed|absolute)/</text>
+</g>
+<!-- elDescendentsHavePositionFixedOrAbsolute&#45;&gt;positionRegex -->
+<g id="edge34" class="edge">
+<title>elDescendentsHavePositionFixedOrAbsolute&#45;&gt;positionRegex</title>
+<path fill="none" stroke="gray" d="M1771.07,-272.53C1777.07,-266.59 1783.33,-259.64 1788.12,-252.5 1793.04,-245.17 1797.24,-236.57 1800.61,-228.52"/>
+<polygon fill="gray" stroke="gray" points="1803.77,-230.04 1804.13,-219.45 1797.24,-227.51 1803.77,-230.04"/>
+<text xml:space="preserve" text-anchor="middle" x="1854.84" y="-239.2" font-family="Times,serif" font-size="14.00">Check position regex</text>
+</g>
+<!-- elIsNotElementFromPoint -->
+<g id="node36" class="node">
+<title>elIsNotElementFromPoint</title>
+<polygon fill="lightblue" stroke="black" points="3419.12,-218 3259.12,-218 3259.12,-182 3419.12,-182 3419.12,-218"/>
+<text xml:space="preserve" text-anchor="middle" x="3339.12" y="-194.95" font-family="Times,serif" font-size="14.00">elIsNotElementFromPoint</text>
+</g>
+<!-- elOrAncestorIsFixedOrSticky&#45;&gt;elIsNotElementFromPoint -->
+<g id="edge36" class="edge">
+<title>elOrAncestorIsFixedOrSticky&#45;&gt;elIsNotElementFromPoint</title>
+<path fill="none" stroke="gray" d="M3375.45,-272.84C3369.08,-260.24 3360.29,-242.86 3352.96,-228.36"/>
+<polygon fill="gray" stroke="gray" points="3356.25,-227.11 3348.61,-219.76 3350,-230.27 3356.25,-227.11"/>
+<text xml:space="preserve" text-anchor="middle" x="3431.44" y="-239.2" font-family="Times,serif" font-size="14.00">Check element coverage</text>
+</g>
+<!-- elAtCenterPoint -->
+<g id="node37" class="node">
+<title>elAtCenterPoint</title>
+<polygon fill="red" stroke="black" points="3435.62,-129.5 3242.62,-129.5 3242.62,-88.5 3435.62,-88.5 3435.62,-129.5"/>
+<text xml:space="preserve" text-anchor="middle" x="3339.12" y="-112.2" font-family="Times,serif" font-size="14.00">elAtCenterPoint($el)</text>
+<text xml:space="preserve" text-anchor="middle" x="3339.12" y="-95.7" font-family="Times,serif" font-size="14.00">[EXPENSIVE &#45; DOM QUERY]</text>
+</g>
+<!-- elIsNotElementFromPoint&#45;&gt;elAtCenterPoint -->
+<g id="edge37" class="edge">
+<title>elIsNotElementFromPoint&#45;&gt;elAtCenterPoint</title>
+<path fill="none" stroke="gray" d="M3339.12,-181.84C3339.12,-170.35 3339.12,-154.9 3339.12,-141.27"/>
+<polygon fill="gray" stroke="gray" points="3342.63,-141.42 3339.13,-131.42 3335.63,-141.42 3342.63,-141.42"/>
+<text xml:space="preserve" text-anchor="middle" x="3397.62" y="-150.7" font-family="Times,serif" font-size="14.00">Get element at center</text>
+</g>
+<!-- getDocumentFromElement -->
+<g id="node38" class="node">
+<title>getDocumentFromElement</title>
+<polygon fill="lightblue" stroke="black" points="3061.75,-36 2896.5,-36 2896.5,0 3061.75,0 3061.75,-36"/>
+<text xml:space="preserve" text-anchor="middle" x="2979.12" y="-12.95" font-family="Times,serif" font-size="14.00">getDocumentFromElement</text>
+</g>
+<!-- elAtCenterPoint&#45;&gt;getDocumentFromElement -->
+<g id="edge38" class="edge">
+<title>elAtCenterPoint&#45;&gt;getDocumentFromElement</title>
+<path fill="none" stroke="gray" d="M3242.13,-92.86C3208.3,-86.85 3170.21,-79.26 3135.88,-70.5 3102.9,-62.08 3066.76,-50.38 3037.51,-40.26"/>
+<polygon fill="gray" stroke="gray" points="3038.68,-36.96 3028.08,-36.97 3036.37,-43.57 3038.68,-36.96"/>
+<text xml:space="preserve" text-anchor="middle" x="3174.5" y="-57.2" font-family="Times,serif" font-size="14.00">Get document</text>
+</g>
+<!-- getElementPositioning -->
+<g id="node39" class="node">
+<title>getElementPositioning</title>
+<polygon fill="lightblue" stroke="black" points="3220,-36 3080.25,-36 3080.25,0 3220,0 3220,-36"/>
+<text xml:space="preserve" text-anchor="middle" x="3150.12" y="-12.95" font-family="Times,serif" font-size="14.00">getElementPositioning</text>
+</g>
+<!-- elAtCenterPoint&#45;&gt;getElementPositioning -->
+<g id="edge39" class="edge">
+<title>elAtCenterPoint&#45;&gt;getElementPositioning</title>
+<path fill="none" stroke="gray" d="M3290.91,-88.16C3277.91,-82.62 3263.91,-76.48 3251.12,-70.5 3231.75,-61.44 3210.62,-50.8 3192.72,-41.54"/>
+<polygon fill="gray" stroke="gray" points="3194.42,-38.48 3183.94,-36.97 3191.2,-44.69 3194.42,-38.48"/>
+<text xml:space="preserve" text-anchor="middle" x="3293.12" y="-57.2" font-family="Times,serif" font-size="14.00">Get positioning</text>
+</g>
+<!-- getElementAtPointFromViewport -->
+<g id="node40" class="node">
+<title>getElementAtPointFromViewport</title>
+<polygon fill="lightblue" stroke="black" points="3439.75,-36 3238.5,-36 3238.5,0 3439.75,0 3439.75,-36"/>
+<text xml:space="preserve" text-anchor="middle" x="3339.12" y="-12.95" font-family="Times,serif" font-size="14.00">getElementAtPointFromViewport</text>
+</g>
+<!-- elAtCenterPoint&#45;&gt;getElementAtPointFromViewport -->
+<g id="edge40" class="edge">
+<title>elAtCenterPoint&#45;&gt;getElementAtPointFromViewport</title>
+<path fill="none" stroke="gray" d="M3339.12,-88.25C3339.12,-76.33 3339.12,-60.94 3339.12,-47.69"/>
+<polygon fill="gray" stroke="gray" points="3342.63,-47.81 3339.13,-37.81 3335.63,-47.81 3342.63,-47.81"/>
+<text xml:space="preserve" text-anchor="middle" x="3395" y="-57.2" font-family="Times,serif" font-size="14.00">Get element at point</text>
+</g>
+<!-- coordinatesAPI -->
+<g id="node87" class="node">
+<title>coordinatesAPI</title>
+<polygon fill="lightgray" stroke="black" points="3568,-36 3458.25,-36 3458.25,0 3568,0 3568,-36"/>
+<text xml:space="preserve" text-anchor="middle" x="3513.12" y="-12.95" font-family="Times,serif" font-size="14.00">$coordinates API</text>
+</g>
+<!-- elAtCenterPoint&#45;&gt;coordinatesAPI -->
+<g id="edge79" class="edge">
+<title>elAtCenterPoint&#45;&gt;coordinatesAPI</title>
+<path fill="none" stroke="gray" d="M3416.24,-88.04C3429.62,-83.2 3443.09,-77.38 3455.12,-70.5 3467.42,-63.47 3479.41,-53.52 3489.26,-44.24"/>
+<polygon fill="gray" stroke="gray" points="3491.54,-46.9 3496.24,-37.41 3486.64,-41.9 3491.54,-46.9"/>
+</g>
+<!-- documentAPI -->
+<g id="node88" class="node">
+<title>documentAPI</title>
+<polygon fill="lightgray" stroke="black" points="3687.88,-36 3586.38,-36 3586.38,0 3687.88,0 3687.88,-36"/>
+<text xml:space="preserve" text-anchor="middle" x="3637.12" y="-12.95" font-family="Times,serif" font-size="14.00">$document API</text>
+</g>
+<!-- elAtCenterPoint&#45;&gt;documentAPI -->
+<g id="edge80" class="edge">
+<title>elAtCenterPoint&#45;&gt;documentAPI</title>
+<path fill="none" stroke="gray" d="M3417.29,-88.06C3437.8,-82.6 3459.85,-76.52 3480.12,-70.5 3511.83,-61.09 3546.81,-49.72 3575.69,-40.05"/>
+<polygon fill="gray" stroke="gray" points="3576.65,-43.42 3585.01,-36.92 3574.42,-36.79 3576.65,-43.42"/>
+</g>
+<!-- ancestorWalk -->
+<g id="node42" class="node">
+<title>ancestorWalk</title>
+<polygon fill="lightblue" stroke="black" points="2285.25,-420 2195,-420 2195,-384 2285.25,-384 2285.25,-420"/>
+<text xml:space="preserve" text-anchor="middle" x="2240.12" y="-396.95" font-family="Times,serif" font-size="14.00">ancestorWalk</text>
+</g>
+<!-- elIsOutOfBoundsOfAncestorsOverflow&#45;&gt;ancestorWalk -->
+<g id="edge42" class="edge">
+<title>elIsOutOfBoundsOfAncestorsOverflow&#45;&gt;ancestorWalk</title>
+<path fill="none" stroke="gray" d="M2324.84,-472.04C2311.56,-467.36 2298.55,-461.59 2286.88,-454.5 2276.19,-448.01 2266.51,-438.35 2258.76,-429.15"/>
+<polygon fill="gray" stroke="gray" points="2261.58,-427.08 2252.63,-421.41 2256.09,-431.42 2261.58,-427.08"/>
+<text xml:space="preserve" text-anchor="middle" x="2328.5" y="-441.2" font-family="Times,serif" font-size="14.00">Walk ancestors</text>
+</g>
+<!-- canClipContent -->
+<g id="node43" class="node">
+<title>canClipContent</title>
+<polygon fill="lightblue" stroke="black" points="2676.5,-511 2575.75,-511 2575.75,-475 2676.5,-475 2676.5,-511"/>
+<text xml:space="preserve" text-anchor="middle" x="2626.12" y="-487.95" font-family="Times,serif" font-size="14.00">canClipContent</text>
+</g>
+<!-- ancestorWalk&#45;&gt;canClipContent -->
+<g id="edge43" class="edge">
+<title>ancestorWalk&#45;&gt;canClipContent</title>
+<path fill="none" stroke="gray" d="M2285.71,-419.01C2286.86,-419.35 2288,-419.68 2289.12,-420 2324.6,-430.06 2334.7,-427.75 2370.12,-438 2390.99,-444.03 2394.99,-449.51 2416.12,-454.5 2478.15,-469.15 2498.5,-459.19 2564.57,-472.47"/>
+<polygon fill="gray" stroke="gray" points="2563.59,-475.84 2574.1,-474.49 2565.04,-468.99 2563.59,-475.84"/>
+<text xml:space="preserve" text-anchor="middle" x="2462.62" y="-441.2" font-family="Times,serif" font-size="14.00">Check if can clip</text>
+</g>
+<!-- getBoundingClientRect -->
+<g id="node52" class="node">
+<title>getBoundingClientRect</title>
+<polygon fill="red" stroke="black" points="2556.88,-311.5 2293.38,-311.5 2293.38,-270.5 2556.88,-270.5 2556.88,-311.5"/>
+<text xml:space="preserve" text-anchor="middle" x="2425.12" y="-294.2" font-family="Times,serif" font-size="14.00">getBoundingClientRect()</text>
+<text xml:space="preserve" text-anchor="middle" x="2425.12" y="-277.7" font-family="Times,serif" font-size="14.00">[EXPENSIVE &#45; LAYOUT CALCULATION]</text>
+</g>
+<!-- ancestorWalk&#45;&gt;getBoundingClientRect -->
+<g id="edge52" class="edge">
+<title>ancestorWalk&#45;&gt;getBoundingClientRect</title>
+<path fill="none" stroke="gray" d="M2271.81,-383.52C2277.48,-380.78 2283.4,-378.14 2289.12,-376 2306.29,-369.57 2312.63,-373.98 2329.12,-366 2353.87,-354.02 2378.35,-335 2396.4,-319.24"/>
+<polygon fill="gray" stroke="gray" points="2398.47,-322.1 2403.59,-312.82 2393.8,-316.87 2398.47,-322.1"/>
+<text xml:space="preserve" text-anchor="middle" x="2410.44" y="-352.7" font-family="Times,serif" font-size="14.00">Get ancestor bounds</text>
+</g>
+<!-- getBoundingClientRect2 -->
+<g id="node53" class="node">
+<title>getBoundingClientRect2</title>
+<polygon fill="lightblue" stroke="black" points="2725.25,-309 2575,-309 2575,-273 2725.25,-273 2725.25,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="2650.12" y="-285.95" font-family="Times,serif" font-size="14.00">getBoundingClientRect2</text>
+</g>
+<!-- ancestorWalk&#45;&gt;getBoundingClientRect2 -->
+<g id="edge53" class="edge">
+<title>ancestorWalk&#45;&gt;getBoundingClientRect2</title>
+<path fill="none" stroke="gray" d="M2269.39,-383.6C2275.71,-380.55 2282.49,-377.79 2289.12,-376 2366.91,-355.02 2390.49,-378.24 2470.12,-366 2513.65,-359.31 2525.42,-358.29 2566.12,-341.5 2583.03,-334.53 2600.64,-324.62 2615.33,-315.5"/>
+<polygon fill="gray" stroke="gray" points="2617.16,-318.49 2623.72,-310.17 2613.4,-312.58 2617.16,-318.49"/>
+<text xml:space="preserve" text-anchor="middle" x="2599.44" y="-352.7" font-family="Times,serif" font-size="14.00">Get element bounds</text>
+</g>
+<!-- overflowXCheck -->
+<g id="node54" class="node">
+<title>overflowXCheck</title>
+<polygon fill="lightblue" stroke="black" points="2008.62,-309 1899.62,-309 1899.62,-273 2008.62,-273 2008.62,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="1954.12" y="-285.95" font-family="Times,serif" font-size="14.00">overflowXCheck</text>
+</g>
+<!-- ancestorWalk&#45;&gt;overflowXCheck -->
+<g id="edge54" class="edge">
+<title>ancestorWalk&#45;&gt;overflowXCheck</title>
+<path fill="none" stroke="gray" d="M2194.56,-392.81C2165.1,-387.64 2125.91,-381.03 2091.12,-376 2072.9,-373.36 2024.79,-375.27 2008.88,-366 1990.52,-355.31 1976.47,-335.78 1967.2,-319.46"/>
+<polygon fill="gray" stroke="gray" points="1970.3,-317.85 1962.51,-310.67 1964.13,-321.14 1970.3,-317.85"/>
+<text xml:space="preserve" text-anchor="middle" x="2058" y="-352.7" font-family="Times,serif" font-size="14.00">Check overflow&#45;x</text>
+</g>
+<!-- overflowYCheck -->
+<g id="node55" class="node">
+<title>overflowYCheck</title>
+<polygon fill="lightblue" stroke="black" points="2135.62,-309 2026.62,-309 2026.62,-273 2135.62,-273 2135.62,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="2081.12" y="-285.95" font-family="Times,serif" font-size="14.00">overflowYCheck</text>
+</g>
+<!-- ancestorWalk&#45;&gt;overflowYCheck -->
+<g id="edge55" class="edge">
+<title>ancestorWalk&#45;&gt;overflowYCheck</title>
+<path fill="none" stroke="gray" d="M2194.56,-394.88C2172.06,-390.02 2145.59,-381.37 2125.88,-366 2110.48,-354 2099.18,-335.11 2091.79,-319.41"/>
+<polygon fill="gray" stroke="gray" points="2095.13,-318.32 2087.9,-310.57 2088.72,-321.13 2095.13,-318.32"/>
+<text xml:space="preserve" text-anchor="middle" x="2175" y="-352.7" font-family="Times,serif" font-size="14.00">Check overflow&#45;y</text>
+</g>
+<!-- boundsComparison -->
+<g id="node56" class="node">
+<title>boundsComparison</title>
+<polygon fill="lightblue" stroke="black" points="2275,-309 2153.25,-309 2153.25,-273 2275,-273 2275,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="2214.12" y="-285.95" font-family="Times,serif" font-size="14.00">boundsComparison</text>
+</g>
+<!-- ancestorWalk&#45;&gt;boundsComparison -->
+<g id="edge56" class="edge">
+<title>ancestorWalk&#45;&gt;boundsComparison</title>
+<path fill="none" stroke="gray" d="M2236.06,-383.97C2232,-366.95 2225.69,-340.49 2220.88,-320.31"/>
+<polygon fill="gray" stroke="gray" points="2224.32,-319.66 2218.6,-310.74 2217.51,-321.28 2224.32,-319.66"/>
+<text xml:space="preserve" text-anchor="middle" x="2278.22" y="-352.7" font-family="Times,serif" font-size="14.00">Compare bounds</text>
+</g>
+<!-- elHasClippableOverflow -->
+<g id="node44" class="node">
+<title>elHasClippableOverflow</title>
+<polygon fill="lightblue" stroke="black" points="2593.62,-420 2442.62,-420 2442.62,-384 2593.62,-384 2593.62,-420"/>
+<text xml:space="preserve" text-anchor="middle" x="2518.12" y="-396.95" font-family="Times,serif" font-size="14.00">elHasClippableOverflow</text>
+</g>
+<!-- canClipContent&#45;&gt;elHasClippableOverflow -->
+<g id="edge44" class="edge">
+<title>canClipContent&#45;&gt;elHasClippableOverflow</title>
+<path fill="none" stroke="gray" d="M2575.36,-475.57C2548.75,-466.71 2521.25,-457.08 2519.38,-454.5 2514.64,-447.99 2513.08,-439.69 2513.05,-431.66"/>
+<polygon fill="gray" stroke="gray" points="2516.53,-432.08 2513.79,-421.85 2509.55,-431.55 2516.53,-432.08"/>
+<text xml:space="preserve" text-anchor="middle" x="2579.75" y="-441.2" font-family="Times,serif" font-size="14.00">Check overflow props</text>
+</g>
+<!-- elHasDisplayContents -->
+<g id="node45" class="node">
+<title>elHasDisplayContents</title>
+<polygon fill="lightblue" stroke="black" points="2847.5,-420 2710.75,-420 2710.75,-384 2847.5,-384 2847.5,-420"/>
+<text xml:space="preserve" text-anchor="middle" x="2779.12" y="-396.95" font-family="Times,serif" font-size="14.00">elHasDisplayContents</text>
+</g>
+<!-- canClipContent&#45;&gt;elHasDisplayContents -->
+<g id="edge45" class="edge">
+<title>canClipContent&#45;&gt;elHasDisplayContents</title>
+<path fill="none" stroke="gray" d="M2634.2,-474.57C2640.56,-462.67 2650.49,-447.4 2663.38,-438 2674.17,-430.12 2686.76,-424 2699.58,-419.24"/>
+<polygon fill="gray" stroke="gray" points="2700.6,-422.59 2708.93,-416.05 2698.34,-415.97 2700.6,-422.59"/>
+<text xml:space="preserve" text-anchor="middle" x="2728.25" y="-441.2" font-family="Times,serif" font-size="14.00">Check display: contents</text>
+</g>
+<!-- offsetParentCheck -->
+<g id="node46" class="node">
+<title>offsetParentCheck</title>
+<polygon fill="lightblue" stroke="black" points="3408,-420 3292.25,-420 3292.25,-384 3408,-384 3408,-420"/>
+<text xml:space="preserve" text-anchor="middle" x="3350.12" y="-396.95" font-family="Times,serif" font-size="14.00">offsetParentCheck</text>
+</g>
+<!-- canClipContent&#45;&gt;offsetParentCheck -->
+<g id="edge46" class="edge">
+<title>canClipContent&#45;&gt;offsetParentCheck</title>
+<path fill="none" stroke="gray" d="M2676.75,-485.78C2803.59,-470.18 3135.21,-429.42 3280.37,-411.57"/>
+<polygon fill="gray" stroke="gray" points="3280.75,-415.05 3290.25,-410.36 3279.9,-408.11 3280.75,-415.05"/>
+<text xml:space="preserve" text-anchor="middle" x="3106.22" y="-441.2" font-family="Times,serif" font-size="14.00">Check offset parent</text>
+</g>
+<!-- cssDisplay2 -->
+<g id="node76" class="node">
+<title>cssDisplay2</title>
+<polygon fill="lightblue" stroke="black" points="2824.75,-309 2743.5,-309 2743.5,-273 2824.75,-273 2824.75,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="2784.12" y="-285.95" font-family="Times,serif" font-size="14.00">cssDisplay2</text>
+</g>
+<!-- elHasDisplayContents&#45;&gt;cssDisplay2 -->
+<g id="edge69" class="edge">
+<title>elHasDisplayContents&#45;&gt;cssDisplay2</title>
+<path fill="none" stroke="gray" d="M2779.91,-383.97C2780.68,-367.03 2781.89,-340.73 2782.81,-320.59"/>
+<polygon fill="gray" stroke="gray" points="2786.3,-320.93 2783.26,-310.78 2779.31,-320.61 2786.3,-320.93"/>
+<text xml:space="preserve" text-anchor="middle" x="2833.98" y="-352.7" font-family="Times,serif" font-size="14.00">Check CSS display</text>
+</g>
+<!-- elHasPositionRelative -->
+<g id="node47" class="node">
+<title>elHasPositionRelative</title>
+<polygon fill="lightblue" stroke="black" points="3137.12,-309 3001.12,-309 3001.12,-273 3137.12,-273 3137.12,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="3069.12" y="-285.95" font-family="Times,serif" font-size="14.00">elHasPositionRelative</text>
+</g>
+<!-- offsetParentCheck&#45;&gt;elHasPositionRelative -->
+<g id="edge47" class="edge">
+<title>offsetParentCheck&#45;&gt;elHasPositionRelative</title>
+<path fill="none" stroke="gray" d="M3313.22,-383.58C3283.06,-369.47 3244.13,-351.6 3236.12,-349.5 3197.28,-339.31 3184.12,-354.51 3146.12,-341.5 3129.43,-335.78 3112.73,-325.71 3099.17,-316.14"/>
+<polygon fill="gray" stroke="gray" points="3101.25,-313.32 3091.12,-310.22 3097.1,-318.96 3101.25,-313.32"/>
+<text xml:space="preserve" text-anchor="middle" x="3337.55" y="-352.7" font-family="Times,serif" font-size="14.00">Check position: relative</text>
+</g>
+<!-- elHasPositionAbsolute -->
+<g id="node48" class="node">
+<title>elHasPositionAbsolute</title>
+<polygon fill="lightblue" stroke="black" points="2983,-309 2843.25,-309 2843.25,-273 2983,-273 2983,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="2913.12" y="-285.95" font-family="Times,serif" font-size="14.00">elHasPositionAbsolute</text>
+</g>
+<!-- offsetParentCheck&#45;&gt;elHasPositionAbsolute -->
+<g id="edge48" class="edge">
+<title>offsetParentCheck&#45;&gt;elHasPositionAbsolute</title>
+<path fill="none" stroke="gray" d="M3291.79,-394.88C3239.33,-389.5 3160.12,-381.66 3091.12,-376 3074.67,-374.65 2956.24,-375.7 2942.88,-366 2928.27,-355.4 2920.82,-336.4 2917.03,-320.31"/>
+<polygon fill="gray" stroke="gray" points="2920.52,-319.9 2915.16,-310.76 2913.65,-321.25 2920.52,-319.9"/>
+<text xml:space="preserve" text-anchor="middle" x="3010" y="-352.7" font-family="Times,serif" font-size="14.00">Check position: absolute</text>
+</g>
+<!-- isAncestor -->
+<g id="node49" class="node">
+<title>isAncestor</title>
+<polygon fill="lightblue" stroke="black" points="3565,-309 3491.25,-309 3491.25,-273 3565,-273 3565,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="3528.12" y="-285.95" font-family="Times,serif" font-size="14.00">isAncestor</text>
+</g>
+<!-- offsetParentCheck&#45;&gt;isAncestor -->
+<g id="edge49" class="edge">
+<title>offsetParentCheck&#45;&gt;isAncestor</title>
+<path fill="none" stroke="gray" d="M3379.13,-383.54C3403.27,-369.06 3434.19,-350.66 3437.38,-349.5 3457.59,-342.13 3466.35,-352.02 3485.12,-341.5 3495.04,-335.94 3503.77,-327.19 3510.72,-318.57"/>
+<polygon fill="gray" stroke="gray" points="3513.45,-320.76 3516.63,-310.66 3507.85,-316.57 3513.45,-320.76"/>
+<text xml:space="preserve" text-anchor="middle" x="3512.75" y="-352.7" font-family="Times,serif" font-size="14.00">Check ancestor relationship</text>
+</g>
+<!-- isChild -->
+<g id="node50" class="node">
+<title>isChild</title>
+<polygon fill="lightblue" stroke="black" points="3637.62,-309 3582.62,-309 3582.62,-273 3637.62,-273 3637.62,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="3610.12" y="-285.95" font-family="Times,serif" font-size="14.00">isChild</text>
+</g>
+<!-- offsetParentCheck&#45;&gt;isChild -->
+<g id="edge50" class="edge">
+<title>offsetParentCheck&#45;&gt;isChild</title>
+<path fill="none" stroke="gray" d="M3408.25,-399.47C3469.91,-396.65 3561.97,-388.66 3588.12,-366 3601.04,-354.81 3606.55,-336.41 3608.82,-320.76"/>
+<polygon fill="gray" stroke="gray" points="3612.29,-321.31 3609.84,-311 3605.32,-320.58 3612.29,-321.31"/>
+<text xml:space="preserve" text-anchor="middle" x="3666.75" y="-352.7" font-family="Times,serif" font-size="14.00">Check child relationship</text>
+</g>
+<!-- isDescendent -->
+<g id="node51" class="node">
+<title>isDescendent</title>
+<polygon fill="lightblue" stroke="black" points="3810.12,-309 3722.12,-309 3722.12,-273 3810.12,-273 3810.12,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="3766.12" y="-285.95" font-family="Times,serif" font-size="14.00">isDescendent</text>
+</g>
+<!-- offsetParentCheck&#45;&gt;isDescendent -->
+<g id="edge51" class="edge">
+<title>offsetParentCheck&#45;&gt;isDescendent</title>
+<path fill="none" stroke="gray" d="M3408.12,-399.09C3509.68,-395.25 3711.43,-385.28 3737.12,-366 3751.42,-355.27 3758.68,-336.45 3762.35,-320.47"/>
+<polygon fill="gray" stroke="gray" points="3765.73,-321.47 3764.17,-310.99 3758.85,-320.15 3765.73,-321.47"/>
+<text xml:space="preserve" text-anchor="middle" x="3833.87" y="-352.7" font-family="Times,serif" font-size="14.00">Check descendant relationship</text>
+</g>
+<!-- cssPosition -->
+<g id="node72" class="node">
+<title>cssPosition</title>
+<polygon fill="lightcoral" stroke="black" points="2725,-218 2615.25,-218 2615.25,-182 2725,-182 2725,-218"/>
+<text xml:space="preserve" text-anchor="middle" x="2670.12" y="-194.95" font-family="Times,serif" font-size="14.00">$el.css(&#39;position&#39;)</text>
+</g>
+<!-- elHasPositionRelative&#45;&gt;cssPosition -->
+<g id="edge66" class="edge">
+<title>elHasPositionRelative&#45;&gt;cssPosition</title>
+<path fill="none" stroke="gray" d="M3022.41,-272.57C3012.54,-269.53 3002.09,-266.78 2992.12,-265 2974.58,-261.87 2684.16,-265.16 2671.62,-252.5 2665.65,-246.47 2663.9,-237.84 2664.06,-229.36"/>
+<polygon fill="gray" stroke="gray" points="2667.52,-229.97 2665.09,-219.65 2660.56,-229.23 2667.52,-229.97"/>
+<text xml:space="preserve" text-anchor="middle" x="2726.38" y="-239.2" font-family="Times,serif" font-size="14.00">Check CSS position</text>
+</g>
+<!-- cssPosition3 -->
+<g id="node75" class="node">
+<title>cssPosition3</title>
+<polygon fill="lightblue" stroke="black" points="2578.88,-218 2495.38,-218 2495.38,-182 2578.88,-182 2578.88,-218"/>
+<text xml:space="preserve" text-anchor="middle" x="2537.12" y="-194.95" font-family="Times,serif" font-size="14.00">cssPosition3</text>
+</g>
+<!-- elHasPositionAbsolute&#45;&gt;cssPosition3 -->
+<g id="edge68" class="edge">
+<title>elHasPositionAbsolute&#45;&gt;cssPosition3</title>
+<path fill="none" stroke="gray" d="M2865.17,-272.61C2855.04,-269.56 2844.33,-266.8 2834.12,-265 2817.94,-262.15 2550.17,-264.19 2538.62,-252.5 2532.66,-246.46 2530.92,-237.82 2531.08,-229.34"/>
+<polygon fill="gray" stroke="gray" points="2534.53,-229.96 2532.1,-219.64 2527.57,-229.22 2534.53,-229.96"/>
+<text xml:space="preserve" text-anchor="middle" x="2593.38" y="-239.2" font-family="Times,serif" font-size="14.00">Check CSS position</text>
+</g>
+<!-- elHasOpacityZero -->
+<g id="node60" class="node">
+<title>elHasOpacityZero</title>
+<polygon fill="lightblue" stroke="black" points="214.62,-309 99.62,-309 99.62,-273 214.62,-273 214.62,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="157.12" y="-285.95" font-family="Times,serif" font-size="14.00">elHasOpacityZero</text>
+</g>
+<!-- cssOpacity -->
+<g id="node61" class="node">
+<title>cssOpacity</title>
+<polygon fill="lightcoral" stroke="black" points="210.12,-218 104.12,-218 104.12,-182 210.12,-182 210.12,-218"/>
+<text xml:space="preserve" text-anchor="middle" x="157.12" y="-194.95" font-family="Times,serif" font-size="14.00">$el.css(&#39;opacity&#39;)</text>
+</g>
+<!-- elHasOpacityZero&#45;&gt;cssOpacity -->
+<g id="edge60" class="edge">
+<title>elHasOpacityZero&#45;&gt;cssOpacity</title>
+<path fill="none" stroke="gray" d="M157.12,-272.84C157.12,-260.61 157.12,-243.87 157.12,-229.63"/>
+<polygon fill="gray" stroke="gray" points="160.63,-229.92 157.13,-219.92 153.63,-229.92 160.63,-229.92"/>
+<text xml:space="preserve" text-anchor="middle" x="210" y="-239.2" font-family="Times,serif" font-size="14.00">Check CSS opacity</text>
+</g>
+<!-- cssOverflow -->
+<g id="node63" class="node">
+<title>cssOverflow</title>
+<polygon fill="lightcoral" stroke="black" points="813.62,-218 698.62,-218 698.62,-182 813.62,-182 813.62,-218"/>
+<text xml:space="preserve" text-anchor="middle" x="756.12" y="-194.95" font-family="Times,serif" font-size="14.00">$el.css(&#39;overflow&#39;)</text>
+</g>
+<!-- elHasOverflowHidden&#45;&gt;cssOverflow -->
+<g id="edge61" class="edge">
+<title>elHasOverflowHidden&#45;&gt;cssOverflow</title>
+<path fill="none" stroke="gray" d="M756.12,-272.84C756.12,-260.61 756.12,-243.87 756.12,-229.63"/>
+<polygon fill="gray" stroke="gray" points="759.63,-229.92 756.13,-219.92 752.63,-229.92 759.63,-229.92"/>
+<text xml:space="preserve" text-anchor="middle" x="813.5" y="-239.2" font-family="Times,serif" font-size="14.00">Check CSS overflow</text>
+</g>
+<!-- parentHasDisplayNone -->
+<g id="node64" class="node">
+<title>parentHasDisplayNone</title>
+<polygon fill="lightblue" stroke="black" points="2132.12,-627 1990.12,-627 1990.12,-591 2132.12,-591 2132.12,-627"/>
+<text xml:space="preserve" text-anchor="middle" x="2061.12" y="-603.95" font-family="Times,serif" font-size="14.00">parentHasDisplayNone</text>
+</g>
+<!-- parentWalk2 -->
+<g id="node65" class="node">
+<title>parentWalk2</title>
+<polygon fill="lightblue" stroke="black" points="2104,-511 2018.25,-511 2018.25,-475 2104,-475 2104,-511"/>
+<text xml:space="preserve" text-anchor="middle" x="2061.12" y="-487.95" font-family="Times,serif" font-size="14.00">parentWalk2</text>
+</g>
+<!-- parentHasDisplayNone&#45;&gt;parentWalk2 -->
+<g id="edge62" class="edge">
+<title>parentHasDisplayNone&#45;&gt;parentWalk2</title>
+<path fill="none" stroke="gray" d="M2061.12,-590.69C2061.12,-572.69 2061.12,-544.22 2061.12,-522.82"/>
+<polygon fill="gray" stroke="gray" points="2064.63,-522.99 2061.13,-512.99 2057.63,-522.99 2064.63,-522.99"/>
+<text xml:space="preserve" text-anchor="middle" x="2105.75" y="-557.2" font-family="Times,serif" font-size="14.00">Walk up parents</text>
+</g>
+<!-- parentHasVisibilityHidden -->
+<g id="node66" class="node">
+<title>parentHasVisibilityHidden</title>
+<polygon fill="lightblue" stroke="black" points="2311.88,-627 2150.38,-627 2150.38,-591 2311.88,-591 2311.88,-627"/>
+<text xml:space="preserve" text-anchor="middle" x="2231.12" y="-603.95" font-family="Times,serif" font-size="14.00">parentHasVisibilityHidden</text>
+</g>
+<!-- parentWalk3 -->
+<g id="node67" class="node">
+<title>parentWalk3</title>
+<polygon fill="lightblue" stroke="black" points="2274,-511 2188.25,-511 2188.25,-475 2274,-475 2274,-511"/>
+<text xml:space="preserve" text-anchor="middle" x="2231.12" y="-487.95" font-family="Times,serif" font-size="14.00">parentWalk3</text>
+</g>
+<!-- parentHasVisibilityHidden&#45;&gt;parentWalk3 -->
+<g id="edge63" class="edge">
+<title>parentHasVisibilityHidden&#45;&gt;parentWalk3</title>
+<path fill="none" stroke="gray" d="M2231.12,-590.69C2231.12,-572.69 2231.12,-544.22 2231.12,-522.82"/>
+<polygon fill="gray" stroke="gray" points="2234.63,-522.99 2231.13,-512.99 2227.63,-522.99 2234.63,-522.99"/>
+<text xml:space="preserve" text-anchor="middle" x="2275.75" y="-557.2" font-family="Times,serif" font-size="14.00">Walk up parents</text>
+</g>
+<!-- parentHasVisibilityCollapse -->
+<g id="node68" class="node">
+<title>parentHasVisibilityCollapse</title>
+<polygon fill="lightblue" stroke="black" points="1581.62,-627 1412.62,-627 1412.62,-591 1581.62,-591 1581.62,-627"/>
+<text xml:space="preserve" text-anchor="middle" x="1497.12" y="-603.95" font-family="Times,serif" font-size="14.00">parentHasVisibilityCollapse</text>
+</g>
+<!-- parentWalk4 -->
+<g id="node69" class="node">
+<title>parentWalk4</title>
+<polygon fill="lightblue" stroke="black" points="1540,-511 1454.25,-511 1454.25,-475 1540,-475 1540,-511"/>
+<text xml:space="preserve" text-anchor="middle" x="1497.12" y="-487.95" font-family="Times,serif" font-size="14.00">parentWalk4</text>
+</g>
+<!-- parentHasVisibilityCollapse&#45;&gt;parentWalk4 -->
+<g id="edge64" class="edge">
+<title>parentHasVisibilityCollapse&#45;&gt;parentWalk4</title>
+<path fill="none" stroke="gray" d="M1497.12,-590.69C1497.12,-572.69 1497.12,-544.22 1497.12,-522.82"/>
+<polygon fill="gray" stroke="gray" points="1500.63,-522.99 1497.13,-512.99 1493.63,-522.99 1500.63,-522.99"/>
+<text xml:space="preserve" text-anchor="middle" x="1541.75" y="-557.2" font-family="Times,serif" font-size="14.00">Walk up parents</text>
+</g>
+<!-- parentHasOpacityZero -->
+<g id="node70" class="node">
+<title>parentHasOpacityZero</title>
+<polygon fill="lightblue" stroke="black" points="1738.62,-627 1599.62,-627 1599.62,-591 1738.62,-591 1738.62,-627"/>
+<text xml:space="preserve" text-anchor="middle" x="1669.12" y="-603.95" font-family="Times,serif" font-size="14.00">parentHasOpacityZero</text>
+</g>
+<!-- parentWalk5 -->
+<g id="node71" class="node">
+<title>parentWalk5</title>
+<polygon fill="lightblue" stroke="black" points="1712,-511 1626.25,-511 1626.25,-475 1712,-475 1712,-511"/>
+<text xml:space="preserve" text-anchor="middle" x="1669.12" y="-487.95" font-family="Times,serif" font-size="14.00">parentWalk5</text>
+</g>
+<!-- parentHasOpacityZero&#45;&gt;parentWalk5 -->
+<g id="edge65" class="edge">
+<title>parentHasOpacityZero&#45;&gt;parentWalk5</title>
+<path fill="none" stroke="gray" d="M1669.12,-590.69C1669.12,-572.69 1669.12,-544.22 1669.12,-522.82"/>
+<polygon fill="gray" stroke="gray" points="1672.63,-522.99 1669.13,-512.99 1665.63,-522.99 1672.63,-522.99"/>
+<text xml:space="preserve" text-anchor="middle" x="1713.75" y="-557.2" font-family="Times,serif" font-size="14.00">Walk up parents</text>
+</g>
+<!-- elHasPositionStatic -->
+<g id="node73" class="node">
+<title>elHasPositionStatic</title>
+<polygon fill="lightblue" stroke="black" points="3277,-309 3155.25,-309 3155.25,-273 3277,-273 3277,-309"/>
+<text xml:space="preserve" text-anchor="middle" x="3216.12" y="-285.95" font-family="Times,serif" font-size="14.00">elHasPositionStatic</text>
+</g>
+<!-- cssPosition2 -->
+<g id="node74" class="node">
+<title>cssPosition2</title>
+<polygon fill="lightblue" stroke="black" points="2826.88,-218 2743.38,-218 2743.38,-182 2826.88,-182 2826.88,-218"/>
+<text xml:space="preserve" text-anchor="middle" x="2785.12" y="-194.95" font-family="Times,serif" font-size="14.00">cssPosition2</text>
+</g>
+<!-- elHasPositionStatic&#45;&gt;cssPosition2 -->
+<g id="edge67" class="edge">
+<title>elHasPositionStatic&#45;&gt;cssPosition2</title>
+<path fill="none" stroke="gray" d="M3171.34,-272.55C3163.04,-269.74 3154.39,-267.07 3146.12,-265 3012.44,-231.5 2970.44,-252.01 2838.08,-219.66"/>
+<polygon fill="gray" stroke="gray" points="2839.15,-216.32 2828.6,-217.28 2837.45,-223.11 2839.15,-216.32"/>
+<text xml:space="preserve" text-anchor="middle" x="3141.61" y="-239.2" font-family="Times,serif" font-size="14.00">Check CSS position</text>
+</g>
+<!-- elHasDisplayInline -->
+<g id="node77" class="node">
+<title>elHasDisplayInline</title>
+<polygon fill="lightblue" stroke="black" points="1678.25,-930 1558,-930 1558,-894 1678.25,-894 1678.25,-930"/>
+<text xml:space="preserve" text-anchor="middle" x="1618.12" y="-906.95" font-family="Times,serif" font-size="14.00">elHasDisplayInline</text>
+</g>
+<!-- cssDisplay3 -->
+<g id="node78" class="node">
+<title>cssDisplay3</title>
+<polygon fill="lightblue" stroke="black" points="1658.75,-836.5 1577.5,-836.5 1577.5,-800.5 1658.75,-800.5 1658.75,-836.5"/>
+<text xml:space="preserve" text-anchor="middle" x="1618.12" y="-813.45" font-family="Times,serif" font-size="14.00">cssDisplay3</text>
+</g>
+<!-- elHasDisplayInline&#45;&gt;cssDisplay3 -->
+<g id="edge70" class="edge">
+<title>elHasDisplayInline&#45;&gt;cssDisplay3</title>
+<path fill="none" stroke="gray" d="M1618.12,-893.79C1618.12,-880.96 1618.12,-863.15 1618.12,-848.19"/>
+<polygon fill="gray" stroke="gray" points="1621.63,-848.46 1618.13,-838.46 1614.63,-848.46 1621.63,-848.46"/>
+<text xml:space="preserve" text-anchor="middle" x="1670.62" y="-860.2" font-family="Times,serif" font-size="14.00">Check CSS display</text>
+</g>
+<!-- getBoundingClientRect3 -->
+<g id="node81" class="node">
+<title>getBoundingClientRect3</title>
+<polygon fill="lightblue" stroke="black" points="1186.25,-218 1036,-218 1036,-182 1186.25,-182 1186.25,-218"/>
+<text xml:space="preserve" text-anchor="middle" x="1111.12" y="-194.95" font-family="Times,serif" font-size="14.00">getBoundingClientRect3</text>
+</g>
+<!-- elementBoundingRect&#45;&gt;getBoundingClientRect3 -->
+<g id="edge73" class="edge">
+<title>elementBoundingRect&#45;&gt;getBoundingClientRect3</title>
+<path fill="none" stroke="gray" d="M1111.12,-272.84C1111.12,-260.61 1111.12,-243.87 1111.12,-229.63"/>
+<polygon fill="gray" stroke="gray" points="1114.63,-229.92 1111.13,-219.92 1107.63,-229.92 1114.63,-229.92"/>
+<text xml:space="preserve" text-anchor="middle" x="1192.5" y="-239.2" font-family="Times,serif" font-size="14.00">Call getBoundingClientRect()</text>
+</g>
+<!-- getBoundingClientRect4 -->
+<g id="node82" class="node">
+<title>getBoundingClientRect4</title>
+<polygon fill="lightblue" stroke="black" points="990.25,-218 840,-218 840,-182 990.25,-182 990.25,-218"/>
+<text xml:space="preserve" text-anchor="middle" x="915.12" y="-194.95" font-family="Times,serif" font-size="14.00">getBoundingClientRect4</text>
+</g>
+<!-- elementBoundingRect2&#45;&gt;getBoundingClientRect4 -->
+<g id="edge74" class="edge">
+<title>elementBoundingRect2&#45;&gt;getBoundingClientRect4</title>
+<path fill="none" stroke="gray" d="M915.12,-272.84C915.12,-260.61 915.12,-243.87 915.12,-229.63"/>
+<polygon fill="gray" stroke="gray" points="918.63,-229.92 915.13,-219.92 911.63,-229.92 918.63,-229.92"/>
+<text xml:space="preserve" text-anchor="middle" x="996.5" y="-239.2" font-family="Times,serif" font-size="14.00">Call getBoundingClientRect()</text>
+</g>
+<!-- OVERFLOW_PROPS -->
+<g id="node85" class="node">
+<title>OVERFLOW_PROPS</title>
+<polygon fill="lightyellow" stroke="black" points="1872,-932.5 1696.25,-932.5 1696.25,-891.5 1872,-891.5 1872,-932.5"/>
+<text xml:space="preserve" text-anchor="middle" x="1784.12" y="-915.2" font-family="Times,serif" font-size="14.00">OVERFLOW_PROPS</text>
+<text xml:space="preserve" text-anchor="middle" x="1784.12" y="-898.7" font-family="Times,serif" font-size="14.00">[&#39;hidden&#39;, &#39;clip&#39;, &#39;scroll&#39;, &#39;auto&#39;]</text>
+</g>
+</g>
+</svg>

From 3be1d3794c7f22baf7ba4d8d043028333cda2e6d Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Mon, 20 Oct 2025 12:39:14 -0400
Subject: [PATCH 11/35] revert splitting - these fns are too interconnected to
 split without resolving circular dependencies

---
 packages/driver/src/dom/visibility.ts         | 625 +++++++++++++++++-
 .../src/dom/visibility/geReasonIsHidden.ts    | 174 -----
 .../driver/src/dom/visibility/isVisible.ts    | 530 ---------------
 3 files changed, 623 insertions(+), 706 deletions(-)
 delete mode 100644 packages/driver/src/dom/visibility/geReasonIsHidden.ts
 delete mode 100644 packages/driver/src/dom/visibility/isVisible.ts

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 3038ab74b03..abbf8476259 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -1,5 +1,626 @@
-import { isW3CFocusable, isW3CRendered, isHidden, isStrictlyHidden, isHiddenByAncestors, isVisible } from './visibility/isVisible'
-import { getReasonIsHidden } from './visibility/geReasonIsHidden'
+import _ from 'lodash'
+import $jquery from './jquery'
+import $document from './document'
+import $elements from './elements'
+import $coordinates from './coordinates'
+import * as $transform from './transform'
+
+const { isElement, isBody, isHTML, isOption, isOptgroup, getParent, getFirstParentWithTagName, isAncestor, isChild, getAllParents, isDescendent, isUndefinedOrHTMLBodyDoc, elOrAncestorIsFixedOrSticky, isDetached, isFocusable, stringify: stringifyElement } = $elements
+
+const fixedOrAbsoluteRe = /(fixed|absolute)/
+
+const OVERFLOW_PROPS = ['hidden', 'clip', 'scroll', 'auto']
+
+const isVisible = (el) => {
+  return !isHidden(el, 'isVisible()')
+}
+
+const { wrap } = $jquery
+
+// TODO: we should prob update dom
+// to be passed in $utils as a dependency
+// because of circular references
+// the ignoreOpacity option exists for checking actionability
+// as elements with `opacity: 0` are hidden yet actionable
+const isHidden = (el, methodName = 'isHidden()', options = { checkOpacity: true }) => {
+  if (isStrictlyHidden(el, methodName, options, isHidden)) {
+    return true
+  }
+
+  return isHiddenByAncestors(el, methodName, options)
+}
+
+const ensureEl = (el, methodName) => {
+  if (!isElement(el)) {
+    throw new Error(`\`Cypress.dom.${methodName}\` failed because it requires a DOM element. The subject received was: \`${el}\``)
+  }
+}
+
+const getFirstSelectParentFromEl = ($el: JQuery) => {
+  const $select = getFirstParentWithTagName($el, 'select')
+
+  // check $select.length here first
+  // they may have not put the option into a select el
+  if ($select?.length) {
+    return $select
+  }
+
+  return null
+}
+
+const isStrictlyHidden = (el: HTMLElement, methodName = 'isStrictlyHidden()', options = { checkOpacity: true }, recurse?) => {
+  ensureEl(el, methodName)
+  const $el = $jquery.wrap(el)
+
+  // the body and html are always visible
+  if (isBody(el) || isHTML(el)) {
+    return false // is visible
+  }
+
+  // an option is considered visible if its parent select is visible
+  if (isOption(el) || isOptgroup(el)) {
+    // they could have just set to hide the option
+    if (elHasDisplayNone($el)) {
+      return true
+    }
+
+    // if its parent select is visible, then it's not hidden
+    const $select = getFirstSelectParentFromEl($el)
+
+    if ($select) {
+      return recurse ? recurse($select[0], methodName, options) : isStrictlyHidden($select[0], methodName, options)
+    }
+  }
+
+  // in Cypress-land we consider the element hidden if
+  // either its clientHeight or clientWidth is 0 because
+  // it is impossible for the user to interact with this element
+  if (elHasNoEffectiveWidthOrHeight($el)) {
+    // https://github.com/cypress-io/cypress/issues/6183
+    if (elHasDisplayInline($el)) {
+      return !elHasVisibleChild($el)
+    }
+
+    return true // is hidden
+  }
+
+  // additionally if the effective visibility of the element
+  // is hidden (which includes any parent nodes) then the user
+  // cannot interact with this element and thus it is hidden
+  if (elHasVisibilityHiddenOrCollapse($el)) {
+    return true // is hidden
+  }
+
+  // when an element is scaled to 0 in one axis
+  // it is not visible to users.
+  // So, it is hidden.
+  if ($transform.detectVisibility($el) !== 'visible') {
+    return true
+  }
+
+  // a transparent element is hidden
+  if (elHasOpacityZero($el) && options.checkOpacity) {
+    return true
+  }
+
+  return false
+}
+
+const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options = { checkOpacity: true }) => {
+  ensureEl(el, methodName)
+  const $el = $jquery.wrap(el)
+
+  // an option is considered hidden by ancestors if its parent select is hidden
+  if (isOption(el) || isOptgroup(el)) {
+    const $select = getFirstSelectParentFromEl($el)
+
+    if ($select) {
+      return isHiddenByAncestors($select[0], methodName, options)
+    }
+  }
+
+  // we do some calculations taking into account the parents
+  // to see if its hidden by a parent
+  if (elIsHiddenByAncestors($el, options.checkOpacity)) {
+    return true // is hidden
+  }
+
+  if (elOrAncestorIsFixedOrSticky($el)) {
+    return elIsNotElementFromPoint($el)
+  }
+
+  // else check if el is outside the bounds
+  // of its ancestors overflow
+  return elIsOutOfBoundsOfAncestorsOverflow($el)
+}
+
+const elHasNoEffectiveWidthOrHeight = ($el: JQuery) => {
+  // Is the element's CSS width OR height, including any borders,
+  // padding, and vertical scrollbars (if rendered) less than 0?
+  //
+  // elClientWidth:
+  // If the element is hidden (for example, by setting style.display
+  // on the element or one of its ancestors to "none"), then 0 is returned.
+
+  // $el[0].getClientRects().length:
+  // For HTML <area> elements, SVG elements that do not render anything themselves,
+  // display:none elements, and generally any elements that are not directly rendered,
+  // an empty list is returned.
+  const el = $el[0]
+
+  const style = getComputedStyle(el)
+  let transform = style.getPropertyValue('transform')
+
+  if (!transform.length) {
+    transform = 'none'
+  }
+
+  const hasTextContent = !!el.textContent?.trim().length
+
+  const width = elClientWidth($el)
+  const height = elClientHeight($el)
+
+  return (isZeroLengthAndTransformNone(width, height, transform) && !hasTextContent) ||
+  isZeroLengthAndOverflowHidden(width, height, elHasOverflowHidden($el)) ||
+  (el.getClientRects().length <= 0)
+}
+
+const isZeroLengthAndTransformNone = (width, height, transform) => {
+  // From https://github.com/cypress-io/cypress/issues/5974,
+  // we learned that when an element has non-'none' transform style value like "translate(0, 0)",
+  // it is visible even with `height: 0` or `width: 0`.
+  // That's why we're checking `transform === 'none'` together with elClientWidth/Height.
+  return (width <= 0 && transform === 'none') || (height <= 0 && transform === 'none')
+}
+
+const isZeroLengthAndOverflowHidden = (width, height, overflowHidden) => {
+  return (width <= 0 && overflowHidden) || (height <= 0 && overflowHidden)
+}
+
+const elHasNoClientWidthOrHeight = ($el) => {
+  return (elClientWidth($el) <= 0) || (elClientHeight($el) <= 0)
+}
+
+const elementBoundingRect = ($el: JQuery) => $el[0].getBoundingClientRect()
+
+const elClientHeight = ($el) => elementBoundingRect($el).height
+
+const elClientWidth = ($el) => elementBoundingRect($el).width
+
+const elHasVisibilityHiddenOrCollapse = ($el) => {
+  return elHasVisibilityHidden($el) || elHasVisibilityCollapse($el)
+}
+
+const elHasVisibilityHidden = ($el) => {
+  return $el.css('visibility') === 'hidden'
+}
+
+const elHasVisibilityCollapse = ($el) => {
+  return $el.css('visibility') === 'collapse'
+}
+
+const elHasOpacityZero = ($el) => {
+  return $el.css('opacity') === '0'
+}
+
+const elHasDisplayContents = ($el) => {
+  return $el.css('display') === 'contents'
+}
+
+const elHasDisplayNone = ($el) => {
+  return $el.css('display') === 'none'
+}
+
+const elHasDisplayInline = ($el) => {
+  return $el.css('display') === 'inline'
+}
+
+const elHasOverflowHidden = function ($el) {
+  const cssOverflow = [$el.css('overflow'), $el.css('overflow-y'), $el.css('overflow-x')]
+
+  return cssOverflow.includes('hidden')
+}
+
+const elHasPositionRelative = ($el: JQuery<HTMLElement>) => {
+  return $el.css('position') === 'relative'
+}
+
+const elHasPositionStatic = ($el: JQuery<HTMLElement>) => {
+  return $el.css('position') == null || $el.css('position') === 'static'
+}
+
+const elHasPositionAbsolute = ($el: JQuery<HTMLElement>) => {
+  return $el.css('position') === 'absolute'
+}
+
+const elHasClippableOverflow = function ($el) {
+  return OVERFLOW_PROPS.includes($el.css('overflow')) ||
+          OVERFLOW_PROPS.includes($el.css('overflow-y')) ||
+            OVERFLOW_PROPS.includes($el.css('overflow-x'))
+}
+
+const canClipContent = function ($el: JQuery<HTMLElement>, $ancestor: JQuery<HTMLElement>) {
+  // can't clip without overflow properties
+  if (!elHasClippableOverflow($ancestor)) {
+    return false
+  }
+
+  if (elHasDisplayContents($ancestor)) {
+    return false
+  }
+
+  // the closest parent with position relative, absolute, or fixed
+  const $offsetParent = $el.offsetParent()
+
+  // even if ancestors' overflow is clippable, if the element's offset parent
+  // is a parent of the ancestor, the ancestor will not clip the element
+  // unless the element is position relative
+  if (!elHasPositionRelative($el) && isAncestor($ancestor, $offsetParent)) {
+    return false
+  }
+
+  // even if ancestors' overflow is clippable, if the element's offset parent
+  // is a child of the ancestor, the ancestor will not clip the element
+  // unless the ancestor has a position that is not absolute
+  if (elHasPositionAbsolute($offsetParent) && isChild($ancestor, $offsetParent)) {
+    return false
+  }
+
+  // even if ancestors' overflow is clippable,
+  // if the element is position static or relative,
+  // and the element's offset parent is positioned absolute, a descendent of the ancestor, has no clippable overflow, and
+  // the offsetParent's offset parent is not descendent of the ancestor,
+  // then the ancestor will not clip the element
+  const $offsetParentOffsetParent = $offsetParent.offsetParent()
+
+  if ((elHasPositionStatic($el) || elHasPositionRelative($el))
+    && elHasPositionAbsolute($offsetParent) && isDescendent($ancestor, $offsetParent)
+    && !elHasClippableOverflow($offsetParent) && !isDescendent($ancestor, $offsetParentOffsetParent)
+  ) {
+    return false
+  }
+
+  return true
+}
+
+export const isW3CRendered = (el) => {
+  // @see https://html.spec.whatwg.org/multipage/rendering.html#being-rendered
+  return !(parentHasDisplayNone(wrap(el)) || wrap(el).css('visibility') === 'hidden')
+}
+
+export const isW3CFocusable = (el) => {
+  // @see https://html.spec.whatwg.org/multipage/interaction.html#focusable-area
+  return isFocusable(wrap(el)) && isW3CRendered(el)
+}
+
+const elAtCenterPoint = function ($el: JQuery<HTMLElement>) {
+  const doc = $document.getDocumentFromElement($el.get(0))
+  const elProps = $coordinates.getElementPositioning($el)
+
+  const { topCenter, leftCenter } = elProps.fromElViewport
+
+  const el = $coordinates.getElementAtPointFromViewport(doc, leftCenter, topCenter)
+
+  if (el) {
+    return $jquery.wrap(el)
+  }
+
+  return undefined
+}
+
+const elDescendentsHavePositionFixedOrAbsolute = function ($parent, $child) {
+  // create an array of all elements between $parent and $child
+  // including child but excluding parent
+  // and check if these have position fixed|absolute
+  const parents = getAllParents($child[0], $parent)
+  const $els = $jquery.wrap(parents).add($child)
+
+  return _.some($els.get(), (el) => {
+    return fixedOrAbsoluteRe.test($jquery.wrap(el).css('position'))
+  })
+}
+
+const elHasVisibleChild = function ($el) {
+  return _.some($el.children(), (el) => {
+    return isVisible(el)
+  })
+}
+
+const elIsNotElementFromPoint = function ($el: JQuery<HTMLElement>) {
+  // if we have a fixed position element that means
+  // it is fixed 'relative' to the viewport which means
+  // it MUST be available with elementFromPoint because
+  // that is also relative to the viewport
+  const $elAtPoint = elAtCenterPoint($el)
+
+  // if the element at point is not a descendent
+  // of our $el then we know it's being covered or its
+  // not visible
+  if (isDescendent($el, $elAtPoint)) {
+    return false
+  }
+
+  // we also check if the element at point is a
+  // parent since pointer-events: none
+  // will cause elAtCenterPoint to fall through to parent
+  if (
+    ($el.css('pointer-events') === 'none' || $el.parent().css('pointer-events') === 'none') &&
+    ($elAtPoint && isAncestor($el, $elAtPoint))
+  ) {
+    return false
+  }
+
+  return true
+}
+
+const elIsOutOfBoundsOfAncestorsOverflow = function ($el: JQuery<any>, $ancestor = getParent($el)) {
+  // no ancestor, not out of bounds!
+  // if we've reached the top parent, which is not a normal DOM el
+  // then we're in bounds all the way up, return false
+  if (isUndefinedOrHTMLBodyDoc($ancestor)) {
+    return false
+  }
+
+  if (elHasDisplayContents($el)) {
+    return false
+  }
+
+  if (canClipContent($el, $ancestor)) {
+    const ancestorProps = $ancestor.get(0).getBoundingClientRect()
+
+    if (elHasPositionAbsolute($el) && (ancestorProps.width === 0 || ancestorProps.height === 0)) {
+      return elIsOutOfBoundsOfAncestorsOverflow($el, getParent($ancestor))
+    }
+
+    const elProps = $el.get(0).getBoundingClientRect()
+
+    // only check if the target el is out of bounds if the overflow is clippable in that direction
+    const checkXOverflow = OVERFLOW_PROPS.includes($ancestor.css('overflow-x'))
+    const checkYOverflow = OVERFLOW_PROPS.includes($ancestor.css('overflow-y'))
+
+    // target el is out of bounds
+    if (
+      // target el is to the right of the ancestor's visible area
+      (checkXOverflow && (elProps.left >= (ancestorProps.width + ancestorProps.left))) ||
+
+      // target el is to the left of the ancestor's visible area
+      (checkXOverflow && ((elProps.left + elProps.width) <= ancestorProps.left)) ||
+
+      // target el is under the ancestor's visible area
+      (checkYOverflow && (elProps.top >= (ancestorProps.height + ancestorProps.top))) ||
+
+      // target el is above the ancestor's visible area
+      (checkYOverflow && ((elProps.top + elProps.height) <= ancestorProps.top))
+    ) {
+      return true
+    }
+  }
+
+  return elIsOutOfBoundsOfAncestorsOverflow($el, getParent($ancestor))
+}
+
+const elIsHiddenByAncestors = function ($el, checkOpacity, $origEl = $el) {
+  // walk up to each parent until we reach the body
+  // if any parent has opacity: 0
+  // or has an effective clientHeight of 0
+  // and its set overflow: hidden then our child element
+  // is effectively hidden
+  // -----UNLESS------
+  // the parent or a descendent has position: absolute|fixed
+  const $parent = getParent($el)
+
+  // stop if we've reached the body or html
+  // in case there is no body
+  // or if parent is the document which can
+  // happen if we already have an <html> element
+  if (isUndefinedOrHTMLBodyDoc($parent)) {
+    return false
+  }
+
+  if (elHasDisplayContents($el)) {
+    let $parent = getParent($el)
+
+    return elIsHiddenByAncestors($parent, checkOpacity, $parent)
+  }
+
+  // a child can never have a computed opacity
+  // greater than that of its parent
+  // so if the parent has an opacity of 0, so does the child
+  if (elHasOpacityZero($parent) && checkOpacity) {
+    return true
+  }
+
+  if (elHasOverflowHidden($parent) && !elHasDisplayContents($parent) && elHasNoEffectiveWidthOrHeight($parent)) {
+    // if any of the elements between the parent and origEl have fixed or position absolute
+    return !elDescendentsHavePositionFixedOrAbsolute($parent, $origEl)
+  }
+
+  // continue to recursively walk up the chain until we reach body or html
+  return elIsHiddenByAncestors($parent, checkOpacity, $origEl)
+}
+
+const parentHasNoClientWidthOrHeightAndOverflowHidden = function ($el: JQuery<HTMLElement>) {
+  // if we've walked all the way up to body or html then return false
+  if (isUndefinedOrHTMLBodyDoc($el)) {
+    return false
+  }
+
+  // if we have overflow hidden and no effective width or height
+  if (elHasOverflowHidden($el) && elHasNoEffectiveWidthOrHeight($el)) {
+    return $el
+  }
+
+  // continue walking
+  return parentHasNoClientWidthOrHeightAndOverflowHidden(getParent($el))
+}
+
+const parentHasDisplayNone = function ($el) {
+  // if we have no $el or we've walked all the way up to document
+  // then return false
+  if (!$el.length || $document.isDocument($el)) {
+    return false
+  }
+
+  // if we have display none then return the $el
+  if (elHasDisplayNone($el)) {
+    return $el
+  }
+
+  // continue walking
+  return parentHasDisplayNone(getParent($el))
+}
+
+const parentHasVisibilityHidden = function ($el) {
+  // if we've walked all the way up to document then return false
+  if (!$el.length || $document.isDocument($el)) {
+    return false
+  }
+
+  // if we have display none then return the $el
+  if (elHasVisibilityHidden($el)) {
+    return $el
+  }
+
+  // continue walking
+  return parentHasVisibilityHidden(getParent($el))
+}
+
+const parentHasVisibilityCollapse = function ($el) {
+  // if we've walked all the way up to document then return false
+  if (!$el.length || $document.isDocument($el)) {
+    return false
+  }
+
+  // if we have display none then return the $el
+  if (elHasVisibilityCollapse($el)) {
+    return $el
+  }
+
+  // continue walking
+  return parentHasVisibilityCollapse(getParent($el))
+}
+
+const parentHasOpacityZero = function ($el) {
+  // if we've walked all the way up to document then return false
+  if (!$el.length || $document.isDocument($el)) {
+    return false
+  }
+
+  // if we have opacity: 0 then return the $el
+  if (elHasOpacityZero($el)) {
+    return $el
+  }
+
+  // continue walking
+  return parentHasOpacityZero($el.parent())
+}
+
+/* eslint-disable no-cond-assign */
+export const getReasonIsHidden = function ($el, options = { checkOpacity: true }) {
+  // TODO: need to add in the reason an element
+  // is hidden when its fixed position and its
+  // either being covered or there is no el
+
+  const node = stringifyElement($el, 'short')
+  let width = elClientWidth($el)
+  let height = elClientHeight($el)
+  let $parent
+  let parentNode
+  let $select
+
+  // if the element is an option or optgroup then we need to get the
+  // select so it can be used when determining the hidden reason
+  if (isOption($el[0]) || isOptgroup($el[0])) {
+    $select = getFirstSelectParentFromEl($el)
+  }
+
+  // returns the reason in human terms why an element is considered not visible
+  if (elHasDisplayNone($el)) {
+    return `This element \`${node}\` is not visible because it has CSS property: \`display: none\``
+  }
+
+  if ($parent = parentHasDisplayNone(getParent($el))) {
+    parentNode = stringifyElement($parent, 'short')
+
+    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`display: none\``
+  }
+
+  if ($parent = parentHasVisibilityHidden(getParent($el))) {
+    parentNode = stringifyElement($parent, 'short')
+
+    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`visibility: hidden\``
+  }
+
+  if ($parent = parentHasVisibilityCollapse(getParent($el))) {
+    parentNode = stringifyElement($parent, 'short')
+
+    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`visibility: collapse\``
+  }
+
+  if (isDetached($el)) {
+    return `This element \`${node}\` is not visible because it is detached from the DOM`
+  }
+
+  if (elHasVisibilityHidden($el)) {
+    return `This element \`${node}\` is not visible because it has CSS property: \`visibility: hidden\``
+  }
+
+  if (elHasVisibilityCollapse($el)) {
+    return `This element \`${node}\` is not visible because it has CSS property: \`visibility: collapse\``
+  }
+
+  if (elHasOpacityZero($el) && options.checkOpacity) {
+    return `This element \`${node}\` is not visible because it has CSS property: \`opacity: 0\``
+  }
+
+  if (($parent = parentHasOpacityZero($el.parent())) && options.checkOpacity) {
+    parentNode = stringifyElement($parent, 'short')
+
+    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`opacity: 0\``
+  }
+
+  const transformResult = $transform.detectVisibility($el)
+
+  if (transformResult === 'transformed') {
+    return `This element \`${node}\` is not visible because it is hidden by transform.`
+  }
+
+  if (elHasNoClientWidthOrHeight($select || $el)) {
+    return `This element \`${node}\` is not visible because it has an effective width and height of: \`${width} x ${height}\` pixels.`
+  }
+
+  if (transformResult === 'backface') {
+    return `This element \`${node}\` is not visible because it is rotated and its backface is hidden.`
+  }
+
+  if ($parent = parentHasNoClientWidthOrHeightAndOverflowHidden(getParent($el))) {
+    parentNode = stringifyElement($parent, 'short')
+    let width = elClientWidth($parent)
+    let height = elClientHeight($parent)
+
+    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`overflow: hidden\` and an effective width and height of: \`${width} x ${height}\` pixels.`
+  }
+
+  if (elOrAncestorIsFixedOrSticky($el)) {
+    if (elIsNotElementFromPoint($el)) {
+      // show the long element here
+      const covered = stringifyElement(elAtCenterPoint($el))
+
+      if (covered) {
+        return `This element \`${node}\` is not visible because it has CSS property: \`position: fixed\` and it's being covered by another element:\n\n\`${covered}\``
+      }
+
+      return `This element \`${node}\` is not visible because its ancestor has \`position: fixed\` CSS property and it is overflowed by other elements. How about scrolling to the element with \`cy.scrollIntoView()\`?`
+    }
+  } else {
+    if (elIsOutOfBoundsOfAncestorsOverflow($el)) {
+      return `This element \`${node}\` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: \`hidden\`, \`clip\`, \`scroll\` or \`auto\``
+    }
+  }
+
+  return `This element \`${node}\` is not visible.`
+}
+/* eslint-enable no-cond-assign */
 
 export default {
   isVisible,
diff --git a/packages/driver/src/dom/visibility/geReasonIsHidden.ts b/packages/driver/src/dom/visibility/geReasonIsHidden.ts
deleted file mode 100644
index 9dedb656487..00000000000
--- a/packages/driver/src/dom/visibility/geReasonIsHidden.ts
+++ /dev/null
@@ -1,174 +0,0 @@
-import { elHasOverflowHidden, elHasNoEffectiveWidthOrHeight, elHasOpacityZero, elAtCenterPoint, elIsOutOfBoundsOfAncestorsOverflow, elIsNotElementFromPoint, elClientHeight, elClientWidth, elHasVisibilityCollapse, elHasVisibilityHidden, getFirstSelectParentFromEl, elHasDisplayNone, parentHasDisplayNone } from './isVisible'
-import $elements from '../elements'
-import * as $transform from '../transform'
-import $document from '../document'
-
-const { isUndefinedOrHTMLBodyDoc, isOptgroup, isOption, stringify, getParent, isDetached, elOrAncestorIsFixedOrSticky } = $elements
-
-/* eslint-disable no-cond-assign */
-export const getReasonIsHidden = function ($el, options = { checkOpacity: true }) {
-  // TODO: need to add in the reason an element
-  // is hidden when its fixed position and its
-  // either being covered or there is no el
-
-  const node = stringify($el, 'short')
-  let width = elClientWidth($el)
-  let height = elClientHeight($el)
-  let $parent
-  let parentNode
-  let $select
-
-  // if the element is an option or optgroup then we need to get the
-  // select so it can be used when determining the hidden reason
-  if (isOption($el[0]) || isOptgroup($el[0])) {
-    $select = getFirstSelectParentFromEl($el)
-  }
-
-  // returns the reason in human terms why an element is considered not visible
-  if (elHasDisplayNone($el)) {
-    return `This element \`${node}\` is not visible because it has CSS property: \`display: none\``
-  }
-
-  if ($parent = parentHasDisplayNone(getParent($el))) {
-    parentNode = stringify($parent, 'short')
-
-    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`display: none\``
-  }
-
-  if ($parent = parentHasVisibilityHidden(getParent($el))) {
-    parentNode = stringify($parent, 'short')
-
-    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`visibility: hidden\``
-  }
-
-  if ($parent = parentHasVisibilityCollapse(getParent($el))) {
-    parentNode = stringify($parent, 'short')
-
-    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`visibility: collapse\``
-  }
-
-  if (isDetached($el)) {
-    return `This element \`${node}\` is not visible because it is detached from the DOM`
-  }
-
-  if (elHasVisibilityHidden($el)) {
-    return `This element \`${node}\` is not visible because it has CSS property: \`visibility: hidden\``
-  }
-
-  if (elHasVisibilityCollapse($el)) {
-    return `This element \`${node}\` is not visible because it has CSS property: \`visibility: collapse\``
-  }
-
-  if (elHasOpacityZero($el) && options.checkOpacity) {
-    return `This element \`${node}\` is not visible because it has CSS property: \`opacity: 0\``
-  }
-
-  if (($parent = parentHasOpacityZero($el.parent())) && options.checkOpacity) {
-    parentNode = stringify($parent, 'short')
-
-    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`opacity: 0\``
-  }
-
-  const transformResult = $transform.detectVisibility($el)
-
-  if (transformResult === 'transformed') {
-    return `This element \`${node}\` is not visible because it is hidden by transform.`
-  }
-
-  if (elHasNoClientWidthOrHeight($select || $el)) {
-    return `This element \`${node}\` is not visible because it has an effective width and height of: \`${width} x ${height}\` pixels.`
-  }
-
-  if (transformResult === 'backface') {
-    return `This element \`${node}\` is not visible because it is rotated and its backface is hidden.`
-  }
-
-  if ($parent = parentHasNoClientWidthOrHeightAndOverflowHidden(getParent($el))) {
-    parentNode = stringify($parent, 'short')
-    let width = elClientWidth($parent)
-    let height = elClientHeight($parent)
-
-    return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`overflow: hidden\` and an effective width and height of: \`${width} x ${height}\` pixels.`
-  }
-
-  if (elOrAncestorIsFixedOrSticky($el)) {
-    if (elIsNotElementFromPoint($el)) {
-      // show the long element here
-      const covered = stringify(elAtCenterPoint($el))
-
-      if (covered) {
-        return `This element \`${node}\` is not visible because it has CSS property: \`position: fixed\` and it's being covered by another element:\n\n\`${covered}\``
-      }
-
-      return `This element \`${node}\` is not visible because its ancestor has \`position: fixed\` CSS property and it is overflowed by other elements. How about scrolling to the element with \`cy.scrollIntoView()\`?`
-    }
-  } else {
-    if (elIsOutOfBoundsOfAncestorsOverflow($el)) {
-      return `This element \`${node}\` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: \`hidden\`, \`clip\`, \`scroll\` or \`auto\``
-    }
-  }
-
-  return `This element \`${node}\` is not visible.`
-}
-
-function parentHasVisibilityHidden ($el) {
-  // if we've walked all the way up to document then return false
-  if (!$el.length || $document.isDocument($el)) {
-    return false
-  }
-
-  // if we have display none then return the $el
-  if (elHasVisibilityHidden($el)) {
-    return $el
-  }
-
-  // continue walking
-  return parentHasVisibilityHidden(getParent($el))
-}
-
-function parentHasVisibilityCollapse ($el) {
-  // if we've walked all the way up to document then return false
-  if (!$el.length || $document.isDocument($el)) {
-    return false
-  }
-
-  // if we have display none then return the $el
-  if (elHasVisibilityCollapse($el)) {
-    return $el
-  }
-
-  // continue walking
-  return parentHasVisibilityCollapse(getParent($el))
-}
-function elHasNoClientWidthOrHeight ($el) {
-  return (elClientWidth($el) <= 0) || (elClientHeight($el) <= 0)
-}
-function parentHasOpacityZero ($el) {
-  // if we've walked all the way up to document then return false
-  if (!$el.length || $document.isDocument($el)) {
-    return false
-  }
-
-  // if we have opacity: 0 then return the $el
-  if (elHasOpacityZero($el)) {
-    return $el
-  }
-
-  // continue walking
-  return parentHasOpacityZero($el.parent())
-}
-
-function parentHasNoClientWidthOrHeightAndOverflowHidden ($el: JQuery<HTMLElement>) {
-  // if we've walked all the way up to body or html then return false
-  if (isUndefinedOrHTMLBodyDoc($el)) {
-    return false
-  }
-
-  // if we have overflow hidden and no effective width or height
-  if (elHasOverflowHidden($el) && elHasNoEffectiveWidthOrHeight($el)) {
-    return $el
-  }
-
-  // continue walking
-  return parentHasNoClientWidthOrHeightAndOverflowHidden(getParent($el))
-}
diff --git a/packages/driver/src/dom/visibility/isVisible.ts b/packages/driver/src/dom/visibility/isVisible.ts
deleted file mode 100644
index 7fb543863c5..00000000000
--- a/packages/driver/src/dom/visibility/isVisible.ts
+++ /dev/null
@@ -1,530 +0,0 @@
-import $jquery from '../jquery'
-import $elements from '../elements'
-import $document from '../document'
-import $coordinates from '../coordinates'
-import * as $transform from '../transform'
-
-const { isElement, isBody, isHTML, isOption, isOptgroup, getParent, getFirstParentWithTagName, isAncestor, isChild, getAllParents, isDescendent, isUndefinedOrHTMLBodyDoc, elOrAncestorIsFixedOrSticky, isFocusable } = $elements
-const { wrap } = $jquery
-
-
-const OVERFLOW_PROPS = ['hidden', 'clip', 'scroll', 'auto']
-
-
-interface VisibilityOptions {
-  checkOpacity: boolean
-}
-
-export function isVisible (el: HTMLElement, methodName = 'isVisible()', options = { checkOpacity: true }): boolean {
-  return !isHidden(el, methodName, options)
-}
-
-// TODO: we should prob update dom
-// to be passed in $utils as a dependency
-// because of circular references
-// the ignoreOpacity option exists for checking actionability
-// as elements with `opacity: 0` are hidden yet actionable
-export function isHidden (el, methodName = 'isHidden()', options = { checkOpacity: true }) {
-  if (isStrictlyHidden(el, methodName, options, isHidden)) {
-    return true
-  }
-
-  return isHiddenByAncestors(el, methodName, options)
-}
-
-export function isStrictlyHidden (el: HTMLElement, methodName = 'isStrictlyHidden()', options = { checkOpacity: true }, recurse?) {
-  ensureEl(el, methodName)
-  const $el = $jquery.wrap(el)
-
-  // the body and html are always visible
-  if (isBody(el) || isHTML(el)) {
-    return false // is visible
-  }
-
-  // an option is considered visible if its parent select is visible
-  if (isOption(el) || isOptgroup(el)) {
-    // they could have just set to hide the option
-    if (elHasDisplayNone($el)) {
-      return true
-    }
-
-    // if its parent select is visible, then it's not hidden
-    const $select = getFirstSelectParentFromEl($el)
-
-    if ($select) {
-      return recurse ? recurse($select[0], methodName, options) : isStrictlyHidden($select[0], methodName, options)
-    }
-  }
-
-  // in Cypress-land we consider the element hidden if
-  // either its clientHeight or clientWidth is 0 because
-  // it is impossible for the user to interact with this element
-  if (elHasNoEffectiveWidthOrHeight($el)) {
-    // https://github.com/cypress-io/cypress/issues/6183
-    if (elHasDisplayInline($el)) {
-      return !elHasVisibleChild($el)
-    }
-
-    return true // is hidden
-  }
-
-  // additionally if the effective visibility of the element
-  // is hidden (which includes any parent nodes) then the user
-  // cannot interact with this element and thus it is hidden
-  if (elHasVisibilityHiddenOrCollapse($el)) {
-    return true // is hidden
-  }
-
-  // when an element is scaled to 0 in one axis
-  // it is not visible to users.
-  // So, it is hidden.
-  if ($transform.detectVisibility($el) !== 'visible') {
-    return true
-  }
-
-  // a transparent element is hidden
-  if (elHasOpacityZero($el) && options.checkOpacity) {
-    return true
-  }
-
-  return false
-}
-
-export function getFirstSelectParentFromEl ($el: JQuery) {
-  const $select = getFirstParentWithTagName($el, 'select')
-
-  // check $select.length here first
-  // they may have not put the option into a select el
-  if ($select?.length) {
-    return $select
-  }
-
-  return null
-}
-
-function ensureEl (el: HTMLElement, methodName: string) {
-  if (!isElement(el)) {
-    throw new Error(`\`Cypress.dom.${methodName}\` failed because it requires a DOM element. The subject received was: \`${el}\``)
-  }
-}
-
-export function elHasDisplayNone ($el) {
-  return $el.css('display') === 'none'
-}
-
-export function isHiddenByAncestors (el: HTMLElement, methodName = 'isHiddenByAncestors()', options: VisibilityOptions = { checkOpacity: true }) {
-  ensureEl(el, methodName)
-  const $el = $jquery.wrap(el)
-
-  // get the parent element
-
-  if (isOption(el) || isOptgroup(el)) {
-    const $select = getFirstSelectParentFromEl($el)
-
-    if ($select) {
-      // recursive
-      return isHiddenByAncestors($select[0], methodName, options)
-    }
-  }
-
-  let $parent = getParent($el)
-
-  while (parent && !isUndefinedOrHTMLBodyDoc($parent)) {
-    if (elHasOpacityZero($parent) && options.checkOpacity) {
-      return true
-    }
-
-    if (elHasOverflowHidden($parent) && !elHasDisplayContents($parent) && elHasNoEffectiveWidthOrHeight($parent)) {
-      // recursive
-      const childrenCheck = !elDescendentsHavePositionFixedOrAbsolute($parent, $el)
-
-      if (childrenCheck) {
-        return true
-      }
-    }
-
-    $parent = getParent($parent)
-  }
-
-  $parent = getParent($el)
-  let stickyOrFixedParent: JQuery<HTMLElement> | undefined = undefined
-
-  while (parent && !isUndefinedOrHTMLBodyDoc($parent)) {
-    const fixedOrSticky = /(fixed|sticky)/.test($parent.css('position'))
-
-    if (fixedOrSticky) {
-      stickyOrFixedParent = $parent
-      break
-    }
-
-    $parent = getParent($parent)
-  }
-
-  if (stickyOrFixedParent) {
-    return elIsNotElementFromPoint(stickyOrFixedParent)
-  }
-
-  $parent = getParent($el)
-
-  while ($parent && !isUndefinedOrHTMLBodyDoc($parent)) {
-    if (elHasDisplayContents($parent)) {
-      return false
-    }
-    if (canClipContent($el, $parent)) {
-      const ancestorProps = $parent.get(0).getBoundingClientRect()
-
-    if (elHasPositionAbsolute($el) && (ancestorProps.width === 0 || ancestorProps.height === 0)) {
-      $parent = getParent($parent)
-      continue
-    }
-
-    const elProps = $el.get(0).getBoundingClientRect()
-
-    // only check if the target el is out of bounds if the overflow is clippable in that direction
-    const checkXOverflow = OVERFLOW_PROPS.includes($ancestor.css('overflow-x'))
-    const checkYOverflow = OVERFLOW_PROPS.includes($ancestor.css('overflow-y'))
-
-    // target el is out of bounds
-    if (
-      // target el is to the right of the ancestor's visible area
-      (checkXOverflow && (elProps.left >= (ancestorProps.width + ancestorProps.left))) ||
-
-      // target el is to the left of the ancestor's visible area
-      (checkXOverflow && ((elProps.left + elProps.width) <= ancestorProps.left)) ||
-
-      // target el is under the ancestor's visible area
-      (checkYOverflow && (elProps.top >= (ancestorProps.height + ancestorProps.top))) ||
-
-      // target el is above the ancestor's visible area
-      (checkYOverflow && ((elProps.top + elProps.height) <= ancestorProps.top))
-    ) {
-      return true
-    }
-
-  if (elIsOutOfBoundsOfAncestorsOverflow($parent)) {
-    return true
-  }
-
-  // else check if el is outside the bounds
-  // of its ancestors overflow
-  return elIsOutOfBoundsOfAncestorsOverflow($el)
-}
-
-function elIsHiddenByAncestors ($el, checkOpacity, $origEl = $el) {
-  // walk up to each parent until we reach the body
-  // if any parent has opacity: 0
-  // or has an effective clientHeight of 0
-  // and its set overflow: hidden then our child element
-  // is effectively hidden
-  // -----UNLESS------
-  // the parent or a descendent has position: absolute|fixed
-  const $parent = getParent($el)
-
-  // stop if we've reached the body or html
-  // in case there is no body
-  // or if parent is the document which can
-  // happen if we already have an <html> element
-  if (isUndefinedOrHTMLBodyDoc($parent)) {
-    return false
-  }
-
-  if (elHasDisplayContents($el)) {
-    let $parent = getParent($el)
-
-    return elIsHiddenByAncestors($parent, checkOpacity, $parent)
-  }
-
-  // a child can never have a computed opacity
-  // greater than that of its parent
-  // so if the parent has an opacity of 0, so does the child
-  if (elHasOpacityZero($parent) && checkOpacity) {
-    return true
-  }
-
-  if (elHasOverflowHidden($parent) && !elHasDisplayContents($parent) && elHasNoEffectiveWidthOrHeight($parent)) {
-    // if any of the elements between the parent and origEl have fixed or position absolute
-    return !elDescendentsHavePositionFixedOrAbsolute($parent, $origEl)
-  }
-
-  // continue to recursively walk up the chain until we reach body or html
-  return elIsHiddenByAncestors($parent, checkOpacity, $origEl)
-}
-
-export function elIsNotElementFromPoint ($el: JQuery<HTMLElement>) {
-  // if we have a fixed position element that means
-  // it is fixed 'relative' to the viewport which means
-  // it MUST be available with elementFromPoint because
-  // that is also relative to the viewport
-  const $elAtPoint = elAtCenterPoint($el)
-
-  // if the element at point is not a descendent
-  // of our $el then we know it's being covered or its
-  // not visible
-  if (isDescendent($el, $elAtPoint)) {
-    return false
-  }
-
-  // we also check if the element at point is a
-  // parent since pointer-events: none
-  // will cause elAtCenterPoint to fall through to parent
-  if (
-    ($el.css('pointer-events') === 'none' || $el.parent().css('pointer-events') === 'none') &&
-    ($elAtPoint && isAncestor($el, $elAtPoint))
-  ) {
-    return false
-  }
-
-  return true
-}
-
-export function elAtCenterPoint ($el: JQuery<HTMLElement>) {
-  const doc = $document.getDocumentFromElement($el.get(0))
-  const elProps = $coordinates.getElementPositioning($el)
-
-  const { topCenter, leftCenter } = elProps.fromElViewport
-
-  const el = $coordinates.getElementAtPointFromViewport(doc, leftCenter, topCenter)
-
-  if (el) {
-    return $jquery.wrap(el)
-  }
-
-  return undefined
-}
-
-export function elIsOutOfBoundsOfAncestorsOverflow ($el: JQuery<any>, $ancestor = getParent($el)) {
-  // no ancestor, not out of bounds!
-  // if we've reached the top parent, which is not a normal DOM el
-  // then we're in bounds all the way up, return false
-  if (isUndefinedOrHTMLBodyDoc($ancestor)) {
-    return false
-  }
-
-  if (elHasDisplayContents($el)) {
-    return false
-  }
-
-  if (canClipContent($el, $ancestor)) {
-    const ancestorProps = $ancestor.get(0).getBoundingClientRect()
-
-    if (elHasPositionAbsolute($el) && (ancestorProps.width === 0 || ancestorProps.height === 0)) {
-      return elIsOutOfBoundsOfAncestorsOverflow($el, getParent($ancestor))
-    }
-
-    const elProps = $el.get(0).getBoundingClientRect()
-
-    // only check if the target el is out of bounds if the overflow is clippable in that direction
-    const checkXOverflow = OVERFLOW_PROPS.includes($ancestor.css('overflow-x'))
-    const checkYOverflow = OVERFLOW_PROPS.includes($ancestor.css('overflow-y'))
-
-    // target el is out of bounds
-    if (
-      // target el is to the right of the ancestor's visible area
-      (checkXOverflow && (elProps.left >= (ancestorProps.width + ancestorProps.left))) ||
-
-      // target el is to the left of the ancestor's visible area
-      (checkXOverflow && ((elProps.left + elProps.width) <= ancestorProps.left)) ||
-
-      // target el is under the ancestor's visible area
-      (checkYOverflow && (elProps.top >= (ancestorProps.height + ancestorProps.top))) ||
-
-      // target el is above the ancestor's visible area
-      (checkYOverflow && ((elProps.top + elProps.height) <= ancestorProps.top))
-    ) {
-      return true
-    }
-  }
-
-  return elIsOutOfBoundsOfAncestorsOverflow($el, getParent($ancestor))
-}
-
-function elHasDisplayContents ($el) {
-  return $el.css('display') === 'contents'
-}
-
-export function elHasOpacityZero ($el) {
-  return $el.css('opacity') === '0'
-}
-
-function elHasDisplayInline ($el) {
-  return $el.css('display') === 'inline'
-}
-
-function elHasVisibilityHiddenOrCollapse ($el) {
-  return elHasVisibilityHidden($el) || elHasVisibilityCollapse($el)
-}
-
-export function elHasVisibilityHidden ($el) {
-  return $el.css('visibility') === 'hidden'
-}
-
-export function elHasVisibilityCollapse ($el) {
-  return $el.css('visibility') === 'collapse'
-}
-
-export function elHasOverflowHidden ($el) {
-  const cssOverflow = [$el.css('overflow'), $el.css('overflow-y'), $el.css('overflow-x')]
-
-  return cssOverflow.includes('hidden')
-}
-
-function elHasPositionRelative ($el: JQuery<HTMLElement>) {
-  return $el.css('position') === 'relative'
-}
-
-function elHasPositionStatic ($el: JQuery<HTMLElement>) {
-  return $el.css('position') == null || $el.css('position') === 'static'
-}
-
-function elHasPositionAbsolute ($el: JQuery<HTMLElement>) {
-  return $el.css('position') === 'absolute'
-}
-
-function elHasClippableOverflow ($el) {
-  return OVERFLOW_PROPS.includes($el.css('overflow')) ||
-          OVERFLOW_PROPS.includes($el.css('overflow-y')) ||
-            OVERFLOW_PROPS.includes($el.css('overflow-x'))
-}
-
-function elDescendentsHavePositionFixedOrAbsolute ($parent, $child) {
-  // create an array of all elements between $parent and $child
-  // including child but excluding parent
-  // and check if these have position fixed|absolute
-  const parents = getAllParents($child[0], $parent)
-  const $els = $jquery.wrap(parents).add($child)
-
-  return _.some($els.get(), (el) => {
-    return /(fixed|absolute)/.test($jquery.wrap(el).css('position'))
-  })
-}
-
-function elHasVisibleChild ($el) {
-  return _.some($el.children(), (el) => {
-    return isVisible(el)
-  })
-}
-
-export function elHasNoEffectiveWidthOrHeight ($el: JQuery) {
-  // Is the element's CSS width OR height, including any borders,
-  // padding, and vertical scrollbars (if rendered) less than 0?
-  //
-  // elClientWidth:
-  // If the element is hidden (for example, by setting style.display
-  // on the element or one of its ancestors to "none"), then 0 is returned.
-
-  // $el[0].getClientRects().length:
-  // For HTML <area> elements, SVG elements that do not render anything themselves,
-  // display:none elements, and generally any elements that are not directly rendered,
-  // an empty list is returned.
-  const el = $el[0]
-
-  const style = getComputedStyle(el)
-  let transform = style.getPropertyValue('transform')
-
-  if (!transform.length) {
-    transform = 'none'
-  }
-
-  const hasTextContent = !!el.textContent?.trim().length
-
-  const width = elClientWidth($el)
-  const height = elClientHeight($el)
-
-  return (isZeroLengthAndTransformNone(width, height, transform) && !hasTextContent) ||
-  isZeroLengthAndOverflowHidden(width, height, elHasOverflowHidden($el)) ||
-  (el.getClientRects().length <= 0)
-}
-
-function isZeroLengthAndTransformNone (width, height, transform) {
-  // From https://github.com/cypress-io/cypress/issues/5974,
-  // we learned that when an element has non-'none' transform style value like "translate(0, 0)",
-  // it is visible even with `height: 0` or `width: 0`.
-  // That's why we're checking `transform === 'none'` together with elClientWidth/Height.
-  return (width <= 0 && transform === 'none') || (height <= 0 && transform === 'none')
-}
-
-function isZeroLengthAndOverflowHidden (width, height, overflowHidden) {
-  return (width <= 0 && overflowHidden) || (height <= 0 && overflowHidden)
-}
-
-function elementBoundingRect ($el: JQuery) {
-  return $el[0].getBoundingClientRect()
-}
-
-export function elClientHeight ($el) {
-  return elementBoundingRect($el).height
-}
-
-export function elClientWidth ($el) {
-  return elementBoundingRect($el).width
-}
-
-function canClipContent ($el: JQuery<HTMLElement>, $ancestor: JQuery<HTMLElement>) {
-  // can't clip without overflow properties
-  if (!elHasClippableOverflow($ancestor)) {
-    return false
-  }
-
-  if (elHasDisplayContents($ancestor)) {
-    return false
-  }
-
-  // the closest parent with position relative, absolute, or fixed
-  const $offsetParent = $el.offsetParent()
-
-  // even if ancestors' overflow is clippable, if the element's offset parent
-  // is a parent of the ancestor, the ancestor will not clip the element
-  // unless the element is position relative
-  if (!elHasPositionRelative($el) && isAncestor($ancestor, $offsetParent)) {
-    return false
-  }
-
-  // even if ancestors' overflow is clippable, if the element's offset parent
-  // is a child of the ancestor, the ancestor will not clip the element
-  // unless the ancestor has a position that is not absolute
-  if (elHasPositionAbsolute($offsetParent) && isChild($ancestor, $offsetParent)) {
-    return false
-  }
-
-  // even if ancestors' overflow is clippable,
-  // if the element is position static or relative,
-  // and the element's offset parent is positioned absolute, a descendent of the ancestor, has no clippable overflow, and
-  // the offsetParent's offset parent is not descendent of the ancestor,
-  // then the ancestor will not clip the element
-  const $offsetParentOffsetParent = $offsetParent.offsetParent()
-
-  if ((elHasPositionStatic($el) || elHasPositionRelative($el))
-    && elHasPositionAbsolute($offsetParent) && isDescendent($ancestor, $offsetParent)
-    && !elHasClippableOverflow($offsetParent) && !isDescendent($ancestor, $offsetParentOffsetParent)
-  ) {
-    return false
-  }
-
-  return true
-}
-
-export const isW3CRendered = (el) => {
-  // @see https://html.spec.whatwg.org/multipage/rendering.html#being-rendered
-  return !(parentHasDisplayNone(wrap(el)) || wrap(el).css('visibility') === 'hidden')
-}
-
-export const isW3CFocusable = (el) => {
-  // @see https://html.spec.whatwg.org/multipage/interaction.html#focusable-area
-  return isFocusable(wrap(el)) && isW3CRendered(el)
-}
-
-export function parentHasDisplayNone ($el) {
-  // if we have no $el or we've walked all the way up to document
-  // then return false
-  if (!$el.length || $document.isDocument($el)) {
-    return false
-  }
-
-  // if we have display none then return the $el
-  if (elHasDisplayNone($el)) {
-    return $el
-  }
-
-  // continue walking
-  return parentHasDisplayNone(getParent($el))
-}

From 23fd4d66e36b2abbbe15523e91634951dc112536 Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Tue, 21 Oct 2025 12:52:50 -0400
Subject: [PATCH 12/35] impl new experimental visibility algo

---
 packages/driver/src/dom/index.ts              |   4 +-
 packages/driver/src/dom/visibility.ts         |  13 +-
 .../src/dom/visibility/fastIsVisible.ts       | 117 ++++++++++++++++++
 3 files changed, 128 insertions(+), 6 deletions(-)
 create mode 100644 packages/driver/src/dom/visibility/fastIsVisible.ts

diff --git a/packages/driver/src/dom/index.ts b/packages/driver/src/dom/index.ts
index 4018e3e6ed4..8708c575ffb 100644
--- a/packages/driver/src/dom/index.ts
+++ b/packages/driver/src/dom/index.ts
@@ -11,7 +11,7 @@ import $animation from './animation'
 const { isWindow, getWindowByElement } = $window
 const { isDocument, getDocumentFromElement } = $document
 const { wrap, unwrap, isJquery, query } = $jquery
-const { isVisible, isHidden, isStrictlyHidden, isHiddenByAncestors, getReasonIsHidden, isW3CRendered, isW3CFocusable } = $visibility
+const { isVisible, isHidden, fastIsVisible, fastIsHidden, isStrictlyHidden, isHiddenByAncestors, getReasonIsHidden, isW3CRendered, isW3CFocusable } = $visibility
 const { isInputType, isFocusable, isElement, isScrollable, isFocused, stringify, getElements, getContainsSelector, getFirstDeepestElement, getInputFromLabel, isDetached, isAttached, isTextLike, isSelector, isDescendent, getFirstFixedOrStickyPositionParent, getFirstStickyPositionParent, getFirstScrollableParent, isUndefinedOrHTMLBodyDoc, elementFromPoint, getParent, findAllShadowRoots, isWithinShadowRoot, getHostContenteditable } = $elements
 const { getCoordsByPosition, getElementPositioning, getElementCoordinatesByPosition, getElementAtPointFromViewport, getElementCoordinatesByPositionRelativeToXY } = $coordinates
 const { getSelectionBounds } = $selection
@@ -56,6 +56,8 @@ export default {
   isElement,
   isDocument,
   isWindow,
+  fastIsVisible,
+  fastIsHidden,
   isJquery,
   stringify,
   findAllShadowRoots,
diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index abbf8476259..456ac45a5ff 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -4,24 +4,25 @@ import $document from './document'
 import $elements from './elements'
 import $coordinates from './coordinates'
 import * as $transform from './transform'
-
+//import { isVisible } from './visibility/isVisible'
 const { isElement, isBody, isHTML, isOption, isOptgroup, getParent, getFirstParentWithTagName, isAncestor, isChild, getAllParents, isDescendent, isUndefinedOrHTMLBodyDoc, elOrAncestorIsFixedOrSticky, isDetached, isFocusable, stringify: stringifyElement } = $elements
-
+import { fastIsHidden, fastIsVisible } from './visibility/fastIsVisible'
 const fixedOrAbsoluteRe = /(fixed|absolute)/
 
 const OVERFLOW_PROPS = ['hidden', 'clip', 'scroll', 'auto']
 
+const { wrap } = $jquery
+
 const isVisible = (el) => {
-  return !isHidden(el, 'isVisible()')
+  return isHidden(el, 'isVisible()')
 }
 
-const { wrap } = $jquery
-
 // TODO: we should prob update dom
 // to be passed in $utils as a dependency
 // because of circular references
 // the ignoreOpacity option exists for checking actionability
 // as elements with `opacity: 0` are hidden yet actionable
+
 const isHidden = (el, methodName = 'isHidden()', options = { checkOpacity: true }) => {
   if (isStrictlyHidden(el, methodName, options, isHidden)) {
     return true
@@ -623,6 +624,8 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true }
 /* eslint-enable no-cond-assign */
 
 export default {
+  fastIsVisible,
+  fastIsHidden,
   isVisible,
   isHidden,
   isStrictlyHidden,
diff --git a/packages/driver/src/dom/visibility/fastIsVisible.ts b/packages/driver/src/dom/visibility/fastIsVisible.ts
new file mode 100644
index 00000000000..ad86f9a99bc
--- /dev/null
+++ b/packages/driver/src/dom/visibility/fastIsVisible.ts
@@ -0,0 +1,117 @@
+import $elements from '../elements'
+import fastdom from 'fastdom'
+
+const { isOption, isOptgroup, isBody, isHTML } = $elements
+
+function measure <T> (fn: () => T): Promise<T> {
+  return new Promise((resolve, reject) => {
+    fastdom.measure(() => {
+      try {
+        const result = fn()
+
+        resolve(result)
+      } catch (error) {
+        reject(error)
+      }
+    })
+  })
+}
+
+function isRectVisible (el: HTMLElement, { x, y, width, height }: DOMRect): boolean {
+  const elAtPoint = el.ownerDocument.elementFromPoint(
+    x + width / 2,
+    y + height / 2,
+  )
+
+  return (Boolean(elAtPoint) && (elAtPoint === el || el.contains(elAtPoint)))
+}
+
+function subDivideRect ({ x, y, width, height }: DOMRect): DOMRect[] {
+  return [
+    DOMRect.fromRect({
+      x,
+      y,
+      width: width / 2,
+      height: height / 2,
+    }),
+    DOMRect.fromRect({
+      x: x + width / 2,
+      y,
+      width: width / 2,
+      height: height / 2,
+    }),
+    DOMRect.fromRect({
+      x,
+      y: y + height / 2,
+      width: width / 2,
+      height: height / 2,
+    }),
+    DOMRect.fromRect({
+      x: x + width / 2,
+      y: y + height / 2,
+      width: width / 2,
+      height: height / 2,
+    }),
+  ].filter((rect: DOMRect) => rect.width > 0 && rect.height > 0)
+}
+
+export async function fastIsVisible (el: HTMLElement): Promise<boolean> {
+  return !(await fastIsHidden(el))
+}
+
+export async function fastIsHidden (el: HTMLElement, options: { checkOpacity: boolean } = { checkOpacity: true }): Promise<boolean> {
+  // basic css checks
+  if (isBody(el) || isHTML(el)) {
+    return false
+  }
+
+  if (el.computedStyleMap().get('display') === 'none') {
+    return true
+  }
+
+  if (el.computedStyleMap().get('visibility') === 'hidden' || el.computedStyleMap().get('visibility') === 'collapse') {
+    return true
+  }
+
+  if (el.computedStyleMap().get('opacity') === 0 && options.checkOpacity) {
+    return true
+  }
+
+  if (isOption(el) || isOptgroup(el)) {
+    const select = el.closest('select')
+
+    if (select) {
+      return fastIsHidden(select, options)
+    }
+
+    return false // should we consider option/optgroup hidden if it does not have a SELECT parent?
+  }
+
+  // by boundingClientRect is less accurate than measuring each clientRect
+  // individually, but doesn't have the same issues with svg elements.
+
+  const boundingRect = await measure(() => el.getBoundingClientRect())
+
+  if (boundingRect.width === 0 && boundingRect.height === 0) {
+    return true
+  }
+
+  if (isRectVisible(el, boundingRect)) {
+    return false
+  }
+
+  const subSamples = subDivideRect(boundingRect)
+
+  if (subSamples.some((rect: DOMRect) => isRectVisible(el, rect))) {
+    return false
+  }
+
+  return true
+
+  // if we want to check each clientRect individually, we have to measure
+  // svg child elements separately.
+  // the viewport for non-outer svg elements is the outer svg element,
+  // so svg elements need to be handled differently - in order to raycast,
+  // we need the bounding rect of the svg element relative to the browser
+  // viewport.
+}

From f89bb55566b6d2679a4caec834079afea356d5e6 Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Tue, 21 Oct 2025 12:53:22 -0400
Subject: [PATCH 13/35] new experimental useFastVisibility config option

---
 cli/types/cypress.d.ts         | 4 ++--
 packages/config/src/options.ts | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/cli/types/cypress.d.ts b/cli/types/cypress.d.ts
index 7f049a8dc3f..1cca43e9252 100644
--- a/cli/types/cypress.d.ts
+++ b/cli/types/cypress.d.ts
@@ -3365,14 +3365,14 @@ declare namespace Cypress {
   }
 
   interface SuiteConfigOverrides extends Partial<
-    Pick<ConfigOptions, 'animationDistanceThreshold' | 'blockHosts' | 'defaultCommandTimeout' | 'env' | 'execTimeout' | 'includeShadowDom' | 'numTestsKeptInMemory' | 'pageLoadTimeout' | 'redirectionLimit' | 'requestTimeout' | 'responseTimeout' | 'retries' | 'screenshotOnRunFailure' | 'slowTestThreshold' | 'scrollBehavior' | 'taskTimeout' | 'viewportHeight' | 'viewportWidth' | 'waitForAnimations'>
+    Pick<ConfigOptions, 'animationDistanceThreshold' | 'blockHosts' | 'defaultCommandTimeout' | 'env' | 'execTimeout' | 'experimentalFastVisibility' | 'includeShadowDom' | 'numTestsKeptInMemory' | 'pageLoadTimeout' | 'redirectionLimit' | 'requestTimeout' | 'responseTimeout' | 'retries' | 'screenshotOnRunFailure' | 'slowTestThreshold' | 'scrollBehavior' | 'taskTimeout' | 'viewportHeight' | 'viewportWidth' | 'waitForAnimations'>
   >, Partial<Pick<ResolvedConfigOptions, 'baseUrl' | 'testIsolation'>> {
     browser?: IsBrowserMatcher | IsBrowserMatcher[]
     keystrokeDelay?: number
   }
 
   interface TestConfigOverrides extends Partial<
-    Pick<ConfigOptions, 'animationDistanceThreshold' | 'blockHosts' | 'defaultCommandTimeout' | 'env' | 'execTimeout' | 'includeShadowDom' | 'numTestsKeptInMemory' | 'pageLoadTimeout' | 'redirectionLimit' | 'requestTimeout' | 'responseTimeout' | 'retries' | 'screenshotOnRunFailure' | 'slowTestThreshold' | 'scrollBehavior' | 'taskTimeout' | 'viewportHeight' | 'viewportWidth' | 'waitForAnimations'>
+    Pick<ConfigOptions, 'animationDistanceThreshold' | 'blockHosts' | 'defaultCommandTimeout' | 'env' | 'execTimeout' | 'experimentalFastVisibility' | 'includeShadowDom' | 'numTestsKeptInMemory' | 'pageLoadTimeout' | 'redirectionLimit' | 'requestTimeout' | 'responseTimeout' | 'retries' | 'screenshotOnRunFailure' | 'slowTestThreshold' | 'scrollBehavior' | 'taskTimeout' | 'viewportHeight' | 'viewportWidth' | 'waitForAnimations'>
   >, Partial<Pick<ResolvedConfigOptions, 'baseUrl'>> {
     browser?: IsBrowserMatcher | IsBrowserMatcher[]
     keystrokeDelay?: number
diff --git a/packages/config/src/options.ts b/packages/config/src/options.ts
index 44521ba45ee..7b7fd62660c 100644
--- a/packages/config/src/options.ts
+++ b/packages/config/src/options.ts
@@ -253,6 +253,12 @@ const driverConfigOptions: Array<DriverConfigOption> = [
     validation: validate.isBoolean,
     isExperimental: true,
     requireRestartOnChange: 'server',
+  }, {
+    name: 'experimentalFastVisibility',
+    defaultValue: false,
+    validation: validate.isBoolean,
+    isExperimental: true,
+    overrideLevel: 'any',
   }, {
     name: 'fileServerFolder',
     defaultValue: '',

From bd41339863276dd20ef257211c68613c08e7d86f Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Wed, 22 Oct 2025 10:27:12 -0400
Subject: [PATCH 14/35] check four corners of rect instead of just center

---
 .../e2e/memory/virtual-scroll-stress.cy.js    |  44 +-----
 .../fixtures/virtual-scroll-stress-test.html  |   3 +-
 packages/driver/src/dom/index.ts              |   4 +-
 packages/driver/src/dom/jquery.ts             |   4 +-
 packages/driver/src/dom/visibility.ts         |   8 +-
 .../src/dom/visibility/fastIsVisible.ts       | 144 +++++++++++++-----
 6 files changed, 123 insertions(+), 84 deletions(-)

diff --git a/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js b/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
index ae42920b33e..38b536070ef 100644
--- a/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
+++ b/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
@@ -12,7 +12,10 @@
  * - Rapid scrolling patterns that may cause crashes
  */
 
-describe('React Virtuoso Browser Crash Tests', () => {
+describe('React Virtuoso Browser Crash Tests', {
+  experimentalFastVisibility: true,
+  numTestsKeptInMemory: 1,
+}, () => {
   beforeEach(() => {
     // Visit the react-virtuoso test website
     cy.visit('/fixtures/virtual-scroll-stress-test.html')
@@ -49,9 +52,6 @@ describe('React Virtuoso Browser Crash Tests', () => {
       cy.get('#basicList').scrollTo(0, 1000)
       cy.get('#basicList').scrollTo(0, 2000)
       cy.get('#basicList').scrollTo(0, 5000)
-
-      // Verify scroll counter is working
-      cy.get('#basicScrolls').should('contain', '3')
     })
 
     it('should handle rapid scrolling without crashing', () => {
@@ -66,9 +66,6 @@ describe('React Virtuoso Browser Crash Tests', () => {
       cy.get('#basicList').scrollTo(0, 1000)
       cy.get('#basicList').scrollTo(0, 1500)
       cy.get('#basicList').scrollTo(0, 2000)
-
-      // Verify scroll counter is working
-      cy.get('#basicScrolls').should('contain', '6')
     })
 
     it('should handle stress scrolling without crashing', () => {
@@ -128,9 +125,6 @@ describe('React Virtuoso Browser Crash Tests', () => {
       cy.get('#dynamicList').scrollTo(0, 500)
       cy.get('#dynamicList').scrollTo(0, 1000)
       cy.get('#dynamicList').scrollTo(0, 2000)
-
-      // Verify scroll counter is working
-      cy.get('#dynamicScrolls').should('contain', '3')
     })
 
     it('should handle rapid scrolling with dynamic heights', () => {
@@ -174,9 +168,6 @@ describe('React Virtuoso Browser Crash Tests', () => {
       // Scroll both lists simultaneously
       cy.get('#multipleListA').scrollTo(0, 1000)
       cy.get('#multipleListB').scrollTo(0, 1500)
-
-      // Verify scroll counter is working
-      cy.get('#multipleScrolls').should('contain', '2')
     })
 
     it('should handle stress scrolling multiple lists', () => {
@@ -207,9 +198,6 @@ describe('React Virtuoso Browser Crash Tests', () => {
       cy.get('#multipleListB').scrollTo(0, 1000)
       cy.get('#multipleListA').scrollTo(0, 1500)
       cy.get('#multipleListB').scrollTo(0, 1500)
-
-      // Verify scroll counter is working
-      cy.get('#multipleScrolls').should('contain', '6')
     })
   })
 
@@ -236,9 +224,6 @@ describe('React Virtuoso Browser Crash Tests', () => {
       cy.get('#extremeList').scrollTo(0, 5000)
       cy.get('#extremeList').scrollTo(0, 10000)
       cy.get('#extremeList').scrollTo(0, 20000)
-
-      // Verify scroll counter is working
-      cy.get('#extremeScrolls').should('contain', '3')
     })
 
     it('should handle extreme stress scrolling test', () => {
@@ -269,9 +254,6 @@ describe('React Virtuoso Browser Crash Tests', () => {
       cy.get('#extremeList .item-btn').eq(1).click()
       cy.get('#extremeList').scrollTo(0, 3000)
       cy.get('#extremeList .item-btn').eq(2).click()
-
-      // Verify scroll counter is working
-      cy.get('#extremeScrolls').should('contain', '3')
     })
   })
 
@@ -295,12 +277,6 @@ describe('React Virtuoso Browser Crash Tests', () => {
       cy.get('#multipleListA').scrollTo(0, 1000)
       cy.get('#multipleListB').scrollTo(0, 1000)
       cy.get('#extremeList').scrollTo(0, 1000)
-
-      // Verify all scroll counters are working
-      cy.get('#basicScrolls').should('contain', '1')
-      cy.get('#dynamicScrolls').should('contain', '1')
-      cy.get('#multipleScrolls').should('contain', '2')
-      cy.get('#extremeScrolls').should('contain', '1')
     })
 
     it('should handle rapid scroll direction changes', () => {
@@ -315,9 +291,6 @@ describe('React Virtuoso Browser Crash Tests', () => {
       cy.get('#basicList').scrollTo(0, 800)
       cy.get('#basicList').scrollTo(0, 2000)
       cy.get('#basicList').scrollTo(0, 1200)
-
-      // Verify scroll counter is working
-      cy.get('#basicScrolls').should('contain', '6')
     })
 
     it('should handle scroll with rapid item interactions', () => {
@@ -332,9 +305,6 @@ describe('React Virtuoso Browser Crash Tests', () => {
       cy.get('#basicList .item-btn').eq(1).click()
       cy.get('#basicList').scrollTo(0, 3000)
       cy.get('#basicList .item-btn').eq(2).click()
-
-      // Verify scroll counter is working
-      cy.get('#basicScrolls').should('contain', '3')
     })
   })
 
@@ -408,9 +378,6 @@ describe('React Virtuoso Browser Crash Tests', () => {
       cy.get('#basicList').scrollTo('bottom')
       cy.get('#basicList').scrollTo('top')
       cy.get('#basicList').scrollTo(0, 5000)
-
-      // Verify scroll counter is working
-      cy.get('#basicScrolls').should('contain', '4')
     })
 
     it('should handle scroll with different viewport sizes', () => {
@@ -425,9 +392,6 @@ describe('React Virtuoso Browser Crash Tests', () => {
 
       cy.viewport(1024, 768)
       cy.get('#basicList').scrollTo(0, 3000)
-
-      // Verify scroll counter is working
-      cy.get('#basicScrolls').should('contain', '3')
     })
   })
 })
diff --git a/packages/driver/cypress/fixtures/virtual-scroll-stress-test.html b/packages/driver/cypress/fixtures/virtual-scroll-stress-test.html
index b9a6b84a7db..d6f36088b36 100644
--- a/packages/driver/cypress/fixtures/virtual-scroll-stress-test.html
+++ b/packages/driver/cypress/fixtures/virtual-scroll-stress-test.html
@@ -424,7 +424,7 @@ <h2 class="section-header">Test 4: Extreme Stress Test (50,000 items)</h2>
             
             setTimeout(() => {
                 container.innerHTML = '';
-                const items = Array.from({ length: 5000 }, (_, i) => ({
+                const items = Array.from({ length: 10000 }, (_, i) => ({
                     id: i,
                     description: `This is item number ${i + 1} with some additional content to make it more realistic. Lorem ipsum dolor sit amet, consectetur adipiscing elit.`
                 }));
@@ -437,6 +437,7 @@ <h2 class="section-header">Test 4: Extreme Stress Test (50,000 items)</h2>
                 
                 // Add scroll listener
                 container.addEventListener('scroll', () => {
+                    console.log('scroll')
                     scrollCounters.basic++;
                     document.getElementById('basicScrolls').textContent = scrollCounters.basic;
                 });
diff --git a/packages/driver/src/dom/index.ts b/packages/driver/src/dom/index.ts
index 8708c575ffb..4018e3e6ed4 100644
--- a/packages/driver/src/dom/index.ts
+++ b/packages/driver/src/dom/index.ts
@@ -11,7 +11,7 @@ import $animation from './animation'
 const { isWindow, getWindowByElement } = $window
 const { isDocument, getDocumentFromElement } = $document
 const { wrap, unwrap, isJquery, query } = $jquery
-const { isVisible, isHidden, fastIsVisible, fastIsHidden, isStrictlyHidden, isHiddenByAncestors, getReasonIsHidden, isW3CRendered, isW3CFocusable } = $visibility
+const { isVisible, isHidden, isStrictlyHidden, isHiddenByAncestors, getReasonIsHidden, isW3CRendered, isW3CFocusable } = $visibility
 const { isInputType, isFocusable, isElement, isScrollable, isFocused, stringify, getElements, getContainsSelector, getFirstDeepestElement, getInputFromLabel, isDetached, isAttached, isTextLike, isSelector, isDescendent, getFirstFixedOrStickyPositionParent, getFirstStickyPositionParent, getFirstScrollableParent, isUndefinedOrHTMLBodyDoc, elementFromPoint, getParent, findAllShadowRoots, isWithinShadowRoot, getHostContenteditable } = $elements
 const { getCoordsByPosition, getElementPositioning, getElementCoordinatesByPosition, getElementAtPointFromViewport, getElementCoordinatesByPositionRelativeToXY } = $coordinates
 const { getSelectionBounds } = $selection
@@ -56,8 +56,6 @@ export default {
   isElement,
   isDocument,
   isWindow,
-  fastIsVisible,
-  fastIsHidden,
   isJquery,
   stringify,
   findAllShadowRoots,
diff --git a/packages/driver/src/dom/jquery.ts b/packages/driver/src/dom/jquery.ts
index 93db0f5314f..253d3868f5f 100644
--- a/packages/driver/src/dom/jquery.ts
+++ b/packages/driver/src/dom/jquery.ts
@@ -2,7 +2,7 @@ import $ from 'jquery'
 import _ from 'lodash'
 
 // wrap the object in jquery
-const wrap = <T extends HTMLElement | Window | Document>(obj: T): JQuery<T> => {
+export const wrap = <T extends HTMLElement | Window | Document>(obj: T): JQuery<T> => {
   return $(obj)
 }
 
@@ -12,7 +12,7 @@ const query = (selector, context) => {
 }
 
 // pull out the raw elements if this is wrapped
-const unwrap = function (obj) {
+export const unwrap = function (obj) {
   if (isJquery(obj)) {
     // return an array of elements
     return obj.toArray()
diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 456ac45a5ff..2b56d2dfb2c 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -14,7 +14,7 @@ const OVERFLOW_PROPS = ['hidden', 'clip', 'scroll', 'auto']
 const { wrap } = $jquery
 
 const isVisible = (el) => {
-  return isHidden(el, 'isVisible()')
+  return !isHidden(el, 'isVisible()')
 }
 
 // TODO: we should prob update dom
@@ -24,6 +24,12 @@ const isVisible = (el) => {
 // as elements with `opacity: 0` are hidden yet actionable
 
 const isHidden = (el, methodName = 'isHidden()', options = { checkOpacity: true }) => {
+  if (Cypress.config('experimentalFastVisibility')) {
+    ensureEl(el, methodName)
+
+    return fastIsHidden(el, options)
+  }
+
   if (isStrictlyHidden(el, methodName, options, isHidden)) {
     return true
   }
diff --git a/packages/driver/src/dom/visibility/fastIsVisible.ts b/packages/driver/src/dom/visibility/fastIsVisible.ts
index ad86f9a99bc..eb9509c22c8 100644
--- a/packages/driver/src/dom/visibility/fastIsVisible.ts
+++ b/packages/driver/src/dom/visibility/fastIsVisible.ts
@@ -1,31 +1,39 @@
 import $elements from '../elements'
-import fastdom from 'fastdom'
 
+import { unwrap, wrap } from '../jquery'
 const { isOption, isOptgroup, isBody, isHTML } = $elements
 
-function measure <T> (fn: () => T): Promise<T> {
-  return new Promise((resolve, reject) => {
-    fastdom.measure(() => {
-      try {
-        const result = fn()
+const DEBUG = true
 
-        resolve(result)
-      } catch (error) {
-        reject(error)
-      }
-    })
-  })
+function debug (...args: any[]) {
+  if (DEBUG) {
+    // eslint-disable-next-line no-console
+    console.log('DEBUG:', ...args)
+  }
 }
 
-function isRectVisible (el: HTMLElement, { x, y, width, height }: DOMRect): boolean {
-  const elAtPoint = el.ownerDocument.elementFromPoint(
-    x + width / 2,
-    y + height / 2,
-  )
+function memoize<T> (fn: (...args: any[]) => T): (...args: any[]) => T {
+  const cache = new Map<any, { result: T, timestamp: number }>()
 
-  return (Boolean(elAtPoint) && (elAtPoint === el || el.contains(elAtPoint)))
+  return (...args: any[]) => {
+    const key = args
+
+    const cached = cache.get(key)
+
+    if (cached && cached.timestamp > Date.now() - 100) {
+      return cached.result
+    }
+
+    const result = fn(...args)
+
+    cache.set(key, { result, timestamp: Date.now() })
+
+    return result
+  }
 }
 
+const getBoundingClientRect = memoize((el: HTMLElement) => el.getBoundingClientRect())
+
 function subDivideRect ({ x, y, width, height }: DOMRect): DOMRect[] {
   return [
     DOMRect.fromRect({
@@ -52,57 +60,119 @@ function subDivideRect ({ x, y, width, height }: DOMRect): DOMRect[] {
       width: width / 2,
       height: height / 2,
     }),
-  ].filter((rect: DOMRect) => rect.width > 0 && rect.height > 0)
+  ].filter((rect: DOMRect) => rect.width > 1 && rect.height > 1)
 }
 
-export async function fastIsVisible (el: HTMLElement): Promise<boolean> {
-  return !(await fastIsHidden(el))
+function visibleAtPoint (el: HTMLElement, x: number, y: number): boolean {
+  const elAtPoint = el.ownerDocument.elementFromPoint(x, y)
+
+  debug('visibleAtPoint', el, elAtPoint)
+
+  return Boolean(elAtPoint) && (elAtPoint === el || el.contains(elAtPoint))
 }
 
-export async function fastIsHidden (el: HTMLElement, options: { checkOpacity: boolean } = { checkOpacity: true }): Promise<boolean> {
+function visibleToRaycast (el: HTMLElement, rect: DOMRect, maxDepth: number = 2, currentDepth: number = 0): boolean {
+  if (currentDepth >= maxDepth) {
+    return false
+  }
+
+  const { x, y, width, height } = rect
+
+  debug('visibleToRaycast', x, y, width, height)
+  const samples = [
+    [x, y],
+    [x + width, y],
+    [x, y + height],
+    [x + width, y + height],
+    [x + width / 2, y + height / 2],
+  ]
+
+  if (samples.some(([x, y]) => visibleAtPoint(el, x, y))) {
+    debug('some samples are visible')
+
+    return true
+  }
+
+  const subRects = subDivideRect(rect)
+
+  debug('subRects', subRects)
+
+  return subRects.some((subRect: DOMRect) => {
+    return visibleToRaycast(el, subRect, maxDepth, currentDepth + 1)
+  })
+}
+
+export function fastIsHidden (el: JQuery<HTMLElement>, options: { checkOpacity: boolean } = { checkOpacity: true }): boolean {
+  debug('fastIsHidden', el)
+
   // basic css checks
   if (isBody(el) || isHTML(el)) {
     return false
   }
 
-  if (el.computedStyleMap().get('display') === 'none') {
+  const subjects = unwrap(el) as HTMLElement | HTMLElement[]
+
+  if (Array.isArray(subjects) && (subjects.length > 1)) {
+    return subjects.some((subject: HTMLElement) => fastIsHidden(wrap(subject), options))
+  }
+
+  const subject: HTMLElement = Array.isArray(subjects) ? subjects[0] : subjects
+
+  if (subject.computedStyleMap().get('display')?.toString() === 'none') {
     return true
   }
 
-  if (el.computedStyleMap().get('visibility') === 'hidden' || el.computedStyleMap().get('visibility') === 'collapse') {
+  if (subject.computedStyleMap().get('visibility')?.toString() === 'hidden' || subject.computedStyleMap().get('visibility')?.toString() === 'collapse') {
     return true
   }
 
-  if (el.computedStyleMap().get('opacity') === 0 && options.checkOpacity) {
+  const opacity = Number(subject.computedStyleMap().get('opacity')?.toString() || 1)
+
+  if (options.checkOpacity && opacity === 0) {
     return true
   }
 
-  if (isOption(el) || isOptgroup(el)) {
-    const select = el.closest('select')
+  if (isOption(subject) || isOptgroup(subject)) {
+    const select = subject.closest('select')
 
     if (select) {
-      return fastIsHidden(select, options)
+      return fastIsHidden(wrap(select), options)
     }
-
-    return false // should we consider option/optgroup hidden if it does not have a SELECT parent?
   }
 
+  debug('post-option check', subject)
+
   // by boundingClientRect is less accurate than measuring each clientRect
   // individually, but doesn't have the same issues with svg elements.
 
-  const boundingRect = await measure(() => el.getBoundingClientRect())
+  const boundingRect = getBoundingClientRect(subject)
 
-  if (boundingRect.width === 0 && boundingRect.height === 0) {
-    return true
+  if (boundingRect.width === 0 || boundingRect.height === 0) {
+    //return true
   }
 
-  if (isRectVisible(el, boundingRect)) {
-    return false
+  debug('post-boundingClientRect check', subject)
+
+  // need to do a more intensive opacity check
+  if (options.checkOpacity) {
+    let currentElement: HTMLElement | null = subject
+    let effectiveOpacity = opacity
+
+    while (currentElement) {
+      const currentOpacity = Number(currentElement.computedStyleMap().get('opacity')?.toString() || 1)
+
+      effectiveOpacity *= currentOpacity
+      if (effectiveOpacity === 0) {
+        return true
+      }
+
+      currentElement = currentElement.parentElement
+    }
   }
 
-  const subSamples = subDivideRect(boundingRect)
+  if (visibleToRaycast(subject, boundingRect)) {
+    debug('visibleToRaycast', subject, boundingRect)
 
-  if (subSamples.some((rect: DOMRect) => isRectVisible(el, rect))) {
     return false
   }
 

From 298691b25aa8318da90db8bf2649b51bec476519 Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Wed, 22 Oct 2025 10:31:53 -0400
Subject: [PATCH 15/35] num-tests-in-memory=0

---
 packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js b/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
index 38b536070ef..acfdeb2302f 100644
--- a/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
+++ b/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
@@ -14,7 +14,7 @@
 
 describe('React Virtuoso Browser Crash Tests', {
   experimentalFastVisibility: true,
-  numTestsKeptInMemory: 1,
+  numTestsKeptInMemory: 0,
 }, () => {
   beforeEach(() => {
     // Visit the react-virtuoso test website

From f08c2ac3b6da698bd96c723e699cb97542a44665 Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Wed, 22 Oct 2025 10:33:23 -0400
Subject: [PATCH 16/35] rm ref virtuoso

---
 .../driver/cypress/fixtures/virtual-scroll-stress-test.html   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/driver/cypress/fixtures/virtual-scroll-stress-test.html b/packages/driver/cypress/fixtures/virtual-scroll-stress-test.html
index d6f36088b36..9391d2071df 100644
--- a/packages/driver/cypress/fixtures/virtual-scroll-stress-test.html
+++ b/packages/driver/cypress/fixtures/virtual-scroll-stress-test.html
@@ -239,12 +239,12 @@
     <div class="container">
         <div class="header">
             <h1>React Virtuoso Browser Crash Test</h1>
-            <p>This website is designed to reproduce browser crashes when scrolling with react-virtuoso library</p>
+            <p>This website is designed to reproduce browser crashes when scrolling with virtual scrolling libraries</p>
             <div class="status status-warning">
                 ⚠️ Warning: This test may cause browser crashes or performance issues. Use with caution!
             </div>
             <div class="fallback-message">
-                <strong>Fallback Mode:</strong> Using native scrolling simulation instead of React Virtuoso library.
+                <strong>Fallback Mode:</strong> Using native scrolling simulation.
                 This still reproduces the same crash scenarios with high-performance scrolling.
             </div>
         </div>

From d82466304cc9875682eeb1f631bc28eed6f74a40 Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Wed, 22 Oct 2025 10:41:22 -0400
Subject: [PATCH 17/35] rename file to be in line with its export

---
 .../e2e/memory/virtual-scroll-stress.cy.js    |  6 +--
 .../dom/visibility/ComputedStyleSnapshot.d.ts | 40 -------------------
 .../{fastIsVisible.ts => fastIsHidden.ts}     |  0
 3 files changed, 2 insertions(+), 44 deletions(-)
 delete mode 100644 packages/driver/src/dom/visibility/ComputedStyleSnapshot.d.ts
 rename packages/driver/src/dom/visibility/{fastIsVisible.ts => fastIsHidden.ts} (100%)

diff --git a/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js b/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
index acfdeb2302f..7c72221ee31 100644
--- a/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
+++ b/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
@@ -1,8 +1,8 @@
 /**
- * React Virtuoso Browser Crash Tests
+ * Virtual Scrolling Browser Crash Tests
  *
  * This test suite is designed to reproduce browser crashes when scrolling
- * with react-virtuoso library, as reported by users.
+ * with virtual scroll libraries, as reported by users.
  *
  * Test scenarios include:
  * - Basic virtual list scrolling
@@ -17,10 +17,8 @@ describe('React Virtuoso Browser Crash Tests', {
   numTestsKeptInMemory: 0,
 }, () => {
   beforeEach(() => {
-    // Visit the react-virtuoso test website
     cy.visit('/fixtures/virtual-scroll-stress-test.html')
 
-    // Wait for React to load
     cy.get('.header').should('be.visible')
 
     // Clear any existing data
diff --git a/packages/driver/src/dom/visibility/ComputedStyleSnapshot.d.ts b/packages/driver/src/dom/visibility/ComputedStyleSnapshot.d.ts
deleted file mode 100644
index 000dfede1a0..00000000000
--- a/packages/driver/src/dom/visibility/ComputedStyleSnapshot.d.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-type ComputedStyles = {
-  width: number
-  height: number
-  overflowHidden: boolean
-  opacity: number
-  visibility: string
-  display: string
-  transform: string
-  position: string
-  zIndex: number
-  parentWidth: number
-  parentHeight: number
-  parentOverflowHidden: boolean
-  boundingClientRect: DOMRect
-  overflowX: string
-  overflowY: string
-  overflow: string
-}
-
-export class ComputedStyleSnapshot extends Map {
-  constructor (styles?: Partial<ComputedStyles>) {
-    super(Object.entries(styles ?? {}))
-  }
-
-  get <K extends keyof ComputedStyles> (key: K): ComputedStyles[K] | undefined {
-    return super.get(key)
-  }
-
-  set<K extends keyof ComputedStyles> (key: K, value: ComputedStyles[K]): this {
-    return super.set(key, value)
-  }
-
-  delete<K extends keyof ComputedStyles> (key: K): boolean {
-    return super.delete(key)
-  }
-
-  has<K extends keyof ComputedStyles> (key: K): boolean {
-    return super.has(key)
-  }
-}
diff --git a/packages/driver/src/dom/visibility/fastIsVisible.ts b/packages/driver/src/dom/visibility/fastIsHidden.ts
similarity index 100%
rename from packages/driver/src/dom/visibility/fastIsVisible.ts
rename to packages/driver/src/dom/visibility/fastIsHidden.ts

From 914b3ccf0133943cd524d7253b5b42c07b2fb7ac Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Wed, 22 Oct 2025 10:45:22 -0400
Subject: [PATCH 18/35] clean up jquery unwrapping

---
 packages/driver/src/dom/jquery.ts             |  2 +-
 .../driver/src/dom/visibility/fastIsHidden.ts | 22 ++++++++++---------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/driver/src/dom/jquery.ts b/packages/driver/src/dom/jquery.ts
index 253d3868f5f..186375864db 100644
--- a/packages/driver/src/dom/jquery.ts
+++ b/packages/driver/src/dom/jquery.ts
@@ -21,7 +21,7 @@ export const unwrap = function (obj) {
   return obj
 }
 
-const isJquery = (obj) => {
+export const isJquery = (obj: any): obj is JQuery<any> => {
   let hasJqueryProperty = false
 
   try {
diff --git a/packages/driver/src/dom/visibility/fastIsHidden.ts b/packages/driver/src/dom/visibility/fastIsHidden.ts
index eb9509c22c8..172214a79b0 100644
--- a/packages/driver/src/dom/visibility/fastIsHidden.ts
+++ b/packages/driver/src/dom/visibility/fastIsHidden.ts
@@ -1,6 +1,6 @@
 import $elements from '../elements'
 
-import { unwrap, wrap } from '../jquery'
+import { unwrap, wrap, isJquery } from '../jquery'
 const { isOption, isOptgroup, isBody, isHTML } = $elements
 
 const DEBUG = true
@@ -102,21 +102,23 @@ function visibleToRaycast (el: HTMLElement, rect: DOMRect, maxDepth: number = 2,
   })
 }
 
-export function fastIsHidden (el: JQuery<HTMLElement>, options: { checkOpacity: boolean } = { checkOpacity: true }): boolean {
-  debug('fastIsHidden', el)
+export function fastIsHidden (subject: JQuery<HTMLElement> | HTMLElement, options: { checkOpacity: boolean } = { checkOpacity: true }): boolean {
+  debug('fastIsHidden', subject)
 
   // basic css checks
-  if (isBody(el) || isHTML(el)) {
+  if (isBody(subject) || isHTML(subject)) {
     return false
   }
 
-  const subjects = unwrap(el) as HTMLElement | HTMLElement[]
+  if (isJquery(subject)) {
+    const subjects = unwrap(subject) as HTMLElement | HTMLElement[]
 
-  if (Array.isArray(subjects) && (subjects.length > 1)) {
-    return subjects.some((subject: HTMLElement) => fastIsHidden(wrap(subject), options))
-  }
+    if (Array.isArray(subjects)) {
+      return subjects.some((subject: HTMLElement) => fastIsHidden(wrap(subject), options))
+    }
 
-  const subject: HTMLElement = Array.isArray(subjects) ? subjects[0] : subjects
+    return fastIsHidden(subject, options)
+  }
 
   if (subject.computedStyleMap().get('display')?.toString() === 'none') {
     return true
@@ -155,7 +157,7 @@ export function fastIsHidden (el: JQuery<HTMLElement>, options: { checkOpacity:
 
   // need to do a more intensive opacity check
   if (options.checkOpacity) {
-    let currentElement: HTMLElement | null = subject
+    let currentElement = subject
     let effectiveOpacity = opacity
 
     while (currentElement) {

From 70791beee26518884a49b3c4b6de7291d8345192 Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Wed, 22 Oct 2025 11:22:29 -0400
Subject: [PATCH 19/35] some more cleanup

---
 .../e2e/memory/virtual-scroll-stress.cy.js    |  2 +-
 packages/driver/src/dom/visibility.ts         |  4 +-
 .../driver/src/dom/visibility/fastIsHidden.ts | 49 +++++--------------
 3 files changed, 15 insertions(+), 40 deletions(-)

diff --git a/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js b/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
index 7c72221ee31..ee4d9a6e841 100644
--- a/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
+++ b/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
@@ -12,7 +12,7 @@
  * - Rapid scrolling patterns that may cause crashes
  */
 
-describe('React Virtuoso Browser Crash Tests', {
+describe('Virtual Scrolling Stress Tests', {
   experimentalFastVisibility: true,
   numTestsKeptInMemory: 0,
 }, () => {
diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 2b56d2dfb2c..38a806644df 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -4,9 +4,8 @@ import $document from './document'
 import $elements from './elements'
 import $coordinates from './coordinates'
 import * as $transform from './transform'
-//import { isVisible } from './visibility/isVisible'
 const { isElement, isBody, isHTML, isOption, isOptgroup, getParent, getFirstParentWithTagName, isAncestor, isChild, getAllParents, isDescendent, isUndefinedOrHTMLBodyDoc, elOrAncestorIsFixedOrSticky, isDetached, isFocusable, stringify: stringifyElement } = $elements
-import { fastIsHidden, fastIsVisible } from './visibility/fastIsVisible'
+import { fastIsHidden } from './visibility/fastIsHidden'
 const fixedOrAbsoluteRe = /(fixed|absolute)/
 
 const OVERFLOW_PROPS = ['hidden', 'clip', 'scroll', 'auto']
@@ -630,7 +629,6 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true }
 /* eslint-enable no-cond-assign */
 
 export default {
-  fastIsVisible,
   fastIsHidden,
   isVisible,
   isHidden,
diff --git a/packages/driver/src/dom/visibility/fastIsHidden.ts b/packages/driver/src/dom/visibility/fastIsHidden.ts
index 172214a79b0..a78216566b6 100644
--- a/packages/driver/src/dom/visibility/fastIsHidden.ts
+++ b/packages/driver/src/dom/visibility/fastIsHidden.ts
@@ -3,7 +3,7 @@ import $elements from '../elements'
 import { unwrap, wrap, isJquery } from '../jquery'
 const { isOption, isOptgroup, isBody, isHTML } = $elements
 
-const DEBUG = true
+const DEBUG = false
 
 function debug (...args: any[]) {
   if (DEBUG) {
@@ -71,14 +71,13 @@ function visibleAtPoint (el: HTMLElement, x: number, y: number): boolean {
   return Boolean(elAtPoint) && (elAtPoint === el || el.contains(elAtPoint))
 }
 
-function visibleToRaycast (el: HTMLElement, rect: DOMRect, maxDepth: number = 2, currentDepth: number = 0): boolean {
+function visibleToUser (el: HTMLElement, rect: DOMRect, maxDepth: number = 2, currentDepth: number = 0): boolean {
   if (currentDepth >= maxDepth) {
     return false
   }
 
   const { x, y, width, height } = rect
 
-  debug('visibleToRaycast', x, y, width, height)
   const samples = [
     [x, y],
     [x + width, y],
@@ -98,7 +97,7 @@ function visibleToRaycast (el: HTMLElement, rect: DOMRect, maxDepth: number = 2,
   debug('subRects', subRects)
 
   return subRects.some((subRect: DOMRect) => {
-    return visibleToRaycast(el, subRect, maxDepth, currentDepth + 1)
+    return visibleToUser(el, subRect, maxDepth, currentDepth + 1)
   })
 }
 
@@ -120,17 +119,11 @@ export function fastIsHidden (subject: JQuery<HTMLElement> | HTMLElement, option
     return fastIsHidden(subject, options)
   }
 
-  if (subject.computedStyleMap().get('display')?.toString() === 'none') {
-    return true
-  }
-
-  if (subject.computedStyleMap().get('visibility')?.toString() === 'hidden' || subject.computedStyleMap().get('visibility')?.toString() === 'collapse') {
-    return true
-  }
-
-  const opacity = Number(subject.computedStyleMap().get('opacity')?.toString() || 1)
-
-  if (options.checkOpacity && opacity === 0) {
+  if (!subject.checkVisibility({
+    contentVisibilityAuto: true,
+    opacityProperty: options.checkOpacity,
+    visibilityProperty: true,
+  })) {
     return true
   }
 
@@ -142,20 +135,10 @@ export function fastIsHidden (subject: JQuery<HTMLElement> | HTMLElement, option
     }
   }
 
-  debug('post-option check', subject)
-
-  // by boundingClientRect is less accurate than measuring each clientRect
-  // individually, but doesn't have the same issues with svg elements.
-
   const boundingRect = getBoundingClientRect(subject)
 
-  if (boundingRect.width === 0 || boundingRect.height === 0) {
-    //return true
-  }
-
-  debug('post-boundingClientRect check', subject)
-
-  // need to do a more intensive opacity check
+  // Do we need to do a more intensive opacity check, or is the checkOpacity option enough?
+  /*
   if (options.checkOpacity) {
     let currentElement = subject
     let effectiveOpacity = opacity
@@ -171,19 +154,13 @@ export function fastIsHidden (subject: JQuery<HTMLElement> | HTMLElement, option
       currentElement = currentElement.parentElement
     }
   }
+  */
 
-  if (visibleToRaycast(subject, boundingRect)) {
-    debug('visibleToRaycast', subject, boundingRect)
+  if (visibleToUser(subject, boundingRect)) {
+    debug('visibleToUser', subject, boundingRect)
 
     return false
   }
 
   return true
-
-  // if we want to check each clientRect individually, we have to measure
-  // svg child elements separately.
-  // the viewport for non-outer svg elements is the outer svg element,
-  // so svg elements need to be handled differently - in order to raycast,
-  // we need the bounding rect of the svg element relative to the browser
-  // viewport.
 }

From d139bbdc20ea8f912375603ba4cd097b3f3fb678 Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacieprins@users.noreply.github.com>
Date: Wed, 22 Oct 2025 11:27:04 -0400
Subject: [PATCH 20/35] Delete visibility-algorithm.dot

---
 visibility-algorithm.dot | 217 ---------------------------------------
 1 file changed, 217 deletions(-)
 delete mode 100644 visibility-algorithm.dot

diff --git a/visibility-algorithm.dot b/visibility-algorithm.dot
deleted file mode 100644
index 6d5e7d80d96..00000000000
--- a/visibility-algorithm.dot
+++ /dev/null
@@ -1,217 +0,0 @@
-digraph VisibilityAlgorithm {
-  rankdir=TB;
-  node [shape=box, style=filled, fillcolor=lightblue];
-  edge [color=gray];
-  
-  // Entry point
-  isVisible [label="isVisible(el)", fillcolor=lightgreen, style=filled];
-  
-  // Main flow
-  isVisible -> isHidden [label="!isHidden()"];
-  
-  // isHidden branches
-  isHidden -> isStrictlyHidden [label="Check element itself"];
-  isHidden -> isHiddenByAncestors [label="Check ancestors"];
-  
-  // isStrictlyHidden checks
-  isStrictlyHidden -> ensureEl [label="Validate element"];
-  isStrictlyHidden -> bodyHtmlCheck [label="Body/HTML always visible"];
-  isStrictlyHidden -> optionCheck [label="Option/Optgroup handling"];
-  isStrictlyHidden -> sizeCheck [label="Size & dimensions"];
-  isStrictlyHidden -> visibilityCheck [label="Visibility properties"];
-  isStrictlyHidden -> transformCheck [label="Transform scaling"];
-  isStrictlyHidden -> opacityCheck [label="Opacity check"];
-  
-  // Size check details
-  sizeCheck -> elHasNoEffectiveWidthOrHeight [label="Check effective size"];
-  elHasNoEffectiveWidthOrHeight -> elClientWidth [label="Get width"];
-  elHasNoEffectiveWidthOrHeight -> elClientHeight [label="Get height"];
-  elHasNoEffectiveWidthOrHeight -> getClientRects [label="Check rects"];
-  elHasNoEffectiveWidthOrHeight -> transformNone [label="Transform = none"];
-  elHasNoEffectiveWidthOrHeight -> overflowHidden [label="Overflow hidden"];
-  
-  // Visibility check details
-  visibilityCheck -> elHasVisibilityHiddenOrCollapse [label="Check visibility"];
-  elHasVisibilityHiddenOrCollapse -> elHasVisibilityHidden [label="visibility: hidden"];
-  elHasVisibilityHiddenOrCollapse -> elHasVisibilityCollapse [label="visibility: collapse"];
-  
-  // Option handling
-  optionCheck -> elHasDisplayNone [label="Check display: none"];
-  optionCheck -> getFirstSelectParentFromEl [label="Get select parent"];
-  getFirstSelectParentFromEl -> isStrictlyHidden [label="Recursive check", style=dashed];
-  
-  // Ancestor checks
-  isHiddenByAncestors -> optionAncestorCheck [label="Option ancestor handling"];
-  isHiddenByAncestors -> elIsHiddenByAncestors [label="Ancestor chain check"];
-  isHiddenByAncestors -> fixedStickyCheck [label="Fixed/Sticky position"];
-  isHiddenByAncestors -> overflowBoundsCheck [label="Overflow bounds"];
-  
-  // Ancestor chain walking
-  elIsHiddenByAncestors -> parentWalk [label="Walk up parent chain"];
-  parentWalk -> parentOpacity [label="Check parent opacity"];
-  parentWalk -> parentOverflow [label="Check parent overflow"];
-  parentWalk -> parentSize [label="Check parent size"];
-  parentWalk -> positionCheck [label="Check position fixed/absolute"];
-  
-  // Position checks
-  positionCheck -> elDescendentsHavePositionFixedOrAbsolute [label="Check descendants"];
-  elDescendentsHavePositionFixedOrAbsolute -> getAllParents [label="Get all parents"];
-  elDescendentsHavePositionFixedOrAbsolute -> positionRegex [label="Check position regex"];
-  
-  // Fixed/Sticky handling
-  fixedStickyCheck -> elOrAncestorIsFixedOrSticky [label="Check if fixed/sticky"];
-  elOrAncestorIsFixedOrSticky -> elIsNotElementFromPoint [label="Check element coverage"];
-  elIsNotElementFromPoint -> elAtCenterPoint [label="Get element at center"];
-  elAtCenterPoint -> getDocumentFromElement [label="Get document"];
-  elAtCenterPoint -> getElementPositioning [label="Get positioning"];
-  elAtCenterPoint -> getElementAtPointFromViewport [label="Get element at point"];
-  
-  // Overflow bounds checking
-  overflowBoundsCheck -> elIsOutOfBoundsOfAncestorsOverflow [label="Check bounds"];
-  elIsOutOfBoundsOfAncestorsOverflow -> ancestorWalk [label="Walk ancestors"];
-  ancestorWalk -> canClipContent [label="Check if can clip"];
-  canClipContent -> elHasClippableOverflow [label="Check overflow props"];
-  canClipContent -> elHasDisplayContents [label="Check display: contents"];
-  canClipContent -> offsetParentCheck [label="Check offset parent"];
-  
-  // Offset parent checks
-  offsetParentCheck -> elHasPositionRelative [label="Check position: relative"];
-  offsetParentCheck -> elHasPositionAbsolute [label="Check position: absolute"];
-  offsetParentCheck -> isAncestor [label="Check ancestor relationship"];
-  offsetParentCheck -> isChild [label="Check child relationship"];
-  offsetParentCheck -> isDescendent [label="Check descendant relationship"];
-  
-  // Bounds calculation
-  ancestorWalk -> getBoundingClientRect [label="Get ancestor bounds"];
-  ancestorWalk -> getBoundingClientRect2 [label="Get element bounds"];
-  ancestorWalk -> overflowXCheck [label="Check overflow-x"];
-  ancestorWalk -> overflowYCheck [label="Check overflow-y"];
-  ancestorWalk -> boundsComparison [label="Compare bounds"];
-  
-  // Helper functions for property checks
-  elHasDisplayNone -> cssDisplay [label="Check CSS display"];
-  elHasVisibilityHidden -> cssVisibility [label="Check CSS visibility"];
-  elHasVisibilityCollapse -> cssVisibility2 [label="Check CSS visibility"];
-  elHasOpacityZero -> cssOpacity [label="Check CSS opacity"];
-  elHasOverflowHidden -> cssOverflow [label="Check CSS overflow"];
-  
-  // Parent property checks (recursive)
-  parentHasDisplayNone -> parentWalk2 [label="Walk up parents"];
-  parentHasVisibilityHidden -> parentWalk3 [label="Walk up parents"];
-  parentHasVisibilityCollapse -> parentWalk4 [label="Walk up parents"];
-  parentHasOpacityZero -> parentWalk5 [label="Walk up parents"];
-  
-  // Position property checks
-  elHasPositionRelative -> cssPosition [label="Check CSS position"];
-  elHasPositionStatic -> cssPosition2 [label="Check CSS position"];
-  elHasPositionAbsolute -> cssPosition3 [label="Check CSS position"];
-  
-  // Display property checks
-  elHasDisplayContents -> cssDisplay2 [label="Check CSS display"];
-  elHasDisplayInline -> cssDisplay3 [label="Check CSS display"];
-  
-  // Client dimension helpers
-  elClientWidth -> elementBoundingRect [label="Get bounding rect"];
-  elClientHeight -> elementBoundingRect2 [label="Get bounding rect"];
-  elementBoundingRect -> getBoundingClientRect3 [label="Call getBoundingClientRect()"];
-  elementBoundingRect2 -> getBoundingClientRect4 [label="Call getBoundingClientRect()"];
-  
-  // Transform and overflow helpers
-  transformNone -> getComputedStyle [label="Get computed style"];
-  transformNone -> getPropertyValue [label="Get transform value"];
-  overflowHidden -> elHasOverflowHidden [label="Check overflow hidden"];
-  
-  // Constants and regex
-  OVERFLOW_PROPS [label="OVERFLOW_PROPS\n['hidden', 'clip', 'scroll', 'auto']", fillcolor=lightyellow];
-  positionRegex [label="/(fixed|absolute)/", fillcolor=lightyellow];
-  
-  // CSS property checks
-  cssDisplay [label="$el.css('display')", fillcolor=lightcoral];
-  cssVisibility [label="$el.css('visibility')", fillcolor=lightcoral];
-  cssOpacity [label="$el.css('opacity')", fillcolor=lightcoral];
-  cssOverflow [label="$el.css('overflow')", fillcolor=lightcoral];
-  cssPosition [label="$el.css('position')", fillcolor=lightcoral];
-  
-  // DOM API calls
-  getBoundingClientRect [label="getBoundingClientRect()", fillcolor=lightpink];
-  getClientRects [label="getClientRects()", fillcolor=lightpink];
-  getComputedStyle [label="getComputedStyle()", fillcolor=lightpink];
-  
-  // External dependencies
-  transformDetect [label="$transform.detectVisibility()", fillcolor=lightgray];
-  coordinatesAPI [label="$coordinates API", fillcolor=lightgray];
-  documentAPI [label="$document API", fillcolor=lightgray];
-  elementsAPI [label="$elements API", fillcolor=lightgray];
-  
-  // Connect external dependencies
-  transformCheck -> transformDetect;
-  elAtCenterPoint -> coordinatesAPI;
-  elAtCenterPoint -> documentAPI;
-  isStrictlyHidden -> elementsAPI;
-  
-  // Styling for different types of nodes
-  subgraph cluster_checks {
-    label="Element Property Checks";
-    style=filled;
-    fillcolor=lightblue;
-    elHasDisplayNone;
-    elHasVisibilityHidden;
-    elHasVisibilityCollapse;
-    elHasOpacityZero;
-    elHasOverflowHidden;
-  }
-  
-  subgraph cluster_ancestors {
-    label="Ancestor Chain Checks";
-    style=filled;
-    fillcolor=lightgreen;
-    elIsHiddenByAncestors;
-    parentHasDisplayNone;
-    parentHasVisibilityHidden;
-    parentHasVisibilityCollapse;
-    parentHasOpacityZero;
-  }
-  
-  subgraph cluster_position {
-    label="Position & Layout Checks";
-    style=filled;
-    fillcolor=lightyellow;
-    elHasPositionRelative;
-    elHasPositionStatic;
-    elHasPositionAbsolute;
-    elOrAncestorIsFixedOrSticky;
-    elIsNotElementFromPoint;
-  }
-  
-  subgraph cluster_overflow {
-    label="Overflow & Clipping Checks";
-    style=filled;
-    fillcolor=lightcoral;
-    elHasClippableOverflow;
-    canClipContent;
-    elIsOutOfBoundsOfAncestorsOverflow;
-  }
-  
-  subgraph cluster_dimensions {
-    label="Size & Dimension Checks";
-    style=filled;
-    fillcolor=lightpink;
-    elHasNoEffectiveWidthOrHeight;
-    elClientWidth;
-    elClientHeight;
-    elementBoundingRect;
-  }
-  
-  // Performance annotations
-  isVisible [label="isVisible(el)\n[ENTRY POINT]", fillcolor=lightgreen];
-  isHidden [label="isHidden(el)\n[MAIN BRANCH]", fillcolor=lightgreen];
-  isStrictlyHidden [label="isStrictlyHidden(el)\n[ELEMENT CHECKS]", fillcolor=lightblue];
-  isHiddenByAncestors [label="isHiddenByAncestors(el)\n[ANCESTOR CHECKS]", fillcolor=lightgreen];
-  
-  // Add performance notes
-  elIsHiddenByAncestors [label="elIsHiddenByAncestors($el)\n[RECURSIVE - WALKS UP TREE]", fillcolor=orange];
-  elIsOutOfBoundsOfAncestorsOverflow [label="elIsOutOfBoundsOfAncestorsOverflow($el)\n[RECURSIVE - WALKS UP TREE]", fillcolor=orange];
-  elAtCenterPoint [label="elAtCenterPoint($el)\n[EXPENSIVE - DOM QUERY]", fillcolor=red];
-  getBoundingClientRect [label="getBoundingClientRect()\n[EXPENSIVE - LAYOUT CALCULATION]", fillcolor=red];
-  getComputedStyle [label="getComputedStyle()\n[EXPENSIVE - STYLE CALCULATION]", fillcolor=red];
-}

From 36b314c8f1c558aa33e264b5600668e91bbb001e Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacieprins@users.noreply.github.com>
Date: Wed, 22 Oct 2025 11:27:19 -0400
Subject: [PATCH 21/35] Delete visibility-algorithm.svg

---
 visibility-algorithm.svg | 1145 --------------------------------------
 1 file changed, 1145 deletions(-)
 delete mode 100644 visibility-algorithm.svg

diff --git a/visibility-algorithm.svg b/visibility-algorithm.svg
deleted file mode 100644
index c44a7620903..00000000000
--- a/visibility-algorithm.svg
+++ /dev/null
@@ -1,1145 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
- "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<!-- Generated by graphviz version 13.1.0 (20250701.0955)
- -->
-<!-- Title: VisibilityAlgorithm Pages: 1 -->
-<svg width="3925pt" height="941pt"
- viewBox="0.00 0.00 3925.00 941.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 936.5)">
-<title>VisibilityAlgorithm</title>
-<polygon fill="white" stroke="none" points="-4,4 -4,-936.5 3920.74,-936.5 3920.74,4 -4,4"/>
-<g id="clust1" class="cluster">
-<title>cluster_checks</title>
-<polygon fill="lightblue" stroke="black" points="91.12,-265 91.12,-341.5 833.12,-341.5 833.12,-265 91.12,-265"/>
-<text xml:space="preserve" text-anchor="middle" x="462.12" y="-324.2" font-family="Times,serif" font-size="14.00">Element Property Checks</text>
-</g>
-<g id="clust2" class="cluster">
-<title>cluster_ancestors</title>
-<polygon fill="lightgreen" stroke="black" points="1404.12,-580.5 1404.12,-662 2320.12,-662 2320.12,-580.5 1404.12,-580.5"/>
-<text xml:space="preserve" text-anchor="middle" x="1862.12" y="-644.7" font-family="Times,serif" font-size="14.00">Ancestor Chain Checks</text>
-</g>
-<g id="clust3" class="cluster">
-<title>cluster_position</title>
-<polygon fill="lightyellow" stroke="black" points="2835.12,-174 2835.12,-341.5 3481.12,-341.5 3481.12,-174 2835.12,-174"/>
-<text xml:space="preserve" text-anchor="middle" x="3158.12" y="-324.2" font-family="Times,serif" font-size="14.00">Position &amp; Layout Checks</text>
-</g>
-<g id="clust4" class="cluster">
-<title>cluster_overflow</title>
-<polygon fill="lightcoral" stroke="black" points="2293.12,-376 2293.12,-546 2684.12,-546 2684.12,-376 2293.12,-376"/>
-<text xml:space="preserve" text-anchor="middle" x="2488.62" y="-528.7" font-family="Times,serif" font-size="14.00">Overflow &amp; Clipping Checks</text>
-</g>
-<g id="clust5" class="cluster">
-<title>cluster_dimensions</title>
-<polygon fill="lightpink" stroke="black" points="995.12,-265 995.12,-543.5 1217.12,-543.5 1217.12,-265 995.12,-265"/>
-<text xml:space="preserve" text-anchor="middle" x="1106.12" y="-526.2" font-family="Times,serif" font-size="14.00">Size &amp; Dimension Checks</text>
-</g>
-<!-- isVisible -->
-<g id="node1" class="node">
-<title>isVisible</title>
-<polygon fill="lightgreen" stroke="black" points="1539.5,-932.5 1426.75,-932.5 1426.75,-891.5 1539.5,-891.5 1539.5,-932.5"/>
-<text xml:space="preserve" text-anchor="middle" x="1483.12" y="-915.2" font-family="Times,serif" font-size="14.00">isVisible(el)</text>
-<text xml:space="preserve" text-anchor="middle" x="1483.12" y="-898.7" font-family="Times,serif" font-size="14.00">[ENTRY POINT]</text>
-</g>
-<!-- isHidden -->
-<g id="node2" class="node">
-<title>isHidden</title>
-<polygon fill="lightgreen" stroke="black" points="1544,-839 1422.25,-839 1422.25,-798 1544,-798 1544,-839"/>
-<text xml:space="preserve" text-anchor="middle" x="1483.12" y="-821.7" font-family="Times,serif" font-size="14.00">isHidden(el)</text>
-<text xml:space="preserve" text-anchor="middle" x="1483.12" y="-805.2" font-family="Times,serif" font-size="14.00">[MAIN BRANCH]</text>
-</g>
-<!-- isVisible&#45;&gt;isHidden -->
-<g id="edge1" class="edge">
-<title>isVisible&#45;&gt;isHidden</title>
-<path fill="none" stroke="gray" d="M1483.12,-891.15C1483.12,-879.28 1483.12,-863.94 1483.12,-850.5"/>
-<polygon fill="gray" stroke="gray" points="1486.63,-850.83 1483.13,-840.83 1479.63,-850.83 1486.63,-850.83"/>
-<text xml:space="preserve" text-anchor="middle" x="1514.25" y="-860.2" font-family="Times,serif" font-size="14.00">!isHidden()</text>
-</g>
-<!-- isStrictlyHidden -->
-<g id="node3" class="node">
-<title>isStrictlyHidden</title>
-<polygon fill="lightblue" stroke="black" points="671.62,-745.5 526.62,-745.5 526.62,-704.5 671.62,-704.5 671.62,-745.5"/>
-<text xml:space="preserve" text-anchor="middle" x="599.12" y="-728.2" font-family="Times,serif" font-size="14.00">isStrictlyHidden(el)</text>
-<text xml:space="preserve" text-anchor="middle" x="599.12" y="-711.7" font-family="Times,serif" font-size="14.00">[ELEMENT CHECKS]</text>
-</g>
-<!-- isHidden&#45;&gt;isStrictlyHidden -->
-<g id="edge2" class="edge">
-<title>isHidden&#45;&gt;isStrictlyHidden</title>
-<path fill="none" stroke="gray" d="M1422.02,-811.17C1267.33,-795.16 860.02,-753 683.13,-734.69"/>
-<polygon fill="gray" stroke="gray" points="683.63,-731.23 673.32,-733.68 682.91,-738.19 683.63,-731.23"/>
-<text xml:space="preserve" text-anchor="middle" x="1176.55" y="-766.7" font-family="Times,serif" font-size="14.00">Check element itself</text>
-</g>
-<!-- isHiddenByAncestors -->
-<g id="node4" class="node">
-<title>isHiddenByAncestors</title>
-<polygon fill="lightgreen" stroke="black" points="2505.75,-745.5 2352.5,-745.5 2352.5,-704.5 2505.75,-704.5 2505.75,-745.5"/>
-<text xml:space="preserve" text-anchor="middle" x="2429.12" y="-728.2" font-family="Times,serif" font-size="14.00">isHiddenByAncestors(el)</text>
-<text xml:space="preserve" text-anchor="middle" x="2429.12" y="-711.7" font-family="Times,serif" font-size="14.00">[ANCESTOR CHECKS]</text>
-</g>
-<!-- isHidden&#45;&gt;isHiddenByAncestors -->
-<g id="edge3" class="edge">
-<title>isHidden&#45;&gt;isHiddenByAncestors</title>
-<path fill="none" stroke="gray" d="M1544.21,-802.39C1552.22,-800.74 1560.35,-799.21 1568.12,-798 1848.28,-754.38 2184.12,-735.92 2340.68,-729.25"/>
-<polygon fill="gray" stroke="gray" points="2340.74,-732.75 2350.58,-728.83 2340.44,-725.76 2340.74,-732.75"/>
-<text xml:space="preserve" text-anchor="middle" x="1871.41" y="-766.7" font-family="Times,serif" font-size="14.00">Check ancestors</text>
-</g>
-<!-- ensureEl -->
-<g id="node5" class="node">
-<title>ensureEl</title>
-<polygon fill="lightblue" stroke="black" points="177.75,-627 114.5,-627 114.5,-591 177.75,-591 177.75,-627"/>
-<text xml:space="preserve" text-anchor="middle" x="146.12" y="-603.95" font-family="Times,serif" font-size="14.00">ensureEl</text>
-</g>
-<!-- isStrictlyHidden&#45;&gt;ensureEl -->
-<g id="edge4" class="edge">
-<title>isStrictlyHidden&#45;&gt;ensureEl</title>
-<path fill="none" stroke="gray" d="M526.39,-722.67C407.94,-719.79 183.9,-711.13 157.62,-686.5 144.85,-674.53 142.11,-654.91 142.49,-638.54"/>
-<polygon fill="gray" stroke="gray" points="145.96,-639.07 143.12,-628.86 138.97,-638.61 145.96,-639.07"/>
-<text xml:space="preserve" text-anchor="middle" x="203.38" y="-673.2" font-family="Times,serif" font-size="14.00">Validate element</text>
-</g>
-<!-- bodyHtmlCheck -->
-<g id="node6" class="node">
-<title>bodyHtmlCheck</title>
-<polygon fill="lightblue" stroke="black" points="314.12,-627 208.12,-627 208.12,-591 314.12,-591 314.12,-627"/>
-<text xml:space="preserve" text-anchor="middle" x="261.12" y="-603.95" font-family="Times,serif" font-size="14.00">bodyHtmlCheck</text>
-</g>
-<!-- isStrictlyHidden&#45;&gt;bodyHtmlCheck -->
-<g id="edge5" class="edge">
-<title>isStrictlyHidden&#45;&gt;bodyHtmlCheck</title>
-<path fill="none" stroke="gray" d="M526.4,-720.96C432.58,-716.27 279.28,-705.76 261.88,-686.5 250.34,-673.73 250.28,-654.3 253.05,-638.21"/>
-<polygon fill="gray" stroke="gray" points="256.41,-639.23 255.11,-628.71 249.57,-637.74 256.41,-639.23"/>
-<text xml:space="preserve" text-anchor="middle" x="338" y="-673.2" font-family="Times,serif" font-size="14.00">Body/HTML always visible</text>
-</g>
-<!-- optionCheck -->
-<g id="node7" class="node">
-<title>optionCheck</title>
-<polygon fill="lightblue" stroke="black" points="848.62,-627 763.62,-627 763.62,-591 848.62,-591 848.62,-627"/>
-<text xml:space="preserve" text-anchor="middle" x="806.12" y="-603.95" font-family="Times,serif" font-size="14.00">optionCheck</text>
-</g>
-<!-- isStrictlyHidden&#45;&gt;optionCheck -->
-<g id="edge6" class="edge">
-<title>isStrictlyHidden&#45;&gt;optionCheck</title>
-<path fill="none" stroke="gray" d="M636.42,-704.13C663.65,-689.74 697.01,-672.4 704.12,-670 723.37,-663.5 730.9,-670.98 749.12,-662 762.14,-655.59 774.34,-645.3 784.09,-635.56"/>
-<polygon fill="gray" stroke="gray" points="786.59,-638.01 790.94,-628.35 781.51,-633.18 786.59,-638.01"/>
-<text xml:space="preserve" text-anchor="middle" x="776.12" y="-673.2" font-family="Times,serif" font-size="14.00">Option/Optgroup handling</text>
-</g>
-<!-- sizeCheck -->
-<g id="node8" class="node">
-<title>sizeCheck</title>
-<polygon fill="lightblue" stroke="black" points="937.88,-627 866.38,-627 866.38,-591 937.88,-591 937.88,-627"/>
-<text xml:space="preserve" text-anchor="middle" x="902.12" y="-603.95" font-family="Times,serif" font-size="14.00">sizeCheck</text>
-</g>
-<!-- isStrictlyHidden&#45;&gt;sizeCheck -->
-<g id="edge7" class="edge">
-<title>isStrictlyHidden&#45;&gt;sizeCheck</title>
-<path fill="none" stroke="gray" d="M671.96,-719.35C734.64,-714.22 819.38,-704.23 848.12,-686.5 866.8,-674.98 880.8,-654.34 889.85,-637.4"/>
-<polygon fill="gray" stroke="gray" points="892.81,-639.3 894.17,-628.8 886.56,-636.16 892.81,-639.3"/>
-<text xml:space="preserve" text-anchor="middle" x="919.47" y="-673.2" font-family="Times,serif" font-size="14.00">Size &amp; dimensions</text>
-</g>
-<!-- visibilityCheck -->
-<g id="node9" class="node">
-<title>visibilityCheck</title>
-<polygon fill="lightblue" stroke="black" points="404.38,-511 305.88,-511 305.88,-475 404.38,-475 404.38,-511"/>
-<text xml:space="preserve" text-anchor="middle" x="355.12" y="-487.95" font-family="Times,serif" font-size="14.00">visibilityCheck</text>
-</g>
-<!-- isStrictlyHidden&#45;&gt;visibilityCheck -->
-<g id="edge8" class="edge">
-<title>isStrictlyHidden&#45;&gt;visibilityCheck</title>
-<path fill="none" stroke="gray" d="M528.74,-704.02C472.8,-687.86 403.15,-667.01 398.38,-662 362.15,-624.01 355.2,-559.87 354.46,-522.8"/>
-<polygon fill="gray" stroke="gray" points="357.96,-522.85 354.42,-512.86 350.96,-522.88 357.96,-522.85"/>
-<text xml:space="preserve" text-anchor="middle" x="452.75" y="-603.95" font-family="Times,serif" font-size="14.00">Visibility properties</text>
-</g>
-<!-- transformCheck -->
-<g id="node10" class="node">
-<title>transformCheck</title>
-<polygon fill="lightblue" stroke="black" points="620,-627 516.25,-627 516.25,-591 620,-591 620,-627"/>
-<text xml:space="preserve" text-anchor="middle" x="568.12" y="-603.95" font-family="Times,serif" font-size="14.00">transformCheck</text>
-</g>
-<!-- isStrictlyHidden&#45;&gt;transformCheck -->
-<g id="edge9" class="edge">
-<title>isStrictlyHidden&#45;&gt;transformCheck</title>
-<path fill="none" stroke="gray" d="M557.85,-704.04C551.63,-699.18 546.07,-693.36 542.38,-686.5 534.02,-670.96 540.11,-652.19 548.47,-637.14"/>
-<polygon fill="gray" stroke="gray" points="551.41,-639.03 553.67,-628.68 545.45,-635.37 551.41,-639.03"/>
-<text xml:space="preserve" text-anchor="middle" x="592.25" y="-673.2" font-family="Times,serif" font-size="14.00">Transform scaling</text>
-</g>
-<!-- opacityCheck -->
-<g id="node11" class="node">
-<title>opacityCheck</title>
-<polygon fill="lightblue" stroke="black" points="1046.25,-627 956,-627 956,-591 1046.25,-591 1046.25,-627"/>
-<text xml:space="preserve" text-anchor="middle" x="1001.12" y="-603.95" font-family="Times,serif" font-size="14.00">opacityCheck</text>
-</g>
-<!-- isStrictlyHidden&#45;&gt;opacityCheck -->
-<g id="edge10" class="edge">
-<title>isStrictlyHidden&#45;&gt;opacityCheck</title>
-<path fill="none" stroke="gray" d="M671.9,-720.94C774.53,-716 951.95,-704.91 975.12,-686.5 989.53,-675.06 996,-655.26 998.88,-638.67"/>
-<polygon fill="gray" stroke="gray" points="1002.34,-639.2 1000.21,-628.82 995.41,-638.27 1002.34,-639.2"/>
-<text xml:space="preserve" text-anchor="middle" x="1026.56" y="-673.2" font-family="Times,serif" font-size="14.00">Opacity check</text>
-</g>
-<!-- elementsAPI -->
-<g id="node89" class="node">
-<title>elementsAPI</title>
-<polygon fill="lightgray" stroke="black" points="96.25,-627 0,-627 0,-591 96.25,-591 96.25,-627"/>
-<text xml:space="preserve" text-anchor="middle" x="48.12" y="-603.95" font-family="Times,serif" font-size="14.00">$elements API</text>
-</g>
-<!-- isStrictlyHidden&#45;&gt;elementsAPI -->
-<g id="edge81" class="edge">
-<title>isStrictlyHidden&#45;&gt;elementsAPI</title>
-<path fill="none" stroke="gray" d="M526.27,-722.31C415.95,-719.02 212.04,-709.9 143.12,-686.5 114.09,-676.64 87.5,-653.45 69.89,-635.17"/>
-<polygon fill="gray" stroke="gray" points="72.85,-633.23 63.48,-628.29 67.73,-638 72.85,-633.23"/>
-</g>
-<!-- optionAncestorCheck -->
-<g id="node23" class="node">
-<title>optionAncestorCheck</title>
-<polygon fill="lightblue" stroke="black" points="3099,-627 2965.25,-627 2965.25,-591 3099,-591 3099,-627"/>
-<text xml:space="preserve" text-anchor="middle" x="3032.12" y="-603.95" font-family="Times,serif" font-size="14.00">optionAncestorCheck</text>
-</g>
-<!-- isHiddenByAncestors&#45;&gt;optionAncestorCheck -->
-<g id="edge23" class="edge">
-<title>isHiddenByAncestors&#45;&gt;optionAncestorCheck</title>
-<path fill="none" stroke="gray" d="M2506,-724.75C2631.32,-724.93 2873.46,-720.65 2951.12,-686.5 2976,-675.56 2997.97,-653.58 3012.73,-635.98"/>
-<polygon fill="gray" stroke="gray" points="3015.27,-638.42 3018.82,-628.44 3009.82,-634.02 3015.27,-638.42"/>
-<text xml:space="preserve" text-anchor="middle" x="3045.58" y="-673.2" font-family="Times,serif" font-size="14.00">Option ancestor handling</text>
-</g>
-<!-- elIsHiddenByAncestors -->
-<g id="node24" class="node">
-<title>elIsHiddenByAncestors</title>
-<polygon fill="orange" stroke="black" points="1971.88,-629.5 1756.38,-629.5 1756.38,-588.5 1971.88,-588.5 1971.88,-629.5"/>
-<text xml:space="preserve" text-anchor="middle" x="1864.12" y="-612.2" font-family="Times,serif" font-size="14.00">elIsHiddenByAncestors($el)</text>
-<text xml:space="preserve" text-anchor="middle" x="1864.12" y="-595.7" font-family="Times,serif" font-size="14.00">[RECURSIVE &#45; WALKS UP TREE]</text>
-</g>
-<!-- isHiddenByAncestors&#45;&gt;elIsHiddenByAncestors -->
-<g id="edge24" class="edge">
-<title>isHiddenByAncestors&#45;&gt;elIsHiddenByAncestors</title>
-<path fill="none" stroke="gray" d="M2352.08,-719.91C2261.73,-713.62 2108.17,-698.24 1981.12,-662 1957.54,-655.27 1932.54,-644.68 1911.74,-634.81"/>
-<polygon fill="gray" stroke="gray" points="1913.47,-631.76 1902.94,-630.55 1910.42,-638.06 1913.47,-631.76"/>
-<text xml:space="preserve" text-anchor="middle" x="2135.83" y="-673.2" font-family="Times,serif" font-size="14.00">Ancestor chain check</text>
-</g>
-<!-- fixedStickyCheck -->
-<g id="node25" class="node">
-<title>fixedStickyCheck</title>
-<polygon fill="lightblue" stroke="black" points="3082.5,-420 2969.75,-420 2969.75,-384 3082.5,-384 3082.5,-420"/>
-<text xml:space="preserve" text-anchor="middle" x="3026.12" y="-396.95" font-family="Times,serif" font-size="14.00">fixedStickyCheck</text>
-</g>
-<!-- isHiddenByAncestors&#45;&gt;fixedStickyCheck -->
-<g id="edge25" class="edge">
-<title>isHiddenByAncestors&#45;&gt;fixedStickyCheck</title>
-<path fill="none" stroke="gray" d="M2486.3,-704.07C2500.16,-698.77 2514.82,-692.76 2528.12,-686.5 2707.4,-602.14 2909.13,-477.46 2989.88,-426.25"/>
-<polygon fill="gray" stroke="gray" points="2991.28,-429.51 2997.84,-421.19 2987.53,-423.6 2991.28,-429.51"/>
-<text xml:space="preserve" text-anchor="middle" x="2836.35" y="-557.2" font-family="Times,serif" font-size="14.00">Fixed/Sticky position</text>
-</g>
-<!-- overflowBoundsCheck -->
-<g id="node26" class="node">
-<title>overflowBoundsCheck</title>
-<polygon fill="lightblue" stroke="black" points="2499.38,-627 2358.88,-627 2358.88,-591 2499.38,-591 2499.38,-627"/>
-<text xml:space="preserve" text-anchor="middle" x="2429.12" y="-603.95" font-family="Times,serif" font-size="14.00">overflowBoundsCheck</text>
-</g>
-<!-- isHiddenByAncestors&#45;&gt;overflowBoundsCheck -->
-<g id="edge26" class="edge">
-<title>isHiddenByAncestors&#45;&gt;overflowBoundsCheck</title>
-<path fill="none" stroke="gray" d="M2429.12,-704.14C2429.12,-686.1 2429.12,-659.25 2429.12,-638.84"/>
-<polygon fill="gray" stroke="gray" points="2432.63,-638.91 2429.13,-628.91 2425.63,-638.91 2432.63,-638.91"/>
-<text xml:space="preserve" text-anchor="middle" x="2476.38" y="-673.2" font-family="Times,serif" font-size="14.00">Overflow bounds</text>
-</g>
-<!-- elHasDisplayNone -->
-<g id="node21" class="node">
-<title>elHasDisplayNone</title>
-<polygon fill="lightblue" stroke="black" points="669.12,-309 551.12,-309 551.12,-273 669.12,-273 669.12,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="610.12" y="-285.95" font-family="Times,serif" font-size="14.00">elHasDisplayNone</text>
-</g>
-<!-- optionCheck&#45;&gt;elHasDisplayNone -->
-<g id="edge20" class="edge">
-<title>optionCheck&#45;&gt;elHasDisplayNone</title>
-<path fill="none" stroke="gray" d="M807.05,-590.74C807.78,-563.98 806.32,-511.5 787.12,-472.5 753.94,-405.1 686.01,-347.14 644.62,-316.12"/>
-<polygon fill="gray" stroke="gray" points="646.81,-313.39 636.68,-310.27 642.66,-319.02 646.81,-313.39"/>
-<text xml:space="preserve" text-anchor="middle" x="832.63" y="-441.2" font-family="Times,serif" font-size="14.00">Check display: none</text>
-</g>
-<!-- getFirstSelectParentFromEl -->
-<g id="node22" class="node">
-<title>getFirstSelectParentFromEl</title>
-<polygon fill="lightblue" stroke="black" points="778.5,-511 611.75,-511 611.75,-475 778.5,-475 778.5,-511"/>
-<text xml:space="preserve" text-anchor="middle" x="695.12" y="-487.95" font-family="Times,serif" font-size="14.00">getFirstSelectParentFromEl</text>
-</g>
-<!-- optionCheck&#45;&gt;getFirstSelectParentFromEl -->
-<g id="edge21" class="edge">
-<title>optionCheck&#45;&gt;getFirstSelectParentFromEl</title>
-<path fill="none" stroke="gray" d="M773.55,-590.59C765.71,-586.87 757.24,-583.25 749.12,-580.5 728.28,-573.44 715.13,-587.05 700.62,-570.5 689.44,-557.73 688.03,-538.71 689.43,-522.82"/>
-<polygon fill="gray" stroke="gray" points="692.9,-523.32 690.74,-512.95 685.96,-522.4 692.9,-523.32"/>
-<text xml:space="preserve" text-anchor="middle" x="746.38" y="-557.2" font-family="Times,serif" font-size="14.00">Get select parent</text>
-</g>
-<!-- elHasNoEffectiveWidthOrHeight -->
-<g id="node12" class="node">
-<title>elHasNoEffectiveWidthOrHeight</title>
-<polygon fill="lightblue" stroke="black" points="1204.88,-511 1007.38,-511 1007.38,-475 1204.88,-475 1204.88,-511"/>
-<text xml:space="preserve" text-anchor="middle" x="1106.12" y="-487.95" font-family="Times,serif" font-size="14.00">elHasNoEffectiveWidthOrHeight</text>
-</g>
-<!-- sizeCheck&#45;&gt;elHasNoEffectiveWidthOrHeight -->
-<g id="edge11" class="edge">
-<title>sizeCheck&#45;&gt;elHasNoEffectiveWidthOrHeight</title>
-<path fill="none" stroke="gray" d="M930.08,-590.62C935.69,-587.21 941.57,-583.7 947.12,-580.5 985.93,-558.11 1030.83,-533.83 1063,-516.71"/>
-<polygon fill="gray" stroke="gray" points="1064.44,-519.9 1071.63,-512.12 1061.16,-513.72 1064.44,-519.9"/>
-<text xml:space="preserve" text-anchor="middle" x="1045.54" y="-557.2" font-family="Times,serif" font-size="14.00">Check effective size</text>
-</g>
-<!-- elHasVisibilityHiddenOrCollapse -->
-<g id="node18" class="node">
-<title>elHasVisibilityHiddenOrCollapse</title>
-<polygon fill="lightblue" stroke="black" points="454.62,-420 255.62,-420 255.62,-384 454.62,-384 454.62,-420"/>
-<text xml:space="preserve" text-anchor="middle" x="355.12" y="-396.95" font-family="Times,serif" font-size="14.00">elHasVisibilityHiddenOrCollapse</text>
-</g>
-<!-- visibilityCheck&#45;&gt;elHasVisibilityHiddenOrCollapse -->
-<g id="edge17" class="edge">
-<title>visibilityCheck&#45;&gt;elHasVisibilityHiddenOrCollapse</title>
-<path fill="none" stroke="gray" d="M355.12,-474.84C355.12,-462.61 355.12,-445.87 355.12,-431.63"/>
-<polygon fill="gray" stroke="gray" points="358.63,-431.92 355.13,-421.92 351.63,-431.92 358.63,-431.92"/>
-<text xml:space="preserve" text-anchor="middle" x="398.25" y="-441.2" font-family="Times,serif" font-size="14.00">Check visibility</text>
-</g>
-<!-- transformDetect -->
-<g id="node86" class="node">
-<title>transformDetect</title>
-<polygon fill="lightgray" stroke="black" points="594.12,-511 422.12,-511 422.12,-475 594.12,-475 594.12,-511"/>
-<text xml:space="preserve" text-anchor="middle" x="508.12" y="-487.95" font-family="Times,serif" font-size="14.00">$transform.detectVisibility()</text>
-</g>
-<!-- transformCheck&#45;&gt;transformDetect -->
-<g id="edge78" class="edge">
-<title>transformCheck&#45;&gt;transformDetect</title>
-<path fill="none" stroke="gray" d="M559.01,-590.69C549.36,-572.36 534,-543.16 522.67,-521.64"/>
-<polygon fill="gray" stroke="gray" points="525.78,-520.04 518.03,-512.82 519.59,-523.3 525.78,-520.04"/>
-</g>
-<!-- elClientWidth -->
-<g id="node13" class="node">
-<title>elClientWidth</title>
-<polygon fill="lightblue" stroke="black" points="1209.38,-420 1116.88,-420 1116.88,-384 1209.38,-384 1209.38,-420"/>
-<text xml:space="preserve" text-anchor="middle" x="1163.12" y="-396.95" font-family="Times,serif" font-size="14.00">elClientWidth</text>
-</g>
-<!-- elHasNoEffectiveWidthOrHeight&#45;&gt;elClientWidth -->
-<g id="edge12" class="edge">
-<title>elHasNoEffectiveWidthOrHeight&#45;&gt;elClientWidth</title>
-<path fill="none" stroke="gray" d="M1117.94,-474.52C1122.15,-468.24 1126.89,-461.08 1131.12,-454.5 1136.25,-446.53 1141.73,-437.8 1146.68,-429.83"/>
-<polygon fill="gray" stroke="gray" points="1149.52,-431.89 1151.8,-421.54 1143.57,-428.21 1149.52,-431.89"/>
-<text xml:space="preserve" text-anchor="middle" x="1167.95" y="-441.2" font-family="Times,serif" font-size="14.00">Get width</text>
-</g>
-<!-- elClientHeight -->
-<g id="node14" class="node">
-<title>elClientHeight</title>
-<polygon fill="lightblue" stroke="black" points="1098.88,-420 1003.38,-420 1003.38,-384 1098.88,-384 1098.88,-420"/>
-<text xml:space="preserve" text-anchor="middle" x="1051.12" y="-396.95" font-family="Times,serif" font-size="14.00">elClientHeight</text>
-</g>
-<!-- elHasNoEffectiveWidthOrHeight&#45;&gt;elClientHeight -->
-<g id="edge13" class="edge">
-<title>elHasNoEffectiveWidthOrHeight&#45;&gt;elClientHeight</title>
-<path fill="none" stroke="gray" d="M1089.39,-474.51C1084.11,-468.46 1078.51,-461.45 1074.12,-454.5 1069.51,-447.18 1065.33,-438.78 1061.85,-430.92"/>
-<polygon fill="gray" stroke="gray" points="1065.09,-429.59 1058,-421.72 1058.64,-432.3 1065.09,-429.59"/>
-<text xml:space="preserve" text-anchor="middle" x="1102.62" y="-441.2" font-family="Times,serif" font-size="14.00">Get height</text>
-</g>
-<!-- getClientRects -->
-<g id="node15" class="node">
-<title>getClientRects</title>
-<polygon fill="lightpink" stroke="black" points="1509.38,-420 1404.88,-420 1404.88,-384 1509.38,-384 1509.38,-420"/>
-<text xml:space="preserve" text-anchor="middle" x="1457.12" y="-396.95" font-family="Times,serif" font-size="14.00">getClientRects()</text>
-</g>
-<!-- elHasNoEffectiveWidthOrHeight&#45;&gt;getClientRects -->
-<g id="edge14" class="edge">
-<title>elHasNoEffectiveWidthOrHeight&#45;&gt;getClientRects</title>
-<path fill="none" stroke="gray" d="M1205.31,-482.81C1249.11,-477.15 1300.83,-468.25 1346.12,-454.5 1370.01,-447.25 1395.36,-435.8 1415.79,-425.54"/>
-<polygon fill="gray" stroke="gray" points="1417.35,-428.68 1424.65,-421 1414.15,-422.45 1417.35,-428.68"/>
-<text xml:space="preserve" text-anchor="middle" x="1418.84" y="-441.2" font-family="Times,serif" font-size="14.00">Check rects</text>
-</g>
-<!-- transformNone -->
-<g id="node16" class="node">
-<title>transformNone</title>
-<polygon fill="lightblue" stroke="black" points="1386.38,-420 1287.88,-420 1287.88,-384 1386.38,-384 1386.38,-420"/>
-<text xml:space="preserve" text-anchor="middle" x="1337.12" y="-396.95" font-family="Times,serif" font-size="14.00">transformNone</text>
-</g>
-<!-- elHasNoEffectiveWidthOrHeight&#45;&gt;transformNone -->
-<g id="edge15" class="edge">
-<title>elHasNoEffectiveWidthOrHeight&#45;&gt;transformNone</title>
-<path fill="none" stroke="gray" d="M1151.49,-474.52C1188.68,-460.19 1241.48,-439.85 1281.27,-424.52"/>
-<polygon fill="gray" stroke="gray" points="1282.38,-427.84 1290.45,-420.98 1279.86,-421.31 1282.38,-427.84"/>
-<text xml:space="preserve" text-anchor="middle" x="1292.19" y="-441.2" font-family="Times,serif" font-size="14.00">Transform = none</text>
-</g>
-<!-- overflowHidden -->
-<g id="node17" class="node">
-<title>overflowHidden</title>
-<polygon fill="lightblue" stroke="black" points="961.38,-420 856.88,-420 856.88,-384 961.38,-384 961.38,-420"/>
-<text xml:space="preserve" text-anchor="middle" x="909.12" y="-396.95" font-family="Times,serif" font-size="14.00">overflowHidden</text>
-</g>
-<!-- elHasNoEffectiveWidthOrHeight&#45;&gt;overflowHidden -->
-<g id="edge16" class="edge">
-<title>elHasNoEffectiveWidthOrHeight&#45;&gt;overflowHidden</title>
-<path fill="none" stroke="gray" d="M1019.31,-474.57C1002.05,-469.38 984.47,-462.8 968.88,-454.5 955.84,-447.56 943.19,-437.34 932.91,-427.82"/>
-<polygon fill="gray" stroke="gray" points="935.59,-425.55 925.96,-421.13 930.74,-430.59 935.59,-425.55"/>
-<text xml:space="preserve" text-anchor="middle" x="1015" y="-441.2" font-family="Times,serif" font-size="14.00">Overflow hidden</text>
-</g>
-<!-- elementBoundingRect -->
-<g id="node79" class="node">
-<title>elementBoundingRect</title>
-<polygon fill="lightblue" stroke="black" points="1179.88,-309 1042.38,-309 1042.38,-273 1179.88,-273 1179.88,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="1111.12" y="-285.95" font-family="Times,serif" font-size="14.00">elementBoundingRect</text>
-</g>
-<!-- elClientWidth&#45;&gt;elementBoundingRect -->
-<g id="edge71" class="edge">
-<title>elClientWidth&#45;&gt;elementBoundingRect</title>
-<path fill="none" stroke="gray" d="M1155,-383.97C1146.77,-366.71 1133.9,-339.74 1124.23,-319.46"/>
-<polygon fill="gray" stroke="gray" points="1127.48,-318.16 1120.02,-310.64 1121.16,-321.17 1127.48,-318.16"/>
-<text xml:space="preserve" text-anchor="middle" x="1195.43" y="-352.7" font-family="Times,serif" font-size="14.00">Get bounding rect</text>
-</g>
-<!-- elementBoundingRect2 -->
-<g id="node80" class="node">
-<title>elementBoundingRect2</title>
-<polygon fill="lightblue" stroke="black" points="987.25,-309 843,-309 843,-273 987.25,-273 987.25,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="915.12" y="-285.95" font-family="Times,serif" font-size="14.00">elementBoundingRect2</text>
-</g>
-<!-- elClientHeight&#45;&gt;elementBoundingRect2 -->
-<g id="edge72" class="edge">
-<title>elClientHeight&#45;&gt;elementBoundingRect2</title>
-<path fill="none" stroke="gray" d="M1029.58,-383.73C1006.9,-365.55 971.01,-336.79 945.47,-316.32"/>
-<polygon fill="gray" stroke="gray" points="947.75,-313.66 937.75,-310.14 943.37,-319.12 947.75,-313.66"/>
-<text xml:space="preserve" text-anchor="middle" x="1056.26" y="-352.7" font-family="Times,serif" font-size="14.00">Get bounding rect</text>
-</g>
-<!-- getComputedStyle -->
-<g id="node83" class="node">
-<title>getComputedStyle</title>
-<polygon fill="red" stroke="black" points="1475.5,-311.5 1224.75,-311.5 1224.75,-270.5 1475.5,-270.5 1475.5,-311.5"/>
-<text xml:space="preserve" text-anchor="middle" x="1350.12" y="-294.2" font-family="Times,serif" font-size="14.00">getComputedStyle()</text>
-<text xml:space="preserve" text-anchor="middle" x="1350.12" y="-277.7" font-family="Times,serif" font-size="14.00">[EXPENSIVE &#45; STYLE CALCULATION]</text>
-</g>
-<!-- transformNone&#45;&gt;getComputedStyle -->
-<g id="edge75" class="edge">
-<title>transformNone&#45;&gt;getComputedStyle</title>
-<path fill="none" stroke="gray" d="M1339.16,-383.97C1341.09,-367.73 1344.06,-342.88 1346.41,-323.11"/>
-<polygon fill="gray" stroke="gray" points="1349.87,-323.71 1347.58,-313.37 1342.92,-322.88 1349.87,-323.71"/>
-<text xml:space="preserve" text-anchor="middle" x="1396.49" y="-352.7" font-family="Times,serif" font-size="14.00">Get computed style</text>
-</g>
-<!-- getPropertyValue -->
-<g id="node84" class="node">
-<title>getPropertyValue</title>
-<polygon fill="lightblue" stroke="black" points="1603,-309 1493.25,-309 1493.25,-273 1603,-273 1603,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="1548.12" y="-285.95" font-family="Times,serif" font-size="14.00">getPropertyValue</text>
-</g>
-<!-- transformNone&#45;&gt;getPropertyValue -->
-<g id="edge76" class="edge">
-<title>transformNone&#45;&gt;getPropertyValue</title>
-<path fill="none" stroke="gray" d="M1374.74,-383.55C1381.75,-380.73 1389.08,-378.07 1396.12,-376 1421.22,-368.63 1430.23,-376.64 1454.12,-366 1480.38,-354.31 1505.71,-333.64 1523.45,-317.11"/>
-<polygon fill="gray" stroke="gray" points="1525.62,-319.88 1530.43,-310.44 1520.78,-314.82 1525.62,-319.88"/>
-<text xml:space="preserve" text-anchor="middle" x="1537.3" y="-352.7" font-family="Times,serif" font-size="14.00">Get transform value</text>
-</g>
-<!-- elHasOverflowHidden -->
-<g id="node62" class="node">
-<title>elHasOverflowHidden</title>
-<polygon fill="lightblue" stroke="black" points="825.25,-309 687,-309 687,-273 825.25,-273 825.25,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="756.12" y="-285.95" font-family="Times,serif" font-size="14.00">elHasOverflowHidden</text>
-</g>
-<!-- overflowHidden&#45;&gt;elHasOverflowHidden -->
-<g id="edge77" class="edge">
-<title>overflowHidden&#45;&gt;elHasOverflowHidden</title>
-<path fill="none" stroke="gray" d="M884.88,-383.73C859.22,-365.45 818.53,-336.45 789.76,-315.97"/>
-<polygon fill="gray" stroke="gray" points="791.92,-313.2 781.74,-310.25 787.85,-318.9 791.92,-313.2"/>
-<text xml:space="preserve" text-anchor="middle" x="923.39" y="-352.7" font-family="Times,serif" font-size="14.00">Check overflow hidden</text>
-</g>
-<!-- elHasVisibilityHidden -->
-<g id="node19" class="node">
-<title>elHasVisibilityHidden</title>
-<polygon fill="lightblue" stroke="black" points="369.88,-309 232.38,-309 232.38,-273 369.88,-273 369.88,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="301.12" y="-285.95" font-family="Times,serif" font-size="14.00">elHasVisibilityHidden</text>
-</g>
-<!-- elHasVisibilityHiddenOrCollapse&#45;&gt;elHasVisibilityHidden -->
-<g id="edge18" class="edge">
-<title>elHasVisibilityHiddenOrCollapse&#45;&gt;elHasVisibilityHidden</title>
-<path fill="none" stroke="gray" d="M344.69,-383.74C341.43,-378.14 337.9,-371.86 334.88,-366 327.11,-350.95 319.21,-333.76 313.01,-319.74"/>
-<polygon fill="gray" stroke="gray" points="316.26,-318.42 309.04,-310.66 309.84,-321.22 316.26,-318.42"/>
-<text xml:space="preserve" text-anchor="middle" x="381" y="-352.7" font-family="Times,serif" font-size="14.00">visibility: hidden</text>
-</g>
-<!-- elHasVisibilityCollapse -->
-<g id="node20" class="node">
-<title>elHasVisibilityCollapse</title>
-<polygon fill="lightblue" stroke="black" points="532.62,-309 387.62,-309 387.62,-273 532.62,-273 532.62,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="460.12" y="-285.95" font-family="Times,serif" font-size="14.00">elHasVisibilityCollapse</text>
-</g>
-<!-- elHasVisibilityHiddenOrCollapse&#45;&gt;elHasVisibilityCollapse -->
-<g id="edge19" class="edge">
-<title>elHasVisibilityHiddenOrCollapse&#45;&gt;elHasVisibilityCollapse</title>
-<path fill="none" stroke="gray" d="M402.83,-383.69C411.67,-378.94 420.26,-373.09 427.12,-366 439.44,-353.27 447.62,-335.16 452.76,-320.05"/>
-<polygon fill="gray" stroke="gray" points="456.06,-321.24 455.67,-310.65 449.37,-319.17 456.06,-321.24"/>
-<text xml:space="preserve" text-anchor="middle" x="488.91" y="-352.7" font-family="Times,serif" font-size="14.00">visibility: collapse</text>
-</g>
-<!-- cssVisibility -->
-<g id="node58" class="node">
-<title>cssVisibility</title>
-<polygon fill="lightcoral" stroke="black" points="358.25,-218 244,-218 244,-182 358.25,-182 358.25,-218"/>
-<text xml:space="preserve" text-anchor="middle" x="301.12" y="-194.95" font-family="Times,serif" font-size="14.00">$el.css(&#39;visibility&#39;)</text>
-</g>
-<!-- elHasVisibilityHidden&#45;&gt;cssVisibility -->
-<g id="edge58" class="edge">
-<title>elHasVisibilityHidden&#45;&gt;cssVisibility</title>
-<path fill="none" stroke="gray" d="M301.12,-272.84C301.12,-260.61 301.12,-243.87 301.12,-229.63"/>
-<polygon fill="gray" stroke="gray" points="304.63,-229.92 301.13,-219.92 297.63,-229.92 304.63,-229.92"/>
-<text xml:space="preserve" text-anchor="middle" x="358.12" y="-239.2" font-family="Times,serif" font-size="14.00">Check CSS visibility</text>
-</g>
-<!-- cssVisibility2 -->
-<g id="node59" class="node">
-<title>cssVisibility2</title>
-<polygon fill="lightblue" stroke="black" points="505.25,-218 415,-218 415,-182 505.25,-182 505.25,-218"/>
-<text xml:space="preserve" text-anchor="middle" x="460.12" y="-194.95" font-family="Times,serif" font-size="14.00">cssVisibility2</text>
-</g>
-<!-- elHasVisibilityCollapse&#45;&gt;cssVisibility2 -->
-<g id="edge59" class="edge">
-<title>elHasVisibilityCollapse&#45;&gt;cssVisibility2</title>
-<path fill="none" stroke="gray" d="M460.12,-272.84C460.12,-260.61 460.12,-243.87 460.12,-229.63"/>
-<polygon fill="gray" stroke="gray" points="463.63,-229.92 460.13,-219.92 456.63,-229.92 463.63,-229.92"/>
-<text xml:space="preserve" text-anchor="middle" x="517.12" y="-239.2" font-family="Times,serif" font-size="14.00">Check CSS visibility</text>
-</g>
-<!-- cssDisplay -->
-<g id="node57" class="node">
-<title>cssDisplay</title>
-<polygon fill="lightcoral" stroke="black" points="662.75,-218 557.5,-218 557.5,-182 662.75,-182 662.75,-218"/>
-<text xml:space="preserve" text-anchor="middle" x="610.12" y="-194.95" font-family="Times,serif" font-size="14.00">$el.css(&#39;display&#39;)</text>
-</g>
-<!-- elHasDisplayNone&#45;&gt;cssDisplay -->
-<g id="edge57" class="edge">
-<title>elHasDisplayNone&#45;&gt;cssDisplay</title>
-<path fill="none" stroke="gray" d="M610.12,-272.84C610.12,-260.61 610.12,-243.87 610.12,-229.63"/>
-<polygon fill="gray" stroke="gray" points="613.63,-229.92 610.13,-219.92 606.63,-229.92 613.63,-229.92"/>
-<text xml:space="preserve" text-anchor="middle" x="662.62" y="-239.2" font-family="Times,serif" font-size="14.00">Check CSS display</text>
-</g>
-<!-- getFirstSelectParentFromEl&#45;&gt;isStrictlyHidden -->
-<g id="edge22" class="edge">
-<title>getFirstSelectParentFromEl&#45;&gt;isStrictlyHidden</title>
-<path fill="none" stroke="gray" stroke-dasharray="5,2" d="M688.64,-511.39C682.31,-528.74 672.68,-556.23 665.88,-580.5 652.85,-626.99 666.82,-645.02 642.12,-686.5 640.14,-689.84 637.75,-693.03 635.14,-696.04"/>
-<polygon fill="gray" stroke="gray" points="632.85,-693.37 628.35,-702.97 637.85,-698.27 632.85,-693.37"/>
-<text xml:space="preserve" text-anchor="middle" x="710.5" y="-603.95" font-family="Times,serif" font-size="14.00">Recursive check</text>
-</g>
-<!-- parentWalk -->
-<g id="node27" class="node">
-<title>parentWalk</title>
-<polygon fill="lightblue" stroke="black" points="1890.62,-511 1811.62,-511 1811.62,-475 1890.62,-475 1890.62,-511"/>
-<text xml:space="preserve" text-anchor="middle" x="1851.12" y="-487.95" font-family="Times,serif" font-size="14.00">parentWalk</text>
-</g>
-<!-- elIsHiddenByAncestors&#45;&gt;parentWalk -->
-<g id="edge27" class="edge">
-<title>elIsHiddenByAncestors&#45;&gt;parentWalk</title>
-<path fill="none" stroke="gray" d="M1861.86,-588.14C1859.79,-570.01 1856.71,-543 1854.38,-522.55"/>
-<polygon fill="gray" stroke="gray" points="1857.89,-522.43 1853.28,-512.9 1850.94,-523.23 1857.89,-522.43"/>
-<text xml:space="preserve" text-anchor="middle" x="1918.05" y="-557.2" font-family="Times,serif" font-size="14.00">Walk up parent chain</text>
-</g>
-<!-- elOrAncestorIsFixedOrSticky -->
-<g id="node35" class="node">
-<title>elOrAncestorIsFixedOrSticky</title>
-<polygon fill="lightblue" stroke="black" points="3473.12,-309 3295.12,-309 3295.12,-273 3473.12,-273 3473.12,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="3384.12" y="-285.95" font-family="Times,serif" font-size="14.00">elOrAncestorIsFixedOrSticky</text>
-</g>
-<!-- fixedStickyCheck&#45;&gt;elOrAncestorIsFixedOrSticky -->
-<g id="edge35" class="edge">
-<title>fixedStickyCheck&#45;&gt;elOrAncestorIsFixedOrSticky</title>
-<path fill="none" stroke="gray" d="M3049.74,-383.72C3067.56,-371.72 3093.14,-356.66 3118.12,-349.5 3189.99,-328.92 3213.84,-360.55 3286.12,-341.5 3307.54,-335.86 3329.71,-325.14 3347.53,-315.11"/>
-<polygon fill="gray" stroke="gray" points="3349.28,-318.14 3356.17,-310.1 3345.77,-312.09 3349.28,-318.14"/>
-<text xml:space="preserve" text-anchor="middle" x="3175.12" y="-352.7" font-family="Times,serif" font-size="14.00">Check if fixed/sticky</text>
-</g>
-<!-- elIsOutOfBoundsOfAncestorsOverflow -->
-<g id="node41" class="node">
-<title>elIsOutOfBoundsOfAncestorsOverflow</title>
-<polygon fill="orange" stroke="black" points="2557.5,-513.5 2300.75,-513.5 2300.75,-472.5 2557.5,-472.5 2557.5,-513.5"/>
-<text xml:space="preserve" text-anchor="middle" x="2429.12" y="-496.2" font-family="Times,serif" font-size="14.00">elIsOutOfBoundsOfAncestorsOverflow($el)</text>
-<text xml:space="preserve" text-anchor="middle" x="2429.12" y="-479.7" font-family="Times,serif" font-size="14.00">[RECURSIVE &#45; WALKS UP TREE]</text>
-</g>
-<!-- overflowBoundsCheck&#45;&gt;elIsOutOfBoundsOfAncestorsOverflow -->
-<g id="edge41" class="edge">
-<title>overflowBoundsCheck&#45;&gt;elIsOutOfBoundsOfAncestorsOverflow</title>
-<path fill="none" stroke="gray" d="M2429.12,-590.69C2429.12,-573.32 2429.12,-546.19 2429.12,-525.09"/>
-<polygon fill="gray" stroke="gray" points="2432.63,-525.29 2429.13,-515.29 2425.63,-525.29 2432.63,-525.29"/>
-<text xml:space="preserve" text-anchor="middle" x="2467.75" y="-557.2" font-family="Times,serif" font-size="14.00">Check bounds</text>
-</g>
-<!-- parentOpacity -->
-<g id="node28" class="node">
-<title>parentOpacity</title>
-<polygon fill="lightblue" stroke="black" points="2082.38,-420 1989.88,-420 1989.88,-384 2082.38,-384 2082.38,-420"/>
-<text xml:space="preserve" text-anchor="middle" x="2036.12" y="-396.95" font-family="Times,serif" font-size="14.00">parentOpacity</text>
-</g>
-<!-- parentWalk&#45;&gt;parentOpacity -->
-<g id="edge28" class="edge">
-<title>parentWalk&#45;&gt;parentOpacity</title>
-<path fill="none" stroke="gray" d="M1891.1,-492.36C1926.82,-490.65 1978.7,-482.86 2013.12,-454.5 2020.46,-448.46 2025.54,-439.6 2029.02,-430.92"/>
-<polygon fill="gray" stroke="gray" points="2032.25,-432.29 2032.13,-421.7 2025.62,-430.05 2032.25,-432.29"/>
-<text xml:space="preserve" text-anchor="middle" x="2082.99" y="-441.2" font-family="Times,serif" font-size="14.00">Check parent opacity</text>
-</g>
-<!-- parentOverflow -->
-<g id="node29" class="node">
-<title>parentOverflow</title>
-<polygon fill="lightblue" stroke="black" points="1633.88,-420 1532.38,-420 1532.38,-384 1633.88,-384 1633.88,-420"/>
-<text xml:space="preserve" text-anchor="middle" x="1583.12" y="-396.95" font-family="Times,serif" font-size="14.00">parentOverflow</text>
-</g>
-<!-- parentWalk&#45;&gt;parentOverflow -->
-<g id="edge29" class="edge">
-<title>parentWalk&#45;&gt;parentOverflow</title>
-<path fill="none" stroke="gray" d="M1811.39,-486C1742.63,-475.6 1608.65,-455.26 1607.62,-454.5 1599.72,-448.62 1594.26,-439.52 1590.53,-430.61"/>
-<polygon fill="gray" stroke="gray" points="1593.94,-429.74 1587.31,-421.47 1587.34,-432.06 1593.94,-429.74"/>
-<text xml:space="preserve" text-anchor="middle" x="1669.88" y="-441.2" font-family="Times,serif" font-size="14.00">Check parent overflow</text>
-</g>
-<!-- parentSize -->
-<g id="node30" class="node">
-<title>parentSize</title>
-<polygon fill="lightblue" stroke="black" points="1767.62,-420 1694.62,-420 1694.62,-384 1767.62,-384 1767.62,-420"/>
-<text xml:space="preserve" text-anchor="middle" x="1731.12" y="-396.95" font-family="Times,serif" font-size="14.00">parentSize</text>
-</g>
-<!-- parentWalk&#45;&gt;parentSize -->
-<g id="edge30" class="edge">
-<title>parentWalk&#45;&gt;parentSize</title>
-<path fill="none" stroke="gray" d="M1811.26,-486.99C1789.01,-482.19 1762.44,-472.82 1745.38,-454.5 1739.53,-448.23 1736.05,-439.77 1733.98,-431.52"/>
-<polygon fill="gray" stroke="gray" points="1737.44,-430.95 1732.19,-421.74 1730.55,-432.21 1737.44,-430.95"/>
-<text xml:space="preserve" text-anchor="middle" x="1793.75" y="-441.2" font-family="Times,serif" font-size="14.00">Check parent size</text>
-</g>
-<!-- positionCheck -->
-<g id="node31" class="node">
-<title>positionCheck</title>
-<polygon fill="lightblue" stroke="black" points="1889.12,-420 1795.12,-420 1795.12,-384 1889.12,-384 1889.12,-420"/>
-<text xml:space="preserve" text-anchor="middle" x="1842.12" y="-396.95" font-family="Times,serif" font-size="14.00">positionCheck</text>
-</g>
-<!-- parentWalk&#45;&gt;positionCheck -->
-<g id="edge31" class="edge">
-<title>parentWalk&#45;&gt;positionCheck</title>
-<path fill="none" stroke="gray" d="M1849.39,-474.84C1848.15,-462.61 1846.46,-445.87 1845.02,-431.63"/>
-<polygon fill="gray" stroke="gray" points="1848.53,-431.51 1844.04,-421.92 1841.56,-432.22 1848.53,-431.51"/>
-<text xml:space="preserve" text-anchor="middle" x="1928.16" y="-441.2" font-family="Times,serif" font-size="14.00">Check position fixed/absolute</text>
-</g>
-<!-- elDescendentsHavePositionFixedOrAbsolute -->
-<g id="node32" class="node">
-<title>elDescendentsHavePositionFixedOrAbsolute</title>
-<polygon fill="lightblue" stroke="black" points="1881.38,-309 1620.88,-309 1620.88,-273 1881.38,-273 1881.38,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="1751.12" y="-285.95" font-family="Times,serif" font-size="14.00">elDescendentsHavePositionFixedOrAbsolute</text>
-</g>
-<!-- positionCheck&#45;&gt;elDescendentsHavePositionFixedOrAbsolute -->
-<g id="edge32" class="edge">
-<title>positionCheck&#45;&gt;elDescendentsHavePositionFixedOrAbsolute</title>
-<path fill="none" stroke="gray" d="M1827.91,-383.97C1813.17,-366.31 1789.94,-338.49 1772.89,-318.07"/>
-<polygon fill="gray" stroke="gray" points="1775.61,-315.87 1766.51,-310.43 1770.24,-320.35 1775.61,-315.87"/>
-<text xml:space="preserve" text-anchor="middle" x="1864.44" y="-352.7" font-family="Times,serif" font-size="14.00">Check descendants</text>
-</g>
-<!-- getAllParents -->
-<g id="node33" class="node">
-<title>getAllParents</title>
-<polygon fill="lightblue" stroke="black" points="1737.88,-218 1648.38,-218 1648.38,-182 1737.88,-182 1737.88,-218"/>
-<text xml:space="preserve" text-anchor="middle" x="1693.12" y="-194.95" font-family="Times,serif" font-size="14.00">getAllParents</text>
-</g>
-<!-- elDescendentsHavePositionFixedOrAbsolute&#45;&gt;getAllParents -->
-<g id="edge33" class="edge">
-<title>elDescendentsHavePositionFixedOrAbsolute&#45;&gt;getAllParents</title>
-<path fill="none" stroke="gray" d="M1726.72,-272.55C1720.08,-266.8 1713.4,-259.96 1708.62,-252.5 1704.16,-245.53 1700.92,-237.21 1698.61,-229.31"/>
-<polygon fill="gray" stroke="gray" points="1702.03,-228.56 1696.2,-219.71 1695.24,-230.26 1702.03,-228.56"/>
-<text xml:space="preserve" text-anchor="middle" x="1748.38" y="-239.2" font-family="Times,serif" font-size="14.00">Get all parents</text>
-</g>
-<!-- positionRegex -->
-<g id="node34" class="node">
-<title>positionRegex</title>
-<polygon fill="lightyellow" stroke="black" points="1864.25,-218 1756,-218 1756,-182 1864.25,-182 1864.25,-218"/>
-<text xml:space="preserve" text-anchor="middle" x="1810.12" y="-194.95" font-family="Times,serif" font-size="14.00">/(fixed|absolute)/</text>
-</g>
-<!-- elDescendentsHavePositionFixedOrAbsolute&#45;&gt;positionRegex -->
-<g id="edge34" class="edge">
-<title>elDescendentsHavePositionFixedOrAbsolute&#45;&gt;positionRegex</title>
-<path fill="none" stroke="gray" d="M1771.07,-272.53C1777.07,-266.59 1783.33,-259.64 1788.12,-252.5 1793.04,-245.17 1797.24,-236.57 1800.61,-228.52"/>
-<polygon fill="gray" stroke="gray" points="1803.77,-230.04 1804.13,-219.45 1797.24,-227.51 1803.77,-230.04"/>
-<text xml:space="preserve" text-anchor="middle" x="1854.84" y="-239.2" font-family="Times,serif" font-size="14.00">Check position regex</text>
-</g>
-<!-- elIsNotElementFromPoint -->
-<g id="node36" class="node">
-<title>elIsNotElementFromPoint</title>
-<polygon fill="lightblue" stroke="black" points="3419.12,-218 3259.12,-218 3259.12,-182 3419.12,-182 3419.12,-218"/>
-<text xml:space="preserve" text-anchor="middle" x="3339.12" y="-194.95" font-family="Times,serif" font-size="14.00">elIsNotElementFromPoint</text>
-</g>
-<!-- elOrAncestorIsFixedOrSticky&#45;&gt;elIsNotElementFromPoint -->
-<g id="edge36" class="edge">
-<title>elOrAncestorIsFixedOrSticky&#45;&gt;elIsNotElementFromPoint</title>
-<path fill="none" stroke="gray" d="M3375.45,-272.84C3369.08,-260.24 3360.29,-242.86 3352.96,-228.36"/>
-<polygon fill="gray" stroke="gray" points="3356.25,-227.11 3348.61,-219.76 3350,-230.27 3356.25,-227.11"/>
-<text xml:space="preserve" text-anchor="middle" x="3431.44" y="-239.2" font-family="Times,serif" font-size="14.00">Check element coverage</text>
-</g>
-<!-- elAtCenterPoint -->
-<g id="node37" class="node">
-<title>elAtCenterPoint</title>
-<polygon fill="red" stroke="black" points="3435.62,-129.5 3242.62,-129.5 3242.62,-88.5 3435.62,-88.5 3435.62,-129.5"/>
-<text xml:space="preserve" text-anchor="middle" x="3339.12" y="-112.2" font-family="Times,serif" font-size="14.00">elAtCenterPoint($el)</text>
-<text xml:space="preserve" text-anchor="middle" x="3339.12" y="-95.7" font-family="Times,serif" font-size="14.00">[EXPENSIVE &#45; DOM QUERY]</text>
-</g>
-<!-- elIsNotElementFromPoint&#45;&gt;elAtCenterPoint -->
-<g id="edge37" class="edge">
-<title>elIsNotElementFromPoint&#45;&gt;elAtCenterPoint</title>
-<path fill="none" stroke="gray" d="M3339.12,-181.84C3339.12,-170.35 3339.12,-154.9 3339.12,-141.27"/>
-<polygon fill="gray" stroke="gray" points="3342.63,-141.42 3339.13,-131.42 3335.63,-141.42 3342.63,-141.42"/>
-<text xml:space="preserve" text-anchor="middle" x="3397.62" y="-150.7" font-family="Times,serif" font-size="14.00">Get element at center</text>
-</g>
-<!-- getDocumentFromElement -->
-<g id="node38" class="node">
-<title>getDocumentFromElement</title>
-<polygon fill="lightblue" stroke="black" points="3061.75,-36 2896.5,-36 2896.5,0 3061.75,0 3061.75,-36"/>
-<text xml:space="preserve" text-anchor="middle" x="2979.12" y="-12.95" font-family="Times,serif" font-size="14.00">getDocumentFromElement</text>
-</g>
-<!-- elAtCenterPoint&#45;&gt;getDocumentFromElement -->
-<g id="edge38" class="edge">
-<title>elAtCenterPoint&#45;&gt;getDocumentFromElement</title>
-<path fill="none" stroke="gray" d="M3242.13,-92.86C3208.3,-86.85 3170.21,-79.26 3135.88,-70.5 3102.9,-62.08 3066.76,-50.38 3037.51,-40.26"/>
-<polygon fill="gray" stroke="gray" points="3038.68,-36.96 3028.08,-36.97 3036.37,-43.57 3038.68,-36.96"/>
-<text xml:space="preserve" text-anchor="middle" x="3174.5" y="-57.2" font-family="Times,serif" font-size="14.00">Get document</text>
-</g>
-<!-- getElementPositioning -->
-<g id="node39" class="node">
-<title>getElementPositioning</title>
-<polygon fill="lightblue" stroke="black" points="3220,-36 3080.25,-36 3080.25,0 3220,0 3220,-36"/>
-<text xml:space="preserve" text-anchor="middle" x="3150.12" y="-12.95" font-family="Times,serif" font-size="14.00">getElementPositioning</text>
-</g>
-<!-- elAtCenterPoint&#45;&gt;getElementPositioning -->
-<g id="edge39" class="edge">
-<title>elAtCenterPoint&#45;&gt;getElementPositioning</title>
-<path fill="none" stroke="gray" d="M3290.91,-88.16C3277.91,-82.62 3263.91,-76.48 3251.12,-70.5 3231.75,-61.44 3210.62,-50.8 3192.72,-41.54"/>
-<polygon fill="gray" stroke="gray" points="3194.42,-38.48 3183.94,-36.97 3191.2,-44.69 3194.42,-38.48"/>
-<text xml:space="preserve" text-anchor="middle" x="3293.12" y="-57.2" font-family="Times,serif" font-size="14.00">Get positioning</text>
-</g>
-<!-- getElementAtPointFromViewport -->
-<g id="node40" class="node">
-<title>getElementAtPointFromViewport</title>
-<polygon fill="lightblue" stroke="black" points="3439.75,-36 3238.5,-36 3238.5,0 3439.75,0 3439.75,-36"/>
-<text xml:space="preserve" text-anchor="middle" x="3339.12" y="-12.95" font-family="Times,serif" font-size="14.00">getElementAtPointFromViewport</text>
-</g>
-<!-- elAtCenterPoint&#45;&gt;getElementAtPointFromViewport -->
-<g id="edge40" class="edge">
-<title>elAtCenterPoint&#45;&gt;getElementAtPointFromViewport</title>
-<path fill="none" stroke="gray" d="M3339.12,-88.25C3339.12,-76.33 3339.12,-60.94 3339.12,-47.69"/>
-<polygon fill="gray" stroke="gray" points="3342.63,-47.81 3339.13,-37.81 3335.63,-47.81 3342.63,-47.81"/>
-<text xml:space="preserve" text-anchor="middle" x="3395" y="-57.2" font-family="Times,serif" font-size="14.00">Get element at point</text>
-</g>
-<!-- coordinatesAPI -->
-<g id="node87" class="node">
-<title>coordinatesAPI</title>
-<polygon fill="lightgray" stroke="black" points="3568,-36 3458.25,-36 3458.25,0 3568,0 3568,-36"/>
-<text xml:space="preserve" text-anchor="middle" x="3513.12" y="-12.95" font-family="Times,serif" font-size="14.00">$coordinates API</text>
-</g>
-<!-- elAtCenterPoint&#45;&gt;coordinatesAPI -->
-<g id="edge79" class="edge">
-<title>elAtCenterPoint&#45;&gt;coordinatesAPI</title>
-<path fill="none" stroke="gray" d="M3416.24,-88.04C3429.62,-83.2 3443.09,-77.38 3455.12,-70.5 3467.42,-63.47 3479.41,-53.52 3489.26,-44.24"/>
-<polygon fill="gray" stroke="gray" points="3491.54,-46.9 3496.24,-37.41 3486.64,-41.9 3491.54,-46.9"/>
-</g>
-<!-- documentAPI -->
-<g id="node88" class="node">
-<title>documentAPI</title>
-<polygon fill="lightgray" stroke="black" points="3687.88,-36 3586.38,-36 3586.38,0 3687.88,0 3687.88,-36"/>
-<text xml:space="preserve" text-anchor="middle" x="3637.12" y="-12.95" font-family="Times,serif" font-size="14.00">$document API</text>
-</g>
-<!-- elAtCenterPoint&#45;&gt;documentAPI -->
-<g id="edge80" class="edge">
-<title>elAtCenterPoint&#45;&gt;documentAPI</title>
-<path fill="none" stroke="gray" d="M3417.29,-88.06C3437.8,-82.6 3459.85,-76.52 3480.12,-70.5 3511.83,-61.09 3546.81,-49.72 3575.69,-40.05"/>
-<polygon fill="gray" stroke="gray" points="3576.65,-43.42 3585.01,-36.92 3574.42,-36.79 3576.65,-43.42"/>
-</g>
-<!-- ancestorWalk -->
-<g id="node42" class="node">
-<title>ancestorWalk</title>
-<polygon fill="lightblue" stroke="black" points="2285.25,-420 2195,-420 2195,-384 2285.25,-384 2285.25,-420"/>
-<text xml:space="preserve" text-anchor="middle" x="2240.12" y="-396.95" font-family="Times,serif" font-size="14.00">ancestorWalk</text>
-</g>
-<!-- elIsOutOfBoundsOfAncestorsOverflow&#45;&gt;ancestorWalk -->
-<g id="edge42" class="edge">
-<title>elIsOutOfBoundsOfAncestorsOverflow&#45;&gt;ancestorWalk</title>
-<path fill="none" stroke="gray" d="M2324.84,-472.04C2311.56,-467.36 2298.55,-461.59 2286.88,-454.5 2276.19,-448.01 2266.51,-438.35 2258.76,-429.15"/>
-<polygon fill="gray" stroke="gray" points="2261.58,-427.08 2252.63,-421.41 2256.09,-431.42 2261.58,-427.08"/>
-<text xml:space="preserve" text-anchor="middle" x="2328.5" y="-441.2" font-family="Times,serif" font-size="14.00">Walk ancestors</text>
-</g>
-<!-- canClipContent -->
-<g id="node43" class="node">
-<title>canClipContent</title>
-<polygon fill="lightblue" stroke="black" points="2676.5,-511 2575.75,-511 2575.75,-475 2676.5,-475 2676.5,-511"/>
-<text xml:space="preserve" text-anchor="middle" x="2626.12" y="-487.95" font-family="Times,serif" font-size="14.00">canClipContent</text>
-</g>
-<!-- ancestorWalk&#45;&gt;canClipContent -->
-<g id="edge43" class="edge">
-<title>ancestorWalk&#45;&gt;canClipContent</title>
-<path fill="none" stroke="gray" d="M2285.71,-419.01C2286.86,-419.35 2288,-419.68 2289.12,-420 2324.6,-430.06 2334.7,-427.75 2370.12,-438 2390.99,-444.03 2394.99,-449.51 2416.12,-454.5 2478.15,-469.15 2498.5,-459.19 2564.57,-472.47"/>
-<polygon fill="gray" stroke="gray" points="2563.59,-475.84 2574.1,-474.49 2565.04,-468.99 2563.59,-475.84"/>
-<text xml:space="preserve" text-anchor="middle" x="2462.62" y="-441.2" font-family="Times,serif" font-size="14.00">Check if can clip</text>
-</g>
-<!-- getBoundingClientRect -->
-<g id="node52" class="node">
-<title>getBoundingClientRect</title>
-<polygon fill="red" stroke="black" points="2556.88,-311.5 2293.38,-311.5 2293.38,-270.5 2556.88,-270.5 2556.88,-311.5"/>
-<text xml:space="preserve" text-anchor="middle" x="2425.12" y="-294.2" font-family="Times,serif" font-size="14.00">getBoundingClientRect()</text>
-<text xml:space="preserve" text-anchor="middle" x="2425.12" y="-277.7" font-family="Times,serif" font-size="14.00">[EXPENSIVE &#45; LAYOUT CALCULATION]</text>
-</g>
-<!-- ancestorWalk&#45;&gt;getBoundingClientRect -->
-<g id="edge52" class="edge">
-<title>ancestorWalk&#45;&gt;getBoundingClientRect</title>
-<path fill="none" stroke="gray" d="M2271.81,-383.52C2277.48,-380.78 2283.4,-378.14 2289.12,-376 2306.29,-369.57 2312.63,-373.98 2329.12,-366 2353.87,-354.02 2378.35,-335 2396.4,-319.24"/>
-<polygon fill="gray" stroke="gray" points="2398.47,-322.1 2403.59,-312.82 2393.8,-316.87 2398.47,-322.1"/>
-<text xml:space="preserve" text-anchor="middle" x="2410.44" y="-352.7" font-family="Times,serif" font-size="14.00">Get ancestor bounds</text>
-</g>
-<!-- getBoundingClientRect2 -->
-<g id="node53" class="node">
-<title>getBoundingClientRect2</title>
-<polygon fill="lightblue" stroke="black" points="2725.25,-309 2575,-309 2575,-273 2725.25,-273 2725.25,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="2650.12" y="-285.95" font-family="Times,serif" font-size="14.00">getBoundingClientRect2</text>
-</g>
-<!-- ancestorWalk&#45;&gt;getBoundingClientRect2 -->
-<g id="edge53" class="edge">
-<title>ancestorWalk&#45;&gt;getBoundingClientRect2</title>
-<path fill="none" stroke="gray" d="M2269.39,-383.6C2275.71,-380.55 2282.49,-377.79 2289.12,-376 2366.91,-355.02 2390.49,-378.24 2470.12,-366 2513.65,-359.31 2525.42,-358.29 2566.12,-341.5 2583.03,-334.53 2600.64,-324.62 2615.33,-315.5"/>
-<polygon fill="gray" stroke="gray" points="2617.16,-318.49 2623.72,-310.17 2613.4,-312.58 2617.16,-318.49"/>
-<text xml:space="preserve" text-anchor="middle" x="2599.44" y="-352.7" font-family="Times,serif" font-size="14.00">Get element bounds</text>
-</g>
-<!-- overflowXCheck -->
-<g id="node54" class="node">
-<title>overflowXCheck</title>
-<polygon fill="lightblue" stroke="black" points="2008.62,-309 1899.62,-309 1899.62,-273 2008.62,-273 2008.62,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="1954.12" y="-285.95" font-family="Times,serif" font-size="14.00">overflowXCheck</text>
-</g>
-<!-- ancestorWalk&#45;&gt;overflowXCheck -->
-<g id="edge54" class="edge">
-<title>ancestorWalk&#45;&gt;overflowXCheck</title>
-<path fill="none" stroke="gray" d="M2194.56,-392.81C2165.1,-387.64 2125.91,-381.03 2091.12,-376 2072.9,-373.36 2024.79,-375.27 2008.88,-366 1990.52,-355.31 1976.47,-335.78 1967.2,-319.46"/>
-<polygon fill="gray" stroke="gray" points="1970.3,-317.85 1962.51,-310.67 1964.13,-321.14 1970.3,-317.85"/>
-<text xml:space="preserve" text-anchor="middle" x="2058" y="-352.7" font-family="Times,serif" font-size="14.00">Check overflow&#45;x</text>
-</g>
-<!-- overflowYCheck -->
-<g id="node55" class="node">
-<title>overflowYCheck</title>
-<polygon fill="lightblue" stroke="black" points="2135.62,-309 2026.62,-309 2026.62,-273 2135.62,-273 2135.62,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="2081.12" y="-285.95" font-family="Times,serif" font-size="14.00">overflowYCheck</text>
-</g>
-<!-- ancestorWalk&#45;&gt;overflowYCheck -->
-<g id="edge55" class="edge">
-<title>ancestorWalk&#45;&gt;overflowYCheck</title>
-<path fill="none" stroke="gray" d="M2194.56,-394.88C2172.06,-390.02 2145.59,-381.37 2125.88,-366 2110.48,-354 2099.18,-335.11 2091.79,-319.41"/>
-<polygon fill="gray" stroke="gray" points="2095.13,-318.32 2087.9,-310.57 2088.72,-321.13 2095.13,-318.32"/>
-<text xml:space="preserve" text-anchor="middle" x="2175" y="-352.7" font-family="Times,serif" font-size="14.00">Check overflow&#45;y</text>
-</g>
-<!-- boundsComparison -->
-<g id="node56" class="node">
-<title>boundsComparison</title>
-<polygon fill="lightblue" stroke="black" points="2275,-309 2153.25,-309 2153.25,-273 2275,-273 2275,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="2214.12" y="-285.95" font-family="Times,serif" font-size="14.00">boundsComparison</text>
-</g>
-<!-- ancestorWalk&#45;&gt;boundsComparison -->
-<g id="edge56" class="edge">
-<title>ancestorWalk&#45;&gt;boundsComparison</title>
-<path fill="none" stroke="gray" d="M2236.06,-383.97C2232,-366.95 2225.69,-340.49 2220.88,-320.31"/>
-<polygon fill="gray" stroke="gray" points="2224.32,-319.66 2218.6,-310.74 2217.51,-321.28 2224.32,-319.66"/>
-<text xml:space="preserve" text-anchor="middle" x="2278.22" y="-352.7" font-family="Times,serif" font-size="14.00">Compare bounds</text>
-</g>
-<!-- elHasClippableOverflow -->
-<g id="node44" class="node">
-<title>elHasClippableOverflow</title>
-<polygon fill="lightblue" stroke="black" points="2593.62,-420 2442.62,-420 2442.62,-384 2593.62,-384 2593.62,-420"/>
-<text xml:space="preserve" text-anchor="middle" x="2518.12" y="-396.95" font-family="Times,serif" font-size="14.00">elHasClippableOverflow</text>
-</g>
-<!-- canClipContent&#45;&gt;elHasClippableOverflow -->
-<g id="edge44" class="edge">
-<title>canClipContent&#45;&gt;elHasClippableOverflow</title>
-<path fill="none" stroke="gray" d="M2575.36,-475.57C2548.75,-466.71 2521.25,-457.08 2519.38,-454.5 2514.64,-447.99 2513.08,-439.69 2513.05,-431.66"/>
-<polygon fill="gray" stroke="gray" points="2516.53,-432.08 2513.79,-421.85 2509.55,-431.55 2516.53,-432.08"/>
-<text xml:space="preserve" text-anchor="middle" x="2579.75" y="-441.2" font-family="Times,serif" font-size="14.00">Check overflow props</text>
-</g>
-<!-- elHasDisplayContents -->
-<g id="node45" class="node">
-<title>elHasDisplayContents</title>
-<polygon fill="lightblue" stroke="black" points="2847.5,-420 2710.75,-420 2710.75,-384 2847.5,-384 2847.5,-420"/>
-<text xml:space="preserve" text-anchor="middle" x="2779.12" y="-396.95" font-family="Times,serif" font-size="14.00">elHasDisplayContents</text>
-</g>
-<!-- canClipContent&#45;&gt;elHasDisplayContents -->
-<g id="edge45" class="edge">
-<title>canClipContent&#45;&gt;elHasDisplayContents</title>
-<path fill="none" stroke="gray" d="M2634.2,-474.57C2640.56,-462.67 2650.49,-447.4 2663.38,-438 2674.17,-430.12 2686.76,-424 2699.58,-419.24"/>
-<polygon fill="gray" stroke="gray" points="2700.6,-422.59 2708.93,-416.05 2698.34,-415.97 2700.6,-422.59"/>
-<text xml:space="preserve" text-anchor="middle" x="2728.25" y="-441.2" font-family="Times,serif" font-size="14.00">Check display: contents</text>
-</g>
-<!-- offsetParentCheck -->
-<g id="node46" class="node">
-<title>offsetParentCheck</title>
-<polygon fill="lightblue" stroke="black" points="3408,-420 3292.25,-420 3292.25,-384 3408,-384 3408,-420"/>
-<text xml:space="preserve" text-anchor="middle" x="3350.12" y="-396.95" font-family="Times,serif" font-size="14.00">offsetParentCheck</text>
-</g>
-<!-- canClipContent&#45;&gt;offsetParentCheck -->
-<g id="edge46" class="edge">
-<title>canClipContent&#45;&gt;offsetParentCheck</title>
-<path fill="none" stroke="gray" d="M2676.75,-485.78C2803.59,-470.18 3135.21,-429.42 3280.37,-411.57"/>
-<polygon fill="gray" stroke="gray" points="3280.75,-415.05 3290.25,-410.36 3279.9,-408.11 3280.75,-415.05"/>
-<text xml:space="preserve" text-anchor="middle" x="3106.22" y="-441.2" font-family="Times,serif" font-size="14.00">Check offset parent</text>
-</g>
-<!-- cssDisplay2 -->
-<g id="node76" class="node">
-<title>cssDisplay2</title>
-<polygon fill="lightblue" stroke="black" points="2824.75,-309 2743.5,-309 2743.5,-273 2824.75,-273 2824.75,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="2784.12" y="-285.95" font-family="Times,serif" font-size="14.00">cssDisplay2</text>
-</g>
-<!-- elHasDisplayContents&#45;&gt;cssDisplay2 -->
-<g id="edge69" class="edge">
-<title>elHasDisplayContents&#45;&gt;cssDisplay2</title>
-<path fill="none" stroke="gray" d="M2779.91,-383.97C2780.68,-367.03 2781.89,-340.73 2782.81,-320.59"/>
-<polygon fill="gray" stroke="gray" points="2786.3,-320.93 2783.26,-310.78 2779.31,-320.61 2786.3,-320.93"/>
-<text xml:space="preserve" text-anchor="middle" x="2833.98" y="-352.7" font-family="Times,serif" font-size="14.00">Check CSS display</text>
-</g>
-<!-- elHasPositionRelative -->
-<g id="node47" class="node">
-<title>elHasPositionRelative</title>
-<polygon fill="lightblue" stroke="black" points="3137.12,-309 3001.12,-309 3001.12,-273 3137.12,-273 3137.12,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="3069.12" y="-285.95" font-family="Times,serif" font-size="14.00">elHasPositionRelative</text>
-</g>
-<!-- offsetParentCheck&#45;&gt;elHasPositionRelative -->
-<g id="edge47" class="edge">
-<title>offsetParentCheck&#45;&gt;elHasPositionRelative</title>
-<path fill="none" stroke="gray" d="M3313.22,-383.58C3283.06,-369.47 3244.13,-351.6 3236.12,-349.5 3197.28,-339.31 3184.12,-354.51 3146.12,-341.5 3129.43,-335.78 3112.73,-325.71 3099.17,-316.14"/>
-<polygon fill="gray" stroke="gray" points="3101.25,-313.32 3091.12,-310.22 3097.1,-318.96 3101.25,-313.32"/>
-<text xml:space="preserve" text-anchor="middle" x="3337.55" y="-352.7" font-family="Times,serif" font-size="14.00">Check position: relative</text>
-</g>
-<!-- elHasPositionAbsolute -->
-<g id="node48" class="node">
-<title>elHasPositionAbsolute</title>
-<polygon fill="lightblue" stroke="black" points="2983,-309 2843.25,-309 2843.25,-273 2983,-273 2983,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="2913.12" y="-285.95" font-family="Times,serif" font-size="14.00">elHasPositionAbsolute</text>
-</g>
-<!-- offsetParentCheck&#45;&gt;elHasPositionAbsolute -->
-<g id="edge48" class="edge">
-<title>offsetParentCheck&#45;&gt;elHasPositionAbsolute</title>
-<path fill="none" stroke="gray" d="M3291.79,-394.88C3239.33,-389.5 3160.12,-381.66 3091.12,-376 3074.67,-374.65 2956.24,-375.7 2942.88,-366 2928.27,-355.4 2920.82,-336.4 2917.03,-320.31"/>
-<polygon fill="gray" stroke="gray" points="2920.52,-319.9 2915.16,-310.76 2913.65,-321.25 2920.52,-319.9"/>
-<text xml:space="preserve" text-anchor="middle" x="3010" y="-352.7" font-family="Times,serif" font-size="14.00">Check position: absolute</text>
-</g>
-<!-- isAncestor -->
-<g id="node49" class="node">
-<title>isAncestor</title>
-<polygon fill="lightblue" stroke="black" points="3565,-309 3491.25,-309 3491.25,-273 3565,-273 3565,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="3528.12" y="-285.95" font-family="Times,serif" font-size="14.00">isAncestor</text>
-</g>
-<!-- offsetParentCheck&#45;&gt;isAncestor -->
-<g id="edge49" class="edge">
-<title>offsetParentCheck&#45;&gt;isAncestor</title>
-<path fill="none" stroke="gray" d="M3379.13,-383.54C3403.27,-369.06 3434.19,-350.66 3437.38,-349.5 3457.59,-342.13 3466.35,-352.02 3485.12,-341.5 3495.04,-335.94 3503.77,-327.19 3510.72,-318.57"/>
-<polygon fill="gray" stroke="gray" points="3513.45,-320.76 3516.63,-310.66 3507.85,-316.57 3513.45,-320.76"/>
-<text xml:space="preserve" text-anchor="middle" x="3512.75" y="-352.7" font-family="Times,serif" font-size="14.00">Check ancestor relationship</text>
-</g>
-<!-- isChild -->
-<g id="node50" class="node">
-<title>isChild</title>
-<polygon fill="lightblue" stroke="black" points="3637.62,-309 3582.62,-309 3582.62,-273 3637.62,-273 3637.62,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="3610.12" y="-285.95" font-family="Times,serif" font-size="14.00">isChild</text>
-</g>
-<!-- offsetParentCheck&#45;&gt;isChild -->
-<g id="edge50" class="edge">
-<title>offsetParentCheck&#45;&gt;isChild</title>
-<path fill="none" stroke="gray" d="M3408.25,-399.47C3469.91,-396.65 3561.97,-388.66 3588.12,-366 3601.04,-354.81 3606.55,-336.41 3608.82,-320.76"/>
-<polygon fill="gray" stroke="gray" points="3612.29,-321.31 3609.84,-311 3605.32,-320.58 3612.29,-321.31"/>
-<text xml:space="preserve" text-anchor="middle" x="3666.75" y="-352.7" font-family="Times,serif" font-size="14.00">Check child relationship</text>
-</g>
-<!-- isDescendent -->
-<g id="node51" class="node">
-<title>isDescendent</title>
-<polygon fill="lightblue" stroke="black" points="3810.12,-309 3722.12,-309 3722.12,-273 3810.12,-273 3810.12,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="3766.12" y="-285.95" font-family="Times,serif" font-size="14.00">isDescendent</text>
-</g>
-<!-- offsetParentCheck&#45;&gt;isDescendent -->
-<g id="edge51" class="edge">
-<title>offsetParentCheck&#45;&gt;isDescendent</title>
-<path fill="none" stroke="gray" d="M3408.12,-399.09C3509.68,-395.25 3711.43,-385.28 3737.12,-366 3751.42,-355.27 3758.68,-336.45 3762.35,-320.47"/>
-<polygon fill="gray" stroke="gray" points="3765.73,-321.47 3764.17,-310.99 3758.85,-320.15 3765.73,-321.47"/>
-<text xml:space="preserve" text-anchor="middle" x="3833.87" y="-352.7" font-family="Times,serif" font-size="14.00">Check descendant relationship</text>
-</g>
-<!-- cssPosition -->
-<g id="node72" class="node">
-<title>cssPosition</title>
-<polygon fill="lightcoral" stroke="black" points="2725,-218 2615.25,-218 2615.25,-182 2725,-182 2725,-218"/>
-<text xml:space="preserve" text-anchor="middle" x="2670.12" y="-194.95" font-family="Times,serif" font-size="14.00">$el.css(&#39;position&#39;)</text>
-</g>
-<!-- elHasPositionRelative&#45;&gt;cssPosition -->
-<g id="edge66" class="edge">
-<title>elHasPositionRelative&#45;&gt;cssPosition</title>
-<path fill="none" stroke="gray" d="M3022.41,-272.57C3012.54,-269.53 3002.09,-266.78 2992.12,-265 2974.58,-261.87 2684.16,-265.16 2671.62,-252.5 2665.65,-246.47 2663.9,-237.84 2664.06,-229.36"/>
-<polygon fill="gray" stroke="gray" points="2667.52,-229.97 2665.09,-219.65 2660.56,-229.23 2667.52,-229.97"/>
-<text xml:space="preserve" text-anchor="middle" x="2726.38" y="-239.2" font-family="Times,serif" font-size="14.00">Check CSS position</text>
-</g>
-<!-- cssPosition3 -->
-<g id="node75" class="node">
-<title>cssPosition3</title>
-<polygon fill="lightblue" stroke="black" points="2578.88,-218 2495.38,-218 2495.38,-182 2578.88,-182 2578.88,-218"/>
-<text xml:space="preserve" text-anchor="middle" x="2537.12" y="-194.95" font-family="Times,serif" font-size="14.00">cssPosition3</text>
-</g>
-<!-- elHasPositionAbsolute&#45;&gt;cssPosition3 -->
-<g id="edge68" class="edge">
-<title>elHasPositionAbsolute&#45;&gt;cssPosition3</title>
-<path fill="none" stroke="gray" d="M2865.17,-272.61C2855.04,-269.56 2844.33,-266.8 2834.12,-265 2817.94,-262.15 2550.17,-264.19 2538.62,-252.5 2532.66,-246.46 2530.92,-237.82 2531.08,-229.34"/>
-<polygon fill="gray" stroke="gray" points="2534.53,-229.96 2532.1,-219.64 2527.57,-229.22 2534.53,-229.96"/>
-<text xml:space="preserve" text-anchor="middle" x="2593.38" y="-239.2" font-family="Times,serif" font-size="14.00">Check CSS position</text>
-</g>
-<!-- elHasOpacityZero -->
-<g id="node60" class="node">
-<title>elHasOpacityZero</title>
-<polygon fill="lightblue" stroke="black" points="214.62,-309 99.62,-309 99.62,-273 214.62,-273 214.62,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="157.12" y="-285.95" font-family="Times,serif" font-size="14.00">elHasOpacityZero</text>
-</g>
-<!-- cssOpacity -->
-<g id="node61" class="node">
-<title>cssOpacity</title>
-<polygon fill="lightcoral" stroke="black" points="210.12,-218 104.12,-218 104.12,-182 210.12,-182 210.12,-218"/>
-<text xml:space="preserve" text-anchor="middle" x="157.12" y="-194.95" font-family="Times,serif" font-size="14.00">$el.css(&#39;opacity&#39;)</text>
-</g>
-<!-- elHasOpacityZero&#45;&gt;cssOpacity -->
-<g id="edge60" class="edge">
-<title>elHasOpacityZero&#45;&gt;cssOpacity</title>
-<path fill="none" stroke="gray" d="M157.12,-272.84C157.12,-260.61 157.12,-243.87 157.12,-229.63"/>
-<polygon fill="gray" stroke="gray" points="160.63,-229.92 157.13,-219.92 153.63,-229.92 160.63,-229.92"/>
-<text xml:space="preserve" text-anchor="middle" x="210" y="-239.2" font-family="Times,serif" font-size="14.00">Check CSS opacity</text>
-</g>
-<!-- cssOverflow -->
-<g id="node63" class="node">
-<title>cssOverflow</title>
-<polygon fill="lightcoral" stroke="black" points="813.62,-218 698.62,-218 698.62,-182 813.62,-182 813.62,-218"/>
-<text xml:space="preserve" text-anchor="middle" x="756.12" y="-194.95" font-family="Times,serif" font-size="14.00">$el.css(&#39;overflow&#39;)</text>
-</g>
-<!-- elHasOverflowHidden&#45;&gt;cssOverflow -->
-<g id="edge61" class="edge">
-<title>elHasOverflowHidden&#45;&gt;cssOverflow</title>
-<path fill="none" stroke="gray" d="M756.12,-272.84C756.12,-260.61 756.12,-243.87 756.12,-229.63"/>
-<polygon fill="gray" stroke="gray" points="759.63,-229.92 756.13,-219.92 752.63,-229.92 759.63,-229.92"/>
-<text xml:space="preserve" text-anchor="middle" x="813.5" y="-239.2" font-family="Times,serif" font-size="14.00">Check CSS overflow</text>
-</g>
-<!-- parentHasDisplayNone -->
-<g id="node64" class="node">
-<title>parentHasDisplayNone</title>
-<polygon fill="lightblue" stroke="black" points="2132.12,-627 1990.12,-627 1990.12,-591 2132.12,-591 2132.12,-627"/>
-<text xml:space="preserve" text-anchor="middle" x="2061.12" y="-603.95" font-family="Times,serif" font-size="14.00">parentHasDisplayNone</text>
-</g>
-<!-- parentWalk2 -->
-<g id="node65" class="node">
-<title>parentWalk2</title>
-<polygon fill="lightblue" stroke="black" points="2104,-511 2018.25,-511 2018.25,-475 2104,-475 2104,-511"/>
-<text xml:space="preserve" text-anchor="middle" x="2061.12" y="-487.95" font-family="Times,serif" font-size="14.00">parentWalk2</text>
-</g>
-<!-- parentHasDisplayNone&#45;&gt;parentWalk2 -->
-<g id="edge62" class="edge">
-<title>parentHasDisplayNone&#45;&gt;parentWalk2</title>
-<path fill="none" stroke="gray" d="M2061.12,-590.69C2061.12,-572.69 2061.12,-544.22 2061.12,-522.82"/>
-<polygon fill="gray" stroke="gray" points="2064.63,-522.99 2061.13,-512.99 2057.63,-522.99 2064.63,-522.99"/>
-<text xml:space="preserve" text-anchor="middle" x="2105.75" y="-557.2" font-family="Times,serif" font-size="14.00">Walk up parents</text>
-</g>
-<!-- parentHasVisibilityHidden -->
-<g id="node66" class="node">
-<title>parentHasVisibilityHidden</title>
-<polygon fill="lightblue" stroke="black" points="2311.88,-627 2150.38,-627 2150.38,-591 2311.88,-591 2311.88,-627"/>
-<text xml:space="preserve" text-anchor="middle" x="2231.12" y="-603.95" font-family="Times,serif" font-size="14.00">parentHasVisibilityHidden</text>
-</g>
-<!-- parentWalk3 -->
-<g id="node67" class="node">
-<title>parentWalk3</title>
-<polygon fill="lightblue" stroke="black" points="2274,-511 2188.25,-511 2188.25,-475 2274,-475 2274,-511"/>
-<text xml:space="preserve" text-anchor="middle" x="2231.12" y="-487.95" font-family="Times,serif" font-size="14.00">parentWalk3</text>
-</g>
-<!-- parentHasVisibilityHidden&#45;&gt;parentWalk3 -->
-<g id="edge63" class="edge">
-<title>parentHasVisibilityHidden&#45;&gt;parentWalk3</title>
-<path fill="none" stroke="gray" d="M2231.12,-590.69C2231.12,-572.69 2231.12,-544.22 2231.12,-522.82"/>
-<polygon fill="gray" stroke="gray" points="2234.63,-522.99 2231.13,-512.99 2227.63,-522.99 2234.63,-522.99"/>
-<text xml:space="preserve" text-anchor="middle" x="2275.75" y="-557.2" font-family="Times,serif" font-size="14.00">Walk up parents</text>
-</g>
-<!-- parentHasVisibilityCollapse -->
-<g id="node68" class="node">
-<title>parentHasVisibilityCollapse</title>
-<polygon fill="lightblue" stroke="black" points="1581.62,-627 1412.62,-627 1412.62,-591 1581.62,-591 1581.62,-627"/>
-<text xml:space="preserve" text-anchor="middle" x="1497.12" y="-603.95" font-family="Times,serif" font-size="14.00">parentHasVisibilityCollapse</text>
-</g>
-<!-- parentWalk4 -->
-<g id="node69" class="node">
-<title>parentWalk4</title>
-<polygon fill="lightblue" stroke="black" points="1540,-511 1454.25,-511 1454.25,-475 1540,-475 1540,-511"/>
-<text xml:space="preserve" text-anchor="middle" x="1497.12" y="-487.95" font-family="Times,serif" font-size="14.00">parentWalk4</text>
-</g>
-<!-- parentHasVisibilityCollapse&#45;&gt;parentWalk4 -->
-<g id="edge64" class="edge">
-<title>parentHasVisibilityCollapse&#45;&gt;parentWalk4</title>
-<path fill="none" stroke="gray" d="M1497.12,-590.69C1497.12,-572.69 1497.12,-544.22 1497.12,-522.82"/>
-<polygon fill="gray" stroke="gray" points="1500.63,-522.99 1497.13,-512.99 1493.63,-522.99 1500.63,-522.99"/>
-<text xml:space="preserve" text-anchor="middle" x="1541.75" y="-557.2" font-family="Times,serif" font-size="14.00">Walk up parents</text>
-</g>
-<!-- parentHasOpacityZero -->
-<g id="node70" class="node">
-<title>parentHasOpacityZero</title>
-<polygon fill="lightblue" stroke="black" points="1738.62,-627 1599.62,-627 1599.62,-591 1738.62,-591 1738.62,-627"/>
-<text xml:space="preserve" text-anchor="middle" x="1669.12" y="-603.95" font-family="Times,serif" font-size="14.00">parentHasOpacityZero</text>
-</g>
-<!-- parentWalk5 -->
-<g id="node71" class="node">
-<title>parentWalk5</title>
-<polygon fill="lightblue" stroke="black" points="1712,-511 1626.25,-511 1626.25,-475 1712,-475 1712,-511"/>
-<text xml:space="preserve" text-anchor="middle" x="1669.12" y="-487.95" font-family="Times,serif" font-size="14.00">parentWalk5</text>
-</g>
-<!-- parentHasOpacityZero&#45;&gt;parentWalk5 -->
-<g id="edge65" class="edge">
-<title>parentHasOpacityZero&#45;&gt;parentWalk5</title>
-<path fill="none" stroke="gray" d="M1669.12,-590.69C1669.12,-572.69 1669.12,-544.22 1669.12,-522.82"/>
-<polygon fill="gray" stroke="gray" points="1672.63,-522.99 1669.13,-512.99 1665.63,-522.99 1672.63,-522.99"/>
-<text xml:space="preserve" text-anchor="middle" x="1713.75" y="-557.2" font-family="Times,serif" font-size="14.00">Walk up parents</text>
-</g>
-<!-- elHasPositionStatic -->
-<g id="node73" class="node">
-<title>elHasPositionStatic</title>
-<polygon fill="lightblue" stroke="black" points="3277,-309 3155.25,-309 3155.25,-273 3277,-273 3277,-309"/>
-<text xml:space="preserve" text-anchor="middle" x="3216.12" y="-285.95" font-family="Times,serif" font-size="14.00">elHasPositionStatic</text>
-</g>
-<!-- cssPosition2 -->
-<g id="node74" class="node">
-<title>cssPosition2</title>
-<polygon fill="lightblue" stroke="black" points="2826.88,-218 2743.38,-218 2743.38,-182 2826.88,-182 2826.88,-218"/>
-<text xml:space="preserve" text-anchor="middle" x="2785.12" y="-194.95" font-family="Times,serif" font-size="14.00">cssPosition2</text>
-</g>
-<!-- elHasPositionStatic&#45;&gt;cssPosition2 -->
-<g id="edge67" class="edge">
-<title>elHasPositionStatic&#45;&gt;cssPosition2</title>
-<path fill="none" stroke="gray" d="M3171.34,-272.55C3163.04,-269.74 3154.39,-267.07 3146.12,-265 3012.44,-231.5 2970.44,-252.01 2838.08,-219.66"/>
-<polygon fill="gray" stroke="gray" points="2839.15,-216.32 2828.6,-217.28 2837.45,-223.11 2839.15,-216.32"/>
-<text xml:space="preserve" text-anchor="middle" x="3141.61" y="-239.2" font-family="Times,serif" font-size="14.00">Check CSS position</text>
-</g>
-<!-- elHasDisplayInline -->
-<g id="node77" class="node">
-<title>elHasDisplayInline</title>
-<polygon fill="lightblue" stroke="black" points="1678.25,-930 1558,-930 1558,-894 1678.25,-894 1678.25,-930"/>
-<text xml:space="preserve" text-anchor="middle" x="1618.12" y="-906.95" font-family="Times,serif" font-size="14.00">elHasDisplayInline</text>
-</g>
-<!-- cssDisplay3 -->
-<g id="node78" class="node">
-<title>cssDisplay3</title>
-<polygon fill="lightblue" stroke="black" points="1658.75,-836.5 1577.5,-836.5 1577.5,-800.5 1658.75,-800.5 1658.75,-836.5"/>
-<text xml:space="preserve" text-anchor="middle" x="1618.12" y="-813.45" font-family="Times,serif" font-size="14.00">cssDisplay3</text>
-</g>
-<!-- elHasDisplayInline&#45;&gt;cssDisplay3 -->
-<g id="edge70" class="edge">
-<title>elHasDisplayInline&#45;&gt;cssDisplay3</title>
-<path fill="none" stroke="gray" d="M1618.12,-893.79C1618.12,-880.96 1618.12,-863.15 1618.12,-848.19"/>
-<polygon fill="gray" stroke="gray" points="1621.63,-848.46 1618.13,-838.46 1614.63,-848.46 1621.63,-848.46"/>
-<text xml:space="preserve" text-anchor="middle" x="1670.62" y="-860.2" font-family="Times,serif" font-size="14.00">Check CSS display</text>
-</g>
-<!-- getBoundingClientRect3 -->
-<g id="node81" class="node">
-<title>getBoundingClientRect3</title>
-<polygon fill="lightblue" stroke="black" points="1186.25,-218 1036,-218 1036,-182 1186.25,-182 1186.25,-218"/>
-<text xml:space="preserve" text-anchor="middle" x="1111.12" y="-194.95" font-family="Times,serif" font-size="14.00">getBoundingClientRect3</text>
-</g>
-<!-- elementBoundingRect&#45;&gt;getBoundingClientRect3 -->
-<g id="edge73" class="edge">
-<title>elementBoundingRect&#45;&gt;getBoundingClientRect3</title>
-<path fill="none" stroke="gray" d="M1111.12,-272.84C1111.12,-260.61 1111.12,-243.87 1111.12,-229.63"/>
-<polygon fill="gray" stroke="gray" points="1114.63,-229.92 1111.13,-219.92 1107.63,-229.92 1114.63,-229.92"/>
-<text xml:space="preserve" text-anchor="middle" x="1192.5" y="-239.2" font-family="Times,serif" font-size="14.00">Call getBoundingClientRect()</text>
-</g>
-<!-- getBoundingClientRect4 -->
-<g id="node82" class="node">
-<title>getBoundingClientRect4</title>
-<polygon fill="lightblue" stroke="black" points="990.25,-218 840,-218 840,-182 990.25,-182 990.25,-218"/>
-<text xml:space="preserve" text-anchor="middle" x="915.12" y="-194.95" font-family="Times,serif" font-size="14.00">getBoundingClientRect4</text>
-</g>
-<!-- elementBoundingRect2&#45;&gt;getBoundingClientRect4 -->
-<g id="edge74" class="edge">
-<title>elementBoundingRect2&#45;&gt;getBoundingClientRect4</title>
-<path fill="none" stroke="gray" d="M915.12,-272.84C915.12,-260.61 915.12,-243.87 915.12,-229.63"/>
-<polygon fill="gray" stroke="gray" points="918.63,-229.92 915.13,-219.92 911.63,-229.92 918.63,-229.92"/>
-<text xml:space="preserve" text-anchor="middle" x="996.5" y="-239.2" font-family="Times,serif" font-size="14.00">Call getBoundingClientRect()</text>
-</g>
-<!-- OVERFLOW_PROPS -->
-<g id="node85" class="node">
-<title>OVERFLOW_PROPS</title>
-<polygon fill="lightyellow" stroke="black" points="1872,-932.5 1696.25,-932.5 1696.25,-891.5 1872,-891.5 1872,-932.5"/>
-<text xml:space="preserve" text-anchor="middle" x="1784.12" y="-915.2" font-family="Times,serif" font-size="14.00">OVERFLOW_PROPS</text>
-<text xml:space="preserve" text-anchor="middle" x="1784.12" y="-898.7" font-family="Times,serif" font-size="14.00">[&#39;hidden&#39;, &#39;clip&#39;, &#39;scroll&#39;, &#39;auto&#39;]</text>
-</g>
-</g>
-</svg>

From ea82d81e0b4532e52ec632e93ddd4799f09b39ae Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Wed, 22 Oct 2025 11:28:02 -0400
Subject: [PATCH 22/35] rm unused export

---
 packages/driver/src/dom/visibility.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts
index 38a806644df..55d92358be8 100644
--- a/packages/driver/src/dom/visibility.ts
+++ b/packages/driver/src/dom/visibility.ts
@@ -629,7 +629,6 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true }
 /* eslint-enable no-cond-assign */
 
 export default {
-  fastIsHidden,
   isVisible,
   isHidden,
   isStrictlyHidden,

From 7b6b16adb731c6fab3f88ba9fa83c0aee7760be4 Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacieprins@users.noreply.github.com>
Date: Wed, 22 Oct 2025 11:43:17 -0400
Subject: [PATCH 23/35] Update fastIsHidden.ts

---
 packages/driver/src/dom/visibility/fastIsHidden.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/driver/src/dom/visibility/fastIsHidden.ts b/packages/driver/src/dom/visibility/fastIsHidden.ts
index a78216566b6..c73afec7eb4 100644
--- a/packages/driver/src/dom/visibility/fastIsHidden.ts
+++ b/packages/driver/src/dom/visibility/fastIsHidden.ts
@@ -104,7 +104,6 @@ function visibleToUser (el: HTMLElement, rect: DOMRect, maxDepth: number = 2, cu
 export function fastIsHidden (subject: JQuery<HTMLElement> | HTMLElement, options: { checkOpacity: boolean } = { checkOpacity: true }): boolean {
   debug('fastIsHidden', subject)
 
-  // basic css checks
   if (isBody(subject) || isHTML(subject)) {
     return false
   }

From 41a52100236344b0bbb89201b50ea68ebcc973d5 Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Wed, 22 Oct 2025 11:44:41 -0400
Subject: [PATCH 24/35] edit

---
 .../driver/cypress/fixtures/virtual-scroll-stress-test.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/driver/cypress/fixtures/virtual-scroll-stress-test.html b/packages/driver/cypress/fixtures/virtual-scroll-stress-test.html
index 9391d2071df..17e6c4a66e1 100644
--- a/packages/driver/cypress/fixtures/virtual-scroll-stress-test.html
+++ b/packages/driver/cypress/fixtures/virtual-scroll-stress-test.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>React Virtuoso Test Website - Browser Crash Reproduction</title>
+    <title>Test Website - Browser Crash Reproduction</title>
     <style>
         body {
             margin: 0;
@@ -238,7 +238,7 @@
     
     <div class="container">
         <div class="header">
-            <h1>React Virtuoso Browser Crash Test</h1>
+            <h1>Browser Crash Test</h1>
             <p>This website is designed to reproduce browser crashes when scrolling with virtual scrolling libraries</p>
             <div class="status status-warning">
                 ⚠️ Warning: This test may cause browser crashes or performance issues. Use with caution!
@@ -643,7 +643,7 @@ <h2 class="section-header">Test 4: Extreme Stress Test (50,000 items)</h2>
         }
 
         // Initialize
-        console.log('React Virtuoso Test Website loaded in fallback mode');
+        console.log('Test Website loaded in fallback mode');
         console.log('All functions are available:', {
             loadBasicList: typeof loadBasicList,
             loadDynamicList: typeof loadDynamicList,

From f921b180ab76e68b79ac8bc7a1b95b7dc9925f44 Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Wed, 22 Oct 2025 11:59:19 -0400
Subject: [PATCH 25/35] enable fast visibility mode in visibility related e2e
 tests

---
 .../driver/cypress/e2e/dom/visibility.cy.ts   | 671 +++++++++---------
 .../e2e/dom/visibility_shadow_dom.cy.ts       | 596 ++++++++--------
 .../driver/cypress/e2e/e2e/visibility.cy.js   | 106 +--
 3 files changed, 698 insertions(+), 675 deletions(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index 9d5b49bb875..face9d70c73 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -50,109 +50,114 @@ describe('src/cypress/dom/visibility', {
       })
     }
   }
+  const modes = ['fast', 'legacy']
 
-  beforeEach(() => {
-    cy.visit('/fixtures/generic.html')
-  })
+  for (const mode of modes) {
+    describe(`${mode}`, {
+      experimentalFastVisibility: mode === 'fast',
+    }, () => {
+      beforeEach(() => {
+        cy.visit('/fixtures/generic.html')
+      })
 
-  context('isHidden', () => {
-    it('exposes isHidden', () => {
-      expect(dom.isHidden).to.be.a('function')
-    })
+      context('isHidden', () => {
+        it('exposes isHidden', () => {
+          expect(dom.isHidden).to.be.a('function')
+        })
 
-    it('throws when not passed a DOM element', () => {
-      const fn = () => {
-        dom.isHidden(null!)
-      }
+        it('throws when not passed a DOM element', () => {
+          const fn = () => {
+            dom.isHidden(null!)
+          }
 
-      expect(fn).to.throw('`Cypress.dom.isHidden()` failed because it requires a DOM element. The subject received was: `null`')
-    })
-  })
+          expect(fn).to.throw('`Cypress.dom.isHidden()` failed because it requires a DOM element. The subject received was: `null`')
+        })
+      })
 
-  context('isVisible', () => {
-    it('exposes isVisible', () => {
-      expect(dom.isVisible).to.be.a('function')
-    })
+      context('isVisible', () => {
+        it('exposes isVisible', () => {
+          expect(dom.isVisible).to.be.a('function')
+        })
 
-    it('throws when not passed a DOM element', () => {
-      const fn = () => {
-        // @ts-ignore
-        dom.isVisible('form')
-      }
+        it('throws when not passed a DOM element', () => {
+          const fn = () => {
+            // @ts-ignore
+            dom.isVisible('form')
+          }
 
-      expect(fn).to.throw('`Cypress.dom.isVisible()` failed because it requires a DOM element. The subject received was: `form`')
-    })
-  })
+          expect(fn).to.throw('`Cypress.dom.isVisible()` failed because it requires a DOM element. The subject received was: `form`')
+        })
+      })
 
-  context('#isScrollable', () => {
-    beforeEach(function () {
-      this.add = (el) => {
-        return $(el).appendTo(cy.$$('body'))
-      }
-    })
+      context('#isScrollable', () => {
+        beforeEach(function () {
+          this.add = (el) => {
+            return $(el).appendTo(cy.$$('body'))
+          }
+        })
 
-    it('returns true if window and body > window height', function () {
-      this.add('<div style="height: 1000px; width: 10px;" />')
-      const win = cy.state('window')
+        it('returns true if window and body > window height', function () {
+          this.add('<div style="height: 1000px; width: 10px;" />')
+          const win = cy.state('window')
 
-      const fn = () => {
-        return dom.isScrollable(win)
-      }
+          const fn = () => {
+            return dom.isScrollable(win)
+          }
 
-      expect(fn()).to.be.true
-    })
+          expect(fn()).to.be.true
+        })
 
-    it('returns false if window and body < window height', () => {
-      cy.$$('body').html('<div>foo</div>')
+        it('returns false if window and body < window height', () => {
+          cy.$$('body').html('<div>foo</div>')
 
-      const win = cy.state('window')
+          const win = cy.state('window')
 
-      const fn = () => {
-        return dom.isScrollable(win)
-      }
+          const fn = () => {
+            return dom.isScrollable(win)
+          }
 
-      expect(fn()).to.be.false
-    })
+          expect(fn()).to.be.false
+        })
 
-    it('returns true if document element and body > window height', function () {
-      this.add('<div style="height: 1000px; width: 10px;" />')
-      const documentElement = Cypress.dom.wrap(cy.state('document').documentElement)
+        it('returns true if document element and body > window height', function () {
+          this.add('<div style="height: 1000px; width: 10px;" />')
+          const documentElement = Cypress.dom.wrap(cy.state('document').documentElement)
 
-      const fn = () => {
-        return dom.isScrollable(documentElement)
-      }
+          const fn = () => {
+            return dom.isScrollable(documentElement)
+          }
 
-      expect(fn()).to.be.true
-    })
+          expect(fn()).to.be.true
+        })
 
-    it('returns false if document element and body < window height', () => {
-      cy.$$('body').html('<div>foo</div>')
+        it('returns false if document element and body < window height', () => {
+          cy.$$('body').html('<div>foo</div>')
 
-      const documentElement = Cypress.dom.wrap(cy.state('document').documentElement)
+          const documentElement = Cypress.dom.wrap(cy.state('document').documentElement)
 
-      const fn = () => {
-        return dom.isScrollable(documentElement)
-      }
+          const fn = () => {
+            return dom.isScrollable(documentElement)
+          }
 
-      expect(fn()).to.be.false
-    })
+          expect(fn()).to.be.false
+        })
 
-    it('returns false el is not scrollable', function () {
-      const noScroll = this.add(`\
+        it('returns false el is not scrollable', function () {
+          const noScroll = this.add(`\
 <div style="height: 100px; overflow: auto;">
   <div>No Scroll</div>
 </div>\
 `)
 
-      const fn = () => {
-        return dom.isScrollable(noScroll)
-      }
+          const fn = () => {
+            return dom.isScrollable(noScroll)
+          }
 
-      expect(fn()).to.be.false
-    })
+          expect(fn()).to.be.false
+        })
 
-    it('returns false el has no overflow', function () {
-      const noOverflow = this.add(`\
+        it('returns false el has no overflow', function () {
+          const noOverflow = this.add(`\
 <div style="height: 100px; width: 100px; border: 1px solid green;">
   <div style="height: 150px;">
     No Overflow Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod.
@@ -160,336 +165,338 @@ describe('src/cypress/dom/visibility', {
 </div>\
 `)
 
-      const fn = () => {
-        return dom.isScrollable(noOverflow)
-      }
+          const fn = () => {
+            return dom.isScrollable(noOverflow)
+          }
 
-      expect(fn()).to.be.false
-    })
+          expect(fn()).to.be.false
+        })
 
-    it('returns true when vertically scrollable', function () {
-      const vertScrollable = this.add(`\
+        it('returns true when vertically scrollable', function () {
+          const vertScrollable = this.add(`\
 <div style="height: 100px; width: 100px; overflow: auto;">
   <div style="height: 150px;">Vertical Scroll</div>
 </div>\
 `)
 
-      const fn = () => {
-        return dom.isScrollable(vertScrollable)
-      }
+          const fn = () => {
+            return dom.isScrollable(vertScrollable)
+          }
 
-      expect(fn()).to.be.true
-    })
+          expect(fn()).to.be.true
+        })
 
-    it('returns true when horizontal scrollable', function () {
-      const horizScrollable = this.add(`\
+        it('returns true when horizontal scrollable', function () {
+          const horizScrollable = this.add(`\
 <div style="height: 100px; width: 100px; overflow: auto; ">
   <div style="height: 150px;">Horizontal Scroll</div>
 </div>\
 `)
 
-      const fn = () => {
-        return dom.isScrollable(horizScrollable)
-      }
+          const fn = () => {
+            return dom.isScrollable(horizScrollable)
+          }
 
-      expect(fn()).to.be.true
-    })
+          expect(fn()).to.be.true
+        })
 
-    it('returns true when overflow scroll forced and content larger', function () {
-      const forcedScroll = this.add(`\
+        it('returns true when overflow scroll forced and content larger', function () {
+          const forcedScroll = this.add(`\
 <div style="height: 100px; width: 100px; overflow: scroll; border: 1px solid yellow;">
   <div style="height: 300px; width: 300px;">Forced Scroll</div>
 </div>\
 `)
 
-      const fn = () => {
-        return dom.isScrollable(forcedScroll)
-      }
-
-      expect(fn()).to.be.true
-    })
-  })
+          const fn = () => {
+            return dom.isScrollable(forcedScroll)
+          }
 
-  describe('visibility scenarios', () => {
-    describe('html and body overrides', () => {
-      beforeEach(() => {
-        cy.visit('/fixtures/empty.html')
+          expect(fn()).to.be.true
+        })
       })
 
-      describe('html is display none', () => {
-        beforeEach(() => {
-          cy.get('html').then(($el) => {
-            $el.css('display', 'none')
+      describe('visibility scenarios', () => {
+        describe('html and body overrides', () => {
+          beforeEach(() => {
+            cy.visit('/fixtures/empty.html')
           })
-        })
 
-        it('is always visible', () => {
-          expect(cy.$$('html').is(':hidden')).to.be.false
-          expect(cy.$$('html').is(':visible')).to.be.true
+          describe('html is display none', () => {
+            beforeEach(() => {
+              cy.get('html').then(($el) => {
+                $el.css('display', 'none')
+              })
+            })
 
-          expect(cy.$$('html')).not.to.be.hidden
-          expect(cy.$$('html')).to.be.visible
+            it('is always visible', () => {
+              expect(cy.$$('html').is(':hidden')).to.be.false
+              expect(cy.$$('html').is(':visible')).to.be.true
 
-          cy.wrap(cy.$$('html')).should('not.be.hidden')
-          cy.wrap(cy.$$('html')).should('be.visible')
-        })
-      })
+              expect(cy.$$('html')).not.to.be.hidden
+              expect(cy.$$('html')).to.be.visible
+
+              cy.wrap(cy.$$('html')).should('not.be.hidden')
+              cy.wrap(cy.$$('html')).should('be.visible')
+            })
+          })
 
-      describe('body', () => {
-        beforeEach(() => {
-          cy.get('body').then(($el) => {
-            $el.css('display', 'none')
+          describe('body', () => {
+            beforeEach(() => {
+              cy.get('body').then(($el) => {
+                $el.css('display', 'none')
+              })
+            })
+
+            it('is always visible', () => {
+              expect(cy.$$('body').is(':hidden')).to.be.false
+              expect(cy.$$('body').is(':visible')).to.be.true
+
+              expect(cy.$$('body')).not.to.be.hidden
+              expect(cy.$$('body')).to.be.visible
+            })
           })
         })
 
-        it('is always visible', () => {
-          expect(cy.$$('body').is(':hidden')).to.be.false
-          expect(cy.$$('body').is(':visible')).to.be.true
+        describe('basic CSS properties', () => {
+          beforeEach(() => {
+            cy.visit('/fixtures/visibility/basic-css-properties.html')
+          })
 
-          expect(cy.$$('body')).not.to.be.hidden
-          expect(cy.$$('body')).to.be.visible
+          assertVisibilityForSections([
+            'visibility-property',
+            'display-property',
+            'opacity-property',
+            'input-elements',
+            'table-elements',
+            'box-interactions',
+          ])
         })
-      })
-    })
 
-    describe('basic CSS properties', () => {
-      beforeEach(() => {
-        cy.visit('/fixtures/visibility/basic-css-properties.html')
-      })
+        describe('form elements', () => {
+          beforeEach(() => {
+            cy.visit('/fixtures/visibility/form-elements.html')
+          })
 
-      assertVisibilityForSections([
-        'visibility-property',
-        'display-property',
-        'opacity-property',
-        'input-elements',
-        'table-elements',
-        'box-interactions',
-      ])
-    })
+          assertVisibilityForSections([
+            'select-and-option-elements',
+            'optgroup-elements',
+            'options-outside-select',
+            'hidden-options-within-visible-select',
+            'input-elements',
+          ])
+        })
 
-    describe('form elements', () => {
-      beforeEach(() => {
-        cy.visit('/fixtures/visibility/form-elements.html')
-      })
+        describe('overflow', () => {
+          beforeEach(() => {
+            cy.visit('/fixtures/visibility/overflow.html')
+          })
 
-      assertVisibilityForSections([
-        'select-and-option-elements',
-        'optgroup-elements',
-        'options-outside-select',
-        'hidden-options-within-visible-select',
-        'input-elements',
-      ])
-    })
+          assertVisibilityForSections([
+            'zero-dimensions-with-overflow-hidden',
+            'text-content-with-zero-dimensions',
+            'positive-dimensions-with-overflow-hidden',
+            'overflow-auto-with-zero-dimensions',
+            'mixed-dimension-scenarios',
+            'overflow-hidden',
+            'overflow-y-hidden',
+            'overflow-x-hidden',
+            'overflow-auto-scenarios',
+            'overflow-scroll-scenarios',
+            'overflow-relative-positioning',
+            'overflow-flex-container',
+            'overflow-complex-scenarios',
+            'clip-path-scenarios',
+          ])
+        })
 
-    describe('overflow', () => {
-      beforeEach(() => {
-        cy.visit('/fixtures/visibility/overflow.html')
-      })
+        describe('positioning', () => {
+          beforeEach(() => {
+            cy.visit('/fixtures/visibility/positioning.html')
+          })
 
-      assertVisibilityForSections([
-        'zero-dimensions-with-overflow-hidden',
-        'text-content-with-zero-dimensions',
-        'positive-dimensions-with-overflow-hidden',
-        'overflow-auto-with-zero-dimensions',
-        'mixed-dimension-scenarios',
-        'overflow-hidden',
-        'overflow-y-hidden',
-        'overflow-x-hidden',
-        'overflow-auto-scenarios',
-        'overflow-scroll-scenarios',
-        'overflow-relative-positioning',
-        'overflow-flex-container',
-        'overflow-complex-scenarios',
-        'clip-path-scenarios',
-      ])
-    })
+          assertVisibilityForSections([
+            'position-fixed-element-covered-by-another',
+            'static-ancestor-fixed-descendant',
+            'static-parent-fixed-child',
+            'positioning-with-zero-dimensions',
+            'fixed-positioning-with-zero-dimensions',
+            'position-absolute-scenarios',
+            'position-sticky-scenarios',
+          ])
+        })
 
-    describe('positioning', () => {
-      beforeEach(() => {
-        cy.visit('/fixtures/visibility/positioning.html')
+        describe('transforms', () => {
+          beforeEach(() => {
+            cy.visit('/fixtures/visibility/transforms.html')
+          })
+
+          assertVisibilityForSections([
+            'scaling',
+            'translation',
+            'rotation',
+            'skew',
+            'matrix',
+            'perspective',
+            'multiple',
+            'multiple-3d',
+            'backface-visibility',
+          ])
+        })
       })
 
-      assertVisibilityForSections([
-        'position-fixed-element-covered-by-another',
-        'static-ancestor-fixed-descendant',
-        'static-parent-fixed-child',
-        'positioning-with-zero-dimensions',
-        'fixed-positioning-with-zero-dimensions',
-        'position-absolute-scenarios',
-        'position-sticky-scenarios',
-      ])
-    })
+      context('#getReasonIsHidden', () => {
+        const reasonIs = ($el: JQuery, str: string) => {
+          expect(dom.getReasonIsHidden($el)).to.eq(str)
+        }
 
-    describe('transforms', () => {
-      beforeEach(() => {
-        cy.visit('/fixtures/visibility/transforms.html')
-      })
+        describe('basic css / box model', () => {
+          beforeEach(() => {
+            cy.visit('/fixtures/visibility/basic-css-properties.html')
+          })
 
-      assertVisibilityForSections([
-        'scaling',
-        'translation',
-        'rotation',
-        'skew',
-        'matrix',
-        'perspective',
-        'multiple',
-        'multiple-3d',
-        'backface-visibility',
-      ])
-    })
-  })
+          it('has `display: none`', function () {
+            prepareFixtureSection('display-property')
+            cy.get('[cy-section="display-property"] .testCase[cy-expect="hidden"]:first').then(($el) => {
+              reasonIs($el, 'This element `<div.testCase>` is not visible because it has CSS property: `display: none`')
+            })
+          })
 
-  context('#getReasonIsHidden', () => {
-    const reasonIs = ($el: JQuery, str: string) => {
-      expect(dom.getReasonIsHidden($el)).to.eq(str)
-    }
+          it('has a parent with `display: none`', function () {
+            cy.visit('/fixtures/visibility/basic-css-properties.html')
+            prepareFixtureSection('display-property')
+            cy.get('[cy-section="display-property"] .testCase[cy-expect="hidden"] span').then(($el) => {
+              reasonIs($el, 'This element `<span.testCase>` is not visible because its parent `<div.testCase>` has CSS property: `display: none`')
+            })
+          })
 
-    describe('basic css / box model', () => {
-      beforeEach(() => {
-        cy.visit('/fixtures/visibility/basic-css-properties.html')
-      })
+          it('has `visibility: hidden`', function () {
+            prepareFixtureSection('visibility-property')
+            cy.get('[cy-section="visibility-property"] .testCase[cy-expect="hidden"]').then((el) => {
+              reasonIs($(el).first(), 'This element `<div.testCase>` is not visible because it has CSS property: `visibility: hidden`')
+            })
+          })
 
-      it('has `display: none`', function () {
-        prepareFixtureSection('display-property')
-        cy.get('[cy-section="display-property"] .testCase[cy-expect="hidden"]:first').then(($el) => {
-          reasonIs($el, 'This element `<div.testCase>` is not visible because it has CSS property: `display: none`')
-        })
-      })
+          it('has parent with `visibility: hidden`', function () {
+            prepareFixtureSection('visibility-property')
+            cy.get('[cy-section="visibility-property"] .testCase[cy-expect="hidden"] button').then((el) => {
+              reasonIs($(el).first(), 'This element `<button.testCase>` is not visible because its parent `<div.testCase>` has CSS property: `visibility: hidden`')
+            })
+          })
 
-      it('has a parent with `display: none`', function () {
-        cy.visit('/fixtures/visibility/basic-css-properties.html')
-        prepareFixtureSection('display-property')
-        cy.get('[cy-section="display-property"] .testCase[cy-expect="hidden"] span').then(($el) => {
-          reasonIs($el, 'This element `<span.testCase>` is not visible because its parent `<div.testCase>` has CSS property: `display: none`')
-        })
-      })
+          it('has `visibility: collapse`', function () {
+            prepareFixtureSection('table-elements')
+            cy.get('[cy-section="table-elements"] td[style*="visibility: collapse"]').then(($el) => {
+              reasonIs($el, 'This element `<td.testCase>` is not visible because it has CSS property: `visibility: collapse`')
+            })
+          })
 
-      it('has `visibility: hidden`', function () {
-        prepareFixtureSection('visibility-property')
-        cy.get('[cy-section="visibility-property"] .testCase[cy-expect="hidden"]').then((el) => {
-          reasonIs($(el).first(), 'This element `<div.testCase>` is not visible because it has CSS property: `visibility: hidden`')
-        })
-      })
+          it('has parent with `visibility: collapse`', function () {
+            prepareFixtureSection('table-elements')
+            cy.get('[cy-section="table-elements"] tr[style*="visibility: collapse"] td').then(($el) => {
+              reasonIs($el, 'This element `<td.testCase>` is not visible because its parent `<tr.testCase>` has CSS property: `visibility: collapse`')
+            })
+          })
 
-      it('has parent with `visibility: hidden`', function () {
-        prepareFixtureSection('visibility-property')
-        cy.get('[cy-section="visibility-property"] .testCase[cy-expect="hidden"] button').then((el) => {
-          reasonIs($(el).first(), 'This element `<button.testCase>` is not visible because its parent `<div.testCase>` has CSS property: `visibility: hidden`')
-        })
-      })
+          it('has `opacity: 0`', function () {
+            prepareFixtureSection('opacity-property')
+            cy.get('[cy-section="opacity-property"] .testCase[cy-expect="hidden"]').then(($el) => {
+              reasonIs($($el).first(), 'This element `<div.testCase>` is not visible because it has CSS property: `opacity: 0`')
+            })
+          })
 
-      it('has `visibility: collapse`', function () {
-        prepareFixtureSection('table-elements')
-        cy.get('[cy-section="table-elements"] td[style*="visibility: collapse"]').then(($el) => {
-          reasonIs($el, 'This element `<td.testCase>` is not visible because it has CSS property: `visibility: collapse`')
+          it('has parent with `opacity: 0`', function () {
+            prepareFixtureSection('opacity-property')
+            cy.get('[cy-section="opacity-property"] .testCase[cy-expect="hidden"] button').then(($el) => {
+              reasonIs($el, 'This element `<button.testCase>` is not visible because its parent `<div.testCase>` has CSS property: `opacity: 0`')
+            })
+          })
         })
-      })
 
-      it('has parent with `visibility: collapse`', function () {
-        prepareFixtureSection('table-elements')
-        cy.get('[cy-section="table-elements"] tr[style*="visibility: collapse"] td').then(($el) => {
-          reasonIs($el, 'This element `<td.testCase>` is not visible because its parent `<tr.testCase>` has CSS property: `visibility: collapse`')
-        })
-      })
+        it('is detached from the DOM', function () {
+          const divDetached = $('<div>Detached</div>')
 
-      it('has `opacity: 0`', function () {
-        prepareFixtureSection('opacity-property')
-        cy.get('[cy-section="opacity-property"] .testCase[cy-expect="hidden"]').then(($el) => {
-          reasonIs($($el).first(), 'This element `<div.testCase>` is not visible because it has CSS property: `opacity: 0`')
+          reasonIs(divDetached, 'This element `<div>` is not visible because it is detached from the DOM')
         })
-      })
 
-      it('has parent with `opacity: 0`', function () {
-        prepareFixtureSection('opacity-property')
-        cy.get('[cy-section="opacity-property"] .testCase[cy-expect="hidden"] button').then(($el) => {
-          reasonIs($el, 'This element `<button.testCase>` is not visible because its parent `<div.testCase>` has CSS property: `opacity: 0`')
-        })
-      })
-    })
+        describe('overflow-related', () => {
+          beforeEach(() => {
+            cy.visit('/fixtures/visibility/overflow.html')
+          })
 
-    it('is detached from the DOM', function () {
-      const divDetached = $('<div>Detached</div>')
+          it('has effective zero width', function () {
+            prepareFixtureSection('zero-dimensions-with-overflow-hidden')
+            cy.get('[cy-section="zero-dimensions-with-overflow-hidden"] .testCase[cy-label="Zero width ancestor, parent, self"]').then(($el) => {
+              reasonIs($el, 'This element `<div.testCase>` is not visible because it has an effective width and height of: `0 x 100` pixels.')
+            })
+          })
 
-      reasonIs(divDetached, 'This element `<div>` is not visible because it is detached from the DOM')
-    })
+          it('has effective zero height', function () {
+            prepareFixtureSection('zero-dimensions-with-overflow-hidden')
+            cy.get('[cy-section="zero-dimensions-with-overflow-hidden"] .testCase[cy-label="Zero height ancestor, parent, self"]').then(($el) => {
+              reasonIs($el, 'This element `<div.testCase>` is not visible because it has an effective width and height of: `100 x 0` pixels.')
+            })
+          })
 
-    describe('overflow-related', () => {
-      beforeEach(() => {
-        cy.visit('/fixtures/visibility/overflow.html')
-      })
+          it('has a parent with an effective zero width and overflow: hidden', function () {
+            prepareFixtureSection('zero-dimensions-with-overflow-hidden')
+            cy.get('[cy-section="zero-dimensions-with-overflow-hidden"] .testCase[cy-label="Zero height ancestor, parent, self"] span').then(($el) => {
+              reasonIs($el, 'This element `<span.testCase>` is not visible because its parent `<div.testCase>` has CSS property: `overflow: hidden` and an effective width and height of: `100 x 0` pixels.')
+            })
+          })
 
-      it('has effective zero width', function () {
-        prepareFixtureSection('zero-dimensions-with-overflow-hidden')
-        cy.get('[cy-section="zero-dimensions-with-overflow-hidden"] .testCase[cy-label="Zero width ancestor, parent, self"]').then(($el) => {
-          reasonIs($el, 'This element `<div.testCase>` is not visible because it has an effective width and height of: `0 x 100` pixels.')
+          it('element sits outside boundaries of parent with overflow clipping', function () {
+            prepareFixtureSection('overflow-hidden')
+            cy.get('[cy-section="overflow-hidden"] .testCase[cy-label="Element out of bounds right"]').then(($el) => {
+              reasonIs($el, 'This element `<div.testCase>` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: `hidden`, `clip`, `scroll` or `auto`')
+            })
+          })
         })
-      })
 
-      it('has effective zero height', function () {
-        prepareFixtureSection('zero-dimensions-with-overflow-hidden')
-        cy.get('[cy-section="zero-dimensions-with-overflow-hidden"] .testCase[cy-label="Zero height ancestor, parent, self"]').then(($el) => {
-          reasonIs($el, 'This element `<div.testCase>` is not visible because it has an effective width and height of: `100 x 0` pixels.')
+        it('is hidden because it is backface', function () {
+          cy.visit('/fixtures/visibility/transforms.html')
+          prepareFixtureSection('backface-visibility')
+          cy.get('[cy-section="backface-visibility"] .testCase[cy-label="RotateX 180deg with hidden backface"]').then(($el) => {
+            reasonIs($el, 'This element `<div.testCase>` is not visible because it is rotated and its backface is hidden.')
+          })
         })
-      })
 
-      it('has a parent with an effective zero width and overflow: hidden', function () {
-        prepareFixtureSection('zero-dimensions-with-overflow-hidden')
-        cy.get('[cy-section="zero-dimensions-with-overflow-hidden"] .testCase[cy-label="Zero height ancestor, parent, self"] span').then(($el) => {
-          reasonIs($el, 'This element `<span.testCase>` is not visible because its parent `<div.testCase>` has CSS property: `overflow: hidden` and an effective width and height of: `100 x 0` pixels.')
+        it('is hidden by transform', function () {
+          cy.visit('/fixtures/visibility/transforms.html')
+          prepareFixtureSection('scaling')
+          cy.get('[cy-section="scaling"] .testCase[cy-label="ScaleX to zero"]').then(($el) => {
+            reasonIs($el, 'This element `<div.testCase>` is not visible because it is hidden by transform.')
+          })
         })
-      })
 
-      it('element sits outside boundaries of parent with overflow clipping', function () {
-        prepareFixtureSection('overflow-hidden')
-        cy.get('[cy-section="overflow-hidden"] .testCase[cy-label="Element out of bounds right"]').then(($el) => {
-          reasonIs($el, 'This element `<div.testCase>` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: `hidden`, `clip`, `scroll` or `auto`')
+        it('element is fixed and being covered', function () {
+          cy.visit('/fixtures/visibility/positioning.html')
+          prepareFixtureSection('position-fixed-element-covered-by-another')
+          cy.get('[cy-section="position-fixed-element-covered-by-another"] .testCase[cy-label="Fixed positioned element covered by another"]').then(($el) => {
+            reasonIs($el, 'This element `<div.testCase>` is not visible because it has CSS property: `position: fixed` and it\'s being covered by another element:\n\n`<div class="testCase" cy-expect="visible" cy-label="Element covering fixed positioned element" style="position: fixed; bottom: 0; left: 0; background: lightskyblue; width: 100px; height: 100px;">on top</div>`')
+          })
         })
-      })
-    })
-
-    it('is hidden because it is backface', function () {
-      cy.visit('/fixtures/visibility/transforms.html')
-      prepareFixtureSection('backface-visibility')
-      cy.get('[cy-section="backface-visibility"] .testCase[cy-label="RotateX 180deg with hidden backface"]').then(($el) => {
-        reasonIs($el, 'This element `<div.testCase>` is not visible because it is rotated and its backface is hidden.')
-      })
-    })
 
-    it('is hidden by transform', function () {
-      cy.visit('/fixtures/visibility/transforms.html')
-      prepareFixtureSection('scaling')
-      cy.get('[cy-section="scaling"] .testCase[cy-label="ScaleX to zero"]').then(($el) => {
-        reasonIs($el, 'This element `<div.testCase>` is not visible because it is hidden by transform.')
-      })
-    })
+        it('needs scroll', function () {
+          cy.visit('/fixtures/visibility/empty.html')
+          const el = cy.$$('body').append(`
+              <div style="position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: auto;">
+                <div style="height: 800px">Big Element</div>
+                <button id="needsScroll">MyButton</button>
+              </div>
+            `)
 
-    it('element is fixed and being covered', function () {
-      cy.visit('/fixtures/visibility/positioning.html')
-      prepareFixtureSection('position-fixed-element-covered-by-another')
-      cy.get('[cy-section="position-fixed-element-covered-by-another"] .testCase[cy-label="Fixed positioned element covered by another"]').then(($el) => {
-        reasonIs($el, 'This element `<div.testCase>` is not visible because it has CSS property: `position: fixed` and it\'s being covered by another element:\n\n`<div class="testCase" cy-expect="visible" cy-label="Element covering fixed positioned element" style="position: fixed; bottom: 0; left: 0; background: lightskyblue; width: 100px; height: 100px;">on top</div>`')
-      })
-    })
-
-    it('needs scroll', function () {
-      cy.visit('/fixtures/visibility/empty.html')
-      const el = cy.$$('body').append(`
-          <div style="position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: auto;">
-            <div style="height: 800px">Big Element</div>
-            <button id="needsScroll">MyButton</button>
-          </div>
-        `)
-
-      reasonIs(el.find('#needsScroll'), `This element \`<button#needsScroll>\` is not visible because its ancestor has \`position: fixed\` CSS property and it is overflowed by other elements. How about scrolling to the element with \`cy.scrollIntoView()\`?`)
-    })
+          reasonIs(el.find('#needsScroll'), `This element \`<button#needsScroll>\` is not visible because its ancestor has \`position: fixed\` CSS property and it is overflowed by other elements. How about scrolling to the element with \`cy.scrollIntoView()\`?`)
+        })
 
-    it('cannot determine why element is not visible', function () {
-      // this element is actually visible
-      // but used here as an example that does not match any of the above
-      const visible = cy.$$('<div>Visible</div>')
+        it('cannot determine why element is not visible', function () {
+          // this element is actually visible
+          // but used here as an example that does not match any of the above
+          const visible = cy.$$('<div>Visible</div>')
 
-      cy.$$('body').append(visible)
-      reasonIs(visible, 'This element `<div>` is not visible.')
+          cy.$$('body').append(visible)
+          reasonIs(visible, 'This element `<div>` is not visible.')
+        })
+      })
     })
-  })
+  }
 })
diff --git a/packages/driver/cypress/e2e/dom/visibility_shadow_dom.cy.ts b/packages/driver/cypress/e2e/dom/visibility_shadow_dom.cy.ts
index 974a909d57d..76d14419575 100644
--- a/packages/driver/cypress/e2e/dom/visibility_shadow_dom.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility_shadow_dom.cy.ts
@@ -5,62 +5,68 @@ const { $ } = Cypress
 describe('src/cypress/dom/visibility - shadow dom', () => {
   let add: (el: string, shadowEl: string, rootIdentifier: string) => JQuery<HTMLElement>
 
-  beforeEach(() => {
-    cy.visit('/fixtures/empty.html').then((win) => {
-      win.customElements.define('shadow-root', class extends win.HTMLElement {
-        constructor () {
-          super()
-
-          this.attachShadow({ mode: 'open' })
-          this.style.display = 'block'
-        }
+  const modes = ['fast', 'legacy']
+
+  for (const mode of modes) {
+    describe(`${mode}`, {
+      experimentalFastVisibility: mode === 'fast',
+    }, () => {
+      beforeEach(() => {
+        cy.visit('/fixtures/empty.html').then((win) => {
+          win.customElements.define('shadow-root', class extends win.HTMLElement {
+            constructor () {
+              super()
+
+              this.attachShadow({ mode: 'open' })
+              this.style.display = 'block'
+            }
+          })
+
+          add = (el, shadowEl, rootIdentifier) => {
+            const $el = $(el).appendTo(cy.$$('body'))
+
+            $(shadowEl).appendTo(cy.$$(rootIdentifier)[0].shadowRoot!)
+
+            return $el
+          }
+
+          // ensure all tests run against a scrollable window
+          const scrollThisIntoView = $(`<div style='height: 1000px; width: 10px;'></div><div>Should be in view</div>`).appendTo(cy.$$('body'))
+
+          // scroll the 2nd element into view so that
+          // there is always a scrollTop so we ensure
+          // its factored in (window vs viewport) calculations
+          scrollThisIntoView.get(1).scrollIntoView()
+        })
       })
 
-      add = (el, shadowEl, rootIdentifier) => {
-        const $el = $(el).appendTo(cy.$$('body'))
-
-        $(shadowEl).appendTo(cy.$$(rootIdentifier)[0].shadowRoot!)
-
-        return $el
-      }
-
-      // ensure all tests run against a scrollable window
-      const scrollThisIntoView = $(`<div style='height: 1000px; width: 10px;'></div><div>Should be in view</div>`).appendTo(cy.$$('body'))
-
-      // scroll the 2nd element into view so that
-      // there is always a scrollTop so we ensure
-      // its factored in (window vs viewport) calculations
-      scrollThisIntoView.get(1).scrollIntoView()
-    })
-  })
-
-  describe('css visibility', () => {
-    it('is hidden if parent is shadow root and has .css(visibility) hidden', () => {
-      const $shadowRootVisHidden = add(
+      describe('css visibility', () => {
+        it('is hidden if parent is shadow root and has .css(visibility) hidden', () => {
+          const $shadowRootVisHidden = add(
         `<shadow-root id="shadow-root-vis-hidden" style="visibility: hidden;"></shadow-root>`,
         `<button>parent visibility: hidden</button>`,
         '#shadow-root-vis-hidden',
-      )
+          )
 
-      cy.wrap($shadowRootVisHidden).find('button', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($shadowRootVisHidden).find('button', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($shadowRootVisHidden).find('button', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($shadowRootVisHidden).find('button', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden if parent outside of shadow dom has .css(visibility) hidden', () => {
-      const $outsideParentVisHidden = add(
+        it('is hidden if parent outside of shadow dom has .css(visibility) hidden', () => {
+          const $outsideParentVisHidden = add(
         `<div style="visibility: hidden;">
           <shadow-root id="outside-parent-vis-hidden"></shadow-root>
         </div>`,
         `<button>parent visibility: hidden</button>`,
         '#outside-parent-vis-hidden',
-      )
+          )
 
-      cy.wrap($outsideParentVisHidden).find('button', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($outsideParentVisHidden).find('button', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($outsideParentVisHidden).find('button', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($outsideParentVisHidden).find('button', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden if parent outside of shadow dom has visibility collapse', () => {
-      const $outsideParentVisCollapse = add(
+        it('is hidden if parent outside of shadow dom has visibility collapse', () => {
+          const $outsideParentVisCollapse = add(
         `<table>
           <tr>
             <td>Naruto</td>
@@ -70,29 +76,29 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
         </table>`,
         `<span id='collapse-span'>Sasuke</span>`,
         '#outside-parent-vis-collapse',
-      )
+          )
 
-      cy.wrap($outsideParentVisCollapse).find('#collapse-span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($outsideParentVisCollapse).find('#collapse-span', { includeShadowDom: true }).should('not.be.visible')
-    })
-  })
+          cy.wrap($outsideParentVisCollapse).find('#collapse-span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($outsideParentVisCollapse).find('#collapse-span', { includeShadowDom: true }).should('not.be.visible')
+        })
+      })
 
-  describe('width and height', () => {
-    it('is hidden if parent is shadow root and has overflow: hidden and no width', () => {
-      const $shadowRootNoWidth = add(
+      describe('width and height', () => {
+        it('is hidden if parent is shadow root and has overflow: hidden and no width', () => {
+          const $shadowRootNoWidth = add(
         `<shadow-root id="shadow-root-no-width" style='width: 0; height: 100px; overflow: hidden;'></shadow-root>`,
         `<div style='height: 500px; width: 500px;'>
           <span>parent width: 0</span>
         </div>`,
         '#shadow-root-no-width',
-      )
+          )
 
-      cy.wrap($shadowRootNoWidth).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($shadowRootNoWidth).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($shadowRootNoWidth).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($shadowRootNoWidth).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden if parent outside of shadow dom has overflow: hidden and no width', () => {
-      const $outsideParentNoWidth = add(
+        it('is hidden if parent outside of shadow dom has overflow: hidden and no width', () => {
+          const $outsideParentNoWidth = add(
         `<div style='width: 0; height: 100px; overflow: hidden;'>
           <shadow-root id="outside-parent-no-width"></shadow-root>
         </div>`,
@@ -100,27 +106,27 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           <span>parent width: 0</span>
         </div>`,
         '#outside-parent-no-width',
-      )
+          )
 
-      cy.wrap($outsideParentNoWidth).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($outsideParentNoWidth).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($outsideParentNoWidth).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($outsideParentNoWidth).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden if parent is shadow root and has overflow: hidden and no height', () => {
-      const $shadowRootNoHeight = add(
+        it('is hidden if parent is shadow root and has overflow: hidden and no height', () => {
+          const $shadowRootNoHeight = add(
         `<shadow-root id="shadow-root-no-height" style='width: 100px; height: 0; overflow: hidden;'></shadow-root>`,
         `<div style='height: 500px; width: 500px;'>
           <span>parent height: 0</span>
         </div>`,
         '#shadow-root-no-height',
-      )
+          )
 
-      cy.wrap($shadowRootNoHeight).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($shadowRootNoHeight).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($shadowRootNoHeight).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($shadowRootNoHeight).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden if parent outside of shadow dom has overflow: hidden and no height', () => {
-      const $outsideParentNoHeight = add(
+        it('is hidden if parent outside of shadow dom has overflow: hidden and no height', () => {
+          const $outsideParentNoHeight = add(
         `<div style='width: 100px; height: 0; overflow: hidden;'>
           <shadow-root id="outside-parent-no-height"></shadow-root>
         </div>`,
@@ -128,16 +134,16 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           <span>parent height: 0</span>
         </div>`,
         '#outside-parent-no-height',
-      )
+          )
 
-      cy.wrap($outsideParentNoHeight).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($outsideParentNoHeight).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
-  })
+          cy.wrap($outsideParentNoHeight).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($outsideParentNoHeight).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
+      })
 
-  describe('css position', () => {
-    it('is visible if child has position: absolute', () => {
-      const $childPosAbs = add(
+      describe('css position', () => {
+        it('is visible if child has position: absolute', () => {
+          const $childPosAbs = add(
         `<div style='width: 0; height: 100px; overflow: hidden;'>
           <shadow-root id="child-pos-absolute"></shadow-root>
         </div>`,
@@ -145,14 +151,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           <span style="position: absolute;">position: absolute</span>
         </div>`,
         '#child-pos-absolute',
-      )
+          )
 
-      cy.wrap($childPosAbs).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($childPosAbs).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($childPosAbs).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($childPosAbs).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible if child has position: fixed', () => {
-      const $childPosFixed = add(
+        it('is visible if child has position: fixed', () => {
+          const $childPosFixed = add(
         `<div style='width: 0; height: 100px; overflow: hidden;'>
           <shadow-root id="child-pos-fixed"></shadow-root>
         </div>`,
@@ -160,14 +166,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           <button style="position: fixed; top: 0;">position: fixed</button>
         </div>`,
         '#child-pos-fixed',
-      )
+          )
 
-      cy.wrap($childPosFixed).find('button', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($childPosFixed).find('button', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($childPosFixed).find('button', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($childPosFixed).find('button', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible if descendent from parent has position: absolute and descendent is outside shadow dom', () => {
-      const $descendentPosAbsOutside = add(
+        it('is visible if descendent from parent has position: absolute and descendent is outside shadow dom', () => {
+          const $descendentPosAbsOutside = add(
         `<div style='width: 0; height: 100px; overflow: hidden;'>
           <div style='height: 500px; width: 500px; position: absolute;'>
             <shadow-root id="descendent-pos-abs-outside"></shadow-root>
@@ -175,14 +181,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
         </div>`,
         `<span>no width, descendant position: absolute</span>`,
         '#descendent-pos-abs-outside',
-      )
+          )
 
-      cy.wrap($descendentPosAbsOutside).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($descendentPosAbsOutside).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($descendentPosAbsOutside).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($descendentPosAbsOutside).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible if descendent from parent has position: absolute and descendent is inside shadow dom', () => {
-      const $descendentPosAbsInside = add(
+        it('is visible if descendent from parent has position: absolute and descendent is inside shadow dom', () => {
+          const $descendentPosAbsInside = add(
         `<div style='width: 0; height: 100px; overflow: hidden;'>
           <shadow-root id="descendent-pos-abs-inside"></shadow-root>
         </div>`,
@@ -190,14 +196,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           <span>no width, descendant position: absolute</span>
         </div>`,
         '#descendent-pos-abs-inside',
-      )
+          )
 
-      cy.wrap($descendentPosAbsInside).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($descendentPosAbsInside).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($descendentPosAbsInside).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($descendentPosAbsInside).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible if descendent from parent has position: fixed and descendent is outside shadow dom', () => {
-      const $descendentPosFixedOutside = add(
+        it('is visible if descendent from parent has position: fixed and descendent is outside shadow dom', () => {
+          const $descendentPosFixedOutside = add(
         `<div style='width: 0; height: 100px; overflow: hidden;'>
           <div style='height: 500px; width: 500px; position: fixed; top: 0; right: 0;'>
             <shadow-root id="descendent-pos-fixed-outside"></shadow-root>
@@ -205,14 +211,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
         </div>`,
         `<button>no width, descendant position: fixed</button>`,
         '#descendent-pos-fixed-outside',
-      )
+          )
 
-      cy.wrap($descendentPosFixedOutside).find('button', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($descendentPosFixedOutside).find('button', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($descendentPosFixedOutside).find('button', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($descendentPosFixedOutside).find('button', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible if descendent from parent has position: fixed and descendent is inside shadow dom', () => {
-      const $descendentPosFixedInside = add(
+        it('is visible if descendent from parent has position: fixed and descendent is inside shadow dom', () => {
+          const $descendentPosFixedInside = add(
         `<div style='width: 0; height: 100px; overflow: hidden;'>
           <shadow-root id="descendent-pos-fixed-inside"></shadow-root>
         </div>`,
@@ -220,162 +226,162 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           <button>no width, descendant position: fixed</button>
         </div>`,
         '#descendent-pos-fixed-inside',
-      )
+          )
 
-      cy.wrap($descendentPosFixedInside).find('button', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($descendentPosFixedInside).find('button', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($descendentPosFixedInside).find('button', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($descendentPosFixedInside).find('button', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is hidden if position: fixed and covered by element outside of shadow dom', () => {
-      const $coveredUpByOutsidePosFixed = add(
+        it('is hidden if position: fixed and covered by element outside of shadow dom', () => {
+          const $coveredUpByOutsidePosFixed = add(
         `<div>
           <shadow-root id="covered-up-by-outside-pos-fixed"></shadow-root>
           <div style="position: fixed; bottom: 0; left: 0">on top</div>
         </div>`,
         `<div id="inside-underneath" style="position: fixed; bottom: 0; left: 0">underneath</div>`,
         '#covered-up-by-outside-pos-fixed',
-      )
+          )
 
-      cy.wrap($coveredUpByOutsidePosFixed).find('#inside-underneath', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($coveredUpByOutsidePosFixed).find('#inside-underneath', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($coveredUpByOutsidePosFixed).find('#inside-underneath', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($coveredUpByOutsidePosFixed).find('#inside-underneath', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden if outside of shadow dom with position: fixed and covered by element inside of shadow dom', () => {
-      const $coveredUpByShadowPosFixed = add(
+        it('is hidden if outside of shadow dom with position: fixed and covered by element inside of shadow dom', () => {
+          const $coveredUpByShadowPosFixed = add(
         `<div>
           <div id="outside-underneath" style="position: fixed; bottom: 0; left: 0">underneath</div>
           <shadow-root id="covered-up-by-shadow-pos-fixed"></shadow-root>
         </div>`,
         `<div style="position: fixed; bottom: 0; left: 0">on top</div>`,
         '#covered-up-by-shadow-pos-fixed',
-      )
+          )
 
-      cy.wrap($coveredUpByShadowPosFixed).find('#outside-underneath', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($coveredUpByShadowPosFixed).find('#outside-underneath', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($coveredUpByShadowPosFixed).find('#outside-underneath', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($coveredUpByShadowPosFixed).find('#outside-underneath', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is visible if position: fixed and parent outside shadow dom has pointer-events: none', () => {
-      const $parentPointerEventsNone = add(
+        it('is visible if position: fixed and parent outside shadow dom has pointer-events: none', () => {
+          const $parentPointerEventsNone = add(
         `<div style="pointer-events: none;">
           <shadow-root id="parent-pointer-events-none"></shadow-root>
         </div>`,
         `<span style="position: fixed; top: 20px;">parent pointer-events: none</span>`,
         '#parent-pointer-events-none',
-      )
+          )
 
-      cy.wrap($parentPointerEventsNone).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($parentPointerEventsNone).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($parentPointerEventsNone).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($parentPointerEventsNone).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is hidden if covered when position: fixed and parent outside shadow dom has pointer-events: none', () => {
-      const $parentPointerEventsNoneCovered = add(
+        it('is hidden if covered when position: fixed and parent outside shadow dom has pointer-events: none', () => {
+          const $parentPointerEventsNoneCovered = add(
         `<div style="pointer-events: none;">
           <shadow-root id="parent-pointer-events-none-covered"></shadow-root>
         </div>
         <span style="position: fixed; top: 40px; background: red;">covering the element with pointer-events: none</span>`,
         `<span style="position: fixed; top: 40px;">parent pointer-events: none</span>`,
         '#parent-pointer-events-none-covered',
-      )
+          )
 
-      cy.wrap($parentPointerEventsNoneCovered).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($parentPointerEventsNoneCovered).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($parentPointerEventsNoneCovered).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($parentPointerEventsNoneCovered).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is visible if pointer-events: none and parent outside shadow dom has position: fixed', () => {
-      const $childPointerEventsNone = add(
+        it('is visible if pointer-events: none and parent outside shadow dom has position: fixed', () => {
+          const $childPointerEventsNone = add(
         `<div style="position: fixed; top: 60px;">
           <shadow-root id="child-pointer-events-none-covered"></shadow-root>
         </div>`,
         `<span style="pointer-events: none;">child pointer-events: none</span>`,
         '#child-pointer-events-none-covered',
-      )
+          )
 
-      cy.wrap($childPointerEventsNone).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($childPointerEventsNone).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
-  })
+          cy.wrap($childPointerEventsNone).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($childPointerEventsNone).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
+      })
 
-  describe('css overflow', () => {
-    it('is hidden when parent outside of shadow dom overflow hidden and out of bounds to left', () => {
-      const $elOutOfParentBoundsToLeft = add(
+      describe('css overflow', () => {
+        it('is hidden when parent outside of shadow dom overflow hidden and out of bounds to left', () => {
+          const $elOutOfParentBoundsToLeft = add(
         `<div style='width: 100px; height: 100px; overflow: hidden; position: relative;'>
           <shadow-root id="el-out-of-parent-bounds-to-left"></shadow-root>
         </div>`,
         `<span style='position: absolute; width: 100px; height: 100px; left: -100px; top: 0;'>position: absolute, out of bounds left</span>`,
         '#el-out-of-parent-bounds-to-left',
-      )
+          )
 
-      cy.wrap($elOutOfParentBoundsToLeft).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elOutOfParentBoundsToLeft).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elOutOfParentBoundsToLeft).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elOutOfParentBoundsToLeft).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden when parent outside of shadow dom overflow hidden and out of bounds to right', () => {
-      const $elOutOfParentBoundsToRight = add(
+        it('is hidden when parent outside of shadow dom overflow hidden and out of bounds to right', () => {
+          const $elOutOfParentBoundsToRight = add(
         `<div style='width: 100px; height: 100px; overflow: hidden; position: relative;'>
           <shadow-root id="el-out-of-parent-bounds-to-right"></shadow-root>
         </div>`,
         `<span style='position: absolute; width: 100px; height: 100px; right: -100px; top: 0;'>position: absolute, out of bounds right</span>`,
         '#el-out-of-parent-bounds-to-right',
-      )
+          )
 
-      cy.wrap($elOutOfParentBoundsToRight).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elOutOfParentBoundsToRight).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elOutOfParentBoundsToRight).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elOutOfParentBoundsToRight).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden when parent outside of shadow dom overflow hidden and out of bounds above', () => {
-      const $elOutOfParentBoundsAbove = add(
+        it('is hidden when parent outside of shadow dom overflow hidden and out of bounds above', () => {
+          const $elOutOfParentBoundsAbove = add(
         `<div style='width: 100px; height: 100px; overflow: hidden; position: relative;'>
           <shadow-root id="el-out-of-parent-bounds-above"></shadow-root>
         </div>`,
         `<span style='position: absolute; width: 100px; height: 100px; top: -100px; left: 0;'>position: absolute, out of bounds above</span>`,
         '#el-out-of-parent-bounds-above',
-      )
+          )
 
-      cy.wrap($elOutOfParentBoundsAbove).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elOutOfParentBoundsAbove).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elOutOfParentBoundsAbove).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elOutOfParentBoundsAbove).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden when parent outside of shadow dom overflow hidden and out of bounds below', () => {
-      const $elOutOfParentBoundsBelow = add(
+        it('is hidden when parent outside of shadow dom overflow hidden and out of bounds below', () => {
+          const $elOutOfParentBoundsBelow = add(
         `<div style='width: 100px; height: 100px; overflow: hidden; position: relative;'>
           <shadow-root id="el-out-of-parent-bounds-below"></shadow-root>
         </div>`,
         `<span style='position: absolute; width: 100px; height: 100px; bottom: -100px; left: 0;'>position: absolute, out of bounds below</span>`,
         '#el-out-of-parent-bounds-below',
-      )
+          )
 
-      cy.wrap($elOutOfParentBoundsBelow).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elOutOfParentBoundsBelow).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elOutOfParentBoundsBelow).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elOutOfParentBoundsBelow).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden when parent outside of shadow dom overflow hidden-y and out of bounds', () => {
-      const $elOutOfParentWithOverflowYHiddenBounds = add(
+        it('is hidden when parent outside of shadow dom overflow hidden-y and out of bounds', () => {
+          const $elOutOfParentWithOverflowYHiddenBounds = add(
         `<div style='width: 100px; height: 100px; overflow-y: hidden; position: relative;'>
           <shadow-root id="el-out-of-parent-with-overflow-y-hidden-bounds"></shadow-root>
         </div>`,
         `<span style='position: absolute; top: 200px; left: 0;'>position: absolute, out of bounds below</span>`,
         '#el-out-of-parent-with-overflow-y-hidden-bounds',
-      )
+          )
 
-      cy.wrap($elOutOfParentWithOverflowYHiddenBounds).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elOutOfParentWithOverflowYHiddenBounds).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elOutOfParentWithOverflowYHiddenBounds).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elOutOfParentWithOverflowYHiddenBounds).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden when parent outside of shadow dom overflow hidden-x and out of bounds', () => {
-      const $elOutOfParentWithOverflowXHiddenBounds = add(
+        it('is hidden when parent outside of shadow dom overflow hidden-x and out of bounds', () => {
+          const $elOutOfParentWithOverflowXHiddenBounds = add(
         `<div style='width: 100px; height: 100px; overflow-x: hidden; position: relative;'>
           <shadow-root id="el-out-of-parent-with-overflow-x-hidden-bounds"></shadow-root>
         </div>`,
         `<span style='position: absolute; top: 0; left: 200px;'>position: absolute, out of bounds below</span>`,
         '#el-out-of-parent-with-overflow-x-hidden-bounds',
-      )
+          )
 
-      cy.wrap($elOutOfParentWithOverflowXHiddenBounds).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elOutOfParentWithOverflowXHiddenBounds).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elOutOfParentWithOverflowXHiddenBounds).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elOutOfParentWithOverflowXHiddenBounds).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is visible when parent overflow hidden but el in a closer parent outside of shadow dom with position absolute', () => {
-      const $elOutOfParentWithOverflowHiddenBoundsButCloserPositionAbsoluteParent = add(
+        it('is visible when parent overflow hidden but el in a closer parent outside of shadow dom with position absolute', () => {
+          const $elOutOfParentWithOverflowHiddenBoundsButCloserPositionAbsoluteParent = add(
         `<div style="border: 1px solid red; width: 200px; height: 200px; overflow: hidden;">
           <div style="position: absolute; left: 300px; border: 1px solid blue; width: 200px; height: 200px;">
             <shadow-root id="el-out-of-parent-with-overflow-hidden-bounds-but-closer-position-absolute-parent"></shadow-root>
@@ -383,14 +389,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
         </div>`,
         `<span style="border: 1px solid green;">Hello</span>`,
         '#el-out-of-parent-with-overflow-hidden-bounds-but-closer-position-absolute-parent',
-      )
+          )
 
-      cy.wrap($elOutOfParentWithOverflowHiddenBoundsButCloserPositionAbsoluteParent).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($elOutOfParentWithOverflowHiddenBoundsButCloserPositionAbsoluteParent).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($elOutOfParentWithOverflowHiddenBoundsButCloserPositionAbsoluteParent).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($elOutOfParentWithOverflowHiddenBoundsButCloserPositionAbsoluteParent).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is hidden when parent is wide and ancestor outside shadow dom is overflow auto', () => {
-      const $elOutOfAncestorOverflowAutoBoundsOutside = add(
+        it('is hidden when parent is wide and ancestor outside shadow dom is overflow auto', () => {
+          const $elOutOfAncestorOverflowAutoBoundsOutside = add(
         `<div style='width: 100px; height: 100px; overflow: auto;'>
           <div style='width: 1000px; position: relative;'>
             <shadow-root id="el-out-of-ancestor-overflow-auto-bounds-outside"></shadow-root>
@@ -398,14 +404,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
         </div>`,
         `<span style='position: absolute; left: 300px; top: 0px;'>out of bounds, parent wide, ancestor overflow: auto</span>`,
         '#el-out-of-ancestor-overflow-auto-bounds-outside',
-      )
+          )
 
-      cy.wrap($elOutOfAncestorOverflowAutoBoundsOutside).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elOutOfAncestorOverflowAutoBoundsOutside).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elOutOfAncestorOverflowAutoBoundsOutside).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elOutOfAncestorOverflowAutoBoundsOutside).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden when parent is wide and ancestor inside shadow dom is overflow auto', () => {
-      const $elOutOfAncestorOverflowAutoBoundsInside = add(
+        it('is hidden when parent is wide and ancestor inside shadow dom is overflow auto', () => {
+          const $elOutOfAncestorOverflowAutoBoundsInside = add(
         `<div style='width: 100px; height: 100px; overflow: auto;'>
           <shadow-root id="el-out-of-ancestor-overflow-auto-bounds-inside"></shadow-root>
         </div>`,
@@ -413,27 +419,27 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           <span style='position: absolute; left: 300px; top: 0px;'>out of bounds, parent wide, ancestor overflow: auto</span>
         </div>`,
         '#el-out-of-ancestor-overflow-auto-bounds-inside',
-      )
+          )
 
-      cy.wrap($elOutOfAncestorOverflowAutoBoundsInside).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elOutOfAncestorOverflowAutoBoundsInside).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elOutOfAncestorOverflowAutoBoundsInside).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elOutOfAncestorOverflowAutoBoundsInside).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden when parent outside of shadow dom has overflow scroll and out of bounds', () => {
-      const $elOutOfScrollingParentBounds = add(
+        it('is hidden when parent outside of shadow dom has overflow scroll and out of bounds', () => {
+          const $elOutOfScrollingParentBounds = add(
         `<div style='width: 100px; height: 100px; overflow: scroll; position: relative; top: 700px; left: 700px;'>
           <shadow-root id="el-out-of-scrolling-parent-bounds"></shadow-root>
         </div>`,
         `<span style='position: absolute; left: 300px; top: 0;'>out of scrolling bounds, position: absolute</span>`,
         '#el-out-of-scrolling-parent-bounds',
-      )
+          )
 
-      cy.wrap($elOutOfScrollingParentBounds).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elOutOfScrollingParentBounds).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elOutOfScrollingParentBounds).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elOutOfScrollingParentBounds).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden when parent absolutely positioned and overflow hidden and out of bounds', () => {
-      const $elOutOfPosAbsParentBounds = add(
+        it('is hidden when parent absolutely positioned and overflow hidden and out of bounds', () => {
+          const $elOutOfPosAbsParentBounds = add(
         `<div id="ancestor-el" style='width: 100px; height: 100px; overflow: hidden; position: relative; top: 700px; left: 700px;'>
           <div>
             <div id="parent-el" style='position: absolute;'>
@@ -443,14 +449,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
         </div>`,
         `<span id="el-under-test" style='position: absolute; left: -350px; top: 0;'>out of bounds, position: absolute</span>`,
         '#el-out-of-pos-abs-parent-bounds',
-      )
+          )
 
-      cy.wrap($elOutOfPosAbsParentBounds).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elOutOfPosAbsParentBounds).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elOutOfPosAbsParentBounds).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elOutOfPosAbsParentBounds).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is visible when parent absolutely positioned and overflow hidden and not out of bounds', () => {
-      const $elInPosAbsParentsBounds = add(
+        it('is visible when parent absolutely positioned and overflow hidden and not out of bounds', () => {
+          const $elInPosAbsParentsBounds = add(
         `<div style='width: 200px; height: 200px; overflow: hidden; position: relative;'>
           <div style='position: absolute;'>
             <shadow-root id="el-in-pos-abs-parent-bounds"></shadow-root>
@@ -458,27 +464,27 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
         </div>`,
         `<span style='position: absolute; left: 50px; top: 50px;'>in bounds, parent position: absolute</span>`,
         '#el-in-pos-abs-parent-bounds',
-      )
+          )
 
-      cy.wrap($elInPosAbsParentsBounds).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($elInPosAbsParentsBounds).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($elInPosAbsParentsBounds).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($elInPosAbsParentsBounds).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible when parent overflow hidden and not out of bounds', () => {
-      const $elInParentBounds = add(
+        it('is visible when parent overflow hidden and not out of bounds', () => {
+          const $elInParentBounds = add(
         `<div style='width: 100px; height: 100px; overflow: hidden; position: relative;'>
           <shadow-root id="el-in-parent-bounds"></shadow-root>
         </div>`,
         `<span style='position: absolute; left: 0; top: 0;'>in bounds, position: absolute</span>`,
         '#el-in-parent-bounds',
-      )
+          )
 
-      cy.wrap($elInParentBounds).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($elInParentBounds).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($elInParentBounds).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($elInParentBounds).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible when ancestor outside shadow dom is overflow hidden but more distant ancestor is the offset parent', () => {
-      const $elIsOutOfBoundsOfOutsideAncestorsOverflowButWithinRelativeAncestor = add(
+        it('is visible when ancestor outside shadow dom is overflow hidden but more distant ancestor is the offset parent', () => {
+          const $elIsOutOfBoundsOfOutsideAncestorsOverflowButWithinRelativeAncestor = add(
         `<div style='padding: 100px; position: relative;'>
           <div style='overflow: hidden;'>
             <div>
@@ -488,14 +494,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
         </div>`,
         `<span style='position: absolute; left: 0; top: 0;'>in bounds of ancestor, position: absolute, parent overflow: hidden</span>`,
         '#el-is-out-of-bounds-of-outside-ancestors-overflow-but-within-relative-ancestor',
-      )
+          )
 
-      cy.wrap($elIsOutOfBoundsOfOutsideAncestorsOverflowButWithinRelativeAncestor).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($elIsOutOfBoundsOfOutsideAncestorsOverflowButWithinRelativeAncestor).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($elIsOutOfBoundsOfOutsideAncestorsOverflowButWithinRelativeAncestor).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($elIsOutOfBoundsOfOutsideAncestorsOverflowButWithinRelativeAncestor).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible when ancestor inside shadow dom is overflow hidden but more distant ancestor is the offset parent', () => {
-      const $elIsOutOfBoundsOfInsideAncestorsOverflowButWithinRelativeAncestor = add(
+        it('is visible when ancestor inside shadow dom is overflow hidden but more distant ancestor is the offset parent', () => {
+          const $elIsOutOfBoundsOfInsideAncestorsOverflowButWithinRelativeAncestor = add(
         `<div style='padding: 100px; position: relative;'>
           <shadow-root id="el-is-out-of-bounds-of-inside-ancestors-overflow-but-within-relative-ancestor"></shadow-root>
         </div>`,
@@ -505,14 +511,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           </div>
         </div>`,
         '#el-is-out-of-bounds-of-inside-ancestors-overflow-but-within-relative-ancestor',
-      )
+          )
 
-      cy.wrap($elIsOutOfBoundsOfInsideAncestorsOverflowButWithinRelativeAncestor).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($elIsOutOfBoundsOfInsideAncestorsOverflowButWithinRelativeAncestor).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($elIsOutOfBoundsOfInsideAncestorsOverflowButWithinRelativeAncestor).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($elIsOutOfBoundsOfInsideAncestorsOverflowButWithinRelativeAncestor).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is hidden when relatively positioned outside of ancestor outside shadow dom with overflow hidden', () => {
-      const $elIsRelativeAndOutOfBoundsOfAncestorOverflow = add(
+        it('is hidden when relatively positioned outside of ancestor outside shadow dom with overflow hidden', () => {
+          const $elIsRelativeAndOutOfBoundsOfAncestorOverflow = add(
         `<div style='overflow: hidden;'>
           <div>
             <shadow-root id="el-is-relative-and-out-of-bounds-of-ancestor-overflow"></shadow-root>
@@ -520,27 +526,27 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
         </div>`,
         `<span style='position: relative; left: 0; top: -200px;'>out of bounds, position: relative</span>`,
         '#el-is-relative-and-out-of-bounds-of-ancestor-overflow',
-      )
+          )
 
-      cy.wrap($elIsRelativeAndOutOfBoundsOfAncestorOverflow).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($elIsRelativeAndOutOfBoundsOfAncestorOverflow).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($elIsRelativeAndOutOfBoundsOfAncestorOverflow).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($elIsRelativeAndOutOfBoundsOfAncestorOverflow).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is visible when relatively positioned outside of ancestor outside shadow dom that does not hide overflow', () => {
-      const $elIsRelativeAndOutOfBoundsOfAncestorButAncestorShowsOverflow = add(
+        it('is visible when relatively positioned outside of ancestor outside shadow dom that does not hide overflow', () => {
+          const $elIsRelativeAndOutOfBoundsOfAncestorButAncestorShowsOverflow = add(
         `<div>
           <shadow-root id="el-is-relative-and-out-of-bounds-of-ancestor-but-ancestor-shows-overflow"></shadow-root>
         </div>`,
         `<span style='position: relative; left: 0; top: -200px;'>out of bounds but visible, position: relative</span>`,
         '#el-is-relative-and-out-of-bounds-of-ancestor-but-ancestor-shows-overflow',
-      )
+          )
 
-      cy.wrap($elIsRelativeAndOutOfBoundsOfAncestorButAncestorShowsOverflow).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($elIsRelativeAndOutOfBoundsOfAncestorButAncestorShowsOverflow).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($elIsRelativeAndOutOfBoundsOfAncestorButAncestorShowsOverflow).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($elIsRelativeAndOutOfBoundsOfAncestorButAncestorShowsOverflow).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible when parent inside shadow dom is relatively positioned out of bounds but el is relatively positioned back in bounds', () => {
-      const $insideParentOutOfBoundsButElInBounds = add(
+        it('is visible when parent inside shadow dom is relatively positioned out of bounds but el is relatively positioned back in bounds', () => {
+          const $insideParentOutOfBoundsButElInBounds = add(
         `<div style='position: relative; padding: 20px;'>
           <div style='overflow: hidden;'>
             <shadow-root id="inside-parent-out-of-bounds-but-el-in-bounds"></shadow-root>
@@ -550,14 +556,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           <span style='position: relative; left: 0; top: 100px;'>in bounds of ancestor, parent out of bounds</span>
         </div>`,
         '#inside-parent-out-of-bounds-but-el-in-bounds',
-      )
+          )
 
-      cy.wrap($insideParentOutOfBoundsButElInBounds).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($insideParentOutOfBoundsButElInBounds).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($insideParentOutOfBoundsButElInBounds).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($insideParentOutOfBoundsButElInBounds).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible when parent outside shadow dom is relatively positioned out of bounds but el is relatively positioned back in bounds', () => {
-      const $outsideParentOutOfBoundsButElInBounds = add(
+        it('is visible when parent outside shadow dom is relatively positioned out of bounds but el is relatively positioned back in bounds', () => {
+          const $outsideParentOutOfBoundsButElInBounds = add(
         `<div style='position: relative; padding: 20px;'>
           <div style='overflow: hidden;'>
             <div style='position: relative; left: 0; top: -100px;'>
@@ -567,14 +573,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
         </div>`,
         `<span style='position: relative; left: 0; top: 100px;'>in bounds of ancestor, parent out of bounds</span>`,
         '#outside-parent-out-of-bounds-but-el-in-bounds',
-      )
+          )
 
-      cy.wrap($outsideParentOutOfBoundsButElInBounds).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($outsideParentOutOfBoundsButElInBounds).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($outsideParentOutOfBoundsButElInBounds).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($outsideParentOutOfBoundsButElInBounds).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible when element is statically positioned and parent element is absolutely positioned and ancestor has overflow hidden', function () {
-      const el = add(
+        it('is visible when element is statically positioned and parent element is absolutely positioned and ancestor has overflow hidden', function () {
+          const el = add(
         `<div id="breaking-container" style="overflow: hidden">
           <div>
             <shadow-root id="shadow"></shadow-root>
@@ -584,14 +590,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           <button id="visible-button">Try me</button>
         </div>`,
         '#shadow',
-      )
+          )
 
-      cy.wrap(el).find('#visible-button', { includeShadowDom: true }).should('be.visible')
-      cy.wrap(el).find('#visible-button', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap(el).find('#visible-button', { includeShadowDom: true }).should('be.visible')
+          cy.wrap(el).find('#visible-button', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is visible when element is relatively positioned and parent element is absolutely positioned and ancestor has overflow auto', function () {
-      const el = add(
+        it('is visible when element is relatively positioned and parent element is absolutely positioned and ancestor has overflow auto', function () {
+          const el = add(
         `<div style="height: 200px; position: relative; display: flex">
           <div style="border: 5px solid red">
             <div
@@ -609,42 +615,42 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           <button id="visible-button">Try me</button>
         </div>`,
         '#shadow',
-      )
+          )
 
-      cy.wrap(el).find('#visible-button', { includeShadowDom: true }).should('be.visible')
-      cy.wrap(el).find('#visible-button', { includeShadowDom: true }).should('not.be.hidden')
-    })
-  })
+          cy.wrap(el).find('#visible-button', { includeShadowDom: true }).should('be.visible')
+          cy.wrap(el).find('#visible-button', { includeShadowDom: true }).should('not.be.hidden')
+        })
+      })
 
-  describe('css transform', () => {
-    it('is hidden when outside parent outside of shadow dom transform scale', () => {
-      const $parentWithTransformScaleElOutsideScale = add(
+      describe('css transform', () => {
+        it('is hidden when outside parent outside of shadow dom transform scale', () => {
+          const $parentWithTransformScaleElOutsideScale = add(
         `<div style="transform: scale(0,0)">
           <shadow-root id="parent-with-transform-scale-el-outside-scale"></shadow-root>
         </div>`,
         `<span>TRANSFORMERS</span>`,
         '#parent-with-transform-scale-el-outside-scale',
-      )
+          )
 
-      cy.wrap($parentWithTransformScaleElOutsideScale).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($parentWithTransformScaleElOutsideScale).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($parentWithTransformScaleElOutsideScale).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($parentWithTransformScaleElOutsideScale).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is visible when inside parent outside of shadow dom transform scale', () => {
-      const $parentWithTransformScaleElInsideScale = add(
+        it('is visible when inside parent outside of shadow dom transform scale', () => {
+          const $parentWithTransformScaleElInsideScale = add(
         `<div style="transform: scale(1,1)">
           <shadow-root id="parent-with-transform-scale-el-inside-scale"></shadow-root>
         </div>`,
         `<span>TRANSFORMERS</span>`,
         '#parent-with-transform-scale-el-inside-scale',
-      )
+          )
 
-      cy.wrap($parentWithTransformScaleElInsideScale).find('span', { includeShadowDom: true }).should('be.visible')
-      cy.wrap($parentWithTransformScaleElInsideScale).find('span', { includeShadowDom: true }).should('not.be.hidden')
-    })
+          cy.wrap($parentWithTransformScaleElInsideScale).find('span', { includeShadowDom: true }).should('be.visible')
+          cy.wrap($parentWithTransformScaleElInsideScale).find('span', { includeShadowDom: true }).should('not.be.hidden')
+        })
 
-    it('is hidden when out of ancestor bounds due to ancestor within shadow dom transform', () => {
-      const $ancestorInsideTransformMakesElOutOfBoundsOfAncestor = add(
+        it('is hidden when out of ancestor bounds due to ancestor within shadow dom transform', () => {
+          const $ancestorInsideTransformMakesElOutOfBoundsOfAncestor = add(
         `<div style='margin-left: 100px; overflow: hidden; width: 100px;'>
           <shadow-root id="ancestor-inside-transform-makes-el-out-of-bounds-of-ancestor"></shadow-root>
         </div>`,
@@ -654,14 +660,14 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
           </div>
         </div>`,
         '#ancestor-inside-transform-makes-el-out-of-bounds-of-ancestor',
-      )
+          )
 
-      cy.wrap($ancestorInsideTransformMakesElOutOfBoundsOfAncestor).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($ancestorInsideTransformMakesElOutOfBoundsOfAncestor).find('span', { includeShadowDom: true }).should('not.be.visible')
-    })
+          cy.wrap($ancestorInsideTransformMakesElOutOfBoundsOfAncestor).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($ancestorInsideTransformMakesElOutOfBoundsOfAncestor).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
 
-    it('is hidden when out of ancestor bounds due to ancestor outside shadow dom transform', () => {
-      const $ancestorOutsideTransformMakesElOutOfBoundsOfAncestor = add(
+        it('is hidden when out of ancestor bounds due to ancestor outside shadow dom transform', () => {
+          const $ancestorOutsideTransformMakesElOutOfBoundsOfAncestor = add(
         `<div style='margin-left: 100px; overflow: hidden; width: 100px;'>
           <div style='transform: translateX(-100px); width: 200px;'>
             <shadow-root id="ancestor-outside-transform-makes-el-out-of-bounds-of-ancestor"></shadow-root>
@@ -671,10 +677,12 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
             <span>out of ancestor's bounds due to ancestor translate</span>
         </div>`,
         '#ancestor-outside-transform-makes-el-out-of-bounds-of-ancestor',
-      )
+          )
 
-      cy.wrap($ancestorOutsideTransformMakesElOutOfBoundsOfAncestor).find('span', { includeShadowDom: true }).should('be.hidden')
-      cy.wrap($ancestorOutsideTransformMakesElOutOfBoundsOfAncestor).find('span', { includeShadowDom: true }).should('not.be.visible')
+          cy.wrap($ancestorOutsideTransformMakesElOutOfBoundsOfAncestor).find('span', { includeShadowDom: true }).should('be.hidden')
+          cy.wrap($ancestorOutsideTransformMakesElOutOfBoundsOfAncestor).find('span', { includeShadowDom: true }).should('not.be.visible')
+        })
+      })
     })
-  })
+  }
 })
diff --git a/packages/driver/cypress/e2e/e2e/visibility.cy.js b/packages/driver/cypress/e2e/e2e/visibility.cy.js
index a6475866afe..5ad46b764b2 100644
--- a/packages/driver/cypress/e2e/e2e/visibility.cy.js
+++ b/packages/driver/cypress/e2e/e2e/visibility.cy.js
@@ -1,58 +1,66 @@
 describe('visibility', () => {
-  // https://github.com/cypress-io/cypress/issues/631
-  describe('with overflow and transform - slider', () => {
-    beforeEach(() => {
-      cy.visit('/fixtures/issue-631.html')
-
-      // first slide is visible by default, nothing wrong here
-      cy.get('[name="test1"]').should('be.visible')
-      cy.get('[name="test2"]').should('not.be.visible')
-      cy.get('[name="test3"]').should('not.be.visible')
-    })
+  const modes = ['fast', 'legacy']
 
-    it('second slide', () => {
-      // ask for the second slide to become visible
-      cy.get('#button-2').click()
+  for (const mode of modes) {
+    describe(`${mode}`, {
+      experimentalFastVisibility: mode === 'fast',
+    }, () => {
+      // https://github.com/cypress-io/cypress/issues/631
+      describe('with overflow and transform - slider', () => {
+        beforeEach(() => {
+          cy.visit('/fixtures/issue-631.html')
 
-      cy.get('[name="test1"]').should('not.be.visible')
-      cy.get('[name="test2"]').should('be.visible')
-      cy.get('[name="test3"]').should('not.be.visible')
-    })
+          // first slide is visible by default, nothing wrong here
+          cy.get('[name="test1"]').should('be.visible')
+          cy.get('[name="test2"]').should('not.be.visible')
+          cy.get('[name="test3"]').should('not.be.visible')
+        })
 
-    it('third slide', () => {
-      // ask for the second slide to become visible
-      cy.get('#button-3').click()
+        it('second slide', () => {
+          // ask for the second slide to become visible
+          cy.get('#button-2').click()
 
-      cy.get('[name="test1"]').should('not.be.visible')
-      cy.get('[name="test2"]').should('not.be.visible')
-      cy.get('[name="test3"]').should('be.visible')
-    })
-  })
+          cy.get('[name="test1"]').should('not.be.visible')
+          cy.get('[name="test2"]').should('be.visible')
+          cy.get('[name="test3"]').should('not.be.visible')
+        })
 
-  describe('with shadow dom', () => {
-    // https://github.com/cypress-io/cypress/issues/7794
-    it('fixed position ancestor does not hang when checking visibility', () => {
-      cy.visit('/fixtures/issue-7794.html')
-      cy.get('.container-2').should('be.visible')
-    })
+        it('third slide', () => {
+          // ask for the second slide to become visible
+          cy.get('#button-3').click()
 
-    // TODO: move with tests added in this PR when it merges: https://github.com/cypress-io/cypress/pull/8166
-    it('non-visible ancestor causes element to not be visible', () => {
-      cy.visit('/fixtures/shadow-dom.html')
-      cy
-      .get('#shadow-element-10')
-      .find('.shadow-div', { includeShadowDom: true })
-      .should('not.be.visible')
-    })
-  })
-
-  describe('css opacity', () => {
-    it('correctly detects visibility when opacity changes', () => {
-      cy.visit('/fixtures/opacity.html')
-      cy.get('#opacity')
-      .should('be.visible')
-      .click()
-      .should('not.be.visible')
+          cy.get('[name="test1"]').should('not.be.visible')
+          cy.get('[name="test2"]').should('not.be.visible')
+          cy.get('[name="test3"]').should('be.visible')
+        })
+      })
+
+      describe('with shadow dom', () => {
+        // https://github.com/cypress-io/cypress/issues/7794
+        it('fixed position ancestor does not hang when checking visibility', () => {
+          cy.visit('/fixtures/issue-7794.html')
+          cy.get('.container-2').should('be.visible')
+        })
+
+        // TODO: move with tests added in this PR when it merges: https://github.com/cypress-io/cypress/pull/8166
+        it('non-visible ancestor causes element to not be visible', () => {
+          cy.visit('/fixtures/shadow-dom.html')
+          cy
+          .get('#shadow-element-10')
+          .find('.shadow-div', { includeShadowDom: true })
+          .should('not.be.visible')
+        })
+      })
+
+      describe('css opacity', () => {
+        it('correctly detects visibility when opacity changes', () => {
+          cy.visit('/fixtures/opacity.html')
+          cy.get('#opacity')
+          .should('be.visible')
+          .click()
+          .should('not.be.visible')
+        })
+      })
     })
-  })
+  }
 })

From 2d1c827b509e32c19b8f75724814265b68e6cc6d Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Wed, 22 Oct 2025 16:01:56 -0400
Subject: [PATCH 26/35] enable clip-path test for fast visibility

---
 packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js b/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
index ee4d9a6e841..c915360b381 100644
--- a/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
+++ b/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
@@ -14,7 +14,7 @@
 
 describe('Virtual Scrolling Stress Tests', {
   experimentalFastVisibility: true,
-  numTestsKeptInMemory: 0,
+  numTestsKeptInMemory: 1,
 }, () => {
   beforeEach(() => {
     cy.visit('/fixtures/virtual-scroll-stress-test.html')

From d494872be3dc405736e9b623524dcfc25c53b719 Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Thu, 23 Oct 2025 11:50:29 -0400
Subject: [PATCH 27/35] memoize visibleAtPoint

---
 .../driver/src/dom/visibility/fastIsHidden.ts | 23 ++-----------------
 1 file changed, 2 insertions(+), 21 deletions(-)

diff --git a/packages/driver/src/dom/visibility/fastIsHidden.ts b/packages/driver/src/dom/visibility/fastIsHidden.ts
index c73afec7eb4..9742cd15e60 100644
--- a/packages/driver/src/dom/visibility/fastIsHidden.ts
+++ b/packages/driver/src/dom/visibility/fastIsHidden.ts
@@ -63,13 +63,13 @@ function subDivideRect ({ x, y, width, height }: DOMRect): DOMRect[] {
   ].filter((rect: DOMRect) => rect.width > 1 && rect.height > 1)
 }
 
-function visibleAtPoint (el: HTMLElement, x: number, y: number): boolean {
+const visibleAtPoint = memoize(function (el: HTMLElement, x: number, y: number): boolean {
   const elAtPoint = el.ownerDocument.elementFromPoint(x, y)
 
   debug('visibleAtPoint', el, elAtPoint)
 
   return Boolean(elAtPoint) && (elAtPoint === el || el.contains(elAtPoint))
-}
+})
 
 function visibleToUser (el: HTMLElement, rect: DOMRect, maxDepth: number = 2, currentDepth: number = 0): boolean {
   if (currentDepth >= maxDepth) {
@@ -136,25 +136,6 @@ export function fastIsHidden (subject: JQuery<HTMLElement> | HTMLElement, option
 
   const boundingRect = getBoundingClientRect(subject)
 
-  // Do we need to do a more intensive opacity check, or is the checkOpacity option enough?
-  /*
-  if (options.checkOpacity) {
-    let currentElement = subject
-    let effectiveOpacity = opacity
-
-    while (currentElement) {
-      const currentOpacity = Number(currentElement.computedStyleMap().get('opacity')?.toString() || 1)
-
-      effectiveOpacity *= currentOpacity
-      if (effectiveOpacity === 0) {
-        return true
-      }
-
-      currentElement = currentElement.parentElement
-    }
-  }
-  */
-
   if (visibleToUser(subject, boundingRect)) {
     debug('visibleToUser', subject, boundingRect)
 

From 90db05ff0041d6e8690b1df6da95061444c42f1f Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Fri, 24 Oct 2025 14:33:01 -0400
Subject: [PATCH 28/35] fix config option typedef

---
 cli/types/cypress.d.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/cli/types/cypress.d.ts b/cli/types/cypress.d.ts
index 1cca43e9252..70a58a9eb0b 100644
--- a/cli/types/cypress.d.ts
+++ b/cli/types/cypress.d.ts
@@ -3284,6 +3284,12 @@ declare namespace Cypress {
      * @default false
      */
     experimentalPromptCommand?: boolean
+
+    /**
+     * Enables an alternative, performance-optimized visibility algorithm.
+     * @default false
+     */
+    experimentalFastVisibility?: boolean
   }
 
   /**

From f5503468236f688ad35f3b6f01319620bd8fb832 Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Tue, 28 Oct 2025 10:30:33 -0400
Subject: [PATCH 29/35] fix select option/optgroup delegation

---
 .../driver/cypress/e2e/dom/visibility.cy.ts   |  4 +-
 .../fixtures/visibility/form-elements.html    | 42 +++++++++----------
 .../driver/src/dom/visibility/fastIsHidden.ts | 24 ++++++-----
 3 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index face9d70c73..52e2705b6c1 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -7,7 +7,9 @@ describe('src/cypress/dom/visibility', {
   function assertVisibilityForEl (el: HTMLElement) {
     // once experimentalFastVisibility is added, switch based on the config value
     // and use `cy-fast-expect` instead of `cy-legacy-expect` when it is enabled.
-    const expected = el.getAttribute('cy-expect') ?? el.getAttribute('cy-legacy-expect')
+    const expected = el.getAttribute('cy-expect') ?? (Cypress.config('experimentalFastVisibility') ?
+      el.getAttribute('cy-fast-expect') :
+      el.getAttribute('cy-legacy-expect'))
 
     if (!expected) {
       throw new Error(`Expected attribute 'cy-expect' or 'cy-legacy-expect' not found on test case_ element ${el.outerHTML}`)
diff --git a/packages/driver/cypress/fixtures/visibility/form-elements.html b/packages/driver/cypress/fixtures/visibility/form-elements.html
index bac1d20d04f..42928c9f2b4 100644
--- a/packages/driver/cypress/fixtures/visibility/form-elements.html
+++ b/packages/driver/cypress/fixtures/visibility/form-elements.html
@@ -10,29 +10,29 @@ <h1>Form Elements Visibility Tests</h1>
   
   <div class="test-section" cy-section="select-and-option-elements" cy-has-conflicts="true">
     <h3>Select and Option Elements</h3>
-    <select class="testCase" cy-expect="visible" id="visible-select">
-      <option class="testCase" cy-fast-expect="hidden" cy-legacy-expect="visible" id="visible-option" cy-label="first option">Visible Option</option>
-      <option class="testCase" cy-fast-expect="hidden" cy-legacy-expect="visible" id="visible-option-2">Another Visible Option</option>
+    <select class="testCase" cy-expect="visible">
+      <option class="testCase" cy-expect="visible" cy-label="Visible Select > Opt 1">Visible Option</option>
+      <option class="testCase" cy-expect="visible" cy-label="Visible Select > Opt 2">Another Visible Option</option>
     </select>
     
-    <select class="testCase" cy-expect="hidden" id="hidden-select" style="display: none;">
-      <option class="testCase" cy-expect="hidden" id="hidden-option">Hidden Option</option>
+    <select class="testCase" cy-expect="hidden" style="display: none;">
+      <option class="testCase" cy-expect="hidden" id="hidden-option" cy-label="Hidden Select > Opt 1">Hidden Option</option>
     </select>
   </div>
 
   <div class="test-section" cy-section="optgroup-elements" cy-has-conflicts="true">
     <h3>Optgroup Elements</h3>
-    <select class="testCase" cy-expect="visible" id="select-with-optgroup" cy-label="select with optgroup">
-      <optgroup class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" id="visible-optgroup" cy-label="Visible opt Group">
-        <option class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden">Option 1</option>
-        <option class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden">Option 2</option>
+    <select class="testCase" cy-expect="visible" cy-label="select with optgroup">
+      <optgroup class="testCase" cy-expect="visible" cy-label="Visible opt Group">
+        <option class="testCase" cy-expect="visible" cy-label="Visible opt Group > Opt 1">Option 1</option>
+        <option class="testCase" cy-expect="visible" cy-label="Visible opt Group > Opt 2">Option 2</option>
       </optgroup>
     </select>
     
-    <select class="testCase" cy-expect="hidden" id="hidden-select-with-optgroup" style="display: none;">
-      <optgroup class="testCase" cy-expect="hidden" id="hidden-optgroup" label="Hidden Group">
-        <option class="testCase" cy-expect="hidden">Hidden Option 1</option>
-        <option class="testCase" cy-expect="hidden">Hidden Option 2</option>
+    <select class="testCase" cy-expect="hidden" style="display: none;">
+      <optgroup class="testCase" cy-expect="hidden" label="Hidden Group">
+        <option class="testCase" cy-expect="hidden" cy-label="Hidden opt Group > Opt 1">Hidden Option 1</option>
+        <option class="testCase" cy-expect="hidden" cy-label="Hidden opt Group > Opt 2">Hidden Option 2</option>
       </optgroup>
     </select>
   </div>
@@ -40,26 +40,26 @@ <h3>Optgroup Elements</h3>
   <div class="test-section" cy-section="options-outside-select">
     <h3>Options Outside Select</h3>
     <div class="testCase" cy-expect="hidden" style="display: none;">
-      <option class="testCase" cy-expect="hidden" id="detached-option">Detached Option</option>
+      <option class="testCase" cy-expect="hidden" id="detached-option" cy-label="Detached Option">Detached Option</option>
     </div>
     <div class="testCase" cy-expect="visible">
-      <option class="testCase" cy-expect="visible" id="standalone-option">Standalone Option</option>
+      <option class="testCase" cy-expect="visible" id="standalone-option" cy-label="Standalone Option">Standalone Option</option>
     </div>
   </div>
 
-  <div class="test-section" cy-section="hidden-options-within-visible-select" cy-has-conflicts="true">
+  <div class="test-section" cy-section="hidden-options-within-visible-select">
     <h3>Hidden Options Within Visible Select</h3>
     <select class="testCase" cy-expect="visible" id="select-with-hidden-option">
-      <option class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" id="visible-option-in-select">Visible Option</option>
-      <option class="testCase" cy-expect="hidden" id="hidden-option-in-select" style="display: none;">Hidden Option</option>
+      <option class="testCase" cy-expect="visible" id="visible-option-in-select" cy-label="Visible Select > Visible Option">Visible Option</option>
+      <option class="testCase" cy-expect="hidden" style="display: none;" cy-label="Visible Select > Hidden Option">Hidden Option</option>
     </select>
   </div>
 
   <div class="test-section" cy-section="input-elements">
     <h3>Input Elements</h3>
-    <input class="testCase" cy-expect="hidden" id="input-hidden" type="hidden" value="hidden input">
-    <input class="testCase" cy-expect="visible" id="input-visible" type="text" value="visible input">
-    <input class="testCase" cy-expect="hidden" id="input-display-none" type="text" value="display none input" style="display: none;">
+    <input class="testCase" cy-expect="hidden" type="hidden" value="hidden input">
+    <input class="testCase" cy-expect="visible" type="text" value="visible input">
+    <input class="testCase" cy-expect="hidden" type="text" value="display none input" style="display: none;">
   </div>
 </body>
 </html>
diff --git a/packages/driver/src/dom/visibility/fastIsHidden.ts b/packages/driver/src/dom/visibility/fastIsHidden.ts
index 9742cd15e60..22cb9d15b7c 100644
--- a/packages/driver/src/dom/visibility/fastIsHidden.ts
+++ b/packages/driver/src/dom/visibility/fastIsHidden.ts
@@ -112,21 +112,17 @@ export function fastIsHidden (subject: JQuery<HTMLElement> | HTMLElement, option
     const subjects = unwrap(subject) as HTMLElement | HTMLElement[]
 
     if (Array.isArray(subjects)) {
-      return subjects.some((subject: HTMLElement) => fastIsHidden(wrap(subject), options))
+      return subjects.some((subject: HTMLElement) => fastIsHidden(subject, options))
     }
 
-    return fastIsHidden(subject, options)
-  }
-
-  if (!subject.checkVisibility({
-    contentVisibilityAuto: true,
-    opacityProperty: options.checkOpacity,
-    visibilityProperty: true,
-  })) {
-    return true
+    return fastIsHidden(subjects, options)
   }
 
   if (isOption(subject) || isOptgroup(subject)) {
+    if (subject.hasAttribute('style') && subject.style.display === 'none') {
+      return true
+    }
+
     const select = subject.closest('select')
 
     if (select) {
@@ -134,6 +130,14 @@ export function fastIsHidden (subject: JQuery<HTMLElement> | HTMLElement, option
     }
   }
 
+  if (!subject.checkVisibility({
+    contentVisibilityAuto: true,
+    opacityProperty: options.checkOpacity,
+    visibilityProperty: true,
+  })) {
+    return true
+  }
+
   const boundingRect = getBoundingClientRect(subject)
 
   if (visibleToUser(subject, boundingRect)) {

From dd53d9609de592c34b088f1f2e2b9b442acefd42 Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Tue, 28 Oct 2025 10:31:51 -0400
Subject: [PATCH 30/35] add note re: shadow dom

---
 packages/driver/cypress/e2e/dom/visibility_shadow_dom.cy.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/driver/cypress/e2e/dom/visibility_shadow_dom.cy.ts b/packages/driver/cypress/e2e/dom/visibility_shadow_dom.cy.ts
index 76d14419575..623b3a42853 100644
--- a/packages/driver/cypress/e2e/dom/visibility_shadow_dom.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility_shadow_dom.cy.ts
@@ -5,7 +5,8 @@ const { $ } = Cypress
 describe('src/cypress/dom/visibility - shadow dom', () => {
   let add: (el: string, shadowEl: string, rootIdentifier: string) => JQuery<HTMLElement>
 
-  const modes = ['fast', 'legacy']
+  // #TODO: support shadow dom in fast visibility algorithm
+  const modes = ['legacy']
 
   for (const mode of modes) {
     describe(`${mode}`, {

From 97092ff60c832305227a1167e8b6583a057477df Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Tue, 28 Oct 2025 14:42:11 -0400
Subject: [PATCH 31/35] add migration guide, additional edge cases, behavior
 table

---
 .../driver/cypress/e2e/dom/visibility.cy.ts   |  41 ++-
 .../visibility/basic-css-properties.html      |  35 +-
 .../cypress/fixtures/visibility/overflow.html |  19 +-
 .../fixtures/visibility/positioning.html      |  22 ++
 .../fixtures/visibility/transforms.html       |   1 +
 .../driver/cypress/fixtures/visibility/ux.js  |   2 +
 .../src/dom/visibility/MIGRATION_GUIDE.md     | 324 ++++++++++++++++++
 7 files changed, 435 insertions(+), 9 deletions(-)
 create mode 100644 packages/driver/src/dom/visibility/MIGRATION_GUIDE.md

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index 52e2705b6c1..aed605f77f1 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -1,6 +1,37 @@
 // @ts-ignore
 const { $, dom } = Cypress
 
+/**
+ * Most of the tests in here are declarative. Due to the range of visibility scenarios, test case
+ * understandability is paramount. These test cases are defined declaratively *in the fixture html
+ * file, and are iterated upon with the helper functions in the `visibility scenarios` describe block.
+ *
+ * CSS for test cases are inlined into the DOM purposefully, to ensure easy reference and debugging.
+ *
+ * Test case elements that are expected to be visible typically have a `lightgreen` background color,
+ * while test case elements that are expected to be hidden typically have a `lightcoral` background color.
+ * This helps to quickly identify if a given element's assertions are in-line with browser behavior.
+ *
+ * A test case where the visibility behavior is expected to be identical between the legacy and fast
+ * algorithms:
+ *
+ * <div class="testCase"
+ *   cy-expect="visible"
+ *   cy-label="helpful description for the assertion"
+ *   style="height: 100px; width: 100px;">
+ * </div>
+ *
+ * A test case where the visibility behavior is expected to be different between the legacy and fast
+ * algorithms (note the css of the example does not accurately reflect this visibility behavior):
+ *
+ * <div class="testCase"
+ *   cy-legacy-expect="visible"
+ *   cy-fast-expect="hidden"
+ *   cy-label="helpful description for the assertion"
+ *   style="height: 100px; width: 100px;">
+ * </div>
+ */
+
 describe('src/cypress/dom/visibility', {
   slowTestThreshold: 500,
 }, () => {
@@ -268,9 +299,11 @@ describe('src/cypress/dom/visibility', {
             'visibility-property',
             'display-property',
             'opacity-property',
-            'input-elements',
             'table-elements',
             'box-interactions',
+            'style-filters',
+            'contain-property',
+            'pointer-events-none',
           ])
         })
 
@@ -307,7 +340,8 @@ describe('src/cypress/dom/visibility', {
             'overflow-relative-positioning',
             'overflow-flex-container',
             'overflow-complex-scenarios',
-            'clip-path-scenarios',
+            'clip-scenarios',
+            'viewport-scenarios',
           ])
         })
 
@@ -324,6 +358,8 @@ describe('src/cypress/dom/visibility', {
             'fixed-positioning-with-zero-dimensions',
             'position-absolute-scenarios',
             'position-sticky-scenarios',
+            'positioning-cousin-coverage',
+            'z-index-coverage',
           ])
         })
 
@@ -364,7 +400,6 @@ describe('src/cypress/dom/visibility', {
           })
 
           it('has a parent with `display: none`', function () {
-            cy.visit('/fixtures/visibility/basic-css-properties.html')
             prepareFixtureSection('display-property')
             cy.get('[cy-section="display-property"] .testCase[cy-expect="hidden"] span').then(($el) => {
               reasonIs($el, 'This element `<span.testCase>` is not visible because its parent `<div.testCase>` has CSS property: `display: none`')
diff --git a/packages/driver/cypress/fixtures/visibility/basic-css-properties.html b/packages/driver/cypress/fixtures/visibility/basic-css-properties.html
index 726195b1993..2d8c7d80299 100644
--- a/packages/driver/cypress/fixtures/visibility/basic-css-properties.html
+++ b/packages/driver/cypress/fixtures/visibility/basic-css-properties.html
@@ -36,12 +36,12 @@ <h3>Opacity Property</h3>
     </div>
   </div>
 
-  <div class="test-section" cy-section="input-elements">
-    <h3>Input Elements</h3>
-    <input class="testCase" cy-expect="hidden" cy-label="Hidden input" type="hidden" value="hidden input">
-    <input class="testCase" cy-expect="visible" cy-label="Visible input" type="text" value="visible input">
+  <div class="test-section" cy-section="style-filters">
+    <h3>Style Filters</h3>
+    <!-- while opacity(0) renders the element as fully transparent, it is still considered visible: it has a box model, and it is clickable -->
+    <div class="testCase" cy-expect="visible" cy-label="Hidden by style filter: opacity(0)" style="filter: opacity(0);">Hidden by style filter: opacity(0)</div>
   </div>
-  
+
   <div class="test-section" cy-section="table-elements">
     <h3>Table Elements</h3>
     <table>
@@ -63,5 +63,30 @@ <h3>Table Elements</h3>
       </span>
     </div>
   </div>
+
+  <div class="test-section" cy-section="pointer-events-none">
+    <h3>Pointer Events: None</h3>
+    <div class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Element with pointer-events: none" style="pointer-events: none;">Element with pointer-events: none</div>
+  </div>
+
+  <div class="test-section" cy-section="contain-property">
+    <h3>CSS Contain Property</h3>
+    
+    <!-- Element with contain: layout -->
+    <div class="testCase" cy-expect="visible" cy-label="Element with contain: layout" style="width: 100px; height: 100px; background: lightcoral; contain: layout;">
+      <span class="testCase" cy-expect="visible" cy-label="Child of contain: layout element">contain: layout</span>
+    </div>
+
+    <!-- Element with contain: paint -->
+    <div class="testCase" cy-expect="visible" cy-label="Element with contain: paint" style="width: 100px; height: 100px; background: lightcoral; contain: paint;">
+      <span class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Child positioned out of bounds of its `contain: paint` parent" style="position:relative; top:500px">contain: paint</span>
+    </div>
+
+    <!-- Element with contain: strict -->
+    <div class="testCase" cy-expect="visible" cy-label="Element with contain: strict" style="width: 100px; height: 100px; background: lightcoral; contain: strict;">
+      <span class="testCase" cy-expect="visible" cy-label="Child of contain: strict element">contain: strict</span>
+    </div>
+  </div>
+
 </body>
 </html>
diff --git a/packages/driver/cypress/fixtures/visibility/overflow.html b/packages/driver/cypress/fixtures/visibility/overflow.html
index 589691779dd..100e127ecd4 100644
--- a/packages/driver/cypress/fixtures/visibility/overflow.html
+++ b/packages/driver/cypress/fixtures/visibility/overflow.html
@@ -235,7 +235,7 @@ <h3 class="testCase" cy-expect="visible" cy-label="Heading">Example</h3>
     </div>
   </div>
 
-  <div class="test-section" cy-section="clip-path-scenarios">
+  <div class="test-section" cy-section="clip-scenarios">
     <h3>Clip-Path Scenarios (note: legacy mode does not support clip-path)</h3>
     
     <!-- Clip-path polygon that clips everything -->
@@ -267,6 +267,23 @@ <h3>Clip-Path Scenarios (note: legacy mode does not support clip-path)</h3>
     <div class="testCase" cy-expect="visible" cy-label="Parent with clip-path path" style="position: relative; clip-path: path('M 0 0 L 100 0 L 100 100 L 0 100 Z');">
       <span class="testCase" cy-expect="visible" cy-label="Element inside clip-path path" style="background: lightgreen;">path content</span>
     </div>
+
+    <!-- CSS clip property -->
+    <div class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Element clipped by CSS clip property" style="position: absolute; clip: rect(0, 0, 0, 0); background: lightcoral; width: 100px; height: 100px;">clipped by clip: rect(0,0,0,0)</div>
+
+    <!-- CSS mask property note: this yields an element that is not rendered as visible, but has a box model that is visible and is clickable -->
+    <div class="testCase" cy-expect="visible" cy-label="Element masked by CSS mask" style="width: 100px; height: 100px; background: lightcoral; mask: linear-gradient(black, black); mask-size: 0 0;">masked by CSS mask</div>
+  </div>
+
+  <div cy-section="viewport-scenarios">
+    <h3>Viewport Scenarios</h3>
+    <div class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Position absolute element outside viewport" style="position: absolute; top: -100px; left: -100px; width: 100px; height: 100px; background: lightcoral;">Element outside viewport</div>
+    <div class="testCase" cy-expect="hidden" cy-label="Position fixed element outside of viewport" style="position: fixed; top: -100px; left: -100px; width: 100px; height: 100px; background: lightcoral;">Position fixed element outside of viewport</div>
+    <iframe style="display:none;">
+      <body>
+        <div class="testCase" cy-expect="hidden" cy-label="Element inside hidden iframe" style="width: 100px; height: 100px; background: lightcoral;">Element inside hidden iframe</div>
+      </body>
+    </iframe>
   </div>
 </body>
 </html>
diff --git a/packages/driver/cypress/fixtures/visibility/positioning.html b/packages/driver/cypress/fixtures/visibility/positioning.html
index 0dbb50eacf9..03187ae62ed 100644
--- a/packages/driver/cypress/fixtures/visibility/positioning.html
+++ b/packages/driver/cypress/fixtures/visibility/positioning.html
@@ -109,5 +109,27 @@ <h3>Position Sticky Scenarios</h3>
     </div>
   </div>
 
+  <div class="test-section" cy-section="positioning-cousin-coverage" >
+    <h3>Positioning Cousin Coverage</h3>
+
+    <!-- Element covered by an absolutely positioned cousin -->
+     <div style="position: relative;">
+      <div style="width: 200px; height: 100px; background: lightblue;">
+        <span class="testCase" cy-fast-expect="hidden" cy-legacy-expect="visible" cy-label="Target element to be covered" style="display: block; width: 100px; height: 50px; background: lightgreen;">Target element</span>
+      </div>
+      <div class="testCase" cy-expect="visible" cy-label="Absolutely positioned cousin covering target" style="position: absolute; top: 0px; left: 0px; width: 100px; height: 50px; background: lightcoral;">Covering cousin</div>
+    </div>
+  </div>
+
+  <div class="test-section" cy-section="z-index-coverage">
+    <h3>Z-Index Coverage</h3>
+    
+    <!-- Element covered by higher z-index element -->
+    <div style="position: relative; width: 300px; height: 150px; background: lightgray;">
+      <div class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Element covered by higher z-index" style="position: absolute; top: 20px; left: 20px; width: 100px; height: 100px; background: lightgreen; z-index: 1;">Lower z-index element</div>
+      <div class="testCase" cy-expect="visible" cy-label="Higher z-index covering element" style="position: absolute; top: 20px; left: 20px; width: 100px; height: 100px; background: lightcoral; z-index: 2;">Higher z-index element</div>
+    </div>
+  </div>
+
 </body>
 </html>
diff --git a/packages/driver/cypress/fixtures/visibility/transforms.html b/packages/driver/cypress/fixtures/visibility/transforms.html
index 210195cbd92..9f2a0998740 100644
--- a/packages/driver/cypress/fixtures/visibility/transforms.html
+++ b/packages/driver/cypress/fixtures/visibility/transforms.html
@@ -37,6 +37,7 @@ <h3>Translation</h3>
     <div class="testCase" cy-expect="visible" cy-label="Translate 2D" style="transform: translate(10px, 15px)">Translated in 2 dimensions</div>
     <div class="testCase" cy-expect="visible" cy-label="Translate Z" style="transform: translateZ(10px)">Translated in 3rd dimension</div>
     <div class="testCase" cy-expect="visible" cy-label="Translate 3D" style="transform: translate3d(10px, 15px, 20px)">Translated in 3 dimensions</div>
+    <div class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" cy-label="Translate outside viewport" style="transform: translateY(-9999px)">Translated outside viewport</div>
   </div>
   <div class="test-section" cy-section="rotation">
     <h3>Rotation</h3>
diff --git a/packages/driver/cypress/fixtures/visibility/ux.js b/packages/driver/cypress/fixtures/visibility/ux.js
index b5e7e4cb9de..9810270f0e7 100644
--- a/packages/driver/cypress/fixtures/visibility/ux.js
+++ b/packages/driver/cypress/fixtures/visibility/ux.js
@@ -24,6 +24,8 @@ document.addEventListener('DOMContentLoaded', () => {
 })
 
 document.addEventListener('click', (ev) => {
+  // eslint-disable-next-line no-console
+  console.log('click', ev.target)
   const [, section] = ev.target?.href?.split('#') ?? []
 
   if (!section) return
diff --git a/packages/driver/src/dom/visibility/MIGRATION_GUIDE.md b/packages/driver/src/dom/visibility/MIGRATION_GUIDE.md
new file mode 100644
index 00000000000..8c9225b048f
--- /dev/null
+++ b/packages/driver/src/dom/visibility/MIGRATION_GUIDE.md
@@ -0,0 +1,324 @@
+# Fast Visibility Algorithm Migration Guide
+
+_(note: this file or content similar to it will be added to cy docs, when language / details are finalized)_
+
+## Overview
+
+The fast visibility algorithm is designed to resolve severe performance issues with DOM visibility detection while maintaining compatibility with existing test code. This guide helps you understand the differences between legacy and fast algorithms and provides solutions for any compatibility issues that arise.
+
+## Why Migrate?
+
+### Performance Benefits
+- **Significantly faster** visibility calculations for complex DOM structures
+- **Reduced CPU usage** during test execution
+- **Better scalability** for applications with many DOM elements
+- **Improved test reliability** with more accurate geometric visibility detection
+
+### When to Enable Fast Visibility
+Enable fast visibility if you experience:
+- Slow test execution with complex DOM structures
+- High CPU usage during visibility checks
+- Timeouts or flaky tests related to element visibility
+- Performance degradation with many DOM elements
+
+### When NOT to Enable Fast Visibility
+**Do NOT enable fast visibility if:**
+- Your tests rely heavily on Shadow DOM elements
+- You have comprehensive Shadow DOM test coverage
+- Your application uses Shadow DOM extensively
+- You rely extensively on asserting the visibility of elements that are outside the browser's viewport
+- You rely on asserting the visibility state of elements that have `pointer-events:none`
+
+**Current Limitations**:
+- The fast visibility algorithm does not yet fully support Shadow DOM elements. Tests that interact with Shadow DOM elements may fail or behave incorrectly.
+- The fast visibility algorithm considers any element that is outside of the browser's viewport as hidden. While this is an incompatibility with the legacy visibility approach, it is aligned with the visibility behavior of elements that are scrolled out of view within a scrollable container.
+
+## Algorithm Differences
+
+While comprehensive, this list may not be complete. Additional discrepancies may be found and added to our test cases as they become known.
+
+| Test Section and Fixture | Test Case Label | "Legacy" Considers Visible? | "Fast" Considers Visible? | Correct Behavior | Notes |
+|---------|----------------|---------------------------|------------------------|------------------|-------|
+| **[transforms](../../../cypress/fixtures/visibility/transforms.html)** | Perspective with rotateY | ✅ Yes | ❌ No | ✅  Yes | Certain transforms can cause elements to not be considered visible to the fast visibility algorithm if they transform an element in such a way that it is not present at the points that are sampled |
+| **[positioning-with-zero-dimensions](../../../cypress/fixtures/visibility/positioning.html)** | Zero dimensions parent with absolute positioned child | ✅ Yes | ❌ No | ❌ No | Element that has `width: 0; height: 0` and an absolutely positioned child  |
+| **[fixed-positioning-with-zero-dimensions](../../../cypress/fixtures/visibility/positioning.html)** | Zero dimensions ancestor with fixed positioned child | ✅ Yes | ❌ No | ❌ No | Element that has `width: 0; height: 0; position: relative` and a fixed positioned grand-child. |
+| **[fixed-positioning-with-zero-dimensions](../../../cypress/fixtures/visibility/positioning.html)** | Parent under zero dimensions ancestor | ✅ Yes | ❌ No | ❌ No | Statically positioned element that is a child of an element with zero dimension, and whose only child is position:fixed |
+| **[position-absolute-scenarios](../../../cypress/fixtures/visibility/positioning.html)** | Normal parent with absolute positioned child | ❌ No | ✅ Yes | ❌ No | Element that is hidden by its parents overflow, but has an absolutely positioned child element. |
+| **[position-absolute-scenarios](../../../cypress/fixtures/visibility/positioning.html)** | Parent container for absolute child | ❌ No | ✅ Yes | ❌ No | Container element for the absolute positioned child  |
+| **[position-absolute-scenarios](../../../cypress/fixtures/visibility/positioning.html)** | Normal ancestor with absolute positioned descendant | ❌ No | ✅ Yes | ✅ Yes | Ancestor has `width: 0; height: 100px; overflow: hidden` with absolute positioned descendant |
+| **[positioning](../../../cypress/fixtures/visibility/positioning.html)** | Covered by an absolutely positioned cousin | ✅ Yes | ❌ No | ❌ No | Element covered by a sibling with `position: absolute` and higher z-index |
+| **[overflow-auto-with-zero-dimensions](../../../cypress/fixtures/visibility/overflow.html)** | Zero dimensions with overflow auto | ✅ Yes | ❌ No | ❌ No | Element with `width: 0; height: 0px; overflow: auto`, but no absolutely positioned children |
+| **[overflow-scroll-scenarios](../../../cypress/fixtures/visibility/overflow.html)** | Parent with clip-path polygon that clips everything | ✅ Yes | ❌ No | ❌ No | `clip-path: polygon(0 0, 0 0, 0 0, 0 0)`  |
+| **[overflow-scroll-scenarios](../../../cypress/fixtures/visibility/overflow.html)** | Element outside clip-path polygon | ✅ Yes | ❌ No | ❌ No | Child element of polygon clip-path parent |
+| **[overflow-scroll-scenarios](../../../cypress/fixtures/visibility/overflow.html)** | Element outside clip-path inset | ✅ Yes | ❌ No | ❌ No | Child element of `clip-path: inset(25% 25% 25% 25%)` |
+| **[viewport-scenarios](../../../cypress/fixtures/visibility/overflow.html)** | Absolutely positioned element outside of the viewport | ✅ Yes | ❌ No | ❌ No | Elements that are outside of the viewport must be scrolled to before the fast algorithm will consider them visible. This is aligned with scroll-container visibility. |
+| **[z-index-coverage](../../../cypress/fixtures/visibility/positioning.html)** | Covered by higher z-index element |  ✅ Yes | ❌ No | ❌ No | Element covered by another element with higher z-index |
+| **[clip-scenarios](../../../cypress/fixtures/visibility/overflow.html)** | Element clipped by CSS clip property |  ✅ Yes | ❌ No | ❌ No | Element with `clip: rect(0, 0, 0, 0)` or similar clipping |
+| **[transform](../../../cypress/fixtures/visibility/transforms.html)** | Element transformed outside viewport | ✅ Yes | ❌ No | ❌ No | Element with `transform: translateX(-9999px)` or similar |
+| **[contain](../../../cypress/fixtures/visibility/basic-css-properties.html)** | Element with CSS contain:paint property | ✅ Yes | ❌ No | ❌ No | Element positioned outside of a parent that has the `contain: paint` property |
+| **[backdrop-filter](../../../cypress/fixtures/visibility/basic-css-properties.html)** | Element covered by an element with with backdrop-filter opacity(0) | ✅ Yes | ❌ No | ❌ No|  |
+| **[pointer-events-none](../../../cypress/fixtures/visibility/basic-css-properties.html)** | Element with pointer-events: none | ✅ Yes | ❌ No | ❌ No | Element has dimensions and is visible to the user, but cannot receive pointer events. |
+
+## Migration Steps
+
+### Step 1: Enable Fast Visibility
+```javascript
+// cypress.config.js
+module.exports = {
+  e2e: {
+    experimentalFastVisibility: true
+  }
+}
+```
+
+**Note**: Ensure your application under test does not extensively use custom Shadow DOM elements, as the fast visibility algorithm does not yet support Shadow DOM.
+
+### Step 2: Run Your Tests
+Run your existing test suite to identify any failures:
+
+```bash
+npm run test
+```
+
+### Step 3: Analyze Failures
+Look for tests that fail with visibility-related assertions. Common patterns:
+
+```javascript
+// These assertions may behave differently
+.should('be.visible')
+.should('not.be.hidden')
+.is(':visible')
+.is(':hidden')
+```
+
+### Step 4: Disable Fast Visibility for Failing Specs
+For specs that fail due to Shadow DOM or other incompatibilities, disable fast visibility:
+
+```javascript
+// In failing spec files
+describe('My Test Suite', { experimentalFastVisibility: false }, () => {
+  it('should work with legacy visibility', () => {
+    // Your test here
+  })
+})
+```
+
+This allows you to gradually migrate specs while keeping failing ones working.
+
+### Step 5: Fix Tests with Visibility-Related Failures
+For specs that fail due to visibility algorithm differences, update the test expectations to match the correct behavior (see solutions below).
+
+## Common Compatibility Issues and Solutions
+
+### Issue 1: Elements Previously Considered Visible Are Now Hidden
+
+**Problem**: Test expects element to be visible, but fast algorithm correctly identifies it as hidden.
+
+**Solution**: Update your test expectations to match the correct behavior:
+
+```javascript
+// Before (incorrect expectation)
+cy.get('.rotated-element').should('be.visible')
+
+// After (correct expectation)
+cy.get('.rotated-element').should('be.hidden')
+```
+
+**Note**: If the element should be visible, fix the CSS in your application code, not in the test. Tests should verify the actual behavior of your application.
+
+### Issue 2: Elements Outside Viewport
+
+**Problem**: Elements positioned outside the viewport are now correctly identified as hidden.
+
+**Solution**: Scroll the element into view before testing:
+
+```javascript
+// Before
+cy.get('.off-screen-element').should('be.visible')
+
+// After
+cy.get('.off-screen-element').scrollIntoView().should('be.visible')
+```
+
+### Issue 3: Covered Elements
+
+**Problem**: Elements covered by other elements are now correctly identified as hidden.
+
+**Solution**: Test the covering element instead, or test the user interaction that reveals the covered element:
+
+```javascript
+// Before
+cy.get('.covered-element').should('be.visible')
+
+// After - test the covering element
+cy.get('.covering-element').should('be.visible')
+
+// Or test the user action that reveals the element
+cy.get('.toggle-button').click()
+cy.get('.covered-element').should('be.visible')
+```
+
+**Note**: Don't modify the DOM structure in tests. Test the actual user interactions that reveal hidden elements.
+
+### Issue 4: Zero-Dimension Containers
+
+**Problem**: Containers with zero dimensions are now correctly identified as hidden, but child elements may still be visible.
+
+**Solution**: Test the child element instead of the container:
+
+```javascript
+// Before - testing the container
+cy.get('.zero-dimension-container').should('be.visible')
+
+// After - test the child element that should be visible
+cy.get('.zero-dimension-container .child-element').should('be.visible')
+
+// Or test the user action that gives the container dimensions
+cy.get('.expand-button').click()
+cy.get('.zero-dimension-container').should('be.visible')
+```
+
+**Note**: If the container should have dimensions, fix this in your application code. If testing child elements, assert on the child elements directly.
+
+### Issue 5: Clipped Elements
+
+**Problem**: Elements clipped by CSS are now correctly identified as hidden.
+
+**Solution**: Update your test expectations or test the user interaction that reveals the element:
+
+```javascript
+// Before
+cy.get('.clipped-element').should('be.visible')
+
+// After - test that the element is hidden (correct behavior)
+cy.get('.clipped-element').should('be.hidden')
+
+// Or test the user action that reveals the element
+cy.get('.show-content-button').click()
+cy.get('.clipped-element').should('be.visible')
+
+// Or test the container that controls the clipping
+cy.get('.clipping-container').should('be.visible')
+```
+
+**Note**: If elements should be visible, fix the clipping in your application code. Tests should verify the actual user experience.
+
+### Issue 6: Pointer Events
+
+**Problem**: Elements with `pointer-events: none` or that have parents with `pointer-events:none` may be detected as hidden when they are visible.
+
+**Solution**: Do not assert visibility on elements with `pointer-events:none`, as they cannot be interacted with.
+
+## Rollback Plan
+
+If you encounter issues that can't be easily resolved:
+
+### Temporary Rollback
+```javascript
+// cypress.config.js
+module.exports = {
+  e2e: {
+    experimentalFastVisibility: false // Disable fast visibility
+  }
+}
+```
+
+### Gradual Migration
+Enable fast visibility for specific test suites:
+
+```javascript
+// Enable only for performance-critical tests
+describe('Performance Tests', { experimentalFastVisibility: true }, () => {
+  it('should handle complex DOM efficiently', () => {
+    // Your performance tests here
+  })
+})
+```
+
+## Best Practices
+
+### 1. Never Modify the Application Under Test (AUT)
+**❌ Bad Practice**: Modifying CSS or DOM structure in tests
+```javascript
+// DON'T DO THIS - Modifying the AUT
+cy.get('.element').invoke('css', 'display', 'block')
+cy.get('.element').invoke('remove')
+cy.get('.element').invoke('css', 'transform', 'none')
+```
+
+**✅ Good Practice**: Test the actual application behavior
+```javascript
+// DO THIS - Test real user interactions
+cy.get('.toggle-button').click()
+cy.get('.element').should('be.visible')
+```
+
+### 2. Test Element Functionality, Not Just Visibility
+```javascript
+// Good: Test if element is interactive
+cy.get('.button').should('be.enabled').click()
+
+// Avoid: Testing visibility alone
+cy.get('.button').should('be.visible')
+```
+
+### 3. Use Semantic Selectors
+```javascript
+// Good: Use semantic selectors
+cy.get('[data-testid="submit-button"]').should('be.visible')
+
+// Avoid: Relying on CSS classes that might change
+cy.get('.btn-primary').should('be.visible')
+```
+
+### 4. Test User Interactions
+```javascript
+// Good: Test user interactions
+cy.get('.modal').should('be.visible')
+cy.get('.modal .close-button').click()
+cy.get('.modal').should('not.exist')
+
+// Avoid: Testing CSS properties directly
+cy.get('.modal').should('have.css', 'display', 'block')
+```
+
+## Troubleshooting
+
+### Common Error Messages
+
+**"Element is not visible"**
+- Check if element is covered by another element
+- Verify element is not positioned outside viewport
+- Ensure element has proper dimensions
+
+**"Element should be hidden but is visible"**
+- Check for CSS transforms that might hide the element
+- Verify element is not clipped by CSS
+- Ensure element is not covered by other elements
+
+**Shadow DOM Related Errors**
+- If you see errors with Shadow DOM elements, disable fast visibility
+- Shadow DOM support is not yet available in the fast algorithm
+- Use legacy algorithm for Shadow DOM testing until support is added
+
+### Debug Visibility Issues
+```javascript
+// Debug element visibility
+cy.get('.element').then(($el) => {
+  console.log('Element dimensions:', $el[0].getBoundingClientRect())
+  console.log('Element styles:', $el[0].computedStyleMap())
+  console.log('Element visibility:', Cypress.dom.isVisible($el[0]))
+})
+```
+
+## Final Words
+
+The fast visibility algorithm is an experimental feature that provides significant performance improvements for applications with complex DOM structures. While we try to align compatibility with the legacy algorithm, we err on the side of accuracy: the fast algorithm provides more geometrically correct visibility detection.
+
+**Important Notes:**
+- This is an **experimental feature** - if it proves beneficial, we may invest time in supporting Shadow DOM
+- **Shadow DOM support is not yet available** - disable fast visibility for specs that rely heavily on Shadow DOM
+- **Some compatibility differences exist** - when tests fail, the fast algorithm is likely correct and tests should be updated
+- **Performance benefits are significant** - especially for applications with many DOM elements or complex layouts
+
+By following this migration guide, you can resolve compatibility issues and benefit from faster, more accurate visibility detection while understanding the current limitations.

From db5e944dfa093c3247b76bb195a57bbc49f7aded Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Tue, 28 Oct 2025 14:43:28 -0400
Subject: [PATCH 32/35] add note that the virtual scroll stress test causes
 browser to crash when experimentalFastVisibility is not enabled

---
 packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js b/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
index c915360b381..7e9e726ef2d 100644
--- a/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
+++ b/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
@@ -13,7 +13,7 @@
  */
 
 describe('Virtual Scrolling Stress Tests', {
-  experimentalFastVisibility: true,
+  experimentalFastVisibility: true, // if this is set to false, this spec will crash the browser
   numTestsKeptInMemory: 1,
 }, () => {
   beforeEach(() => {

From 8f8b2fc06baec6ddd73cd5740a5371a934a86f15 Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Tue, 28 Oct 2025 14:55:21 -0400
Subject: [PATCH 33/35] fix types

---
 cli/types/cypress.d.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/cli/types/cypress.d.ts b/cli/types/cypress.d.ts
index 70a58a9eb0b..08002327800 100644
--- a/cli/types/cypress.d.ts
+++ b/cli/types/cypress.d.ts
@@ -3193,6 +3193,11 @@ declare namespace Cypress {
      * @default false
      */
     experimentalMemoryManagement: boolean
+    /**
+     * Enables an alternative, performance-optimized visibility algorithm.
+     * @default false
+     */
+    experimentalFastVisibility: boolean
     /**
      * Allows for just-in-time compiling of a component test, which will only compile assets related to the component.
      * This results in a smaller bundle under test, reducing resource constraints on a given machine. This option is recommended
@@ -3285,11 +3290,6 @@ declare namespace Cypress {
      */
     experimentalPromptCommand?: boolean
 
-    /**
-     * Enables an alternative, performance-optimized visibility algorithm.
-     * @default false
-     */
-    experimentalFastVisibility?: boolean
   }
 
   /**

From 368eaca3e512b1cf3fd12d77698316af7686dbf2 Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Tue, 28 Oct 2025 14:55:33 -0400
Subject: [PATCH 34/35] add best practices note re: shadow dom

---
 packages/driver/src/dom/visibility/MIGRATION_GUIDE.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/driver/src/dom/visibility/MIGRATION_GUIDE.md b/packages/driver/src/dom/visibility/MIGRATION_GUIDE.md
index 8c9225b048f..93013e9829f 100644
--- a/packages/driver/src/dom/visibility/MIGRATION_GUIDE.md
+++ b/packages/driver/src/dom/visibility/MIGRATION_GUIDE.md
@@ -209,6 +209,12 @@ cy.get('.clipping-container').should('be.visible')
 
 **Solution**: Do not assert visibility on elements with `pointer-events:none`, as they cannot be interacted with.
 
+### Issue 7: Shadow DOM incompatibilities
+
+**Problem:**: Elements inside shadow DOMs may not be detected properly as visible or hidden.
+
+**Solution:**: Test shadow dom components in isolation with component testing, and only test if the public interface of the shadow dom component is visible. You wouldn't assert on the visibility of the browser's default video play controls by querying its shadow dom: you would assert on the properties of the video element itself.
+
 ## Rollback Plan
 
 If you encounter issues that can't be easily resolved:

From 16b5571c23e0968d0c146312dcfa582902b87595 Mon Sep 17 00:00:00 2001
From: Cacie Prins <cacie@cypress.io>
Date: Wed, 29 Oct 2025 13:14:22 -0400
Subject: [PATCH 35/35] readability

---
 .../e2e/memory/virtual-scroll-stress.cy.js    |   4 +-
 .../driver/src/dom/visibility/fastIsHidden.ts | 128 ++----------------
 .../visibility-tests/VisibilityTest.ts        |  25 ++++
 .../visibility/visibility-tests/dimensions.ts |   8 ++
 .../visibility-tests/domVisibility.ts         |   9 ++
 .../visibility-tests/getBoundingClientRect.ts |   5 +
 .../visibility/visibility-tests/memoize.ts    |  44 ++++++
 .../visibility-tests/pointSampling.ts         |  67 +++++++++
 .../src/dom/visibility/visibleToUser.ts       |   0
 .../test/unit/dom/visibility/memoize.spec.ts  |  64 +++++++++
 10 files changed, 236 insertions(+), 118 deletions(-)
 create mode 100644 packages/driver/src/dom/visibility/visibility-tests/VisibilityTest.ts
 create mode 100644 packages/driver/src/dom/visibility/visibility-tests/dimensions.ts
 create mode 100644 packages/driver/src/dom/visibility/visibility-tests/domVisibility.ts
 create mode 100644 packages/driver/src/dom/visibility/visibility-tests/getBoundingClientRect.ts
 create mode 100644 packages/driver/src/dom/visibility/visibility-tests/memoize.ts
 create mode 100644 packages/driver/src/dom/visibility/visibility-tests/pointSampling.ts
 create mode 100644 packages/driver/src/dom/visibility/visibleToUser.ts
 create mode 100644 packages/driver/test/unit/dom/visibility/memoize.spec.ts

diff --git a/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js b/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
index 7e9e726ef2d..086390eea28 100644
--- a/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
+++ b/packages/driver/cypress/e2e/memory/virtual-scroll-stress.cy.js
@@ -37,8 +37,8 @@ describe('Virtual Scrolling Stress Tests', {
     it('should load basic virtual list without crashing', () => {
       cy.get('button').contains('Load Basic List').click()
 
-      cy.get('#basicList .item')
-      .should('have.length.greaterThan', 0)
+      cy.get('#basicList .item', { log: false })
+      .should('have.length.greaterThan', 0, { log: false })
     })
 
     it('should handle normal scrolling without crashing', () => {
diff --git a/packages/driver/src/dom/visibility/fastIsHidden.ts b/packages/driver/src/dom/visibility/fastIsHidden.ts
index 22cb9d15b7c..19bf988b677 100644
--- a/packages/driver/src/dom/visibility/fastIsHidden.ts
+++ b/packages/driver/src/dom/visibility/fastIsHidden.ts
@@ -1,109 +1,13 @@
 import $elements from '../elements'
-
-import { unwrap, wrap, isJquery } from '../jquery'
+import { unwrap, isJquery } from '../jquery'
 const { isOption, isOptgroup, isBody, isHTML } = $elements
+import { VisibilityTests, VisibilityResultKind } from './visibility-tests/VisibilityTest'
 
-const DEBUG = false
-
-function debug (...args: any[]) {
-  if (DEBUG) {
-    // eslint-disable-next-line no-console
-    console.log('DEBUG:', ...args)
-  }
+interface VisibilityOptions {
+  checkOpacity: boolean
 }
 
-function memoize<T> (fn: (...args: any[]) => T): (...args: any[]) => T {
-  const cache = new Map<any, { result: T, timestamp: number }>()
-
-  return (...args: any[]) => {
-    const key = args
-
-    const cached = cache.get(key)
-
-    if (cached && cached.timestamp > Date.now() - 100) {
-      return cached.result
-    }
-
-    const result = fn(...args)
-
-    cache.set(key, { result, timestamp: Date.now() })
-
-    return result
-  }
-}
-
-const getBoundingClientRect = memoize((el: HTMLElement) => el.getBoundingClientRect())
-
-function subDivideRect ({ x, y, width, height }: DOMRect): DOMRect[] {
-  return [
-    DOMRect.fromRect({
-      x,
-      y,
-      width: width / 2,
-      height: height / 2,
-    }),
-    DOMRect.fromRect({
-      x: x + width / 2,
-      y,
-      width: width / 2,
-      height: height / 2,
-    }),
-    DOMRect.fromRect({
-      x,
-      y: y + height / 2,
-      width: width / 2,
-      height: height / 2,
-    }),
-    DOMRect.fromRect({
-      x: x + width / 2,
-      y: y + height / 2,
-      width: width / 2,
-      height: height / 2,
-    }),
-  ].filter((rect: DOMRect) => rect.width > 1 && rect.height > 1)
-}
-
-const visibleAtPoint = memoize(function (el: HTMLElement, x: number, y: number): boolean {
-  const elAtPoint = el.ownerDocument.elementFromPoint(x, y)
-
-  debug('visibleAtPoint', el, elAtPoint)
-
-  return Boolean(elAtPoint) && (elAtPoint === el || el.contains(elAtPoint))
-})
-
-function visibleToUser (el: HTMLElement, rect: DOMRect, maxDepth: number = 2, currentDepth: number = 0): boolean {
-  if (currentDepth >= maxDepth) {
-    return false
-  }
-
-  const { x, y, width, height } = rect
-
-  const samples = [
-    [x, y],
-    [x + width, y],
-    [x, y + height],
-    [x + width, y + height],
-    [x + width / 2, y + height / 2],
-  ]
-
-  if (samples.some(([x, y]) => visibleAtPoint(el, x, y))) {
-    debug('some samples are visible')
-
-    return true
-  }
-
-  const subRects = subDivideRect(rect)
-
-  debug('subRects', subRects)
-
-  return subRects.some((subRect: DOMRect) => {
-    return visibleToUser(el, subRect, maxDepth, currentDepth + 1)
-  })
-}
-
-export function fastIsHidden (subject: JQuery<HTMLElement> | HTMLElement, options: { checkOpacity: boolean } = { checkOpacity: true }): boolean {
-  debug('fastIsHidden', subject)
-
+export function fastIsHidden (subject: JQuery<HTMLElement> | HTMLElement, options: VisibilityOptions = { checkOpacity: true }): boolean {
   if (isBody(subject) || isHTML(subject)) {
     return false
   }
@@ -126,25 +30,17 @@ export function fastIsHidden (subject: JQuery<HTMLElement> | HTMLElement, option
     const select = subject.closest('select')
 
     if (select) {
-      return fastIsHidden(wrap(select), options)
+      return fastIsHidden(select, options)
     }
   }
 
-  if (!subject.checkVisibility({
-    contentVisibilityAuto: true,
-    opacityProperty: options.checkOpacity,
-    visibilityProperty: true,
-  })) {
-    return true
-  }
+  for (const test of VisibilityTests) {
+    const result = test(subject, options)
 
-  const boundingRect = getBoundingClientRect(subject)
-
-  if (visibleToUser(subject, boundingRect)) {
-    debug('visibleToUser', subject, boundingRect)
-
-    return false
+    if (result) {
+      return result.kind === VisibilityResultKind.HIDDEN
+    }
   }
 
-  return true
+  return false
 }
diff --git a/packages/driver/src/dom/visibility/visibility-tests/VisibilityTest.ts b/packages/driver/src/dom/visibility/visibility-tests/VisibilityTest.ts
new file mode 100644
index 00000000000..3c12c097643
--- /dev/null
+++ b/packages/driver/src/dom/visibility/visibility-tests/VisibilityTest.ts
@@ -0,0 +1,25 @@
+import { dimensions } from './dimensions'
+import { domVisibility } from './domVisibility'
+import { pointSampling } from './pointSampling'
+
+export const VisibilityResultKind = Object.freeze({
+  VISIBLE: 'visible',
+  HIDDEN: 'hidden',
+})
+
+type VisibilityTestResultKind = typeof VisibilityResultKind[keyof typeof VisibilityResultKind]
+
+export interface VisibilityTestResult {
+  kind: VisibilityTestResultKind
+  reason: string
+}
+
+export interface VisibilityTest {
+  (el: HTMLElement): VisibilityTestResult | undefined
+}
+
+export const VisibilityTests: VisibilityTest[] = [
+  dimensions,
+  domVisibility,
+  pointSampling,
+]
diff --git a/packages/driver/src/dom/visibility/visibility-tests/dimensions.ts b/packages/driver/src/dom/visibility/visibility-tests/dimensions.ts
new file mode 100644
index 00000000000..b32f74e14d3
--- /dev/null
+++ b/packages/driver/src/dom/visibility/visibility-tests/dimensions.ts
@@ -0,0 +1,8 @@
+import { getBoundingClientRect } from './getBoundingClientRect'
+import { VisibilityResultKind, VisibilityTestResult } from './VisibilityTest'
+
+export function dimensions (subject: HTMLElement, options: VisibilityOptions): VisibilityTestResult | undefined {
+  const boundingRect = getBoundingClientRect(subject)
+
+  return boundingRect.width === 0 || boundingRect.height === 0 ? VisibilityResultKind.HIDDEN : undefined
+}
diff --git a/packages/driver/src/dom/visibility/visibility-tests/domVisibility.ts b/packages/driver/src/dom/visibility/visibility-tests/domVisibility.ts
new file mode 100644
index 00000000000..00b54b2db36
--- /dev/null
+++ b/packages/driver/src/dom/visibility/visibility-tests/domVisibility.ts
@@ -0,0 +1,9 @@
+import { VisibilityResultKind } from './VisibilityTest'
+
+export function domVisibility (subject: HTMLElement, options: VisibilityOptions): VisibilityTestResult | undefined {
+  return subject.checkVisibility({
+    contentVisibilityAuto: true,
+    opacityProperty: options.checkOpacity,
+    visibilityProperty: true,
+  }) ? VisibilityResultKind.VISIBLE : undefined
+}
diff --git a/packages/driver/src/dom/visibility/visibility-tests/getBoundingClientRect.ts b/packages/driver/src/dom/visibility/visibility-tests/getBoundingClientRect.ts
new file mode 100644
index 00000000000..cdb9a622c0b
--- /dev/null
+++ b/packages/driver/src/dom/visibility/visibility-tests/getBoundingClientRect.ts
@@ -0,0 +1,5 @@
+import { memoize } from './memoize'
+
+export const getBoundingClientRect = memoize(
+  (el: HTMLElement) => el.getBoundingClientRect(),
+)
diff --git a/packages/driver/src/dom/visibility/visibility-tests/memoize.ts b/packages/driver/src/dom/visibility/visibility-tests/memoize.ts
new file mode 100644
index 00000000000..0f4e4ced626
--- /dev/null
+++ b/packages/driver/src/dom/visibility/visibility-tests/memoize.ts
@@ -0,0 +1,44 @@
+interface MemoizeOptions<
+  IndexFn extends (...args: any[]) => any,
+  Key = IndexFn extends (...args: any[]) => infer I ? I : never
+> {
+  ttl?: number
+  key?: (...args: Parameters<T>) => Key
+}
+
+export function memoize<T extends (...args: any[]) => any> (
+  fn: T,
+  options?: MemoizeOptions<T>): T {
+  const ttl = options?.ttl ?? 100
+  const keyFn = options?.key ?? ((args: Parameters<T>) => args[0])
+
+  const cache = new Map<ReturnType<typeof keyFn>, { result: ReturnType<T>, timestamp: number }>()
+
+  let sweepTimeout: NodeJS.Timeout | undefined
+
+  const sweep = () => {
+    sweepTimeout = undefined
+    cache.forEach((value, key) => {
+      if (value.timestamp < Date.now() - ttl) {
+        cache.delete(key)
+      }
+    })
+  }
+
+  return (...args: any[]) => {
+    sweepTimeout = sweepTimeout || setTimeout(sweep, ttl)
+
+    const key = keyFn(args)
+    const cached = cache.get(key)
+
+    if (cached && cached.timestamp > Date.now() - ttl) {
+      return cached.result
+    }
+
+    const result = fn(...args)
+
+    cache.set(key, { result, timestamp: Date.now() })
+
+    return result
+  }
+}
diff --git a/packages/driver/src/dom/visibility/visibility-tests/pointSampling.ts b/packages/driver/src/dom/visibility/visibility-tests/pointSampling.ts
new file mode 100644
index 00000000000..867e6917155
--- /dev/null
+++ b/packages/driver/src/dom/visibility/visibility-tests/pointSampling.ts
@@ -0,0 +1,67 @@
+import { getBoundingClientRect } from './getBoundingClientRect'
+import { memoize } from './memoize'
+import { VisibilityResultKind } from './VisibilityTest'
+
+const MAX_DEPTH = 2
+const MIN_SIZE = 1
+
+const SUBDIVIDE_PATTERN = [
+  [0, 0],
+  [1, 0],
+  [0, 1],
+  [1, 1],
+] as const
+
+const SAMPLE_POINTS = [
+  ...SUBDIVIDE_PATTERN,
+  [0.5, 0.5],
+] as const
+
+export function pointSampling (subject: HTMLElement, options: VisibilityOptions): VisibilityTestResult | undefined {
+  const boundingRect = getBoundingClientRect(subject)
+
+  return sampleDomRectPoints(subject, boundingRect) ? VisibilityResultKind.VISIBLE : undefined
+}
+
+function sampleDomRectPoints (el: HTMLElement, rect: DOMRect, currentDepth: number = 0): boolean {
+  if (currentDepth >= MAX_DEPTH) {
+    return false
+  }
+
+  const { x, y, width, height } = rect
+
+  const samples = SAMPLE_POINTS.map(([pX, pY]) => [x + pX * width, y + pY * height])
+
+  if (samples.some(([x, y]) => visibleAtPoint(el, x, y))) {
+    return true
+  }
+
+  const subRects = subDivideRect(rect)
+
+  debug('subRects', subRects)
+
+  return subRects.some((subRect: DOMRect) => {
+    return visibleToUser(el, subRect, maxDepth, currentDepth + 1)
+  })
+}
+
+function subDivideRect ({ x, y, width, height }: DOMRect): DOMRect[] {
+  return SUBDIVIDE_PATTERN.map(([dX, dY]) => {
+    const validDim = width / 2 > MIN_SIZE && height / 2 > MIN_SIZE
+
+    return validDim ? DOMRect.fromRect({
+      x: x + dX * (width / 2),
+      y: y + dY * (height / 2),
+      width: width / 2,
+      height: height / 2,
+    }) : undefined
+  }).filter(Boolean)
+}
+
+const visibleAtPoint = memoize(function (el: HTMLElement, x: number, y: number): boolean {
+  const elAtPoint = el.ownerDocument.elementFromPoint(x, y)
+
+  debug('visibleAtPoint', el, elAtPoint)
+
+  return Boolean(elAtPoint) && (elAtPoint === el || el.contains(elAtPoint))
+})
diff --git a/packages/driver/src/dom/visibility/visibleToUser.ts b/packages/driver/src/dom/visibility/visibleToUser.ts
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/driver/test/unit/dom/visibility/memoize.spec.ts b/packages/driver/test/unit/dom/visibility/memoize.spec.ts
new file mode 100644
index 00000000000..e6237dc24c7
--- /dev/null
+++ b/packages/driver/test/unit/dom/visibility/memoize.spec.ts
@@ -0,0 +1,64 @@
+import { memoize } from '@packages/driver/src/dom/visibility/memoize'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+
+describe('memoize', () => {
+  let fn: vi.Mock
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    fn = vi.fn().mockReturnValue('output')
+  })
+
+  afterEach(() => {
+    vi.clearAllTimers()
+    vi.useRealTimers()
+    vi.restoreAllMocks()
+  })
+
+  it('should memoize the result of the function', () => {
+    const memoizedFn = memoize(fn, { ttl: 1000 })
+    const result = memoizedFn('input')
+
+    expect(fn).toHaveBeenCalledWith('input')
+    expect(result).toBe('output')
+  })
+
+  it('should return the cached result if the function is called with the same arguments', () => {
+    const memoizedFn = memoize(fn, { ttl: 1000 })
+    const result1 = memoizedFn(1)
+    const result2 = memoizedFn(1)
+
+    expect(fn).toHaveBeenCalledWith(1)
+    expect(fn).toHaveBeenCalledOnce()
+    expect(result1).toBe('output')
+    expect(result2).toBe('output')
+  })
+
+  it('should sweep the cache after the ttl', () => {
+    const memoizedFn = memoize(fn, { ttl: 1000 })
+    const result1 = memoizedFn('input')
+
+    expect(fn).toHaveBeenCalledWith('input')
+    expect(fn).toHaveBeenCalledTimes(1)
+    expect(result1).toBe('output')
+
+    vi.advanceTimersByTime(1000)
+
+    const result3 = memoizedFn('input')
+
+    expect(fn).toHaveBeenCalledWith('input')
+    expect(fn).toHaveBeenCalledTimes(2)
+    expect(result3).toBe('output')
+  })
+
+  it('supports complex arguments with a custom key function', () => {
+    const memoizedFn = memoize(fn, { ttl: 1000, key: (args) => JSON.stringify(args) })
+    const result1 = memoizedFn({ a: 'input-1', b: 'input-2' })
+    const result2 = memoizedFn({ a: 'input-1', b: 'input-2' })
+
+    expect(fn).toHaveBeenCalledWith({ a: 'input-1', b: 'input-2' })
+    expect(fn).toHaveBeenCalledTimes(1)
+    expect(result1).toBe('output')
+    expect(result2).toBe('output')
+  })
+})