Description
Current behavior
The problem is best described with this simple example - it is a component-testing of ngx-gallery:
The gallery here displays one image at a time. In the test, I slide from the 1st image to the 2nd one and check that the first one is not.be.visible after.
Cypress in this case checks the coordinates of the element in question and checks whether the element is outside of its parent position and if the parent also has overflow: hidden, it can conclude that the element in question indeed isn’t visible. Which should be my case exactly because one of the parents (viewer element) thinly wraps the current image and completely hides the others with the overflow: hidden.
But cypress thinks it is visible because of the < from the line I shared in the link is not sufficient. It has to be <= in order to work correctly. In my case, the rightmost x-position of the 1st image is compared to the leftmost x-position of the parent, and both have the value of 50px. This looks like the images overlap by 1px, but they don’t, they are placed neatly next to each other. So due to cypress’s implementation of finding the x-positions, <= needs to be used instead of <. I am happy to implement this fix if you'd like.
Desired behavior
Cypress recognizes that the 2 elements - images - are only "touching" but not overlapping and the 1st is therefore not visible.
Test code to reproduce
Cypress Version
12.16
Node version
20.5.0
Operating System
macOS 13.5
Debug Logs
No response
Other
No response