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.

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

backface-visibility: hidden with transform-style: preserve-3d fails the "is.visible" test #5682

Closed
loekup opened this issue Nov 13, 2019 · 5 comments · Fixed by #5916
Closed

backface-visibility: hidden with transform-style: preserve-3d fails the "is.visible" test #5682

loekup opened this issue Nov 13, 2019 · 5 comments · Fixed by #5916

Comments

@loekup
Copy link

@loekup loekup commented Nov 13, 2019

Current behavior:

Currently an element with backface-visibility: hidden; transform: rotateY(180deg); that is inside a parent with transform-style: preserve-3d; transform: rotateY(180deg) will fail the is.visible assertion

The same problem mentioned in #2985 was marked as fixed by #5591 i only think the case where the parent has the css property transform-style: preserve-3d; was forgotten

Desired behavior:

it should not fail the is.visible assertion

Steps to reproduce: (app code and test code)

app code
https://codepen.io/loekup/pen/rNNZqZW

test code

describe('backface-visibility: hidden; test', function () {
    it('should flip and validate the visibility of the card faces', function () {
        cy.visit('index.html')
        cy.get('.front').should('be.visible');
        cy.get('.back').should('not.be.visible');
        cy.get('.container').click();
        cy.get('.front').should('not.be.visible');
        cy.get('.back').should('be.visible');
    });
});

Versions

3.6.1.

@loekup

This comment has been minimized.

Copy link
Author

@loekup loekup commented Nov 19, 2019

Hey guys, any update on this? would it be possible for you guys to confirm that this is an issue ?

@jennifer-shehane

This comment has been minimized.

Copy link
Member

@jennifer-shehane jennifer-shehane commented Dec 6, 2019

Hey @loekup, yes this indeed is not being calculated correctly in Cypress 3.7.0.

index.html

<!DOCTYPE html>
<html>
<body>
  <style type="text/css">
    .container {
      position: relative;
      transform-style: preserve-3d; /* This breaks visible check */
      width: 200px;
      height: 300px;
    }

    .flipped {
      transform: rotateY(180deg);
    }

    .face {
      backface-visibility: hidden;
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .front {
      background: blue;
    }

    .back {
      transform: rotateY(180deg);
      background: red;
    }
  </style>

  <div class="container">
    <div class="face front">
      Front
    </div>
    <div class="face back">
      Back
    </div>
  </div>
  
  <script>
    const container = document.querySelector('.container');
    container.addEventListener('click', () => {
      container.classList.toggle('flipped');
    })
  </script>
</body>
</html>

Failing spec.js

it('should flip and validate the visibility of the card faces', () => {
  cy.visit('index.html')
  cy.get('.front').should('be.visible')
  cy.get('.back').should('not.be.visible')
  cy.get('.container').click()
  cy.get('.front').should('not.be.visible')
  cy.get('.back').should('be.visible')
})

The fix would require some similar logic as was written in https://github.com/cypress-io/cypress/pull/5591/files including tests. cc @sainthkh

@sainthkh

This comment has been minimized.

Copy link
Contributor

@sainthkh sainthkh commented Dec 6, 2019

@jennifer-shehane

This requires a little more complicated matrix calculation. I'm thinking about the edge cases and solution.

@cypress-bot

This comment has been minimized.

Copy link

@cypress-bot cypress-bot bot commented Jan 7, 2020

The code for this is done in cypress-io/cypress#5916, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

@cypress-bot

This comment has been minimized.

Copy link

@cypress-bot cypress-bot bot commented Jan 10, 2020

Released in 3.8.2.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v3.8.2, please open a new issue.

@cypress-bot cypress-bot bot locked as resolved and limited conversation to collaborators Jan 10, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
3 participants
You can’t perform that action at this time.