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 · May be fixed by qsays/grafana#1
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 · May be fixed by qsays/grafana#1

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
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
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
Copy link
Collaborator

@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 cypress-bot bot added stage: work in progress stage: needs review and removed stage: ready for work stage: work in progress labels Dec 9, 2019
@cypress-bot cypress-bot bot added stage: work in progress stage: needs review and removed stage: needs review stage: work in progress labels Jan 2, 2020
@cypress-bot cypress-bot bot added stage: pending release and removed stage: needs review labels Jan 7, 2020
@cypress-bot
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
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 removed the stage: pending release label Jan 10, 2020
@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.