Unexpected visibility check

[nnaydenow]

Hi,

I'm working on testing a piece of code, which you can view here: JSBin Example. The example includes web components and composition, where I aim to reuse a popover-component and display a menu-component with items. I've also implemented the same setup using native elements.

When running tests with Cypress, I'm encountering unexpected behavior with the "be.visible" assertion on these elements.

Here's the code for testing the web components:

it('webcomponent', () => {
  cy.visit('https://output.jsbin.com/sivakuvuja');

  cy.get("#btn")
    .click();

  cy.get("menu-component")
    .should("be.visible");

  cy.get("menu-component")
    .shadow()
    .find("popover-component")
    .should("be.visible");
});

In this case, Cypress fails with an assertion error indicating that popover-component is not visible, even though the visibility assertion for menu-component passes.

For comparison, here is the test code for the native elements:

it('native', () => {
  cy.visit('https://output.jsbin.com/sivakuvuja');

  cy.get("#btn2")
    .click();

  cy.get(".menu-component")
    .should("be.visible");

  cy.get(".menu-component")
    .find(".popover-component")
    .should("be.visible");
});

In this test, Cypress fails with an assertion error stating that .menu-component is not visible.

One difference between these tests is the element dimensions. In the first test, menu-component has dimensions of 0 x 18 (width x height), whereas in the second test, .menu-component has dimensions of 1000 x 0.

I'm confused as to why the visibility assertion passes for the first test, as per Cypress Visibility Guidelines. Cypress documentation specifies that an element is considered hidden if it has a width or height of 0.

Am I missing something here?