Skip to content

Commit c4f25be

Browse files
Govi2020Govi2020
committed
Updated Visibilty test page to use isElementVisible
1 parent bff3380 commit c4f25be

File tree

1 file changed

+46
-28
lines changed

1 file changed

+46
-28
lines changed

‎test_harnesses/visibility_test.html

Lines changed: 46 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
This demonstrates the effectiveness a method for testing for visibility elements on various
33
conditions.
44
-->
5-
<!DOCTYPE html>
5+
<!doctype html>
66
<html>
77
<head>
88
<title>Visibility test</title>
9-
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
9+
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
1010
<style type="text/css" media="screen">
1111
* {
1212
font-family: sans;
@@ -21,34 +21,34 @@
2121
table {
2222
border-collapse: separate;
2323
}
24-
tr, td {
24+
tr,
25+
td {
2526
border: 2px solid black;
2627
margin: 0;
2728
padding: 2px;
2829
}
2930
</style>
3031

32+
<scirpt src="../lib/dom_utils.js"></scirpt>
33+
3134
<script charset="utf-8">
3235
window.addEventListener("load", displayTests, false);
3336
window.addEventListener("load", checkDivsForVisibility, false);
3437

3538
var visibilityTests = [
3639
{
37-
"description": "BoundingClientRect is inside viewport",
38-
"test": function (element) {
40+
description: "BoundingClientRect is inside viewport",
41+
test: function (element) {
3942
var rect = element.getBoundingClientRect();
40-
if (
41-
!rect || rect.top > window.innerHeight || rect.bottom < 0 ||
42-
rect.left > window.innerWidth || rect.right < 0
43-
) {
43+
if (!rect || !DomUtils.isElementVisible(element,{partialCheck: true})) {
4444
return false;
4545
}
4646
return true;
4747
},
4848
},
4949
{
50-
"description": "BoundingClientRect has nonzero dimensions",
51-
"test": function (element) {
50+
description: "BoundingClientRect has nonzero dimensions",
51+
test: function (element) {
5252
var rect = element.getBoundingClientRect();
5353
if (!rect || rect.width == 0 || rect.height == 0) {
5454
return false;
@@ -57,8 +57,8 @@
5757
},
5858
},
5959
{
60-
"description": "Is visible and displayed",
61-
"test": function (element) {
60+
description: "Is visible and displayed",
61+
test: function (element) {
6262
var computedStyle = window.getComputedStyle(element, null);
6363
if (
6464
computedStyle.getPropertyValue("visibility") != "visible" ||
@@ -70,8 +70,8 @@
7070
},
7171
},
7272
{
73-
"description": "Has ClientRect",
74-
"test": function (element) {
73+
description: "Has ClientRect",
74+
test: function (element) {
7575
var clientRect = element.getClientRects()[0];
7676
if (!clientRect) {
7777
return false;
@@ -80,10 +80,14 @@
8080
},
8181
},
8282
{
83-
"description": "ClientRect has nonzero dimensions",
84-
"test": function (element) {
83+
description: "ClientRect has nonzero dimensions",
84+
test: function (element) {
8585
var clientRect = element.getClientRects()[0];
86-
if (!clientRect || clientRect.width == 0 || clientRect.height == 0) {
86+
if (
87+
!clientRect ||
88+
clientRect.width == 0 ||
89+
clientRect.height == 0
90+
) {
8791
return false;
8892
}
8993
return true;
@@ -93,8 +97,12 @@
9397

9498
function displayTests() {
9599
for (var i = 0; i < visibilityTests.length; i++) {
96-
document.getElementById("testDescriptions").innerHTML += "<b>Test " + (i + 1) +
97-
": </b>" + visibilityTests[i].description + "<br/>";
100+
document.getElementById("testDescriptions").innerHTML +=
101+
"<b>Test " +
102+
(i + 1) +
103+
": </b>" +
104+
visibilityTests[i].description +
105+
"<br/>";
98106
}
99107
}
100108

@@ -135,7 +143,9 @@
135143
var td = makeTag("td", expectedResult);
136144
td.style.background = netResult === expectedResult ? "#fff" : "#ccf";
137145
table.appendChild(td);
138-
table.appendChild(makeTag("td", divs[i].getAttribute("data-comment")));
146+
table.appendChild(
147+
makeTag("td", divs[i].getAttribute("data-comment")),
148+
);
139149

140150
// hide the test cases once we're done with them
141151
divs[i].style.visibility = "hidden";
@@ -153,51 +163,59 @@
153163
</table>
154164

155165
<div id="testContainer" style="position: absolute; top: 0; left: 0">
156-
<span class="testElement" data-expectedresult="1" data-comment="default">test</span>
166+
<span class="testElement" data-expectedresult="1" data-comment="default"
167+
>test</span
168+
>
157169

158170
<span
159171
class="testElement"
160172
data-expectedresult="0"
161173
style="visibility: hidden"
162174
data-comment="visibility: hidden"
163-
>test</span>
175+
>test</span
176+
>
164177

165178
<div style="visibility: hidden">
166179
<span
167180
class="testElement"
168181
data-expectedresult="0"
169182
data-comment="nested in an element that has visibility: hidden"
170-
>test</span>
183+
>test</span
184+
>
171185
</div>
172186

173187
<span
174188
class="testElement"
175189
data-expectedresult="0"
176190
style="display: none"
177191
data-comment="display: none"
178-
>test</span>
192+
>test</span
193+
>
179194

180195
<div style="display: none">
181196
<span
182197
class="testElement"
183198
data-expectedresult="0"
184199
data-comment="nested in an element that has display: none"
185-
>test</span>
200+
>test</span
201+
>
186202
</div>
187203

188204
<span
189205
class="testElement"
190206
data-expectedresult="0"
191207
style="position: absolute; top: 2000px"
192208
data-comment="outside viewport"
193-
>test</span>
209+
>test</span
210+
>
194211

195212
<div style="opacity: 0">
196213
<span
197214
class="testElement"
198215
data-expectedresult="1"
199216
data-comment="nested in an element that has opacity:0"
200-
>test</span>
217+
>test</span
218+
>
201219
</div>
202220
<div
203221
class="testElement"

0 commit comments

Comments
 (0)