fix: make visible children of display contents pass the should('be.visible') test

[bastiansmn]

Make children of display contents that are visible pass the should('be.visible') test

• Closes An ancestor element with display: contents and overflow: hidden causes visibility check to fail #25199

Additional details

This PR doesn't fix the fact that the element marked as display: contents; overflow: hidden is still not visible since it doesn't fit the visibility definition.
See more with the related discussion

Steps to test

On a project with Cypress installed, insert an element with bugged-CSS properties.

<section style="display: contents; overflow: hidden">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, harum.
  </p>
</section>

Now with Cypress, test the following :

describe('example to-do app', () => {
  beforeEach(() => {
    cy.visit('<your_url>')
  })

  it('p element should be visible', () => {
    cy.get('<querySelector path>').should("be.visible")
  })
})

How has the user experience changed?

PR Tasks

• Have tests been added/updated?
• Has a PR for user-facing changes been opened in cypress-documentation?
• Have API changes been updated in the type definitions?

I actually don't think it's a user-facing change, but maybe we can add something to the documentation.
I also don't find any tests to the driver package.

Since it is my first PR, can you tell me if I'm missing something ?

[CLAassistant]

All committers have signed the CLA.

[cypress-app-bot]

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.

[cypress]

2 failed and 33 flaky tests on run #46622 ↗︎

2

27300

1308

0

33

Details:

Fix 25199: Make children of display contents that are visible pass the should('b...
Project: cypress	Commit: 6616f6a8bb
Status: Failed	Duration: 19:55 💡
Started: May 21, 2023 4:09 PM	Ended: May 21, 2023 4:29 PM

  debug.cy.ts • 1 failed test • app-e2e

View Output Video

Test		Artifacts
App - Debug Page > shows information about a failed spec		Output Screenshots Video

  scaffold-project.cy.ts • 1 failed test • launchpad-e2e

View Output Video

Test		Artifacts
scaffolding new projects > generates valid config file for pristine project without cypress installed		Output Screenshots Video

  create-from-component.cy.ts • 2 flaky tests • app-e2e

View Output Video

Test		Artifacts
... > runs generated spec		Output Screenshots Video
... > runs generated spec		Output Screenshots Video

  runs.cy.ts • 1 flaky test • app-e2e

View Output Video

Test		Artifacts
App: Runs > Runs - Create Project > when a project is created, injects new projectId into the config file, and sends expected UTM params		Output Screenshots Video

  specs_list_latest_runs.cy.ts • 1 flaky test • app-e2e

View Output Video

Test		Artifacts
App/Cloud Integration - Latest runs and Average duration > when no runs are recorded > shows placeholders for all visible specs		Output Screenshots Video

  cypress-in-cypress-component.cy.ts • 1 flaky test • app-e2e

View Output Video

Test		Artifacts
Cypress In Cypress CT > default config > redirects to the specs list with error if a spec is not found		Output Screenshots Video

  cypress-origin-communicator.cy.ts • 1 flaky test • app-e2e

View Output Video

Test		Artifacts
Cypress In Cypress Origin Communicator > cy.origin passivity with app interactions > passes upon test reload mid test execution		Output Screenshots Video

The first 5 flaky specs are shown, see all 18 specs in Cypress Cloud.

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[warrensplayer]

@bastiansmn Thanks so much for this fix. I apologize for taking so long to get back with you.

Can you please write a test for this update? You can create one similar to the test in this PR: #8130

Also, please pull in the latest from develop and update the changelog entry. Thanks again!