Fix TabCaptureApiTest.FullscreenEvents flakiness

chrome/test/data/extensions/api_test/tab_capture/fullscreen_test.js

Index: chrome/test/data/extensions/api_test/tab_capture/fullscreen_test.js
diff --git a/chrome/test/data/extensions/api_test/tab_capture/fullscreen_test.js b/chrome/test/data/extensions/api_test/tab_capture/fullscreen_test.js
index 7c54fe3d93594abcc9fc9bcb6b9f32bdbbb6d61e..00897c0532283ef117cdfd59a37577dd232ddbfe 100644
--- a/chrome/test/data/extensions/api_test/tab_capture/fullscreen_test.js
+++ b/chrome/test/data/extensions/api_test/tab_capture/fullscreen_test.js
@@ -2,49 +2,77 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-window.addEventListener('load', function() {
-  document.body.onclick = function toggleBodyFullscreen() {
+window.addEventListener('load', () => {
+  // Register the fullscreen change listener. This is used to determine when to
+  // signal the C++ side of this test that the document has entered/exited
+  // fullscreen. NOTE: It's very important NOT to use the
+  // tabCapture.onStatusChanged listener to signal the C++ side of this test
+  // because sometimes the document's fullscreen state change lags behind what
+  // the tabCapture API knows about the browser window's fullscreen state.
+  // Otherwise, the C++ side of this test might proceed out-of-sync and fail.
+  // http://crbug.com/675851
+  if (document.fullscreenEnabled) {
+    document.onfullscreenchange = () => {
+      if (document.fullscreenElement)
+        chrome.test.sendMessage('entered_fullscreen');
+    };
+  } else if (document.webkitFullscreenEnabled) {
+    document.onwebkitfullscreenchange = () => {
+      if (document.webkitFullscreenElement)
+        chrome.test.sendMessage('entered_fullscreen');
+    };
+  } else {
+    chrome.test.assertTrue(!'HTML5 Fullscreen API missing');
+  }
+
+  // Register an onclick listener that toggles the entire document into or
+  // out-of fullscreen mode. The clicks are generated by the C++ side of this
+  // test.
+  document.documentElement.onclick = () => {
     if (document.fullscreenElement || document.webkitFullscreenElement) {
       if (document.exitFullscreen)
         document.exitFullscreen();
       else if (document.webkitExitFullscreen)
         document.webkitExitFullscreen();
       else
-        chrome.test.assertTrue(!"HTML5 Fullscreen API missing");
+        chrome.test.assertTrue(!'HTML5 Fullscreen API missing');
     } else {
-      if (document.body.requestFullscreen)
-        document.body.requestFullscreen();
-      else if (document.body.webkitRequestFullscreen)
-        document.body.webkitRequestFullscreen();
+      if (document.documentElement.requestFullscreen)
+        document.documentElement.requestFullscreen();
+      else if (document.documentElement.webkitRequestFullscreen)
+        document.documentElement.webkitRequestFullscreen();
       else
-        chrome.test.assertTrue(!"HTML5 Fullscreen API missing");
+        chrome.test.assertTrue(!'HTML5 Fullscreen API missing');
     }
   };
-});
 
-var mediaStream = null;
-var events = [];
+  let mediaStream = null;
+  const events = [];
 
-chrome.tabCapture.onStatusChanged.addListener(function(info) {
-  if (info.status == 'active') {
-    events.push(info.fullscreen);
-    if (events.length == 3) {
-      chrome.test.assertFalse(events[0]);
-      chrome.test.assertTrue(events[1]);
-      chrome.test.assertFalse(events[2]);
-      mediaStream.getVideoTracks()[0].stop();
-      mediaStream.getAudioTracks()[0].stop();
-      chrome.test.succeed();
+  // Register the tab capture status change listener, which records the changes
+  // to fullscreen state according to the tab capture API implementation. Once
+  // there are three changes, check the results and succeed() the test.
+  chrome.tabCapture.onStatusChanged.addListener(info => {
+    if (info.status == 'active') {
+      events.push(info.fullscreen);
+      if (events.length == 3) {
+        mediaStream.getVideoTracks()[0].stop();
+        mediaStream.getAudioTracks()[0].stop();
+        chrome.test.assertFalse(events[0]);
+        chrome.test.assertTrue(events[1]);
+        chrome.test.assertFalse(events[2]);
+        chrome.test.succeed();
+      }
     }
+  });
 
-    if (info.fullscreen)
-      chrome.test.sendMessage('entered_fullscreen');
-  }
-});
-
-chrome.tabCapture.capture({audio: true, video: true}, function(stream) {
-  chrome.test.assertTrue(!!stream);
-  mediaStream = stream;
-  chrome.test.notifyPass();
-  chrome.test.sendMessage('tab_capture_started');
+  // Now that all listeners are in-place, start tab capture. Once tab capture is
+  // running, notify the C++ side of this test that it may commence with the
+  // "fullscreen toggle mouse clicks."
+  chrome.tabCapture.capture({audio: true, video: true}, stream => {
+    chrome.test.assertTrue(!!stream);
+    mediaStream = stream;
+    chrome.test.notifyPass();
+    chrome.test.sendMessage('tab_capture_started');
+  });
 });