[headless] Added onfocus/onblur tests to headless mode tests.

This ensures that onfocus/onblur notifications in new headless mode work as expected. Bug: 1375950 Change-Id: I78608f6b8ad1453b6e5d6b5cc58b9feb568dd2ce Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4188813 Commit-Queue: Peter Kvitek <kvitekp@chromium.org> Reviewed-by: Andrey Kosyakov <caseq@chromium.org> Cr-Commit-Position: refs/heads/main@{#1096442}
chromium · Jan 24, 2023 · b2e5b83 · b2e5b83
1 parent 67d8f59
commit b2e5b83
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 24 deletions.
diff --git a/chrome/browser/headless/headless_mode_protocol_browsertest.cc b/chrome/browser/headless/headless_mode_protocol_browsertest.cc
@@ -198,5 +198,7 @@ void HeadlessModeProtocolBrowserTest::OnConsoleAPICalled(
 }
 
 HEADLESS_MODE_PROTOCOL_TEST(DomFocus, "input/dom-focus.js")
+HEADLESS_MODE_PROTOCOL_TEST(FocusBlurNotifications,
+                            "input/focus-blur-notifications.js")
 
 }  // namespace headless
diff --git a/chrome/browser/headless/test/data/protocol/input/focus-blur-notifications-expected.txt b/chrome/browser/headless/test/data/protocol/input/focus-blur-notifications-expected.txt
@@ -0,0 +1,9 @@
+Tests focus/blur notifications.
+onfocus button1
+onblur  button1
+onfocus button2
+onblur  button2
+onfocus button1
+onblur  button1
+onfocus button2
+quit
diff --git a/chrome/browser/headless/test/data/protocol/input/focus-blur-notifications.js b/chrome/browser/headless/test/data/protocol/input/focus-blur-notifications.js
@@ -0,0 +1,28 @@
+// Copyright 2023 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function(testRunner) {
+  const {page, session, dp} =
+      await testRunner.startBlank('Tests focus/blur notifications.');
+
+  await dp.Runtime.enable();
+
+  dp.Runtime.onConsoleAPICalled(data => {
+    const text = data.params.args[0].value;
+    testRunner.log(text);
+    if (text === 'quit') {
+      testRunner.completeTest();
+    }
+  });
+
+  await dp.Page.enable();
+
+  // Chrome optimizes away onfocus/onblur notifications if the target page
+  // is not active, so activate it explicitly. Note that this is not needed
+  // for the old headless which implicitly sets focus to a navigated page.
+  dp.Page.bringToFront();
+
+  dp.Page.navigate(
+      {url: testRunner.url('/resources/focus-blur-notifications.html')});
+})
diff --git a/chrome/browser/headless/test/data/protocol/input/resources/focus-blur-notifications.html b/chrome/browser/headless/test/data/protocol/input/resources/focus-blur-notifications.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <script>
+    let counter = 0;
+
+    function onLoad() {
+      setTimeout(swapFocus, 0);
+    }
+
+    function swapFocus() {
+      const id = 'button' + (1 + (counter++ & 1));
+      document.getElementById(id).focus();
+
+      if (counter === 4) {
+        console.log('quit');
+      } else {
+        setTimeout(swapFocus, 0);
+      }
+    }
+
+    function onFocus(id) {
+      console.log('onfocus ' + id);
+    }
+    function onBlur(id) {
+      console.log('onblur  ' + id);
+    }
+  </script>
+
+  <body onload="onLoad()">
+    <div>
+      <button id="button1" class="button"
+        onfocus="onFocus('button1')" onblur="onBlur('button1')">
+      Button1
+      </button>
+    </div>
+    <div>
+      <button id="button2" class="button"
+        onfocus="onFocus('button2')" onblur="onBlur('button2')">
+      Button2
+      </button>
+    </div>
+  </body>
+
+</html>
+
diff --git a/headless/test/data/protocol/input/focus-blur-notifications-expected.txt b/headless/test/data/protocol/input/focus-blur-notifications-expected.txt
@@ -1,6 +1,9 @@
 Tests focus/blur notifications.
-onload
 onfocus button1
-onblur button1
+onblur  button1
+onfocus button2
+onblur  button2
 onfocus button1
-onblur button1
+onblur  button1
+onfocus button2
+quit
diff --git a/headless/test/data/protocol/input/focus-blur-notifications.js b/headless/test/data/protocol/input/focus-blur-notifications.js
@@ -11,12 +11,12 @@
   dp.Runtime.onConsoleAPICalled(data => {
     const text = data.params.args[0].value;
     testRunner.log(text);
+    if (text === 'quit') {
+      testRunner.completeTest();
+    }
   });
 
   await dp.Page.enable();
   dp.Page.navigate(
       {url: testRunner.url('/resources/focus-blur-notifications.html')});
-  await dp.Page.onceLoadEventFired();
-
-  testRunner.completeTest();
 })
diff --git a/headless/test/data/protocol/input/resources/focus-blur-notifications.html b/headless/test/data/protocol/input/resources/focus-blur-notifications.html
@@ -1,33 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
   <script>
+    let counter = 0;
+
     function onLoad() {
-      console.log('onload');
-      document.getElementById('button1').focus();
-      document.getElementById('button2').focus();
-      document.getElementById('button2').blur();
+      setTimeout(swapFocus, 0);
+    }
+
+    function swapFocus() {
+      const id = 'button' + (1 + (counter++ & 1));
+      document.getElementById(id).focus();
+
+      if (counter === 4) {
+        console.log('quit');
+      } else {
+        setTimeout(swapFocus, 0);
+      }
     }
 
     function onFocus(id) {
       console.log('onfocus ' + id);
     }
     function onBlur(id) {
-      console.log('onblur ' + id);
+      console.log('onblur  ' + id);
     }
   </script>
 
-  <style>
-    .button {
-      background-image: linear-gradient(#00007f, #00007f);
-      color: white;
-    }
-
-    .button:focus {
-      background-image: linear-gradient(#00ffff, #00ffff);
-      color: blue;
-    }
-  </style>
-
   <body onload="onLoad()">
     <div>
       <button id="button1" class="button"
@@ -37,7 +35,7 @@
     </div>
     <div>
       <button id="button2" class="button"
-        onfocus="onFocus('button1')" onblur="onBlur('button1')">
+        onfocus="onFocus('button2')" onblur="onBlur('button2')">
       Button2
       </button>
     </div>