Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Child is visible with Parent max-height: 0 and overflow: clip #23852

Open
tobdru opened this issue Sep 16, 2022 · 3 comments
Open

Child is visible with Parent max-height: 0 and overflow: clip #23852

tobdru opened this issue Sep 16, 2022 · 3 comments
Labels
E2E Issue related to end-to-end testing topic: visibility 👁 Triaged Issue has been routed to backlog. This is not a commitment to have it prioritized by the team.

Comments

@tobdru
Copy link

tobdru commented Sep 16, 2022 •
edited by mschile
Loading

Current behavior

If the parent has max-height: 0 and overflow: hidden/clip cypress interprets the child as visible.

Desired behavior

As the Element is hidden and never can be visible to the user the check '.should('not.be.visible')' should be truthy

Test code to reproduce

<div style="max-height: 0; overflow: clip;">
    <div data-cy="not-visible">
        I should not be visible
    </div>
</div>

cy.get('[data-cy="not-visible"]').should('not.be.visible');

Cypress Version

10.8.0

Node version

16.15.1

Operating System

Windows 10

Debug Logs

No response

Other

No response
@chrisbreiding
Copy link
Contributor

With the given html, the div is visible to the human eye:

Screen Shot 2022-09-19 at 8 50 12 AM

I believe that's because overflow: 'hidden' (with quotes around hidden) is not valid CSS.

Changing it to overflow: hidden (without quotes) causes it not be visible, but then the assertion .should('not.be.visible') also passes.

Screen Shot 2022-09-19 at 8 50 26 AM

Can you verify the assertion still fails for you if it's overflow: hidden?

@tobdru
Copy link
Author

tobdru commented Sep 19, 2022 •
edited
Loading

Oh sry i have rewritten it wrong out of my react example app and in addition i had the wrong state of the code.

Actually it is overflow:clip.

This is the actual rendered in the iframe by cypress (without quotes):

<body>
    <div id="root"><div style="max-height: 0px; overflow: clip;"><div id="hidden">I am not visible</div></div></div>
    <script type="module" src="/src/main.jsx"></script>
</body>

And this is displayed
image

@tobdru tobdru changed the title Child is visible with Parent max-height: 0 and overflow: hidden Child is visible with Parent max-height: 0 and overflow: clip Sep 19, 2022
@chrisbreiding
Copy link
Contributor

Thanks for the quick reply.

I verified it's not working correctly with overflow: clip. I'll route this to a team to look into a fix.

@chrisbreiding chrisbreiding removed their assignment Sep 19, 2022
@nagash77 nagash77 added E2E Issue related to end-to-end testing Triaged Issue has been routed to backlog. This is not a commitment to have it prioritized by the team. and removed routed-to-e2e labels Apr 19, 2023
@senpl senpl mentioned this issue Jul 1, 2024
Merged
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
E2E Issue related to end-to-end testing topic: visibility 👁 Triaged Issue has been routed to backlog. This is not a commitment to have it prioritized by the team.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@nagash77 @chrisbreiding @tobdru