Skip to content

Commit

Permalink
Moved and added tests to separate file.
Browse files Browse the repository at this point in the history 
It's created for visual tests.
  • Loading branch information
@sainthkh
sainthkh committed Dec 9, 2019
1 parent 994ab32 commit 1d9c448
Show file tree
Hide file tree
Showing 3 changed files with 200 additions and 61 deletions.
154 changes: 154 additions & 0 deletions packages/driver/test/cypress/fixtures/issue-5682.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
<!doctype html>
<html lang="en">
<head>
<style>
.basic {
background: yellowgreen;
width: 200px;
height: 80px;
}

.grandgrandparent {
background-color: darkcyan;
width: 500px;
height: 120px;
}

.grandparent {
background: brown;
width: 400px;
height: 100px;
}

.parent {
background: blueviolet;
width: 300px;
height: 80px;
}

.target {
background: yellowgreen;
width: 200px;
height: 60px;
}
</style>
</head>
<body>
<div>
<h1>Basic cases</h1>

<h4>No transform</h4>
<div id="b-1" class="basic">No transform</div>

<h4>Rotate &lt; 90deg + backface-invisible</h4>
<div id="b-2" class="basic" style="backface-visibility: hidden; transform: rotateX(45deg)">rotateX(45deg)</div>
<div id="b-3" class="basic" style="backface-visibility: hidden; transform: rotateY(-45deg)">rotateY(-45deg)</div>

<h4>Rotate &gt; 90deg + backface-invisible</h4>
<div id="b-4" class="basic" style="backface-visibility: hidden; transform: rotateX(135deg)">rotateX(135deg)</div>
<div id="b-5" class="basic" style="backface-visibility: hidden; transform: rotateY(-135deg)">rotateY(-135deg)</div>

<h4>Rotate 90deg + backface-invisible</h4>
<div id="b-6" class="basic" style="backface-visibility: hidden; transform: rotateX(90deg)">rotateX(90deg)</div>
<div id="b-7" class="basic" style="backface-visibility: hidden; transform: rotateY(-90deg)">rotateY(-90deg)</div>

<h4>Rotate &gt; 135deg + backface-visible</h4>
<div id="b-8" class="basic" style="transform: rotateX(150deg)">Not hidden + rotateX(150deg)</div>
</div>

<div>
<h1>Affected by flat ancestors</h1>

<div>
<h2>CASE 1: All flat</h2>

<h4>Parent hidden</h4>
<div class="parent" style="backface-visibility: hidden; transform: rotateX(180deg)">
<div id="a1-1" class="target">Hidden by parent</div>
</div>

<h4>Parent Visible</h4>
<div class="parent" style="backface-visibility: hidden;">
<div id="a1-2" class="target">Not hidden by parent</div>
</div>

<h4>Parent rotate 180deg + Child backface-invisible</h4>
<div class="parent" style="transform: rotateX(180deg)">
<div id="a1-3" class="target" style="backface-visibility: hidden;">Parent rotated 180deg</div>
</div>
</div>

<div>
<h2>CASE 2: No transform after preserve-3d</h2>

<h4>Parent rotate 180deg + Child backface-invisible</h4>
<div class="parent" style="transform-style:preserve-3d; transform: rotateX(180deg)">
Parent rotateX(180deg)
<div id="a2-1" class="target" style="backface-visibility: hidden;">Target</div>
</div>

<h4>Parent rotate 45deg + Child rotate 45deg with backface-invisible</h4>
<div class="parent" style="transform-style:preserve-3d; transform: rotateX(45deg)">
Parent rotateX(45deg)
<div id="a2-2" class="target" style="backface-visibility: hidden;transform: rotateX(45deg)">Target rotateX(180deg)</div>
</div>

<h4>Parent rotate 90deg + Child rotate 190deg with backface-invisible</h4>
<div class="parent" style="transform-style:preserve-3d; transform: rotateX(90deg)">
Parent rotateX(90deg)
<div id="a2-3" class="target" style="backface-visibility: hidden;transform: rotateX(190deg)">Target rotateX(190deg)</div>
</div>

<h4>Grandparent rotateX 180deg with preserve-3d + Parent rotate 180deg + Child backface-invisible</h4>
<div class="grandparent" style="transform-style:preserve-3d; transform: rotateX(180deg)">
Grandparent rotateX(180deg)
<div class="parent" style="transform: rotateX(180deg)">
Parent rotateX(180deg)
<div id="a2-1" class="target" style="backface-visibility: hidden;">Target</div>
</div>
</div>
</div>

<div>
<h2>CASE 3: flat + preserver-3d</h2>

<h4>Parent rotate 180deg + Child backface-invisible with flat</h4>
<div class="parent" style="transform-style:preserve-3d; transform: rotateX(180deg)">
Parent rotateX(180deg)
<div id="a3-1" class="target" style="transform-style: flat; backface-visibility: hidden;">Target</div>
</div>

<h4>Grandparent rotateX 60deg with flat + Parent rotate 60deg + Child backface-invisible</h4>
<div class="grandparent" style="transform-style:flat; transform: rotateX(60deg)">
Grandparent rotateX(60deg)
<div class="parent" style="transform-style:preserve-3d; transform: rotateX(60deg)">
Parent rotateX(60deg)
<div id="a2-1" class="target" style="backface-visibility: hidden;">Target</div>
</div>
</div>

<h4>Grandparent rotateX 180deg with flat + Parent rotate 180deg + Child backface-invisible</h4>
<div class="grandparent" style="transform-style:flat; transform: rotateX(180deg)">
Grandparent rotateX(180deg)
<div class="parent" style="transform-style:preserve-3d; transform: rotateX(180deg)">
Parent rotateX(180deg)
<div id="a2-1" class="target" style="backface-visibility: hidden;">Target</div>
</div>
</div>

<h4>Grandgrandparent rotateX 60deg with preserve3d + Grandparent rotateX 60deg with flat + Parent rotate 60deg with preserve3d + Child backface-invisible</h4>
<div class="grandgrandparent" style="transform-style: preserve-3d; transform: rotateX(60deg)">
Grandgrandparent rotateX(60deg)
<div class="grandparent" style="transform-style:flat; transform: rotateX(60deg)">
Grandparent rotateX(60deg)
<div class="parent" style="transform-style:preserve-3d; transform: rotateX(60deg)">
Parent rotateX(60deg)
<div id="a2-1" class="target" style="backface-visibility: hidden;">Target</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

61 changes: 0 additions & 61 deletions packages/driver/test/cypress/integration/dom/visibility_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -442,15 +442,6 @@ describe('src/cypress/dom/visibility', () => {
<div style="transform: scale(1,1)">
<span>TRANSFORMERS</span>
</div>\
`)

this.$parentsWithBackfaceVisibilityHidden = add(`\
<div style="position: absolute; width: 200px; height: 260px; background: red; backface-visibility: hidden;">
<span id="front">front</span>
</div>
<div style="position: absolute; width: 200px; height: 260px; background: blue; backface-visibility: hidden; transform: rotateY(180deg);">
<span id="back" >back</span>
</div>\
`)

this.$ancestorTransformMakesElOutOfBoundsOfAncestor = add(`\
Expand Down Expand Up @@ -916,58 +907,6 @@ describe('src/cypress/dom/visibility', () => {
})
})

describe('css backface-visibility', () => {
describe('element visibility by backface-visibility and rotation', () => {
const add = (el) => {
return $(el).appendTo(cy.$$('body'))
}

it('is visible when there is no transform', () => {
const el = add('<div>No transform</div>')

expect(el).to.be.visible
})

it('is visible when an element is rotated < 90 degrees', () => {
const el = add('<div style="backface-visibility: hidden; transform: rotateX(45deg)">rotateX(45deg)</div>')

expect(el).to.be.visible

const el2 = add('<div style="backface-visibility: hidden; transform: rotateY(-45deg)">rotateY(-45deg)</div>')

expect(el2).to.be.visible
})

it('is invisible when an element is rotated > 90 degrees', () => {
const el = add('<div style="backface-visibility: hidden; transform: rotateX(135deg)">rotateX(135deg)</div>')

expect(el).to.be.hidden

const el2 = add('<div style="backface-visibility: hidden; transform: rotateY(-135deg)">rotateY(-135deg)</div>')

expect(el2).to.be.hidden
})

it('is invisible when an element is rotated in 90 degrees', () => {
const el = add('<div style="backface-visibility: hidden; transform: rotateX(90deg)">rotateX(90deg)</div>')

expect(el).to.be.hidden

const el2 = add('<div style="backface-visibility: hidden; transform: rotateY(-90deg)">rotateY(-90deg)</div>')

expect(el2).to.be.hidden
})
})

it('is visible when backface not visible', function () {
expect(this.$parentsWithBackfaceVisibilityHidden.find('#front')).to.be.visible
})

it('is hidden when backface visible', function () {
expect(this.$parentsWithBackfaceVisibilityHidden.find('#back')).to.be.hidden
})
})

describe('#getReasonIsHidden', () => {
beforeEach(function () {
this.reasonIs = ($el, str) => {
Expand Down
46 changes: 46 additions & 0 deletions packages/driver/test/cypress/integration/issues/5682.spec.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
describe('issue #5682 - backface visibility', () => {
beforeEach(() => {
cy.visit('/fixtures/issue-5682.html')
})

describe('basic cases', () => {
it('is visible when there is no transform', () => {
cy.get('#b-1').should('be.visible')
})

it('is visible when an element is rotated < 90 degrees', () => {
cy.get('#b-2').should('be.visible')
cy.get('#b-3').should('be.visible')
})

it('is invisible when an element is rotated > 90 degrees', () => {
cy.get('#b-4').should('not.be.visible')
cy.get('#b-5').should('not.be.visible')
})

it('is invisible when an element is rotated in exact 90 degrees', () => {
cy.get('#b-6').should('not.be.visible')
cy.get('#b-7').should('not.be.visible')
})

it('is visible when an element is not backface-visibility: hidden but rotated > 90 degrees', () => {
cy.get('#b-8').should('be.visible')
})
})

describe('affected by ancestors', () => {
describe('CASE 1: all transform-style: flat', () => {
it('is invisible when parent is hidden', () => {
cy.get('#a1-1').should('not.be.visible')
})

it('is visible when parent is visible', () => {
cy.get('#a1-2').should('be.visible')
})

it('is visible when parent is rotated > 90 degrees with an element backface-visibility: hidden', () => {
cy.get('#a1-3').should('be.visible')
})
})
})
})

0 comments on commit 1d9c448

Please sign in to comment.