Skip to content

Commit

Permalink
fix: visibility issue when parent element is clipping (#30934)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mschile
mschile authored Jan 27, 2025
1 parent 1548047 commit 0811921
Show file tree
Hide file tree
Showing 5 changed files with 235 additions and 39 deletions.
15 changes: 5 additions & 10 deletions .circleci/workflows.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,7 @@ mainBuildFilters: &mainBuildFilters
- /^release\/\d+\.\d+\.\d+$/
# use the following branch as well to ensure that v8 snapshot cache updates are fully tested
- 'update-v8-snapshot-cache-on-develop'
- 'chore/update_vue_test_utils'
- 'publish-binary'
- 'chore/fix_windows_kitchensink'
- 'mschile/issue-30922'

# usually we don't build Mac app - it takes a long time
# but sometimes we want to really confirm we are doing the right thing
Expand All @@ -43,8 +41,7 @@ macWorkflowFilters: &darwin-workflow-filters
- equal: [ develop, << pipeline.git.branch >> ]
# use the following branch as well to ensure that v8 snapshot cache updates are fully tested
- equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
- equal: [ 'chore/update_vue_test_utils', << pipeline.git.branch >> ]
- equal: [ 'cacie/fix-hook-test-stack-analysis', << pipeline.git.branch >> ]
- equal: [ 'mschile/issue-30922', << pipeline.git.branch >> ]
- matches:
pattern: /^release\/\d+\.\d+\.\d+$/
value: << pipeline.git.branch >>
Expand All @@ -55,8 +52,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
- equal: [ develop, << pipeline.git.branch >> ]
# use the following branch as well to ensure that v8 snapshot cache updates are fully tested
- equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
- equal: [ 'chore/update_binary_branch', << pipeline.git.branch >> ]
- equal: [ 'cacie/fix-hook-test-stack-analysis', << pipeline.git.branch >> ]
- equal: [ 'mschile/issue-30922', << pipeline.git.branch >> ]
- matches:
pattern: /^release\/\d+\.\d+\.\d+$/
value: << pipeline.git.branch >>
Expand All @@ -79,8 +75,7 @@ windowsWorkflowFilters: &windows-workflow-filters
- equal: [ develop, << pipeline.git.branch >> ]
# use the following branch as well to ensure that v8 snapshot cache updates are fully tested
- equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
- equal: [ 'ryanm/chore/electron-33-upgrade', << pipeline.git.branch >> ]
- equal: [ 'chore/fix_windows_kitchensink', << pipeline.git.branch >> ]
- equal: [ 'mschile/issue-30922', << pipeline.git.branch >> ]
- matches:
pattern: /^release\/\d+\.\d+\.\d+$/
value: << pipeline.git.branch >>
Expand Down Expand Up @@ -156,7 +151,7 @@ commands:
name: Set environment variable to determine whether or not to persist artifacts
command: |
echo "Setting SHOULD_PERSIST_ARTIFACTS variable"
echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "chore/update_vue_test_utils" && "$CIRCLE_BRANCH" != chore/fix_windows_kitchensink ]]; then
echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "mschile/issue-30922" ]]; then
export SHOULD_PERSIST_ARTIFACTS=true
fi' >> "$BASH_ENV"
# You must run `setup_should_persist_artifacts` command and be using bash before running this command
Expand Down
3 changes: 3 additions & 0 deletions cli/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ _Released 1/28/2025 (PENDING)_
**Bugfixes:**

- Fixed an issue where Cypress would incorrectly navigate to `about:blank` when test isolation was disabled and the last test would fail and then retry. Fixes [#28527](https://github.com/cypress-io/cypress/issues/28527).
- Fixed a regression introduced in [`14.0.0`](https://docs.cypress.io/guides/references/changelog#14-0-0) where an element would not return the correct visibility if its offset parent was within the clipping element. Fixes [#30922](https://github.com/cypress-io/cypress/issues/30922).
- Fixed a regression introduced in [`14.0.0`](https://docs.cypress.io/guides/references/changelog#14-0-0) where the incorrect visiblity would be returned when either `overflow-x` or `overflow-y` was visible but the other one was clipping. Fixed in [#30934](https://github.com/cypress-io/cypress/pull/30934).
- Fixed an issue where an `option` element would not return the correct visibility if its parent element has a clipping overflow. Fixed in [#30934](https://github.com/cypress-io/cypress/pull/30934).
- Fixed an issue where non-HTMLElement(s) may fail during assertions. Fixes [#30944](https://github.com/cypress-io/cypress/issues/30944)

**Misc:**
Expand Down
189 changes: 180 additions & 9 deletions packages/driver/cypress/e2e/dom/visibility.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ describe('src/cypress/dom/visibility', () => {
return $(el).appendTo(cy.$$('body'))
}

const reasonIs = ($el, str) => {
const reasonIs = ($el: JQuery, str: string) => {
expect(dom.getReasonIsHidden($el)).to.eq(str)
}

Expand Down Expand Up @@ -995,10 +995,6 @@ describe('src/cypress/dom/visibility', () => {
})

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(`
Expand All @@ -1015,10 +1011,6 @@ describe('src/cypress/dom/visibility', () => {
})

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(`
Expand All @@ -1043,6 +1035,185 @@ describe('src/cypress/dom/visibility', () => {

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')
})

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', () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/driver/src/dom/elements/find.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const findParent = (el, condition) => {
return collectParent(el)
}

export const getFirstParentWithTagName = ($el, tagName) => {
export const getFirstParentWithTagName = ($el: JQuery, tagName: string) => {
if (isUndefinedOrHTMLBodyDoc($el) || !tagName) {
return null
}
Expand Down
Loading

4 comments on commit 0811921

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 0811921 Jan 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the linux x64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/14.0.1/linux-x64/develop-0811921dd026146041e1fcae60755dc4f5a21398/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 0811921 Jan 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the linux arm64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/14.0.1/linux-arm64/develop-0811921dd026146041e1fcae60755dc4f5a21398/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 0811921 Jan 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the win32 x64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/14.0.1/win32-x64/develop-0811921dd026146041e1fcae60755dc4f5a21398/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 0811921 Jan 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the darwin x64 version of the Test Runner.

Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/14.0.1/darwin-x64/develop-0811921dd026146041e1fcae60755dc4f5a21398/cypress.tgz

Please sign in to comment.