1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Visibility API Operation While Changing Tabs</title>
<meta name="flags" content="interact" />
<script type="text/javascript" src="/resources/testharness.js"></script>
<script type="text/javascript" src="resources/pagevistestharness.js"></script>
</head>
<body>
<h1>Description</h1>
<p>This test validates that the page properly becomes hidden and visible due to switching tabs.</p>
<h1>Manual Test Steps:</h1>
<p>
<ol>
<li> Ensure this page is the foreground and click the "Start Test"</li>
<li> Switch to another tab</li>
<li> Return to the current tab containing this test page</li>
</ol>
Note: This test will automatically timeout and fail if not completed within 60 seconds.
</p>
<button onclick="start_test();">Start Test</button>
<div id="log"></div>
<br />
IFrame with default style:
<br />
<iframe id="childDocShown" src="resources/blank_page_green.html">
iframes unsupported
</iframe>
<hr />
IFrame with "display:none" style:
<br />
<iframe id="childDocHidden" src="resources/blank_page_green.html" style="display:none">
iframes unsupported
</iframe>
<script type="text/javascript" >
var child_doc_shown = null;
var child_doc_hidden = null;
var transition_mode;
var manual_test = null;
var expected_notification_count = 2;
var notification_count = new Array();
var page_docs = new Array();
var notification_handlers = new Array();
var two_notifications = false;
var PAGE_HIDDEN_VAL = "hidden";
var PAGE_VISIBLE_VAL = "visible";
setup({ explicit_done: true });
function test_transition_init()
{
child_doc_shown = document.getElementById("childDocShown").contentDocument;
child_doc_hidden = document.getElementById("childDocHidden").contentDocument;
// fill in data for page documents
page_docs.push([document, "document"]);
page_docs.push([child_doc_shown, "document.getElementById(\"childDocShown\").contentDocument"]);
page_docs.push([child_doc_hidden, "document.getElementById(\"childDocHidden\").contentDocument"]);
notification_handlers[0] = function(){ VerifyNotification(0); };
notification_handlers[1] = function(){ VerifyNotification(1); };
notification_handlers[2] = function(){ VerifyNotification(2); };
for (var i in page_docs)
{
notification_count[i] = 0;
page_docs[i][0].addEventListener("visibilitychange", notification_handlers[i]);
}
test_true(!document.hidden, "Page is visible on load.");
test_true((!child_doc_shown.hidden) && (!child_doc_hidden.hidden),
"All IFrame child documents are visible on load.");
document.addEventListener("visibilitychange", notification_handlers[0]);
document.addEventListener("visibilitychange", VerifyTwoNotifications);
manual_test = AddManual("Browser tab switch has occurred.");
}
function VerifyNotification(doc_index)
{
doc = page_docs[doc_index][0];
docName = page_docs[doc_index][1];
notification_count[doc_index]++;
switch (notification_count[doc_index])
{
case 1:
// First step, check page visibility after tab deselection / minimization.
// hidden should change to true; visibilityState should change to "hidden"
test_true(doc.hidden, docName + ".hidden == true (after tab switch)");
test_true(doc.visibilityState == PAGE_HIDDEN_VAL,
docName + ".visibilityState == \"hidden\" (after tab switch)");
break;
case 2:
//Second step, check page visibility after tab reselection / maximization / restoration.
// hidden should change to false; visibilityState should change to "visible"
test_true(!doc.hidden,
docName + ".hidden == false (after return to original tab)");
test_true(doc.visibilityState == PAGE_VISIBLE_VAL,
docName + ".visibilityState == \"visible\" (after return to original tab)");
// perform tests specific to the main document
if (doc == document)
{
//Verify that a second registration to a different callback also occurred
test_true(two_notifications, "Two registrations (different callbacks) occurred.");
//Verify that a second registration to the same callback did not occur
test_equals(notification_count[doc_index],
expected_notification_count,
"Two registrations (same callback) did not occur.");
// pass the manual item associated with these tests
AddManualResult(manual_test, true);
document.removeEventListener("visibilitychange", VerifyTwoNotifications);
// schedule the rollup
setTimeout(VerifyAllNotifications, 200);
}
//Remove all event listeners and verify that the event does not fire
doc.removeEventListener("visibilitychange", notification_handlers[doc_index]);
break;
case 3:
//This step should not have occurred since the event handlers were cleared
test_true(false, "Event did not fire when event listener is removed.");
//On final step, schedule the rollup
setTimeout(done, 2000);
break;
default:
break;
}
}
function VerifyAllNotifications()
{
//On final step, schedule the rollup
setTimeout(done, 1000);
}
function VerifyTwoNotifications()
{
//This is a duplicate registration on visibilitychange and
//should never get fired. Check that duplicate_notification
//is false to verify that this never occurred.
two_notifications = true;
}
// Manual Test helper functions
function AddManual(test)
{
// add asynchronous test for manual tests
return async_test(test);
}
function AddManualResult(oManualTest, passState)
{
// add assertion to manual test for the pass state
oManualTest.step(function() {assert_true(passState)});
// end manual test
oManualTest.done();
}
function start_test()
{
test_transition_init();
}
</script>
</body>
</html>
|
