From d2ffbec1d6985a2582f82ea7c8f077f12bcf4736 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Mon, 17 Jun 2024 10:38:04 +0200 Subject: [PATCH 01/18] fix 28638 --- cli/CHANGELOG.md | 1 + .../driver/cypress/e2e/issues/28638.cy.js | 12 +++ .../driver/cypress/fixtures/issue-28638.html | 19 ++++ packages/driver/src/dom/visibility.ts | 99 ++++++++++++------- 4 files changed, 95 insertions(+), 36 deletions(-) create mode 100644 packages/driver/cypress/e2e/issues/28638.cy.js create mode 100644 packages/driver/cypress/fixtures/issue-28638.html diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index d89a23154989..b0fe749ea72a 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -13,6 +13,7 @@ _Released 6/18/2024 (PENDING)_ - Fixed an issue where `inlineSourceMaps` was still being used when `sourceMaps` was provided in a users typescript config for typescript version 5. Fixes [#26203](https://github.com/cypress-io/cypress/issues/26203). - When capture protocol script fails verification, an appropriate error is now displayed. Previously, an error regarding Test Replay archive location was shown. Addressed in [#29603](https://github.com/cypress-io/cypress/pull/29603). - Fixed an issue where receiving HTTP responses with invalid headers raised an error. Now cypress removes the invalid headers and gives a warning in the console with debug mode on. Fixes [#28865](https://github.com/cypress-io/cypress/issues/28865). +- Fixed "isVisible" is incorrectly assessed for the absolutely positioned elements if the ancestor has overflow and static position [#28865](https://github.com/cypress-io/cypress/issues/28638). **Misc:** diff --git a/packages/driver/cypress/e2e/issues/28638.cy.js b/packages/driver/cypress/e2e/issues/28638.cy.js new file mode 100644 index 000000000000..54354e809aaa --- /dev/null +++ b/packages/driver/cypress/e2e/issues/28638.cy.js @@ -0,0 +1,12 @@ +// https://github.com/cypress-io/cypress/issues/28638 +describe('issue 28638', () => { + before(() => { + cy + .viewport(400, 400) + .visit('/fixtures/issue-28638.html') + }) + + it('can click with parent position absolute', () => { + cy.get('#visible-button').click() + }) +}) diff --git a/packages/driver/cypress/fixtures/issue-28638.html b/packages/driver/cypress/fixtures/issue-28638.html new file mode 100644 index 000000000000..b9cfc1ec7dd5 --- /dev/null +++ b/packages/driver/cypress/fixtures/issue-28638.html @@ -0,0 +1,19 @@ + +
+
+
+
+

Example

+
+ +
+
+
+
+
+ \ No newline at end of file diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts index 2a92fae2b963..b1ff4ebe84bc 100644 --- a/packages/driver/src/dom/visibility.ts +++ b/packages/driver/src/dom/visibility.ts @@ -65,7 +65,7 @@ const isStrictlyHidden = (el, methodName = 'isStrictlyHidden()', options = { che } // in Cypress-land we consider the element hidden if - // either its offsetHeight or offsetWidth is 0 because + // 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 @@ -121,7 +121,7 @@ const elHasNoEffectiveWidthOrHeight = ($el) => { // Is the element's CSS width OR height, including any borders, // padding, and vertical scrollbars (if rendered) less than 0? // - // elOffsetWidth: + // 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. @@ -129,16 +129,22 @@ const elHasNoEffectiveWidthOrHeight = ($el) => { // For HTML 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) - const transform = style.getPropertyValue('transform') - const width = elOffsetWidth($el) - const height = elOffsetHeight($el) - const overflowHidden = elHasOverflowHidden($el) + let transform + + if ($el[0].style.transform) { + const style = getComputedStyle(el) + + transform = style.getPropertyValue('transform') + } else { + transform = 'none' + } + + const width = elClientWidth($el) + const height = elClientHeight($el) return isZeroLengthAndTransformNone(width, height, transform) || - isZeroLengthAndOverflowHidden(width, height, overflowHidden) || + isZeroLengthAndOverflowHidden(width, height, elHasOverflowHidden($el)) || (el.getClientRects().length <= 0) } @@ -146,7 +152,7 @@ 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 elOffsetWidth/Height. + // That's why we're checking `transform === 'none'` together with elClientWidth/Height. return (width <= 0 && transform === 'none') || (height <= 0 && transform === 'none') @@ -157,22 +163,28 @@ const isZeroLengthAndOverflowHidden = (width, height, overflowHidden) => { (height <= 0 && overflowHidden) } -const elHasNoOffsetWidthOrHeight = ($el) => { - return (elOffsetWidth($el) <= 0) || (elOffsetHeight($el) <= 0) +const elHasNoClientWidthOrHeight = ($el) => { + return (elClientWidth($el) <= 0) || (elClientHeight($el) <= 0) } -const elOffsetWidth = ($el) => { - return $el[0].offsetWidth +const elementBoundingRect = ($el) => $el[0].getBoundingClientRect() + +const elClientHeight = ($el) => { + return elementBoundingRect($el).height } -const elOffsetHeight = ($el) => { - return $el[0].offsetHeight +const elClientWidth = ($el) => { + return elementBoundingRect($el).width } const elHasVisibilityHiddenOrCollapse = ($el) => { return elHasVisibilityHidden($el) || elHasVisibilityCollapse($el) } +const elHasVisibilityVisible = ($el) => { + return $el.css('visibility') === 'visible' +} + const elHasVisibilityHidden = ($el) => { return $el.css('visibility') === 'hidden' } @@ -221,11 +233,17 @@ const canClipContent = function ($el, $ancestor) { // the closest parent with position relative, absolute, or fixed const $offsetParent = $el.offsetParent() + const isClosestAncsestor = isAncestor($ancestor, $offsetParent) + + // fix for 28638 - when element postion is relative and it's parent absolute + if (elHasPositionRelative($el) && isClosestAncsestor && elHasPositionAbsolute($ancestor)) { + return false + } // 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)) { + if (!elHasPositionRelative($el) && isClosestAncsestor) { return false } @@ -308,7 +326,7 @@ const elIsNotElementFromPoint = function ($el) { return true } -const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent($el)) { +const elIsOutOfBoundsOfAncestorsOverflow = function ($el: JQuery, $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 @@ -316,27 +334,32 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent( return false } + if (elHasPositionRelative($el) && elHasPositionAbsolute($ancestor)) { + return false + } + if (canClipContent($el, $ancestor)) { - const elProps = $coordinates.getElementPositioning($el) - const ancestorProps = $coordinates.getElementPositioning($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() + // target el is out of bounds if ( // target el is to the right of the ancestor's visible area - (elProps.fromElWindow.left >= (ancestorProps.width + ancestorProps.fromElWindow.left)) || + (elProps.left >= (ancestorProps.width + ancestorProps.left)) || // target el is to the left of the ancestor's visible area - ((elProps.fromElWindow.left + elProps.width) <= ancestorProps.fromElWindow.left) || + ((elProps.left + elProps.width) <= ancestorProps.left) || // target el is under the ancestor's visible area - (elProps.fromElWindow.top >= (ancestorProps.height + ancestorProps.fromElWindow.top)) || + (elProps.top >= (ancestorProps.height + ancestorProps.top)) || // target el is above the ancestor's visible area - ((elProps.fromElWindow.top + elProps.height) <= ancestorProps.fromElWindow.top) + ((elProps.top + elProps.height) <= ancestorProps.top) ) { return true } @@ -348,7 +371,7 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el, $ancestor = getParent( 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 offsetHeight of 0 + // or has an effective clientHeight of 0 // and its set overflow: hidden then our child element // is effectively hidden // -----UNLESS------ @@ -376,11 +399,15 @@ const elIsHiddenByAncestors = function ($el, checkOpacity, $origEl = $el) { return !elDescendentsHavePositionFixedOrAbsolute($parent, $origEl) } + if (elHasVisibilityVisible($parent)) { + return false + } + // continue to recursively walk up the chain until we reach body or html return elIsHiddenByAncestors($parent, checkOpacity, $origEl) } -const parentHasNoOffsetWidthOrHeightAndOverflowHidden = function ($el) { +const parentHasNoClientWidthOrHeightAndOverflowHidden = function ($el) { // if we've walked all the way up to body or html then return false if (isUndefinedOrHTMLBodyDoc($el)) { return false @@ -392,7 +419,7 @@ const parentHasNoOffsetWidthOrHeightAndOverflowHidden = function ($el) { } // continue walking - return parentHasNoOffsetWidthOrHeightAndOverflowHidden(getParent($el)) + return parentHasNoClientWidthOrHeightAndOverflowHidden(getParent($el)) } const parentHasDisplayNone = function ($el) { @@ -463,8 +490,8 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true } // either being covered or there is no el const node = stringifyElement($el, 'short') - let width = elOffsetWidth($el) - let height = elOffsetHeight($el) + let width = elClientWidth($el) + let height = elClientHeight($el) let $parent let parentNode @@ -513,24 +540,24 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true } return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`opacity: 0\`` } - if (elHasNoOffsetWidthOrHeight($el)) { - return `This element \`${node}\` is not visible because it has an effective width and height of: \`${width} x ${height}\` pixels.` - } - const transformResult = $transform.detectVisibility($el) if (transformResult === 'transformed') { return `This element \`${node}\` is not visible because it is hidden by transform.` } + if (elHasNoClientWidthOrHeight($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 = parentHasNoOffsetWidthOrHeightAndOverflowHidden(getParent($el))) { + if ($parent = parentHasNoClientWidthOrHeightAndOverflowHidden(getParent($el))) { parentNode = stringifyElement($parent, 'short') - width = elOffsetWidth($parent) - height = elOffsetHeight($parent) + width = elClientWidth($parent) + 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.` } From 46e07c0680c8d5c40f3c3bd36ba54ddcd412e407 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Mon, 17 Jun 2024 10:38:48 +0200 Subject: [PATCH 02/18] fix changelog --- cli/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index b0fe749ea72a..7c68dde8b796 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -13,7 +13,7 @@ _Released 6/18/2024 (PENDING)_ - Fixed an issue where `inlineSourceMaps` was still being used when `sourceMaps` was provided in a users typescript config for typescript version 5. Fixes [#26203](https://github.com/cypress-io/cypress/issues/26203). - When capture protocol script fails verification, an appropriate error is now displayed. Previously, an error regarding Test Replay archive location was shown. Addressed in [#29603](https://github.com/cypress-io/cypress/pull/29603). - Fixed an issue where receiving HTTP responses with invalid headers raised an error. Now cypress removes the invalid headers and gives a warning in the console with debug mode on. Fixes [#28865](https://github.com/cypress-io/cypress/issues/28865). -- Fixed "isVisible" is incorrectly assessed for the absolutely positioned elements if the ancestor has overflow and static position [#28865](https://github.com/cypress-io/cypress/issues/28638). +- Fixed an issue where "isVisible" is incorrectly assessed for the absolutely positioned elements if the ancestor has overflow and static position [#28638](https://github.com/cypress-io/cypress/issues/28638). **Misc:** From 72b37f6e71282f36f5b0bd154ce2f2844624ee99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Mon, 17 Jun 2024 10:45:12 +0200 Subject: [PATCH 03/18] changelog update as required by pipeline --- cli/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index 7c68dde8b796..58bf28456e08 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -13,7 +13,7 @@ _Released 6/18/2024 (PENDING)_ - Fixed an issue where `inlineSourceMaps` was still being used when `sourceMaps` was provided in a users typescript config for typescript version 5. Fixes [#26203](https://github.com/cypress-io/cypress/issues/26203). - When capture protocol script fails verification, an appropriate error is now displayed. Previously, an error regarding Test Replay archive location was shown. Addressed in [#29603](https://github.com/cypress-io/cypress/pull/29603). - Fixed an issue where receiving HTTP responses with invalid headers raised an error. Now cypress removes the invalid headers and gives a warning in the console with debug mode on. Fixes [#28865](https://github.com/cypress-io/cypress/issues/28865). -- Fixed an issue where "isVisible" is incorrectly assessed for the absolutely positioned elements if the ancestor has overflow and static position [#28638](https://github.com/cypress-io/cypress/issues/28638). +- Fixed an issue where "isVisible" is incorrectly assessed for the absolutely positioned elements if the ancestor has overflow and static position [#28638](https://github.com/cypress-io/cypress/pull/29689). **Misc:** From 1366587a1c9c47d77bf2e7f3bf49fe9b3f923996 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Mon, 17 Jun 2024 10:47:03 +0200 Subject: [PATCH 04/18] pipeline changelog fix2 --- cli/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index 58bf28456e08..e08e45b6b271 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -13,7 +13,7 @@ _Released 6/18/2024 (PENDING)_ - Fixed an issue where `inlineSourceMaps` was still being used when `sourceMaps` was provided in a users typescript config for typescript version 5. Fixes [#26203](https://github.com/cypress-io/cypress/issues/26203). - When capture protocol script fails verification, an appropriate error is now displayed. Previously, an error regarding Test Replay archive location was shown. Addressed in [#29603](https://github.com/cypress-io/cypress/pull/29603). - Fixed an issue where receiving HTTP responses with invalid headers raised an error. Now cypress removes the invalid headers and gives a warning in the console with debug mode on. Fixes [#28865](https://github.com/cypress-io/cypress/issues/28865). -- Fixed an issue where "isVisible" is incorrectly assessed for the absolutely positioned elements if the ancestor has overflow and static position [#28638](https://github.com/cypress-io/cypress/pull/29689). +- Fixed an issue where "isVisible" is incorrectly assessed for the absolutely positioned elements if the ancestor has overflow and static position [#29689](https://github.com/cypress-io/cypress/pull/29689). **Misc:** From 43e3b6206ea5c196d417844d3a2904b7a886f457 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Thu, 27 Jun 2024 11:02:17 +0200 Subject: [PATCH 05/18] changelog for pipeline --- cli/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index aacea102cbf9..79e2e2281a4e 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -11,6 +11,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). +- Fix for parent overflow and element position absolute visibility detection. Fixed in [#29689](https://github.com/cypress-io/cypress/pull/29689). **Dependency Updates:** From d206d9690e9ae9ee795a459f57cede3819f5ff7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Thu, 27 Jun 2024 11:54:32 +0200 Subject: [PATCH 06/18] test fixes --- packages/driver/cypress/e2e/dom/visibility.cy.ts | 9 +++------ packages/driver/src/dom/visibility.ts | 2 +- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts index 5dc7495afc30..f94a3172a3b3 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 () { @@ -1170,10 +1170,7 @@ describe('src/cypress/dom/visibility', () => { }) it('element is fixed and being covered', function () { - this.reasonIs(this.$coveredUpPosFixed.find('#coveredUpPosFixed'), `\ -This element \`\` is not visible because it has CSS property: \`position: fixed\` and it's being covered by another element: - -\`
on top
\``) + this.reasonIs(this.$coveredUpPosFixed.find('#coveredUpPosFixed'), `\This element \`\` is not visible because it has CSS property: \`position: fixed\` and it's being covered by another element:\`
on top
\``) }) it('needs scroll', function () { diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts index b1ff4ebe84bc..b7f9574978b3 100644 --- a/packages/driver/src/dom/visibility.ts +++ b/packages/driver/src/dom/visibility.ts @@ -569,7 +569,7 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true } 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 it has CSS property: \`position: fixed\` and it's being covered by another element:\`${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()\`?` From a5e7b11c2e1138ec4b87468a5825b9d2656c593b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Thu, 27 Jun 2024 12:02:08 +0200 Subject: [PATCH 07/18] fix only for firefox. coz in firefox position relative not detected as hidden --- 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 f94a3172a3b3..41f0b3d4f936 100644 --- a/packages/driver/cypress/e2e/dom/visibility.cy.ts +++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts @@ -367,7 +367,7 @@ describe('src/cypress/dom/visibility', () => { `) this.$elOutOfParentBoundsAbove = add(`\ -
+
position: absolute, out of bounds above
\ `) From b7aba89f2a1fd0ff42d8b68586e8561af3b27018 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Tue, 2 Jul 2024 11:20:12 +0200 Subject: [PATCH 08/18] fix to go back to previous extra spaces --- 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 41f0b3d4f936..011e4cc0635e 100644 --- a/packages/driver/cypress/e2e/dom/visibility.cy.ts +++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts @@ -1170,7 +1170,7 @@ describe('src/cypress/dom/visibility', () => { }) it('element is fixed and being covered', function () { - this.reasonIs(this.$coveredUpPosFixed.find('#coveredUpPosFixed'), `\This element \`\` is not visible because it has CSS property: \`position: fixed\` and it's being covered by another element:\`
on top
\``) + this.reasonIs(this.$coveredUpPosFixed.find('#coveredUpPosFixed'), `\This element \`\` is not visible because it has CSS property: \`position: fixed\` and it's being covered by another element:\n\n\`
on top
\``) }) it('needs scroll', function () { diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts index b7f9574978b3..b1ff4ebe84bc 100644 --- a/packages/driver/src/dom/visibility.ts +++ b/packages/driver/src/dom/visibility.ts @@ -569,7 +569,7 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true } 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:\`${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()\`?` From 9749a4db56488bebc95e9b30ff23915db83a69ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Tue, 2 Jul 2024 12:14:33 +0200 Subject: [PATCH 09/18] fix pipeline --- cli/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index dd4990019993..dded069179cb 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -1,7 +1,7 @@ ## 13.13.0 -_Released 7/01/2024_ +_Released 07/01/2024_ **Performance:** From 95db079eb3907eea5c4da434368b2d2cfb02a801 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Tue, 2 Jul 2024 12:18:31 +0200 Subject: [PATCH 10/18] changelog new --- cli/CHANGELOG.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index dded069179cb..b48f3a314a9e 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -1,7 +1,15 @@ +## 13.13.1 + +_Released 07/14/2024 (PENDING)_ + +**Bugfixes:** + +- Fix for parent overflow and element position absolute visibility detection. Fixed in [#29689](https://github.com/cypress-io/cypress/pull/29689). + ## 13.13.0 -_Released 07/01/2024_ +_Released 7/01/2024_ **Performance:** @@ -15,7 +23,6 @@ _Released 07/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). -- Fix for parent overflow and element position absolute visibility detection. Fixed in [#29689](https://github.com/cypress-io/cypress/pull/29689). **Dependency Updates:** From d1c658f578832f22a0cc1a4936a9741f01549824 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Tue, 2 Jul 2024 12:26:49 +0200 Subject: [PATCH 11/18] changelog cleanup --- cli/CHANGELOG.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index b48f3a314a9e..b665e507339d 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -5,7 +5,7 @@ _Released 07/14/2024 (PENDING)_ **Bugfixes:** -- Fix for parent overflow and element position absolute visibility detection. Fixed in [#29689](https://github.com/cypress-io/cypress/pull/29689). +- Fixed an issue where "isVisible" is incorrectly assessed for the absolutely positioned elements if the ancestor has overflow and static position [#29689](https://github.com/cypress-io/cypress/pull/29689). ## 13.13.0 @@ -46,7 +46,6 @@ _Released 6/18/2024_ - Fixed an issue where `inlineSourceMaps` was still being used when `sourceMaps` was provided in a users typescript config for typescript version 5. Fixes [#26203](https://github.com/cypress-io/cypress/issues/26203). - When capture protocol script fails verification, an appropriate error is now displayed. Previously, an error regarding Test Replay archive location was shown. Addressed in [#29603](https://github.com/cypress-io/cypress/pull/29603). - Fixed an issue where receiving HTTP responses with invalid headers raised an error. Now cypress removes the invalid headers and gives a warning in the console with debug mode on. Fixes [#28865](https://github.com/cypress-io/cypress/issues/28865). -- Fixed an issue where "isVisible" is incorrectly assessed for the absolutely positioned elements if the ancestor has overflow and static position [#29689](https://github.com/cypress-io/cypress/pull/29689). **Misc:** From ca8da1b6cf2d63707da026390d26b6e1f79ade2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Tue, 2 Jul 2024 12:46:37 +0200 Subject: [PATCH 12/18] pipeline tests fix --- packages/app/cypress/e2e/specs_list_e2e.cy.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/cypress/e2e/specs_list_e2e.cy.ts b/packages/app/cypress/e2e/specs_list_e2e.cy.ts index 03cfd8fbe936..4999f3cba6b2 100644 --- a/packages/app/cypress/e2e/specs_list_e2e.cy.ts +++ b/packages/app/cypress/e2e/specs_list_e2e.cy.ts @@ -120,7 +120,7 @@ describe('App: Spec List (E2E)', () => { cy.findAllByTestId('spec-item-link').contains('dom-content.spec.js').click() cy.contains('[aria-controls=reporter-inline-specs-list]', 'Specs') - cy.findByText('Your tests are loading...').should('not.be.visible') + cy.get('.runnable-loading-title', { timeout: 4000 }).should('not.be.exist') cy.get('body').type('f') cy.get('[data-selected-spec="true"]').contains('dom-content.spec.js') From 9d31e48f6eceabc970336313999aa83aab9b98da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Urbanek?= Date: Wed, 30 Oct 2024 11:34:47 +0100 Subject: [PATCH 13/18] changelog fix --- cli/CHANGELOG.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index 8f681690bd4b..76e5af08c268 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -17,15 +17,13 @@ _Released 12/3/2024 (PENDING)_ **Bugfixes:** - The CSS pseudo-class `:dir()` is now supported when testing in Electron. Addresses [#29766](https://github.com/cypress-io/cypress/issues/29766). +- Fixed an issue where "isVisible" is incorrectly assessed for the absolutely positioned elements if the ancestor has overflow and static position. Fixed in [#29689](https://github.com/cypress-io/cypress/pull/29689). **Dependency Updates:** - Upgraded `electron` from `27.3.10` to `32.2.0`. Addresses [#29547](https://github.com/cypress-io/cypress/issues/29547). - Upgraded bundled Chromium version from `118.0.5993.159` to `128.0.6613.178`. Addresses [#29547](https://github.com/cypress-io/cypress/issues/29547). -**Bugfixes:** - -- Fixed an issue where "isVisible" is incorrectly assessed for the absolutely positioned elements if the ancestor has overflow and static position [#29689](https://github.com/cypress-io/cypress/pull/29689). ## 13.15.1 From 2a0bf4a4accf3c9b8a3b28596a6b4ccc07aa7ef5 Mon Sep 17 00:00:00 2001 From: Matthew Schile Date: Mon, 25 Nov 2024 17:26:16 -0700 Subject: [PATCH 14/18] updates --- cli/CHANGELOG.md | 5 +- packages/app/cypress/e2e/specs_list_e2e.cy.ts | 2 +- .../driver/cypress/e2e/dom/visibility.cy.ts | 52 ++++++++++++++++- .../e2e/dom/visibility_shadow_dom.cy.ts | 48 ++++++++++++++-- packages/driver/src/dom/coordinates.ts | 2 +- packages/driver/src/dom/elements/find.ts | 8 +-- packages/driver/src/dom/visibility.ts | 56 +++++++++---------- 7 files changed, 127 insertions(+), 46 deletions(-) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index 5ec66b1e1070..5d603c62a7ef 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -30,7 +30,7 @@ in this [GitHub issue](https://github.com/cypress-io/cypress/issues/30447). Addr - Elements with `display: contents` will no longer use box model calculations for visibility, and correctly show as visible when it is visible. Fixed in [#29680](https://github.com/cypress-io/cypress/pull/29680). Fixes [#29605](https://github.com/cypress-io/cypress/issues/29605). - The CSS pseudo-class `:dir()` is now supported when testing in Electron. Addresses [#29766](https://github.com/cypress-io/cypress/issues/29766). -- Fixed an issue where "isVisible" is incorrectly assessed for the absolutely positioned elements if the ancestor has overflow and static position. Fixed in [#29689](https://github.com/cypress-io/cypress/pull/29689). +- Fixed a visibility issue for an absolutely positioned elements if the ancestor has overflow and static position. Fixed in [#29689](https://github.com/cypress-io/cypress/pull/29689). Fixes [#28638](https://github.com/cypress-io/cypress/issues/28638) **Dependency Updates:** @@ -38,7 +38,6 @@ in this [GitHub issue](https://github.com/cypress-io/cypress/issues/30447). Addr - Upgraded bundled Chromium version from `118.0.5993.159` to `128.0.6613.178`. Addresses [#29547](https://github.com/cypress-io/cypress/issues/29547). - Updated `jQuery` from `3.4.1` to `3.7.1`. Addressed in [#30345](https://github.com/cypress-io/cypress/pull/30345). - ## 13.15.2 _Released 11/5/2024 (PENDING)_ @@ -51,8 +50,6 @@ _Released 11/5/2024 (PENDING)_ - Updated `@cypress/request` from `3.0.4` to `3.0.6`. Addressed in [#30488](https://github.com/cypress-io/cypress/pull/30488). - - ## 13.15.1 _Released 10/24/2024_ diff --git a/packages/app/cypress/e2e/specs_list_e2e.cy.ts b/packages/app/cypress/e2e/specs_list_e2e.cy.ts index 4999f3cba6b2..03cfd8fbe936 100644 --- a/packages/app/cypress/e2e/specs_list_e2e.cy.ts +++ b/packages/app/cypress/e2e/specs_list_e2e.cy.ts @@ -120,7 +120,7 @@ describe('App: Spec List (E2E)', () => { cy.findAllByTestId('spec-item-link').contains('dom-content.spec.js').click() cy.contains('[aria-controls=reporter-inline-specs-list]', 'Specs') - cy.get('.runnable-loading-title', { timeout: 4000 }).should('not.be.exist') + cy.findByText('Your tests are loading...').should('not.be.visible') cy.get('body').type('f') cy.get('[data-selected-spec="true"]').contains('dom-content.spec.js') diff --git a/packages/driver/cypress/e2e/dom/visibility.cy.ts b/packages/driver/cypress/e2e/dom/visibility.cy.ts index fe82cfb0bd02..11bd98c82f79 100644 --- a/packages/driver/cypress/e2e/dom/visibility.cy.ts +++ b/packages/driver/cypress/e2e/dom/visibility.cy.ts @@ -168,7 +168,7 @@ describe('src/cypress/dom/visibility', () => { } // ensure all tests run against a scrollable window - const scrollThisIntoView = add('
Should be in view
') + const scrollThisIntoView = add('
Should be in view
') this.$visHidden = add('
    ') this.$parentVisHidden = add('') @@ -923,6 +923,56 @@ describe('src/cypress/dom/visibility', () => { 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 () { + const add = (el) => { + return $(el).appendTo(cy.$$('body')) + } + + cy.$$('body').empty() + + const el = add(` +
    +
    +
    + +
    +
    +
    + `) + + 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 () { + const add = (el) => { + return $(el).appendTo(cy.$$('body')) + } + + cy.$$('body').empty() + + const el = add(` +
    +
    +
    +
    +

    Example

    +
    + +
    +
    +
    +
    +
    + `) + + expect(el.find('#visible-button')).to.be.visible + }) }) describe('css clip-path', () => { 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 18e353ee1691..974a909d57de 100644 --- a/packages/driver/cypress/e2e/dom/visibility_shadow_dom.cy.ts +++ b/packages/driver/cypress/e2e/dom/visibility_shadow_dom.cy.ts @@ -3,7 +3,7 @@ export {} // make typescript see this as a module const { $ } = Cypress describe('src/cypress/dom/visibility - shadow dom', () => { - let add + let add: (el: string, shadowEl: string, rootIdentifier: string) => JQuery beforeEach(() => { cy.visit('/fixtures/empty.html').then((win) => { @@ -11,7 +11,6 @@ describe('src/cypress/dom/visibility - shadow dom', () => { constructor () { super() - // @ts-ignore this.attachShadow({ mode: 'open' }) this.style.display = 'block' } @@ -20,8 +19,7 @@ describe('src/cypress/dom/visibility - shadow dom', () => { add = (el, shadowEl, rootIdentifier) => { const $el = $(el).appendTo(cy.$$('body')) - // @ts-ignore - $(shadowEl).appendTo(cy.$$(rootIdentifier)[0].shadowRoot) + $(shadowEl).appendTo(cy.$$(rootIdentifier)[0].shadowRoot!) return $el } @@ -574,6 +572,48 @@ describe('src/cypress/dom/visibility - shadow dom', () => { 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( + `
    +
    + +
    +
    `, + `
    + +
    `, + '#shadow', + ) + + 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( + `
    +
    +
    +
    +

    Example

    + +
    +
    +
    +
    `, + `
    + +
    `, + '#shadow', + ) + + 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', () => { diff --git a/packages/driver/src/dom/coordinates.ts b/packages/driver/src/dom/coordinates.ts index 976f6665e9ef..670e8da325d7 100644 --- a/packages/driver/src/dom/coordinates.ts +++ b/packages/driver/src/dom/coordinates.ts @@ -3,7 +3,7 @@ import $window from './window' import $elements from './elements' import $jquery from './jquery' -const getElementAtPointFromViewport = (doc, x, y) => { +const getElementAtPointFromViewport = (doc: Document, x: number, y: number) => { return $elements.elementFromPoint(doc, x, y) } diff --git a/packages/driver/src/dom/elements/find.ts b/packages/driver/src/dom/elements/find.ts index 16f95fa2017a..caceed6d7295 100644 --- a/packages/driver/src/dom/elements/find.ts +++ b/packages/driver/src/dom/elements/find.ts @@ -171,11 +171,11 @@ export const elementFromPoint = (doc, x, y): HTMLElement => { * By DOM Hierarchy * Compares two elements to see what their relationship is */ -export const isAncestor = ($el, $maybeAncestor) => { +export const isAncestor = ($el: JQuery, $maybeAncestor: JQuery) => { return $jquery.wrap(getAllParents($el[0])).index($maybeAncestor) >= 0 } -export const isChild = ($el, $maybeChild) => { +export const isChild = ($el: JQuery, $maybeChild: JQuery) => { let children = $el.children() if (children.length && children[0].nodeName === 'SHADOW-ROOT') { @@ -185,7 +185,7 @@ export const isChild = ($el, $maybeChild) => { return children.index($maybeChild) >= 0 } -export const isDescendent = ($el1, $el2) => { +export const isDescendent = ($el1: JQuery, $el2?: JQuery) => { if (!$el2) { return false } @@ -328,7 +328,7 @@ export const getContainsSelector = (text, filter = '', options: { return selectors.join() } -export const getInputFromLabel = ($el) => { +export const getInputFromLabel = ($el: JQuery) => { if (!$el.is('label')) { return $([]) } diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts index e2ec1b68d62f..992c8cf026cb 100644 --- a/packages/driver/src/dom/visibility.ts +++ b/packages/driver/src/dom/visibility.ts @@ -177,10 +177,6 @@ const elHasVisibilityHiddenOrCollapse = ($el) => { return elHasVisibilityHidden($el) || elHasVisibilityCollapse($el) } -const elHasVisibilityVisible = ($el) => { - return $el.css('visibility') === 'visible' -} - const elHasVisibilityHidden = ($el) => { return $el.css('visibility') === 'hidden' } @@ -211,11 +207,15 @@ const elHasOverflowHidden = function ($el) { return cssOverflow.includes('hidden') } -const elHasPositionRelative = ($el) => { +const elHasPositionRelative = ($el: JQuery) => { return $el.css('position') === 'relative' } -const elHasPositionAbsolute = ($el) => { +const elHasPositionStatic = ($el: JQuery) => { + return $el.css('position') == null || $el.css('position') === 'static' +} + +const elHasPositionAbsolute = ($el: JQuery) => { return $el.css('position') === 'absolute' } @@ -225,40 +225,44 @@ const elHasClippableOverflow = function ($el) { OVERFLOW_PROPS.includes($el.css('overflow-x')) } -const canClipContent = function ($el, $ancestor) { +const canClipContent = function ($el: JQuery, $ancestor: JQuery) { // can't clip without overflow properties if (!elHasClippableOverflow($ancestor)) { return false } - // fix for 29605 - display: contents if (elHasDisplayContents($ancestor)) { return false } // the closest parent with position relative, absolute, or fixed const $offsetParent = $el.offsetParent() - const isClosestAncsestor = isAncestor($ancestor, $offsetParent) - - // fix for 28638 - when element postion is relative and it's parent absolute - if (elHasPositionRelative($el) && isClosestAncsestor && elHasPositionAbsolute($ancestor)) { - return false - } // 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) && isClosestAncsestor) { + 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 position absolute + // 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'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 ((elHasPositionStatic($el) || elHasPositionRelative($el)) + && elHasPositionAbsolute($offsetParent) + && isDescendent($ancestor, $offsetParent) + && !elHasClippableOverflow($offsetParent) + ) { + return false + } + return true } @@ -272,8 +276,7 @@ export const isW3CFocusable = (el) => { return isFocusable(wrap(el)) && isW3CRendered(el) } -// @ts-ignore -const elAtCenterPoint = function ($el) { +const elAtCenterPoint = function ($el: JQuery) { const doc = $document.getDocumentFromElement($el.get(0)) const elProps = $coordinates.getElementPositioning($el) @@ -284,6 +287,8 @@ const elAtCenterPoint = function ($el) { if (el) { return $jquery.wrap(el) } + + return undefined } const elDescendentsHavePositionFixedOrAbsolute = function ($parent, $child) { @@ -304,7 +309,7 @@ const elHasVisibleChild = function ($el) { }) } -const elIsNotElementFromPoint = function ($el) { +const elIsNotElementFromPoint = function ($el: JQuery) { // 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 @@ -339,10 +344,6 @@ const elIsOutOfBoundsOfAncestorsOverflow = function ($el: JQuery, $ancestor return false } - if (elHasPositionRelative($el) && elHasPositionAbsolute($ancestor)) { - return false - } - // fix for 29605 - display: contents if (elHasDisplayContents($el)) { return false } @@ -409,20 +410,14 @@ const elIsHiddenByAncestors = function ($el, checkOpacity, $origEl = $el) { } if (elHasOverflowHidden($parent) && !elHasDisplayContents($parent) && elHasNoEffectiveWidthOrHeight($parent)) { - // if any of the elements between the parent and origEl - // have fixed or position absolute + // if any of the elements between the parent and origEl have fixed or position absolute return !elDescendentsHavePositionFixedOrAbsolute($parent, $origEl) } - if (elHasVisibilityVisible($parent)) { - return false - } - // continue to recursively walk up the chain until we reach body or html return elIsHiddenByAncestors($parent, checkOpacity, $origEl) } - const parentHasNoClientWidthOrHeightAndOverflowHidden = function ($el: JQuery) { // if we've walked all the way up to body or html then return false if (isUndefinedOrHTMLBodyDoc($el)) { @@ -578,7 +573,6 @@ export const getReasonIsHidden = function ($el, options = { checkOpacity: true } 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.` } - // nested else --___________-- if (elOrAncestorIsFixedOrSticky($el)) { if (elIsNotElementFromPoint($el)) { // show the long element here From 32f8b5d51d6477a4f0602a246b99701fb91cc3a8 Mon Sep 17 00:00:00 2001 From: Matthew Schile Date: Mon, 25 Nov 2024 17:28:05 -0700 Subject: [PATCH 15/18] removing files --- .../driver/cypress/e2e/issues/28638.cy.js | 12 ------------ .../driver/cypress/fixtures/issue-28638.html | 19 ------------------- 2 files changed, 31 deletions(-) delete mode 100644 packages/driver/cypress/e2e/issues/28638.cy.js delete mode 100644 packages/driver/cypress/fixtures/issue-28638.html diff --git a/packages/driver/cypress/e2e/issues/28638.cy.js b/packages/driver/cypress/e2e/issues/28638.cy.js deleted file mode 100644 index 54354e809aaa..000000000000 --- a/packages/driver/cypress/e2e/issues/28638.cy.js +++ /dev/null @@ -1,12 +0,0 @@ -// https://github.com/cypress-io/cypress/issues/28638 -describe('issue 28638', () => { - before(() => { - cy - .viewport(400, 400) - .visit('/fixtures/issue-28638.html') - }) - - it('can click with parent position absolute', () => { - cy.get('#visible-button').click() - }) -}) diff --git a/packages/driver/cypress/fixtures/issue-28638.html b/packages/driver/cypress/fixtures/issue-28638.html deleted file mode 100644 index b9cfc1ec7dd5..000000000000 --- a/packages/driver/cypress/fixtures/issue-28638.html +++ /dev/null @@ -1,19 +0,0 @@ - -
    -
    -
    -
    -

    Example

    -
    - -
    -
    -
    -
    -
    - \ No newline at end of file From c78d180fdae4a32d0205053970111161dcd2efab Mon Sep 17 00:00:00 2001 From: Matthew Schile Date: Mon, 25 Nov 2024 18:03:00 -0700 Subject: [PATCH 16/18] update --- packages/driver/src/dom/visibility.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/driver/src/dom/visibility.ts b/packages/driver/src/dom/visibility.ts index 992c8cf026cb..e0a87477b328 100644 --- a/packages/driver/src/dom/visibility.ts +++ b/packages/driver/src/dom/visibility.ts @@ -252,13 +252,12 @@ const canClipContent = function ($el: JQuery, $ancestor: JQuery Date: Mon, 2 Dec 2024 08:31:44 -0700 Subject: [PATCH 17/18] Update cli/CHANGELOG.md Co-authored-by: Jennifer Shehane --- cli/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index df2aa07b6d55..c40f388b81ad 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -46,7 +46,7 @@ in this [GitHub issue](https://github.com/cypress-io/cypress/issues/30447). Addr - Elements with `display: contents` will no longer use box model calculations for visibility, and correctly show as visible when it is visible. Fixed in [#29680](https://github.com/cypress-io/cypress/pull/29680). Fixes [#29605](https://github.com/cypress-io/cypress/issues/29605). - The CSS pseudo-class `:dir()` is now supported when testing in Electron. Addresses [#29766](https://github.com/cypress-io/cypress/issues/29766). -- Fixed a visibility issue for an absolutely positioned elements if the ancestor has overflow and static position. Fixed in [#29689](https://github.com/cypress-io/cypress/pull/29689). Fixes [#28638](https://github.com/cypress-io/cypress/issues/28638) +- Fixed a visibility issue for absolutely positioned elements if the ancestor has overflow and static position. Fixed in [#29689](https://github.com/cypress-io/cypress/pull/29689). Fixes [#28638](https://github.com/cypress-io/cypress/issues/28638) **Dependency Updates:** From 926a5de6978c509beb8980e1189712a05e5cc04b Mon Sep 17 00:00:00 2001 From: Matt Schile Date: Mon, 2 Dec 2024 08:42:05 -0700 Subject: [PATCH 18/18] Update CHANGELOG.md --- cli/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index a082d9970992..b0921401fe31 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -46,7 +46,7 @@ in this [GitHub issue](https://github.com/cypress-io/cypress/issues/30447). Addr - Elements with `display: contents` will no longer use box model calculations for visibility, and correctly show as visible when it is visible. Fixed in [#29680](https://github.com/cypress-io/cypress/pull/29680). Fixes [#29605](https://github.com/cypress-io/cypress/issues/29605). - The CSS pseudo-class `:dir()` is now supported when testing in Electron. Addresses [#29766](https://github.com/cypress-io/cypress/issues/29766). -- Fixed a visibility issue for absolutely positioned elements if the ancestor has overflow and static position. Fixed in [#29689](https://github.com/cypress-io/cypress/pull/29689). Fixes [#28638](https://github.com/cypress-io/cypress/issues/28638). +- Fixed a visibility issue when the element is positioned `static` or `relative` and the element's offset parent is positioned `absolute`, a descendent of the ancestor, and has no clippable overflow. Fixed in [#29689](https://github.com/cypress-io/cypress/pull/29689). Fixes [#28638](https://github.com/cypress-io/cypress/issues/28638). - Fixed a visibility issue for elements with `textContent` but without a width or height. Fixed in [#29688](https://github.com/cypress-io/cypress/pull/29688). Fixes [#29687](https://github.com/cypress-io/cypress/issues/29687). - Elements whose parent elements has `overflow: clip` and no height/width will now correctly show as hidden. Fixed in [#29778](https://github.com/cypress-io/cypress/pull/29778). Fixes [#23852](https://github.com/cypress-io/cypress/issues/23852).