From afb6ecc4dd491351ad2ab737d868dbc89d1a8e61 Mon Sep 17 00:00:00 2001
From: Matthew Schile <mschile@cypress.io>
Date: Fri, 24 Jan 2025 09:57:56 -0700
Subject: [PATCH] adding tests

---
 .../driver/cypress/e2e/dom/visibility.cy.ts   | 112 ++++++++++++++++++
 1 file changed, 112 insertions(+)

diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts
index fa9136c813cc..43c7e31bbbfb 100644
--- a/packages/driver/cypress/e2e/dom/visibility.cy.ts
+++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts
@@ -1102,6 +1102,118 @@ describe('src/cypress/dom/visibility', () => {
         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')
+      })
+
+      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')
+      })
     })
 
     describe('css clip-path', () => {