Bug 1690607 [wpt PR 27461] - Portals: focus() inside portal should ch…

…ange active element, a=testonly Automatic update from web-platform-tests Portals: focus() inside portal should change active element Allows a portal document's activeElement to update when focus is called. Note that focus events won't be dispatched as the portal doesn't get page focus, and the portal WebContents isn't set as the focused WebContents (with the exception of orphaned portals). Updating the activeElement also means an autofocused element inside a portal will receive focus when the portal is activated. More discussion here: WICG/portals#257 Change-Id: If67be1f424114653983b473a80c515337d49596a Bug: 1059404 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2566072 Commit-Queue: Adithya Srinivasan <[email protected]> Reviewed-by: Lucas Gadani <[email protected]> Reviewed-by: Jeremy Roman <[email protected]> Reviewed-by: Alex Moshchuk <[email protected]> Reviewed-by: David Trainor <[email protected]> Cr-Commit-Position: refs/heads/master@{#853647} -- wpt-commits: a507854e826d126010758ba44847d1b67fb29c01 wpt-pr: 27461
mozilla · Feb 16, 2021 · 002470f · 002470f
1 parent 65ded6d
commit 002470f
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 3 deletions.
diff --git a/testing/web-platform/tests/portals/portals-focus.sub.html b/testing/web-platform/tests/portals/portals-focus.sub.html
@@ -29,6 +29,19 @@
     }
   }, "test that an element inside a portal cannot steal focus");
 
+  promise_test(async () => {
+    let portal = await createPortal(document, new URL("resources/focus-page-with-button.html", location.href));
+    try {
+      let activeElementUpdated = new Promise(r => {
+        portal.onmessage = e => r(e.data.activeElementUpdated)
+      });
+      portal.postMessage('focus-update-active-element');
+      assert_true(await activeElementUpdated);
+    } finally {
+      document.body.removeChild(portal);
+    }
+  }, "test that activeElement inside a portal is updated after focus() is called");
+
   promise_test(async t => {
     let portal = await createPortal(document, new URL("resources/focus-page-with-x-origin-iframe.sub.html", location.href));
     try {
@@ -42,6 +55,19 @@
     }
   }, "test that an element inside a portal's x-origin subframe cannot steal focus");
 
+  promise_test(async () => {
+    let portal = await createPortal(document, new URL("resources/focus-page-with-x-origin-iframe.sub.html", location.href));
+    try {
+      portal.postMessage("focus-update-active-element");
+      let {activeElementUpdated} = await new Promise(r => {
+        portal.onmessage = e => r(e.data);
+      });
+      assert_true(activeElementUpdated);
+    } finally {
+      document.body.removeChild(portal);
+    }
+  }, "test that a portal's x-origin subframe becomes active element on focus");
+
   promise_test(async t => {
     let win = await openBlankPortalHost();
     let doc = win.document;
@@ -87,6 +113,28 @@
     }
   }, "test that a x-origin iframe inside an adopted portal cannot steal focus");
 
+  promise_test(async () => {
+    let win = await openBlankPortalHost();
+    let doc = win.document;
+    try {
+      let portal = await createPortal(doc, new URL("resources/focus-page-with-autofocus.html", location.href));
+      portal.postMessage('check-active-element');
+      let result = await new Promise(r => {
+        portal.onmessage = e => r(e.data);
+      });
+      assert_true(result, "autofocused element is active element");
+
+      await portal.activate();
+      win.portalHost.postMessage('check-active-element');
+      result = await new Promise(r => {
+        win.portalHost.onmessage = e => r(e.data)
+      });
+      assert_true(result, "autofocused element is still active element");
+    } finally {
+      win.close();
+    }
+  }, "test that autofocus inside a portal works");
+
   const TAB = "\ue004"; // https://w3c.github.io/webdriver/#keyboard-actions
   const SPACE = " "
   const RETURN = "\r";

diff --git a/testing/web-platform/tests/portals/resources/focus-page-with-autofocus.html b/testing/web-platform/tests/portals/resources/focus-page-with-autofocus.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<body>
+  <button id="one">one</button>
+  <button id="two" autofocus>two</button>
+  <button id="three">three</button>
+  <script>
+    function messageHandler(e) {
+      if (e.data === 'check-active-element') {
+        let autofocusedButton = document.querySelector('#two');
+        e.source.postMessage(document.activeElement === autofocusedButton);
+      }
+    }
+
+    window.portalHost.onmessage = messageHandler;
+    window.onportalactivate = e => {
+      let portal = e.adoptPredecessor();
+      portal.onmessage = messageHandler;
+      document.body.appendChild(portal);
+    }
+  </script>
+</body>
diff --git a/testing/web-platform/tests/portals/resources/focus-page-with-button.html b/testing/web-platform/tests/portals/resources/focus-page-with-button.html
@@ -7,6 +7,12 @@
         button.onfocus = () => e.source.postMessage({focused: true}, {targetOrigin: "*"});
         button.focus();
       }
+
+      if (e.data == "focus-update-active-element") {
+        let button = document.querySelector("button");
+        button.focus();
+        e.source.postMessage({activeElementUpdated: document.activeElement === button}, {targetOrigin: "*"});
+      }
     }
 
     if (window.portalHost)

diff --git a/testing/web-platform/tests/portals/resources/focus-page-with-x-origin-iframe.sub.html b/testing/web-platform/tests/portals/resources/focus-page-with-x-origin-iframe.sub.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <body>
   <script>
-    function handleMessage(e) {
-      if (e.data == "focus") {
+    async function handleMessage(e) {
+      if (e.data == "focus" || e.data == "focus-update-active-element") {
         let iframe = document.querySelector("iframe");
-        iframe.contentWindow.postMessage("focus", "*");
+        iframe.contentWindow.postMessage(e.data, "*");
       }
     }