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.

Sign up for GitHub

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

Jump to bottom

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
Labels
pkg/driver This is due to an issue in the packages/driver directory topic: visibility 👁 type: bug

Comments

@loekup
Copy link

loekup commented Nov 13, 2019 •
edited by jennifer-shehane

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 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

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

@cypress-bot cypress-bot bot added the stage: ready for work The issue is reproducible and in scope label Dec 6, 2019
@jennifer-shehane jennifer-shehane added pkg/driver This is due to an issue in the packages/driver directory topic: visibility 👁 labels Dec 6, 2019
@jennifer-shehane jennifer-shehane mentioned this issue Dec 6, 2019
Closed
15 tasks
@sainthkh
Copy link
Contributor

sainthkh commented Dec 6, 2019

@jennifer-shehane

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

@sainthkh sainthkh mentioned this issue Dec 9, 2019
Merged
4 tasks
@cypress-bot cypress-bot bot added stage: work in progress stage: needs review The PR code is done & tested, needs review and removed stage: ready for work The issue is reproducible and in scope stage: work in progress labels Dec 9, 2019
@cypress-bot cypress-bot bot added stage: work in progress stage: needs review The PR code is done & tested, needs review and removed stage: needs review The PR code is done & tested, needs review stage: work in progress labels Jan 2, 2020
@cypress-bot cypress-bot bot added stage: pending release and removed stage: needs review The PR code is done & tested, needs review labels Jan 7, 2020
@cypress-bot
Copy link
Contributor

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
Contributor

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.
Assignees
No one assigned
Labels
pkg/driver This is due to an issue in the packages/driver directory topic: visibility 👁 type: bug
Projects
None yet
Milestone
No milestone
4 participants
@jennifer-shehane @JessicaSachs @loekup @sainthkh