Cypress incorrectly uses the box model of elements that have `display:contents` when determining visibility of child elements

[cacieprins]

Current behavior

Elements that have overflow:hidden and an effective width or height of 0, but are set to display: contents, will incorrectly be determined as not visible.

Desired behavior

Cypress should correctly disregard any calculations regarding the box model of elements that have display: contents, as. these elements are effectively replaced by their children. See: https://drafts.csswg.org/css-display/#valdef-display-contents

Test code to reproduce

With the DOM:

<div id="parent" style="overflow: hidden; height: 0; width: 0; display: contents;">
    <div id="child" style="height:200px; width: 200px; background: #f00"></div>
</div>

Cypress wil determine that #child is not visible:

cy.get('#child').should('be.visible') // this will fail due to overflow:hidden and effective 0 width and/or height, despite display: contents

However, this element is clearly visible, as the browser effectively replaces the #parent element with #child when rendering.

Cypress Version

13.11.0

Node version

v18.17.1

Operating System

macOS 14.3

Debug Logs

No response

Other

No response