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

Fixed backface visibility. #5591

Merged
merged 5 commits into from
Nov 8, 2019
Merged

Fixed backface visibility. #5591

merged 5 commits into from
Nov 8, 2019

Conversation

sainthkh
Copy link
Contributor

@sainthkh sainthkh commented Nov 4, 2019

User facing changelog

When backface-visibility: hidden and rotateX(180deg), to.be.hidden is now true.

Additional details

  • Why was this change necessary?

Like card example provided, sometimes we want something to be invisible when it is rotateX(180deg) or rotateY(180deg).

Now, we can check them out.

  • What is affected by this change?

I just added some tests and related code.

  • Any implementation details to explain?

It uses simplified version of backface culling.

How has the user experience changed?

Now we can check backface.

PR Tasks

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Nov 4, 2019

Thanks for the contribution! Below are some guidelines Cypress uses when doing PR reviews.

  • Please write [WIP] in the title of your Pull Request if your PR is not ready for review - someone will review your PR as soon as the [WIP] is removed.
  • Please familiarize yourself with the PR Review Checklist and feel free to make updates on your PR based on these guidelines.

PR Review Checklist

If any of the following requirements can't be met, leave a comment in the review selecting 'Request changes', otherwise 'Approve'.

User Experience

  • The feature/bugfix is self-documenting from within the product.
  • The change provides the end user with a way to fix their problem (no dead ends).

Functionality

  • The code works and performs its intended function with the correct logic.
  • Performance has been factored in (for example, the code cleans up after itself to not cause memory leaks).
  • The code guards against edge cases and invalid input and has tests to cover it.

Maintainability

  • The code is readable (too many nested 'if's are a bad sign).
  • Names used for variables, methods, etc, clearly describe their function.
  • The code is easy to understood and there are relevant comments explaining.
  • New algorithms are documented in the code with link(s) to external docs (flowcharts, w3c, chrome, firefox).
  • There are comments containing link(s) to the addressed issue (in tests and code).

Quality

  • The change does not reimplement code.
  • There's not a module from the ecosystem that should be used instead.
  • There is no redundant or duplicate code.
  • There are no irrelevant comments left in the code.
  • Tests are testing the code’s intended functionality in the best way possible.

Internal

  • The original issue has been tagged with a release in ZenHub.

@sainthkh
Copy link
Contributor Author

sainthkh commented Nov 4, 2019

I guess big cookie test failed because of timeout.

But interestingly, it doesn't work on my local ubuntu with develop branch code.

@jennifer-shehane jennifer-shehane requested review from kuceb and chrisbreiding and removed request for chrisbreiding November 4, 2019 20:01
@kuceb
Copy link
Contributor

kuceb commented Nov 4, 2019

@sainthkh what happens if the element has rotateY(180deg) and its parent has rotateY(-180deg)? I believe the transform property will say 180 degrees when in reality the element would be visible.

@sainthkh
Copy link
Contributor Author

sainthkh commented Nov 4, 2019

@bkucera I'll check it out.

@sainthkh
Copy link
Contributor Author

sainthkh commented Nov 4, 2019

@bkucera Interestingly, that didn't happen.

I created this code pen and tested with Chrome 78 and Firefox 70 on Ubuntu 18.04. I couldn't see "hello transformed world".

p.s. server-integration-tests failed because of timeout.

@kuceb
Copy link
Contributor

kuceb commented Nov 5, 2019

thanks @sainthkh , I'll rerun CI

packages/driver/src/dom/visibility.js Outdated Show resolved Hide resolved
packages/driver/src/dom/visibility.js Outdated Show resolved Hide resolved
@sainthkh
Copy link
Contributor Author

sainthkh commented Nov 8, 2019

@chrisbreiding Fixed.

@flotwig flotwig merged commit ab8957a into cypress-io:develop Nov 8, 2019
sainthkh added a commit to sainthkh/cypress that referenced this pull request Dec 3, 2019
chrisbreiding pushed a commit that referenced this pull request Dec 5, 2019
* Handle elements hidden by scale.

* Check rotateX(90deg), rotateY(90deg) + Use of getBoundingClientRect

* Added reason message.

* Fixed typo.

Co-Authored-By: Chris Breiding <[email protected]>
Update packages/driver/src/dom/visibility.js

Co-Authored-By: Chris Breiding <[email protected]>
Fixed typo.

* Use numberRegex created for backface-visibility.

* Added test for reason message.

* Added missing message test in #5591
avallete pushed a commit to avallete/cypress that referenced this pull request Dec 10, 2019
…ress-io#5590)

* Handle elements hidden by scale.

* Check rotateX(90deg), rotateY(90deg) + Use of getBoundingClientRect

* Added reason message.

* Fixed typo.

Co-Authored-By: Chris Breiding <[email protected]>
Update packages/driver/src/dom/visibility.js

Co-Authored-By: Chris Breiding <[email protected]>
Fixed typo.

* Use numberRegex created for backface-visibility.

* Added test for reason message.

* Added missing message test in cypress-io#5591
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

backface-visibility: hidden doesn't hide elements from cypress
4 participants