From b1ea5986c421c53b16d4d49d2d0d6b3ed0f34f69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Mon, 1 Jul 2024 09:44:50 +0200 Subject: [PATCH 01/12] fix for 23852 --- packages/driver/cypress/e2e/issues/23852.cy.js | 12 ++++++++++++ packages/driver/cypress/fixtures/issue-23852.html | 4 ++++ packages/driver/src/dom/visibility.ts | 9 ++++++++- 3 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 packages/driver/cypress/e2e/issues/23852.cy.js create mode 100644 packages/driver/cypress/fixtures/issue-23852.html diff --git a/packages/driver/cypress/e2e/issues/23852.cy.js b/packages/driver/cypress/e2e/issues/23852.cy.js new file mode 100644 index 000000000000..86e43ce41a89 --- /dev/null +++ b/packages/driver/cypress/e2e/issues/23852.cy.js @@ -0,0 +1,12 @@ +// https://github.com/cypress-io/cypress/issues/23852 +describe('issue visible element with parent 0 width are detected as not visible', () => { + before(() => { + cy + .viewport('macbook-16') + .visit('/fixtures/issue-23852.html') + }) + + it('can click element when effective 0 width parent used', () => { + expect(cy.$$('#hidden')).to.not.be.visible + }) +}) diff --git a/packages/driver/cypress/fixtures/issue-23852.html b/packages/driver/cypress/fixtures/issue-23852.html new file mode 100644 index 000000000000..3b4dcc3aa5c6 --- /dev/null +++ b/packages/driver/cypress/fixtures/issue-23852.html @@ -0,0 +1,4 @@ + +
I am not visible
+ + \ No newline at end of file diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts index 2a92fae2b963..3dcac223fd96 100644 --- a/packages/driver/src/dom/visibility.ts +++ b/packages/driver/src/dom/visibility.ts @@ -193,6 +193,12 @@ const elHasDisplayInline = ($el) => { return $el.css('display') === 'inline' } +const elHasOverflowClip = function ($el) { + const cssOverflow = [$el.css('overflow'), $el.css('overflow-y'), $el.css('overflow-x')] + + return cssOverflow.includes('clip') +} + const elHasOverflowHidden = function ($el) { const cssOverflow = [$el.css('overflow'), $el.css('overflow-y'), $el.css('overflow-x')] @@ -370,7 +376,8 @@ const elIsHiddenByAncestors = function ($el, checkOpacity, $origEl = $el) { return true } - if (elHasOverflowHidden($parent) && elHasNoEffectiveWidthOrHeight($parent)) { + if ((elHasOverflowHidden($parent) || elHasOverflowClip($parent)) + && elHasNoEffectiveWidthOrHeight($parent)) { // if any of the elements between the parent and origEl // have fixed or position absolute return !elDescendentsHavePositionFixedOrAbsolute($parent, $origEl) From c3e1f4979dbb5eccb0e12e12b13ac2b35b2b1a82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Mon, 1 Jul 2024 09:49:17 +0200 Subject: [PATCH 02/12] changelog update --- cli/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index ff0202142a09..7d108579692e 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -15,6 +15,7 @@ _Released 7/02/2024 (PENDING)_ - Fixed an issue where Chrome launch instances would not recreate the browser CRI client correctly after recovering from an unexpected browser closure. Fixes [#27657](https://github.com/cypress-io/cypress/issues/27657). Fixed in [#29663](https://github.com/cypress-io/cypress/pull/29663). - Fixed an issue where Firefox 129 (Firefox Nightly) would not launch with Cypress. Fixes [#29713](https://github.com/cypress-io/cypress/issues/29713). Fixed in [#29720](https://github.com/cypress-io/cypress/pull/29720). +- Fixed an issue where overflow: clip in parent html node make child node visibility not correctly detected. Fixes [#23852](https://github.com/cypress-io/cypress/issues/23852). **Dependency Updates:** From 3367369129712b313ef8f36b2271df4f7419a3c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Mon, 1 Jul 2024 09:55:14 +0200 Subject: [PATCH 03/12] changelog update --- cli/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index 7d108579692e..7c58ea19ed7c 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -15,7 +15,7 @@ _Released 7/02/2024 (PENDING)_ - Fixed an issue where Chrome launch instances would not recreate the browser CRI client correctly after recovering from an unexpected browser closure. Fixes [#27657](https://github.com/cypress-io/cypress/issues/27657). Fixed in [#29663](https://github.com/cypress-io/cypress/pull/29663). - Fixed an issue where Firefox 129 (Firefox Nightly) would not launch with Cypress. Fixes [#29713](https://github.com/cypress-io/cypress/issues/29713). Fixed in [#29720](https://github.com/cypress-io/cypress/pull/29720). -- Fixed an issue where overflow: clip in parent html node make child node visibility not correctly detected. Fixes [#23852](https://github.com/cypress-io/cypress/issues/23852). +- Fixed an issue where overflow: clip in parent html node make child node visibility not correctly detected. Fixes [#23852](https://github.com/cypress-io/cypress/issues/23852). Fixed in [#29778](https://github.com/cypress-io/cypress/pull/29778). **Dependency Updates:** From 0c6f4e56b85937dd1cdba994184a8d30c77ad201 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Mon, 1 Jul 2024 11:20:14 +0200 Subject: [PATCH 04/12] fix reason of hide for compatibility --- packages/driver/src/dom/visibility.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts index 3dcac223fd96..c3d6a944cc3b 100644 --- a/packages/driver/src/dom/visibility.ts +++ b/packages/driver/src/dom/visibility.ts @@ -393,8 +393,8 @@ const parentHasNoOffsetWidthOrHeightAndOverflowHidden = function ($el) { return false } - // if we have overflow hidden and no effective width or height - if (elHasOverflowHidden($el) && elHasNoEffectiveWidthOrHeight($el)) { + // if we have overflow hidden or clip and no effective width or height + if ((elHasOverflowHidden($el) || elHasOverflowClip($el)) && elHasNoEffectiveWidthOrHeight($el)) { return $el } From 3ace4baa40356742569c89d80c4210d07666de31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Mon, 1 Jul 2024 11:27:01 +0200 Subject: [PATCH 05/12] add clip to overflow props --- 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 c3d6a944cc3b..8128e068c12e 100644 --- a/packages/driver/src/dom/visibility.ts +++ b/packages/driver/src/dom/visibility.ts @@ -9,7 +9,7 @@ const { isElement, isBody, isHTML, isOption, isOptgroup, getParent, getFirstPare const fixedOrAbsoluteRe = /(fixed|absolute)/ -const OVERFLOW_PROPS = ['hidden', 'scroll', 'auto'] +const OVERFLOW_PROPS = ['hidden', 'scroll', 'auto', 'clip'] const isVisible = (el) => { return !isHidden(el, 'isVisible()') From 1988b2cf25d9daccae2f54dea5c39bea6583dfb2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Mon, 1 Jul 2024 11:41:26 +0200 Subject: [PATCH 06/12] hide reason update message update --- packages/driver/cypress/e2e/dom/visibility.cy.ts | 2 +- packages/driver/src/dom/visibility.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts index 5dc7495afc30..7f4629f7afaa 100644 --- a/packages/driver/cypress/e2e/dom/visibility.cy.ts +++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts @@ -1150,7 +1150,7 @@ describe('src/cypress/dom/visibility', () => { }) it('has a parent with an effective zero width and overflow: hidden', function () { - this.reasonIs(this.$parentNoHeight.find('span'), 'This element `` is not visible because its parent `
` has CSS property: `overflow: hidden` and an effective width and height of: `100 x 0` pixels.') + this.reasonIs(this.$parentNoHeight.find('span'), 'This element `` is not visible because its parent `
` has CSS property: `overflow: hidden` or `overflow: clip` and an effective width and height of: `100 x 0` pixels.') }) it('element sits outside boundaries of parent with overflow clipping', function () { diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts index 8128e068c12e..6055e8258177 100644 --- a/packages/driver/src/dom/visibility.ts +++ b/packages/driver/src/dom/visibility.ts @@ -539,7 +539,7 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true } width = elOffsetWidth($parent) height = elOffsetHeight($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.` + return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`overflow: hidden\` or \`overflow: clip\` and an effective width and height of: \`${width} x ${height}\` pixels.` } // nested else --___________-- From 51ce60c1cf0ae6d7d6af54bf5048932198ddac7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Wed, 3 Jul 2024 07:37:25 +0200 Subject: [PATCH 07/12] clip fix no longer that general coz of firefox --- packages/driver/cypress/e2e/dom/visibility.cy.ts | 4 ++-- packages/driver/src/dom/visibility.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts index 7f4629f7afaa..0fd9b3d738df 100644 --- a/packages/driver/cypress/e2e/dom/visibility.cy.ts +++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts @@ -368,7 +368,7 @@ describe('src/cypress/dom/visibility', () => { this.$elOutOfParentBoundsAbove = add(`\
- position: absolute, out of bounds above + position: absolute, out of bounds above
\ `) @@ -833,7 +833,7 @@ describe('src/cypress/dom/visibility', () => { }) it('is hidden when parent overflow hidden and out of bounds above', function () { - expect(this.$elOutOfParentBoundsAbove.find('span')).to.be.hidden + expect(this.$elOutOfParentBoundsAbove.find('span#elOutOfParentBoundsAbove')).to.be.hidden }) it('is hidden when parent overflow hidden and out of bounds below', function () { diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts index 6055e8258177..54bd313a74f0 100644 --- a/packages/driver/src/dom/visibility.ts +++ b/packages/driver/src/dom/visibility.ts @@ -9,7 +9,7 @@ const { isElement, isBody, isHTML, isOption, isOptgroup, getParent, getFirstPare const fixedOrAbsoluteRe = /(fixed|absolute)/ -const OVERFLOW_PROPS = ['hidden', 'scroll', 'auto', 'clip'] +const OVERFLOW_PROPS = ['hidden', 'scroll', 'auto'] const isVisible = (el) => { return !isHidden(el, 'isVisible()') From cb458f2c2b58fe42c98148cfcbb2ce4b180ec250 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Wed, 3 Jul 2024 07:41:24 +0200 Subject: [PATCH 08/12] changelog update --- cli/CHANGELOG.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index 4e695c9e834e..c764277d6325 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -1,4 +1,12 @@ +## 13.13.1 + +_Released 07/14/2024 (PENDING)_ + +**Bugfixes:** + +- Fixed an issue where overflow: clip in parent html node make child node visibility not correctly detected. Fixes [#23852](https://github.com/cypress-io/cypress/issues/23852). Fixed in [#29778](https://github.com/cypress-io/cypress/pull/29778). + ## 13.13.0 _Released 7/01/2024_ @@ -15,7 +23,6 @@ _Released 7/01/2024_ - Fixed an issue where Chrome launch instances would not recreate the browser CRI client correctly after recovering from an unexpected browser closure. Fixes [#27657](https://github.com/cypress-io/cypress/issues/27657). Fixed in [#29663](https://github.com/cypress-io/cypress/pull/29663). - Fixed an issue where Firefox 129 (Firefox Nightly) would not launch with Cypress. Fixes [#29713](https://github.com/cypress-io/cypress/issues/29713). Fixed in [#29720](https://github.com/cypress-io/cypress/pull/29720). -- Fixed an issue where overflow: clip in parent html node make child node visibility not correctly detected. Fixes [#23852](https://github.com/cypress-io/cypress/issues/23852). Fixed in [#29778](https://github.com/cypress-io/cypress/pull/29778). **Dependency Updates:** From 2e03ee1f174f70415af9e73990d1f22d94d80bb7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Wed, 30 Oct 2024 11:38:33 +0100 Subject: [PATCH 09/12] pipeline changelog fixes --- cli/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index 9ee6a9bd9de6..2bb9fd72d30f 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -7,7 +7,7 @@ _Released 12/3/2024 (PENDING)_ **Bugfixes:** -- Fixed an issue where overflow: clip in parent html node make child node visibility not correctly detected. Fixes [#23852](https://github.com/cypress-io/cypress/issues/23852). Fixed in [#29778](https://github.com/cypress-io/cypress/pull/29778). +- Fixed an issue where overflow: clip in parent html node make child node visibility not correctly detected. Fixed in [#29778](https://github.com/cypress-io/cypress/pull/29778). Fixes [#23852](https://github.com/cypress-io/cypress/issues/23852). - Removed support for Node.js 16 and Node.js 21. Addresses [#29930](https://github.com/cypress-io/cypress/issues/29930). - Prebuilt binaries for Linux are no longer compatible with Linux distributions based on glibc <2.28, for example: Ubuntu 14-18, RHEL 7, CentOS 7, Amazon Linux 2. Addresses [#29601](https://github.com/cypress-io/cypress/issues/29601). - The `experimentalFetchPolyfill` configuration option was removed. This option was deprecated in Cypress 6.0.0. We recommend using `cy.intercept()` for handling fetch requests. Addressed in [#30466](https://github.com/cypress-io/cypress/pull/30466). From 53bd619693fb920b67389771a7b8147db84f5f32 Mon Sep 17 00:00:00 2001 From: Matthew Schile Date: Tue, 19 Nov 2024 14:39:17 -0700 Subject: [PATCH 10/12] update OVERFLOW_PROPS --- .../driver/cypress/e2e/dom/visibility.cy.ts | 75 +++++++++++-------- .../driver/cypress/e2e/issues/23852.cy.js | 12 --- .../driver/cypress/fixtures/issue-23852.html | 4 - packages/driver/src/dom/visibility.ts | 18 ++--- 4 files changed, 49 insertions(+), 60 deletions(-) delete mode 100644 packages/driver/cypress/e2e/issues/23852.cy.js delete mode 100644 packages/driver/cypress/fixtures/issue-23852.html diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts index f0a571463a30..e894fa233460 100644 --- a/packages/driver/cypress/e2e/dom/visibility.cy.ts +++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts @@ -2,6 +2,14 @@ const { $, dom } = Cypress describe('src/cypress/dom/visibility', () => { + const add = (el) => { + return $(el).appendTo(cy.$$('body')) + } + + const reasonIs = ($el, str) => { + expect(dom.getReasonIsHidden($el)).to.eq(str) + } + beforeEach(() => { cy.visit('/fixtures/generic.html') }) @@ -163,10 +171,6 @@ describe('src/cypress/dom/visibility', () => { context('hidden/visible overrides', () => { beforeEach(function () { - const add = (el) => { - return $(el).appendTo(cy.$$('body')) - } - // ensure all tests run against a scrollable window const scrollThisIntoView = add('
Should be in view
') @@ -908,6 +912,23 @@ describe('src/cypress/dom/visibility', () => { 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('
I am not visible
') + + expect(el.find('#hidden')).to.be.hidden + reasonIs(el.find('#hidden'), 'This element `` 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('
I am visible
') + + 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 }) @@ -937,10 +958,6 @@ describe('src/cypress/dom/visibility', () => { }) describe('css transform', () => { - const add = (el) => { - return $(el).appendTo(cy.$$('body')) - } - describe('element visibility by css transform', () => { it('is visible when an element is translated a bit', () => { const el = add(`
Translated
`) @@ -1129,78 +1146,72 @@ describe('src/cypress/dom/visibility', () => { }) describe('#getReasonIsHidden', () => { - beforeEach(function () { - this.reasonIs = ($el, str) => { - expect(dom.getReasonIsHidden($el)).to.eq(str) - } - }) - it('has `display: none`', function () { - this.reasonIs(this.$displayNone, 'This element `