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