Check backface visibility when the parents of the target element has css style transform-style: preserve-3d.

[sainthkh]

• Closes backface-visibility: hidden with transform-style: preserve-3d fails the "is.visible" test #5682
• Closes width/height 0 and transform + overflow hidden #6093

User facing changelog

• Checks backface visibility when the parents of the target element has css style transform-style: preserve-3d.
• When width/height is 0px and overflow is hidden, it is invisible even if transform is not none. -> Transform visibility when height/width is set. #6000 couldn't detect this case and it is fixed.

Additional details

Why was this change necessary?

• In Fixed backface visibility. #5591, it covered only when every element has transform-style: flat. When there is an element with transform-style: preserve-3d. Backface visibility didn't work properly.
• Transform visibility when height/width is set. #6000 missed a case where transform and overflow are together.

What is affected by this change?

N/A

Any implementation details to explain?

• Fixed backface visibility. #5591: This changes elIsHiddenByTransform and elIsBackface together.
• width/height 0 and transform + overflow hidden #6093: This changes elHasNoEffectiveWidthOrHeight

How has the user experience changed?

• The test in the issue backface-visibility: hidden with transform-style: preserve-3d fails the "is.visible" test #5682 passes.
• Failed test in https://github.com/cypress-io/cypress-example-piechopper passes.

Backface Visibility Detection cannot be perfect when there is an element with perserve-3d.

After some research, I realized that the behaviors of descendant elements are inconsistent from browser to browser.

And it's a bit unpredictable in the same browsers.

For example, when you hide preserve-3d descendants with flat element like below:

<div class="grandgrandparent" style="backface-visibility: hidden; transform: rotateX(180deg);">
  Grandgrandparent rotateX(180deg)
  <div class="grandparent" style="transform-style: preserve-3d; transform: rotateX(30deg)">
    Grandparent rotateX(30deg)
    <div class="parent" style="transform-style: preserve-3d; transform: rotateX(30deg)">
      Parent rotateX(30deg)
      <div id="a3-1" class="target" style="backface-visibility: hidden;">No transform</div>
    </div>
  </div>
</div>

Chrome:

Firefox:

And there are flat elements between preserve-3dandhidden` elements like below:

<h4>Grandgrandparent Flipped + Grandparent no transform + Parent no transform with hidden + Child Indentity</h4>
<div class="grandgrandparent" style="transform-style: preserve-3d; transform: rotateX(180deg)">
  Grandparent rotateX(180deg)
  <div class="grandparent">
    Grandparent
    <div class="parent" style="backface-visibility: hidden;">
      Parent no transform
      <div id="a2-2-4" class="target" style="transform: rotateX(0deg)">Target</div>
    </div>
  </div>
</div>

<h4>Grandgrandparent Flipped + Grandparent Identity + Parent no transform with hidden + Child Indentity</h4>
<div class="grandgrandparent" style="transform-style: preserve-3d; transform: rotateX(180deg)">
  Grandparent rotateX(180deg)
  <div class="grandparent" style="transform: rotateX(0deg)">
    Grandparent
    <div class="parent" style="backface-visibility: hidden;">
      Parent no transform
      <div id="a2-2-4" class="target" style="transform: rotateX(0deg)">Target</div>
    </div>
  </div>
</div>

Chrome:

Firefox:

So, this PR focuses only on 2 things:

1. When the target element has direct ancestor(s) with 'preserve-3d, then it only checks those preserve-3d` ancestors and ignore others.
2. When the target element has a parent element with flat. It goes up and checks and ignores preserve-3d elements.

When some element goes out of this scope, it returns that it's not a backface. And this decision can be false.

I guess this difference between browsers happened because the transform-related specs are now in draft stage.

PR Tasks

• Have tests been added/updated?
• Has the original issue been tagged with a release in ZenHub?
• Has a PR for user-facing changes been opened in cypress-documentation?
  • We might need to document the limits of backface visibility I described above.
• [NA] Have API changes been updated in the type definitions?
• [NA] Have new configuration options been added to the cypress.schema.json?

[cypress-bot]

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.

[jennifer-shehane]

I verified this fixes the original failing test.

[jennifer-shehane]

@sainthkh A bit of conflict since I merged in your other PR

[sainthkh]

Fixed conflicts and refactored.