Skip to content

Commit

Permalink
Improving overflow handling in isShown atom. A bunch of new tests added
Browse files Browse the repository at this point in the history
for Java binding, but someone should reimplement them in JavaScript too
  • Loading branch information
barancev committed Apr 21, 2013
1 parent acd6409 commit e923c13
Show file tree
Hide file tree
Showing 11 changed files with 362 additions and 6 deletions.
30 changes: 30 additions & 0 deletions common/src/web/overflow/x_auto_y_auto.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Page with overflow</title>
<style>
#over {
width:400px;
height: 300px;
overflow-x: auto;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="over">
<div style="width: 5000px;">
<div style="width: 100%; text-align: right;" ><a href="#" id="right" onclick="document.getElementById('right-clicked').innerText='ok'">Click right</a></div>
</div>
<div style="height: 5000px; width: 5000px;">
Right clicked: <span id="right-clicked"></span></br>
Bottom clicked: <span id="bottom-clicked"></span></br>
Bottom-right clicked: <span id="bottom-right-clicked"></span></br>
</div>
<div style="width: 5000px;">
<div style="width: 100%; text-align: right;" ><a href="#" id="bottom-right" onclick="document.getElementById('bottom-right-clicked').innerText='ok'">Click bottom-right</a></div>
</div>
<a href="#" id="bottom" onclick="document.getElementById('bottom-clicked').innerText='ok'">Click bottom</a>
</div>
</body>
</html>
30 changes: 30 additions & 0 deletions common/src/web/overflow/x_auto_y_hidden.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Page with overflow</title>
<style>
#over {
width:400px;
height: 300px;
overflow-x: auto;
overflow-y: hidden;
}
</style>
</head>
<body>
<div id="over">
<div style="width: 5000px;">
<div style="width: 100%; text-align: right;" ><a href="#" id="right" onclick="document.getElementById('right-clicked').innerText='ok'">Click right</a></div>
</div>
<div style="height: 5000px; width: 5000px;">
Right clicked: <span id="right-clicked"></span></br>
Bottom clicked: <span id="bottom-clicked"></span></br>
Bottom-right clicked: <span id="bottom-right-clicked"></span></br>
</div>
<div style="width: 5000px;">
<div style="width: 100%; text-align: right;" ><a href="#" id="bottom-right" onclick="document.getElementById('bottom-right-clicked').innerText='ok'">Click bottom-right</a></div>
</div>
<a href="#" id="bottom" onclick="document.getElementById('bottom-clicked').innerText='ok'">Click bottom</a>
</div>
</body>
</html>
30 changes: 30 additions & 0 deletions common/src/web/overflow/x_auto_y_scroll.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Page with overflow</title>
<style>
#over {
width:400px;
height: 300px;
overflow-x: auto;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="over">
<div style="width: 5000px;">
<div style="width: 100%; text-align: right;" ><a href="#" id="right" onclick="document.getElementById('right-clicked').innerText='ok'">Click right</a></div>
</div>
<div style="height: 5000px; width: 5000px;">
Right clicked: <span id="right-clicked"></span></br>
Bottom clicked: <span id="bottom-clicked"></span></br>
Bottom-right clicked: <span id="bottom-right-clicked"></span></br>
</div>
<div style="width: 5000px;">
<div style="width: 100%; text-align: right;" ><a href="#" id="bottom-right" onclick="document.getElementById('bottom-right-clicked').innerText='ok'">Click bottom-right</a></div>
</div>
<a href="#" id="bottom" onclick="document.getElementById('bottom-clicked').innerText='ok'">Click bottom</a>
</div>
</body>
</html>
30 changes: 30 additions & 0 deletions common/src/web/overflow/x_hidden_y_auto.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Page with overflow</title>
<style>
#over {
width:400px;
height: 300px;
overflow-x: hidden;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="over">
<div style="width: 5000px;">
<div style="width: 100%; text-align: right;" ><a href="#" id="right" onclick="document.getElementById('right-clicked').innerText='ok'">Click right</a></div>
</div>
<div style="height: 5000px; width: 5000px;">
Right clicked: <span id="right-clicked"></span></br>
Bottom clicked: <span id="bottom-clicked"></span></br>
Bottom-right clicked: <span id="bottom-right-clicked"></span></br>
</div>
<div style="width: 5000px;">
<div style="width: 100%; text-align: right;" ><a href="#" id="bottom-right" onclick="document.getElementById('bottom-right-clicked').innerText='ok'">Click bottom-right</a></div>
</div>
<a href="#" id="bottom" onclick="document.getElementById('bottom-clicked').innerText='ok'">Click bottom</a>
</div>
</body>
</html>
30 changes: 30 additions & 0 deletions common/src/web/overflow/x_hidden_y_hidden.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Page with overflow</title>
<style>
#over {
width:400px;
height: 300px;
overflow-x: hidden;
overflow-y: hidden;
}
</style>
</head>
<body>
<div id="over">
<div style="width: 5000px;">
<div style="width: 100%; text-align: right;" ><a href="#" id="right" onclick="document.getElementById('right-clicked').innerText='ok'">Click right</a></div>
</div>
<div style="height: 5000px; width: 5000px;">
Right clicked: <span id="right-clicked"></span></br>
Bottom clicked: <span id="bottom-clicked"></span></br>
Bottom-right clicked: <span id="bottom-right-clicked"></span></br>
</div>
<div style="width: 5000px;">
<div style="width: 100%; text-align: right;" ><a href="#" id="bottom-right" onclick="document.getElementById('bottom-right-clicked').innerText='ok'">Click bottom-right</a></div>
</div>
<a href="#" id="bottom" onclick="document.getElementById('bottom-clicked').innerText='ok'">Click bottom</a>
</div>
</body>
</html>
30 changes: 30 additions & 0 deletions common/src/web/overflow/x_hidden_y_scroll.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Page with overflow</title>
<style>
#over {
width:400px;
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="over">
<div style="width: 5000px;">
<div style="width: 100%; text-align: right;" ><a href="#" id="right" onclick="document.getElementById('right-clicked').innerText='ok'">Click right</a></div>
</div>
<div style="height: 5000px; width: 5000px;">
Right clicked: <span id="right-clicked"></span></br>
Bottom clicked: <span id="bottom-clicked"></span></br>
Bottom-right clicked: <span id="bottom-right-clicked"></span></br>
</div>
<div style="width: 5000px;">
<div style="width: 100%; text-align: right;" ><a href="#" id="bottom-right" onclick="document.getElementById('bottom-right-clicked').innerText='ok'">Click bottom-right</a></div>
</div>
<a href="#" id="bottom" onclick="document.getElementById('bottom-clicked').innerText='ok'">Click bottom</a>
</div>
</body>
</html>
30 changes: 30 additions & 0 deletions common/src/web/overflow/x_scroll_y_auto.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Page with overflow</title>
<style>
#over {
width:400px;
height: 300px;
overflow-x: scroll;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="over">
<div style="width: 5000px;">
<div style="width: 100%; text-align: right;" ><a href="#" id="right" onclick="document.getElementById('right-clicked').innerText='ok'">Click right</a></div>
</div>
<div style="height: 5000px; width: 5000px;">
Right clicked: <span id="right-clicked"></span></br>
Bottom clicked: <span id="bottom-clicked"></span></br>
Bottom-right clicked: <span id="bottom-right-clicked"></span></br>
</div>
<div style="width: 5000px;">
<div style="width: 100%; text-align: right;" ><a href="#" id="bottom-right" onclick="document.getElementById('bottom-right-clicked').innerText='ok'">Click bottom-right</a></div>
</div>
<a href="#" id="bottom" onclick="document.getElementById('bottom-clicked').innerText='ok'">Click bottom</a>
</div>
</body>
</html>
30 changes: 30 additions & 0 deletions common/src/web/overflow/x_scroll_y_hidden.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Page with overflow</title>
<style>
#over {
width:400px;
height: 300px;
overflow-x: scroll;
overflow-y: hidden;
}
</style>
</head>
<body>
<div id="over">
<div style="width: 5000px;">
<div style="width: 100%; text-align: right;" ><a href="#" id="right" onclick="document.getElementById('right-clicked').innerText='ok'">Click right</a></div>
</div>
<div style="height: 5000px; width: 5000px;">
Right clicked: <span id="right-clicked"></span></br>
Bottom clicked: <span id="bottom-clicked"></span></br>
Bottom-right clicked: <span id="bottom-right-clicked"></span></br>
</div>
<div style="width: 5000px;">
<div style="width: 100%; text-align: right;" ><a href="#" id="bottom-right" onclick="document.getElementById('bottom-right-clicked').innerText='ok'">Click bottom-right</a></div>
</div>
<a href="#" id="bottom" onclick="document.getElementById('bottom-clicked').innerText='ok'">Click bottom</a>
</div>
</body>
</html>
30 changes: 30 additions & 0 deletions common/src/web/overflow/x_scroll_y_scroll.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Page with overflow</title>
<style>
#over {
width:400px;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="over">
<div style="width: 5000px;">
<div style="width: 100%; text-align: right;" ><a href="#" id="right" onclick="document.getElementById('right-clicked').innerText='ok'">Click right</a></div>
</div>
<div style="height: 5000px; width: 5000px;">
Right clicked: <span id="right-clicked"></span></br>
Bottom clicked: <span id="bottom-clicked"></span></br>
Bottom-right clicked: <span id="bottom-right-clicked"></span></br>
</div>
<div style="width: 5000px;">
<div style="width: 100%; text-align: right;" ><a href="#" id="bottom-right" onclick="document.getElementById('bottom-right-clicked').innerText='ok'">Click bottom-right</a></div>
</div>
<a href="#" id="bottom" onclick="document.getElementById('bottom-clicked').innerText='ok'">Click bottom</a>
</div>
</body>
</html>
82 changes: 82 additions & 0 deletions java/client/test/org/openqa/selenium/VisibilityTest.java
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,88 @@ public void parentNodeVisibleWhenAllChildrenAreAbsolutelyPositionedAndOverflowIs
assertTrue(element.isDisplayed());
}

@Test
public void testElementHiddenByOverflowXIsNotVisible() {
String[] pages = new String[]{
"overflow/x_hidden_y_hidden.html",
"overflow/x_hidden_y_scroll.html",
"overflow/x_hidden_y_auto.html",
};
for (String page: pages) {
driver.get(appServer.whereIs(page));
WebElement right = driver.findElement(By.id("right"));
System.out.println(right.getLocation());
assertFalse(page, right.isDisplayed());
WebElement bottomRight = driver.findElement(By.id("bottom-right"));
assertFalse(page, bottomRight.isDisplayed());
}
}

@Test
public void testElementHiddenByOverflowYIsNotVisible() {
String[] pages = new String[]{
"overflow/x_hidden_y_hidden.html",
"overflow/x_scroll_y_hidden.html",
"overflow/x_auto_y_hidden.html",
};
for (String page: pages) {
driver.get(appServer.whereIs(page));
WebElement bottom = driver.findElement(By.id("bottom"));
assertFalse(page, bottom.isDisplayed());
WebElement bottomRight = driver.findElement(By.id("bottom-right"));
assertFalse(page, bottomRight.isDisplayed());
}
}

@Test
public void testElementScrollableByOverflowXIsVisible() {
String[] pages = new String[]{
"overflow/x_scroll_y_hidden.html",
"overflow/x_scroll_y_scroll.html",
"overflow/x_scroll_y_auto.html",
"overflow/x_auto_y_hidden.html",
"overflow/x_auto_y_scroll.html",
"overflow/x_auto_y_auto.html",
};
for (String page: pages) {
driver.get(appServer.whereIs(page));
WebElement right = driver.findElement(By.id("right"));
assertTrue(page, right.isDisplayed());
}
}

@Test
public void testElementScrollableByOverflowYIsVisible() {
String[] pages = new String[]{
"overflow/x_hidden_y_scroll.html",
"overflow/x_scroll_y_scroll.html",
"overflow/x_auto_y_scroll.html",
"overflow/x_hidden_y_auto.html",
"overflow/x_scroll_y_auto.html",
"overflow/x_auto_y_auto.html",
};
for (String page: pages) {
driver.get(appServer.whereIs(page));
WebElement bottom = driver.findElement(By.id("bottom"));
assertTrue(page, bottom.isDisplayed());
}
}

@Test
public void testElementScrollableByOverflowXAndYIsVisible() {
String[] pages = new String[]{
"overflow/x_scroll_y_scroll.html",
"overflow/x_scroll_y_auto.html",
"overflow/x_auto_y_scroll.html",
"overflow/x_auto_y_auto.html",
};
for (String page: pages) {
driver.get(appServer.whereIs(page));
WebElement bottomRight = driver.findElement(By.id("bottom-right"));
assertTrue(page, bottomRight.isDisplayed());
}
}

@Test
@Ignore({ANDROID, IPHONE, OPERA, OPERA_MOBILE})
public void tooSmallAWindowWithOverflowHiddenIsNotAProblem() {
Expand Down
Loading

0 comments on commit e923c13

Please sign in to comment.