From be63004724457313a3dbd1b443f9353515fea60b Mon Sep 17 00:00:00 2001
From: Mason Freed <masonf@chromium.org>
Date: Tue, 31 May 2022 04:26:13 +0000
Subject: [PATCH] Bug 1771532 [wpt PR 34238] - Rename :popup-open pseudo class
 to :top-layer, a=testonly

Automatic update from web-platform-tests
Rename :popup-open pseudo class to :top-layer

This CL just does a rename for the :top-layer pseudo class. It does
not change behavior, which is/was that this pseudo class only applies
to elements using the Popup API [1], and not to all elements that
might inhabit the top layer. That will need to wait for a CSSWG
resolution. But for now, the [2] resolution means we should use this
pseudo class for the Popup API prototype starting now.

[1] https://open-ui.org/components/popup.research.explainer
[2] https://github.com/openui/open-ui/issues/470#issuecomment-1138868669

Bug: 1307772
Change-Id: I81a89132b84346a360d7b580f5f39be9da697bdc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3668918
Commit-Queue: Dan Clark <daniec@microsoft.com>
Auto-Submit: Mason Freed <masonf@chromium.org>
Reviewed-by: Dan Clark <daniec@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1008430}

--

wpt-commits: 4f944e32b46acfc971af4ce345fc6b511aea59fe
wpt-pr: 34238
---
 .../selectmenu-parts-structure.tentative.html |  10 +-
 .../popup-anchor-nesting.tentative.html       |   8 +-
 .../popup-attribute-basic.tentative.html      |  22 +-
 .../popups/popup-defaultopen-2.tentative.html |   4 +-
 .../popups/popup-defaultopen.tentative.html   |  16 +-
 .../popups/popup-events.tentative.html        |  10 +-
 .../popups/popup-focus.tentative.html         |  34 +--
 .../popup-inside-display-none.tentative.html  |   2 +-
 .../popup-invoking-attribute.tentative.html   |   4 +-
 ...pup-light-dismiss-on-scroll.tentative.html |   2 +-
 .../popups/popup-light-dismiss.tentative.html | 210 +++++++++---------
 ...opup-not-keyboard-focusable.tentative.html |   8 +-
 .../popups/popup-removal-2.tentative.html     |   8 +-
 .../popups/popup-removal.tentative.html       |   4 +-
 .../popups/popup-shadow-dom.tentative.html    |  24 +-
 .../popups/popup-stacking.tentative.html      |  14 +-
 ...opup-top-layer-interactions.tentative.html |   2 +-
 .../popups/popup-types.tentative.html         |  16 +-
 18 files changed, 199 insertions(+), 199 deletions(-)

diff --git a/testing/web-platform/tests/html/semantics/forms/the-selectmenu-element/selectmenu-parts-structure.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-selectmenu-element/selectmenu-parts-structure.tentative.html
index 927b45cdc15b3..7a11b57fcb786 100644
--- a/testing/web-platform/tests/html/semantics/forms/the-selectmenu-element/selectmenu-parts-structure.tentative.html
+++ b/testing/web-platform/tests/html/semantics/forms/the-selectmenu-element/selectmenu-parts-structure.tentative.html
@@ -208,13 +208,13 @@
     const selectMenu1Popup = document.getElementById("selectMenu1-popup");
     const selectMenu1Button = document.getElementById("selectMenu1-button");
     const selectMenu1Child2 = document.getElementById("selectMenu1-child2");
-    assert_false(selectMenu1Popup.matches(':popup-open'));
+    assert_false(selectMenu1Popup.matches(':top-layer'));
     selectMenu1Button.click();
-    assert_false(selectMenu1Popup.matches(':popup-open'), "Clicking a button part that is a descendant of the listbox part should have no effect");
+    assert_false(selectMenu1Popup.matches(':top-layer'), "Clicking a button part that is a descendant of the listbox part should have no effect");
 
     assert_equals(selectMenu1.value, "one");
     await clickOn(selectMenu1);
-    assert_true(selectMenu1Popup.matches(':popup-open'));
+    assert_true(selectMenu1Popup.matches(':top-layer'));
     await clickOn(selectMenu1Child2);
     assert_equals(selectMenu1.value, "two", "Clicking an <option> should change the value");
   }, "To receive button part controller code, an element labeled as a button must not be a descendant of the listbox part in a flat tree traversal");
@@ -226,9 +226,9 @@
     const selectMenu2Child2 = document.getElementById("selectMenu2-child2");
     const selectMenu2Child4 = document.getElementById("selectMenu2-child4");
 
-    assert_false(selectMenu2Popup.matches(':popup-open'));
+    assert_false(selectMenu2Popup.matches(':top-layer'));
     await clickOn(selectMenu2Button);
-    assert_false(selectMenu2Popup.matches(':popup-open'), "Clicking a button part should not show an invalid listbox part");
+    assert_false(selectMenu2Popup.matches(':top-layer'), "Clicking a button part should not show an invalid listbox part");
 
     assert_equals(selectMenu2.value, "three");
     await clickOn(selectMenu2Button);
diff --git a/testing/web-platform/tests/html/semantics/popups/popup-anchor-nesting.tentative.html b/testing/web-platform/tests/html/semantics/popups/popup-anchor-nesting.tentative.html
index d7e5784ba4d6a..c7ebe58ec7c46 100644
--- a/testing/web-platform/tests/html/semantics/popups/popup-anchor-nesting.tentative.html
+++ b/testing/web-platform/tests/html/semantics/popups/popup-anchor-nesting.tentative.html
@@ -46,15 +46,15 @@
     setup({ explicit_done: true });
 
     popup2.showPopup();
-    assert_false(popup1.matches(':popup-open'));
-    assert_true(popup2.matches(':popup-open'));
+    assert_false(popup1.matches(':top-layer'));
+    assert_true(popup2.matches(':top-layer'));
     await clickOn(button1);
     test(t => {
       // Button1 is the anchor for popup1, and an ancestor of popup2.
       // Since popup2 is open, but not popup1, button1 should not be
       // the anchor of any open popup. So popup2 should be closed.
-      assert_false(popup2.matches(':popup-open'));
-      assert_true(popup1.matches(':popup-open'));
+      assert_false(popup2.matches(':top-layer'));
+      assert_true(popup1.matches(':top-layer'));
     },'Nested popups (inside anchor elements) do not affect light dismiss');
 
     done();
diff --git a/testing/web-platform/tests/html/semantics/popups/popup-attribute-basic.tentative.html b/testing/web-platform/tests/html/semantics/popups/popup-attribute-basic.tentative.html
index 9d74476d4e1b8..661c63fec446b 100644
--- a/testing/web-platform/tests/html/semantics/popups/popup-attribute-basic.tentative.html
+++ b/testing/web-platform/tests/html/semantics/popups/popup-attribute-basic.tentative.html
@@ -22,10 +22,10 @@
     const isVisible = !!(popup.offsetWidth || popup.offsetHeight || popup.getClientRects().length);
     if (isVisible) {
       assert_not_equals(window.getComputedStyle(popup).display,'none');
-      assert_equals(isPopup,popup.matches(':popup-open'));
+      assert_equals(isPopup,popup.matches(':top-layer'));
     } else {
       assert_equals(window.getComputedStyle(popup).display,'none');
-      assert_false(popup.matches(':popup-open'));
+      assert_false(popup.matches(':top-layer'));
     }
     return isVisible;
   }
@@ -138,17 +138,17 @@
   test(() => {
     const popup = createPopup();
     popup.showPopup();
-    assert_true(popup.matches(':popup-open'));
+    assert_true(popup.matches(':top-layer'));
     popup.setAttribute('popup','hint'); // Change popup type
-    assert_false(popup.matches(':popup-open'));
+    assert_false(popup.matches(':top-layer'));
     popup.showPopup();
-    assert_true(popup.matches(':popup-open'));
+    assert_true(popup.matches(':top-layer'));
     popup.setAttribute('popup','async');
-    assert_false(popup.matches(':popup-open'));
+    assert_false(popup.matches(':top-layer'));
     popup.showPopup();
-    assert_true(popup.matches(':popup-open'));
+    assert_true(popup.matches(':top-layer'));
     popup.setAttribute('popup','invalid');
-    assert_false(popup.matches(':popup-open'));
+    assert_false(popup.matches(':top-layer'));
   },'Changing attribute values should close open popups');
 
 
@@ -157,11 +157,11 @@
       const popup = createPopup();
       popup.setAttribute('popup',type);
       popup.showPopup();
-      assert_true(popup.matches(':popup-open'));
+      assert_true(popup.matches(':top-layer'));
       popup.remove();
-      assert_false(popup.matches(':popup-open'));
+      assert_false(popup.matches(':top-layer'));
       document.body.appendChild(popup);
-      assert_false(popup.matches(':popup-open'));
+      assert_false(popup.matches(':top-layer'));
     },`Removing a visible popup=${type} element from the document should close the popup`);
   });
 </script>
diff --git a/testing/web-platform/tests/html/semantics/popups/popup-defaultopen-2.tentative.html b/testing/web-platform/tests/html/semantics/popups/popup-defaultopen-2.tentative.html
index 1e54e469ae841..bf44092c09c8d 100644
--- a/testing/web-platform/tests/html/semantics/popups/popup-defaultopen-2.tentative.html
+++ b/testing/web-platform/tests/html/semantics/popups/popup-defaultopen-2.tentative.html
@@ -16,8 +16,8 @@
   requestAnimationFrame(() => {
     requestAnimationFrame(() => {
       test(function(){
-        assert_true(p1.matches(':popup-open'),'The first (outermost) popup should be the one that opens in this case');
-        assert_false(p2.matches(':popup-open'),'The inner popup should not be open');
+        assert_true(p1.matches(':top-layer'),'The first (outermost) popup should be the one that opens in this case');
+        assert_false(p2.matches(':top-layer'),'The inner popup should not be open');
       }, "The defaultopen attribute should cause only the first popup to open");
     });
   });
diff --git a/testing/web-platform/tests/html/semantics/popups/popup-defaultopen.tentative.html b/testing/web-platform/tests/html/semantics/popups/popup-defaultopen.tentative.html
index 50bf825d8f267..12cf5452fac9c 100644
--- a/testing/web-platform/tests/html/semantics/popups/popup-defaultopen.tentative.html
+++ b/testing/web-platform/tests/html/semantics/popups/popup-defaultopen.tentative.html
@@ -18,25 +18,25 @@
   requestAnimationFrame(() => {
     requestAnimationFrame(() => {
       test(function(){
-        assert_true(p1.matches(':popup-open'),'defaultopen should open the popup');
+        assert_true(p1.matches(':top-layer'),'defaultopen should open the popup');
         assert_true(p1.hasAttribute('defaultopen'));
         assert_true(p1.defaultOpen,'defaultopen should be reflected in the IDL attribute');
-        assert_false(p2.matches(':popup-open'), 'Only the first popup with defaultopen should be open on load');
+        assert_false(p2.matches(':top-layer'), 'Only the first popup with defaultopen should be open on load');
         assert_true(p2.hasAttribute('defaultopen'),'defaultopen should be present/true, even if not opened');
         assert_true(p2.defaultOpen,'defaultopen should be present/true, even if not opened');
 
-        assert_false(p2b.matches(':popup-open'),'Only the first popup/hint with defaultopen should be open on load');
-        assert_true(p4.matches(':popup-open'),'defaultopen should open all async popups');
-        assert_true(p5.matches(':popup-open'),'defaultopen should open all async popups');
+        assert_false(p2b.matches(':top-layer'),'Only the first popup/hint with defaultopen should be open on load');
+        assert_true(p4.matches(':top-layer'),'defaultopen should open all async popups');
+        assert_true(p5.matches(':top-layer'),'defaultopen should open all async popups');
 
-        assert_false(p3.matches(':popup-open'));
+        assert_false(p3.matches(':top-layer'));
         p3.setAttribute('defaultopen','');
-        assert_false(p3.matches(':popup-open'), 'Changing defaultopen should not affect open status');
+        assert_false(p3.matches(':top-layer'), 'Changing defaultopen should not affect open status');
         assert_true(p3.hasAttribute('defaultopen'));
         assert_true(p3.defaultOpen,'defaultopen should still reflect to IDL');
 
         p1.removeAttribute('defaultopen');
-        assert_true(p1.matches(':popup-open'),'removing defaultopen should not close the popup');
+        assert_true(p1.matches(':top-layer'),'removing defaultopen should not close the popup');
         assert_false(p1.hasAttribute('defaultopen'),'...but it should reflect to IDL');
 
         p1.hidePopup();
diff --git a/testing/web-platform/tests/html/semantics/popups/popup-events.tentative.html b/testing/web-platform/tests/html/semantics/popups/popup-events.tentative.html
index 9390ea3c40b58..7be1dae00bca1 100644
--- a/testing/web-platform/tests/html/semantics/popups/popup-events.tentative.html
+++ b/testing/web-platform/tests/html/semantics/popups/popup-events.tentative.html
@@ -31,26 +31,26 @@
   let showCount = 0;
   let hideCount = 0;
   await new Promise(resolve => window.addEventListener('load',() => resolve()));
-  assert_false(popup.matches(':popup-open'));
+  assert_false(popup.matches(':top-layer'));
   document.addEventListener('show',() => ++showCount);
   document.addEventListener('hide',() => ++hideCount);
   assert_equals(0,showCount);
   assert_equals(0,hideCount);
   popup.showPopup();
-  assert_true(popup.matches(':popup-open'));
+  assert_true(popup.matches(':top-layer'));
   await waitUntilChange(() => showCount);
   assert_equals(1,showCount);
   assert_equals(0,hideCount);
   await requestAnimationFramePromise();
-  assert_true(popup.matches(':popup-open'));
+  assert_true(popup.matches(':top-layer'));
   popup.hidePopup();
-  assert_false(popup.matches(':popup-open'));
+  assert_false(popup.matches(':top-layer'));
   await waitUntilChange(() => hideCount);
   assert_equals(1,showCount);
   assert_equals(1,hideCount);
   await requestAnimationFramePromise();
   // No additional events after animation frame
-  assert_false(popup.matches(':popup-open'));
+  assert_false(popup.matches(':top-layer'));
   assert_equals(1,showCount);
   assert_equals(1,hideCount);
 }, 'Show and hide events get properly dispatched for popups');
diff --git a/testing/web-platform/tests/html/semantics/popups/popup-focus.tentative.html b/testing/web-platform/tests/html/semantics/popups/popup-focus.tentative.html
index 6fccb0f13bdb4..0612313ec904a 100644
--- a/testing/web-platform/tests/html/semantics/popups/popup-focus.tentative.html
+++ b/testing/web-platform/tests/html/semantics/popups/popup-focus.tentative.html
@@ -132,7 +132,7 @@
         expectedFocusedElement = priorFocus;
       }
       assert_true(!!expectedFocusedElement);
-      assert_false(popup.matches(':popup-open'));
+      assert_false(popup.matches(':top-layer'));
 
       // Directly show and hide the popup:
       priorFocus.focus();
@@ -156,7 +156,7 @@
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popup.showPopup()`);
       assert_equals(popup.popup, 'popup', 'All popups in this test should start as popup=popup');
       popup.popup = 'hint';
-      assert_false(popup.matches(':popup-open'), 'Changing the popup type should hide the popup');
+      assert_false(popup.matches(':top-layer'), 'Changing the popup type should hide the popup');
       assert_equals(document.activeElement, priorFocus, 'prior element should get focus when the type is changed');
       popup.popup = 'popup';
 
@@ -165,7 +165,7 @@
       popup.showPopup();
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popup.showPopup()`);
       popup.remove();
-      assert_false(popup.matches(':popup-open'), 'Removing the popup should hide it');
+      assert_false(popup.matches(':top-layer'), 'Removing the popup should hide it');
       if (!popup.hasAttribute('data-no-focus')) {
         assert_not_equals(document.activeElement, priorFocus, 'prior element should *not* get focus when the popup is removed from the document');
       }
@@ -177,7 +177,7 @@
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popup.showPopup()`);
       const dialog = document.body.appendChild(document.createElement('dialog'));
       dialog.showModal();
-      assert_false(popup.matches(':popup-open'), 'Opening a modal dialog should hide the popup');
+      assert_false(popup.matches(':top-layer'), 'Opening a modal dialog should hide the popup');
       assert_not_equals(document.activeElement, priorFocus, 'prior element should *not* get focus when a modal dialog is shown');
       dialog.close();
       dialog.remove();
@@ -186,20 +186,20 @@
       const button = addInvoker(t, popup);
       priorFocus.focus();
       button.click();
-      assert_true(popup.matches(':popup-open'));
+      assert_true(popup.matches(':top-layer'));
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by button.click()`);
 
       // Make sure we can directly focus the (already open) popup:
       popup.focus();
       assert_equals(document.activeElement, popup.hasAttribute('tabindex') ? popup : expectedFocusedElement, `${testName} directly focus with popup.focus()`);
       button.click(); // Button is set to toggle the popup
-      assert_false(popup.matches(':popup-open'));
+      assert_false(popup.matches(':top-layer'));
       assert_equals(document.activeElement, priorFocus, 'prior element should get focus on button-toggled hide');
     }, "Popup focus test: " + testName);
 
     promise_test(async t => {
       const priorFocus = addPriorFocus(t);
-      assert_false(popup.matches(':popup-open'), 'popup should start out hidden');
+      assert_false(popup.matches(':top-layer'), 'popup should start out hidden');
       let button = addInvoker(t, popup);
       assert_equals(button.getAttribute('togglepopup'), popup.id, 'This test assumes the button uses `togglepopup`.');
       assert_not_equals(button, priorFocus, 'Stranger things have happened');
@@ -207,9 +207,9 @@
       priorFocus.focus();
       assert_equals(document.activeElement, priorFocus);
       popup.showPopup();
-      assert_true(popup.matches(':popup-open'));
+      assert_true(popup.matches(':top-layer'));
       await clickOn(button); // This will not light dismiss, but will "toggle" the popup.
-      assert_false(popup.matches(':popup-open'));
+      assert_false(popup.matches(':top-layer'));
       assert_equals(document.activeElement, priorFocus, 'Focus should return to prior focus');
 
       // Same thing, but the button is contained within the popup
@@ -218,12 +218,12 @@
       popup.appendChild(button);
       priorFocus.focus();
       popup.showPopup();
-      assert_true(popup.matches(':popup-open'));
+      assert_true(popup.matches(':top-layer'));
       if (!popup.hasAttribute('data-no-focus')) {
         assert_not_equals(document.activeElement, priorFocus, 'focus should shift for this element');
       }
       await clickOn(button);
-      assert_false(popup.matches(':popup-open'), 'clicking button should hide the popup');
+      assert_false(popup.matches(':top-layer'), 'clicking button should hide the popup');
       assert_equals(document.activeElement, priorFocus, 'Contained button should return focus to the previously focused element');
 
       // Same thing, but the button is unrelated (no togglepopup)
@@ -231,9 +231,9 @@
       document.body.appendChild(button);
       priorFocus.focus();
       popup.showPopup();
-      assert_true(popup.matches(':popup-open'));
+      assert_true(popup.matches(':top-layer'));
       await clickOn(button); // This will light dismiss the popup, focus the prior focus, then focus this button.
-      assert_false(popup.matches(':popup-open'), 'clicking button should hide the popup (via light dismiss)');
+      assert_false(popup.matches(':top-layer'), 'clicking button should hide the popup (via light dismiss)');
       assert_equals(document.activeElement, button, 'Focus should go to unrelated button on light dismiss');
     }, "Popup button click focus test: " + testName);
 
@@ -243,12 +243,12 @@
         return;
       }
       const priorFocus = addPriorFocus(t);
-      assert_false(popup.matches(':popup-open'), 'popup should start out hidden');
+      assert_false(popup.matches(':top-layer'), 'popup should start out hidden');
 
       // Move the prior focus out of the document
       priorFocus.focus();
       popup.showPopup();
-      assert_true(popup.matches(':popup-open'));
+      assert_true(popup.matches(':top-layer'));
       const newFocus = document.activeElement;
       assert_not_equals(newFocus, priorFocus, 'focus should shift for this element');
       priorFocus.remove();
@@ -260,11 +260,11 @@
       // Move the prior focus inside the (already open) popup
       priorFocus.focus();
       popup.showPopup();
-      assert_true(popup.matches(':popup-open'));
+      assert_true(popup.matches(':top-layer'));
       assert_false(popup.contains(priorFocus), 'Start with a non-contained prior focus');
       popup.appendChild(priorFocus); // Move inside the popup
       assert_true(popup.contains(priorFocus));
-      assert_true(popup.matches(':popup-open'), 'popup should stay open');
+      assert_true(popup.matches(':top-layer'), 'popup should stay open');
       popup.hidePopup();
       assert_not_equals(document.activeElement, priorFocus, 'focused element is display:none inside the popup');
       document.body.appendChild(priorFocus); // Put it back
diff --git a/testing/web-platform/tests/html/semantics/popups/popup-inside-display-none.tentative.html b/testing/web-platform/tests/html/semantics/popups/popup-inside-display-none.tentative.html
index d72f0aa50a523..2230d77a3d9c4 100644
--- a/testing/web-platform/tests/html/semantics/popups/popup-inside-display-none.tentative.html
+++ b/testing/web-platform/tests/html/semantics/popups/popup-inside-display-none.tentative.html
@@ -13,6 +13,6 @@
 <script>
   const popup = document.querySelector('[popup]');
   popup.showPopup();
-  if (!popup.matches(':popup-open'))
+  if (!popup.matches(':top-layer'))
     document.body.appendChild(document.createTextNode('FAIL'));
 </script>
diff --git a/testing/web-platform/tests/html/semantics/popups/popup-invoking-attribute.tentative.html b/testing/web-platform/tests/html/semantics/popups/popup-invoking-attribute.tentative.html
index 49056f8b77ff9..2cac8d15abbd5 100644
--- a/testing/web-platform/tests/html/semantics/popups/popup-invoking-attribute.tentative.html
+++ b/testing/web-platform/tests/html/semantics/popups/popup-invoking-attribute.tentative.html
@@ -139,7 +139,7 @@
             const otherId = expectedId !== 1 ? 1 : 2;
             function assert_popup(num,state,message) {
               assert_true(num>0,`Invalid expectedId ${num}`);
-              assert_equals((num===1 ? popup1 : popup2).matches(':popup-open'),state,message || "");
+              assert_equals((num===1 ? popup1 : popup2).matches(':top-layer'),state,message || "");
             }
             assert_popup(expectedId,false);
             assert_popup(otherId,false);
@@ -205,7 +205,7 @@
 popup.addEventListener('hide',() => ++hideCount);
 
 async function assertState(expectOpen,expectShow,expectHide) {
-  assert_equals(popup.matches(':popup-open'),expectOpen,'Popup open state is incorrect');
+  assert_equals(popup.matches(':top-layer'),expectOpen,'Popup open state is incorrect');
   await new Promise(resolve => requestAnimationFrame(resolve));
   assert_equals(showCount,expectShow,'Show count is incorrect');
   assert_equals(hideCount,expectHide,'Hide count is incorrect');
diff --git a/testing/web-platform/tests/html/semantics/popups/popup-light-dismiss-on-scroll.tentative.html b/testing/web-platform/tests/html/semantics/popups/popup-light-dismiss-on-scroll.tentative.html
index bafa50dae3633..10276edbb3384 100644
--- a/testing/web-platform/tests/html/semantics/popups/popup-light-dismiss-on-scroll.tentative.html
+++ b/testing/web-platform/tests/html/semantics/popups/popup-light-dismiss-on-scroll.tentative.html
@@ -39,7 +39,7 @@
   const popups = document.querySelectorAll('[popup]');
   function assertAll(showing) {
     for(let popup of popups) {
-      assert_equals(popup.matches(':popup-open'),showing);
+      assert_equals(popup.matches(':top-layer'),showing);
     }
   }
   async_test(t => {
diff --git a/testing/web-platform/tests/html/semantics/popups/popup-light-dismiss.tentative.html b/testing/web-platform/tests/html/semantics/popups/popup-light-dismiss.tentative.html
index e3c05fa530d3f..568a515a9d53f 100644
--- a/testing/web-platform/tests/html/semantics/popups/popup-light-dismiss.tentative.html
+++ b/testing/web-platform/tests/html/semantics/popups/popup-light-dismiss.tentative.html
@@ -54,34 +54,34 @@
     e.preventDefault(); // 'hide' should not be cancellable.
   });
   promise_test(async () => {
-    assert_false(popup1.matches(':popup-open'));
+    assert_false(popup1.matches(':top-layer'));
     popup1.showPopup();
-    assert_true(popup1.matches(':popup-open'));
+    assert_true(popup1.matches(':top-layer'));
     let p1HideCount = popup1HideCount;
     await clickOn(outside);
-    assert_false(popup1.matches(':popup-open'));
+    assert_false(popup1.matches(':top-layer'));
     assert_equals(popup1HideCount,p1HideCount+1);
   },'Clicking outside a popup will dismiss the popup');
 
   promise_test(async () => {
-    assert_false(popup1.matches(':popup-open'));
+    assert_false(popup1.matches(':top-layer'));
     popup1.showPopup();
     await waitForRender();
     p1HideCount = popup1HideCount;
     await clickOn(inside1);
-    assert_true(popup1.matches(':popup-open'));
+    assert_true(popup1.matches(':top-layer'));
     assert_equals(popup1HideCount,p1HideCount);
     popup1.hidePopup();
   },'Clicking inside a popup does not close that popup');
 
   promise_test(async () => {
-    assert_false(popup1.matches(':popup-open'));
+    assert_false(popup1.matches(':top-layer'));
     popup1.showPopup();
     await clickOn(inside1After);
-    assert_true(popup1.matches(':popup-open'));
+    assert_true(popup1.matches(':top-layer'));
     await sendTab();
     assert_equals(document.activeElement,afterp1,'Focus should move to a button outside the popup');
-    assert_false(popup1.matches(':popup-open'));
+    assert_false(popup1.matches(':top-layer'));
   },'Moving focus outside the popup will dismiss the popup');
 
   promise_test(async () => {
@@ -91,13 +91,13 @@
     p1HideCount = popup1HideCount;
     let p2HideCount = popup2HideCount;
     await clickOn(inside2);
-    assert_true(popup1.matches(':popup-open'),'popup1 should be open');
-    assert_true(popup2.matches(':popup-open'),'popup2 should be open');
+    assert_true(popup1.matches(':top-layer'),'popup1 should be open');
+    assert_true(popup2.matches(':top-layer'),'popup2 should be open');
     assert_equals(popup1HideCount,p1HideCount,'popup1');
     assert_equals(popup2HideCount,p2HideCount,'popup2');
     popup1.hidePopup();
-    assert_false(popup1.matches(':popup-open'));
-    assert_false(popup2.matches(':popup-open'));
+    assert_false(popup1.matches(':top-layer'));
+    assert_false(popup2.matches(':top-layer'));
   },'Clicking inside a child popup shouldn\'t close either popup');
 
   promise_test(async () => {
@@ -107,64 +107,64 @@
     p1HideCount = popup1HideCount;
     p2HideCount = popup2HideCount;
     await clickOn(inside1);
-    assert_true(popup1.matches(':popup-open'));
+    assert_true(popup1.matches(':top-layer'));
     assert_equals(popup1HideCount,p1HideCount);
-    assert_false(popup2.matches(':popup-open'));
+    assert_false(popup2.matches(':top-layer'));
     assert_equals(popup2HideCount,p2HideCount+1);
     popup1.hidePopup();
   },'Clicking inside a parent popup should close child popup');
 
   promise_test(async () => {
     await clickOn(button1show);
-    assert_true(popup1.matches(':popup-open'));
+    assert_true(popup1.matches(':top-layer'));
     await waitForRender();
     p1HideCount = popup1HideCount;
     await clickOn(button1show);
-    assert_true(popup1.matches(':popup-open'),'popup1 should stay open');
+    assert_true(popup1.matches(':top-layer'),'popup1 should stay open');
     assert_equals(popup1HideCount,p1HideCount,'popup1 should not get hidden and reshown');
     popup1.hidePopup(); // Cleanup
-    assert_false(popup1.matches(':popup-open'));
+    assert_false(popup1.matches(':top-layer'));
   },'Clicking on invoking element, after using it for activation, shouldn\'t close its popup');
 
   promise_test(async () => {
     popup1.showPopup(); // Directly show the popup
-    assert_true(popup1.matches(':popup-open'));
+    assert_true(popup1.matches(':top-layer'));
     await waitForRender();
     p1HideCount = popup1HideCount;
     await clickOn(button1show);
-    assert_true(popup1.matches(':popup-open'),'popup1 should stay open');
+    assert_true(popup1.matches(':top-layer'),'popup1 should stay open');
     assert_equals(popup1HideCount,p1HideCount,'popup1 should not get hidden and reshown');
     popup1.hidePopup(); // Cleanup
-    assert_false(popup1.matches(':popup-open'));
+    assert_false(popup1.matches(':top-layer'));
   },'Clicking on invoking element, even if it wasn\'t used for activation, shouldn\'t close its popup');
 
   promise_test(async () => {
     popup1.showPopup(); // Directly show the popup
-    assert_true(popup1.matches(':popup-open'));
+    assert_true(popup1.matches(':top-layer'));
     await waitForRender();
     p1HideCount = popup1HideCount;
     await clickOn(button1toggle);
-    assert_false(popup1.matches(':popup-open'),'popup1 should be hidden by togglepopup');
+    assert_false(popup1.matches(':top-layer'),'popup1 should be hidden by togglepopup');
     assert_equals(popup1HideCount,p1HideCount+1,'popup1 should get hidden only once by togglepopup');
   },'Clicking on togglepopup element, even if it wasn\'t used for activation, should hide it exactly once');
 
   promise_test(async () => {
     popup1.showPopup();
-    assert_true(popup1.matches(':popup-open'));
+    assert_true(popup1.matches(':top-layer'));
     await waitForRender();
     p1HideCount = popup1HideCount;
     await clickOn(popup1anchor);
-    assert_true(popup1.matches(':popup-open'),'popup1 not open');
+    assert_true(popup1.matches(':top-layer'),'popup1 not open');
     assert_equals(popup1HideCount,p1HideCount);
     popup1.hidePopup(); // Cleanup
-    assert_false(popup1.matches(':popup-open'));
+    assert_false(popup1.matches(':top-layer'));
   },'Clicking on anchor element (that isn\'t an invoking element) shouldn\'t close its popup');
 
   promise_test(async () => {
     popup1.showPopup();
     popup2.showPopup(); // Popup1 is an ancestral element for popup2.
-    assert_true(popup1.matches(':popup-open'));
-    assert_true(popup2.matches(':popup-open'));
+    assert_true(popup1.matches(':top-layer'));
+    assert_true(popup2.matches(':top-layer'));
     const drag_actions = new test_driver.Actions();
     // Drag *from* popup2 *to* popup1 (its ancestor).
     await drag_actions.pointerMove(0,0,{origin: popup2})
@@ -172,10 +172,10 @@
       .pointerMove(0,0,{origin: popup1})
       .pointerUp({button: drag_actions.ButtonType.LEFT})
       .send();
-    assert_true(popup1.matches(':popup-open'),'popup1 should be open');
-    assert_true(popup2.matches(':popup-open'),'popup1 should be open');
+    assert_true(popup1.matches(':top-layer'),'popup1 should be open');
+    assert_true(popup2.matches(':top-layer'),'popup1 should be open');
     popup1.hidePopup();
-    assert_false(popup2.matches(':popup-open'));
+    assert_false(popup2.matches(':top-layer'));
   },'Dragging from an open popup outside an open popup should leave the popup open');
 </script>
 
@@ -198,28 +198,28 @@
   const button3 = document.querySelector('#b3');
   promise_test(async () => {
     await clickOn(button3);
-    assert_true(popup3.matches(':popup-open'),'invoking element should open popup');
+    assert_true(popup3.matches(':top-layer'),'invoking element should open popup');
     popup4.showPopup();
-    assert_true(popup4.matches(':popup-open'));
-    assert_true(popup3.matches(':popup-open'));
+    assert_true(popup4.matches(':top-layer'));
+    assert_true(popup3.matches(':top-layer'));
     popup3.hidePopup(); // Cleanup
-    assert_false(popup3.matches(':popup-open'));
-    assert_false(popup4.matches(':popup-open'));
+    assert_false(popup3.matches(':top-layer'));
+    assert_false(popup4.matches(':top-layer'));
   },'An invoking element should be part of the ancestor chain');
 
   promise_test(async () => {
     await clickOn(button3);
-    assert_true(popup3.matches(':popup-open'));
-    assert_false(popup4.matches(':popup-open'));
-    assert_false(popup5.matches(':popup-open'));
+    assert_true(popup3.matches(':top-layer'));
+    assert_false(popup4.matches(':top-layer'));
+    assert_false(popup5.matches(':top-layer'));
     popup5.showPopup();
-    assert_true(popup3.matches(':popup-open'));
-    assert_false(popup4.matches(':popup-open'));
-    assert_true(popup5.matches(':popup-open'));
+    assert_true(popup3.matches(':top-layer'));
+    assert_false(popup4.matches(':top-layer'));
+    assert_true(popup5.matches(':top-layer'));
     popup3.hidePopup();
-    assert_false(popup3.matches(':popup-open'));
-    assert_false(popup4.matches(':popup-open'));
-    assert_false(popup5.matches(':popup-open'));
+    assert_false(popup3.matches(':top-layer'));
+    assert_false(popup4.matches(':top-layer'));
+    assert_false(popup5.matches(':top-layer'));
   },'An invoking element that was not used to invoke the popup can still be part of the ancestor chain');
 </script>
 
@@ -243,7 +243,7 @@
     await new test_driver.Actions()
        .scroll(0, 0, 0, 50, {origin: popup6})
        .send();
-    assert_true(popup6.matches(':popup-open'),'popup6 should stay open');
+    assert_true(popup6.matches(':top-layer'),'popup6 should stay open');
     assert_equals(popup6.scrollTop,50,'popup6 should be scrolled');
     popup6.hidePopup();
   },'Scrolling within a popup should not close the popup');
@@ -267,18 +267,18 @@
   }
   promise_test(async () => {
     button7.click();
-    assert_true(popup7.matches(':popup-open'),'invoking element should open popup');
+    assert_true(popup7.matches(':top-layer'),'invoking element should open popup');
     inside7.click();
-    assert_true(popup7.matches(':popup-open'));
+    assert_true(popup7.matches(':top-layer'));
     popup7.hidePopup();
   },'Clicking inside a shadow DOM popup does not close that popup');
 
   promise_test(async () => {
     button7.click();
     inside7.click();
-    assert_true(popup7.matches(':popup-open'));
+    assert_true(popup7.matches(':top-layer'));
     await clickOn(outside);
-    assert_false(popup7.matches(':popup-open'));
+    assert_false(popup7.matches(':top-layer'));
   },'Clicking outside a shadow DOM popup should close that popup');
 </script>
 
@@ -292,13 +292,13 @@
     const popup8 = document.querySelector('#p8');
     const inside8After = document.querySelector('#inside8after');
     const popup8Anchor = document.querySelector('#p8anchor');
-    assert_false(popup8.matches(':popup-open'));
+    assert_false(popup8.matches(':top-layer'));
     popup8.showPopup();
     await clickOn(inside8After);
-    assert_true(popup8.matches(':popup-open'));
+    assert_true(popup8.matches(':top-layer'));
     await sendTab();
     assert_equals(document.activeElement,popup8Anchor,'Focus should move to the anchor element');
-    assert_true(popup8.matches(':popup-open'),'popup should stay open');
+    assert_true(popup8.matches(':top-layer'),'popup should stay open');
     popup8.hidePopup();
   },'Moving focus back to the anchor element should not dismiss the popup');
 </script>
@@ -313,13 +313,13 @@
     const popup9 = document.querySelector('#p9');
     const inside9After = document.querySelector('#inside9after');
     const popup9Invoker = document.querySelector('#b9after');
-    assert_false(popup9.matches(':popup-open'));
+    assert_false(popup9.matches(':top-layer'));
     popup9Invoker.click(); // Trigger via the button
     await clickOn(inside9After);
-    assert_true(popup9.matches(':popup-open'));
+    assert_true(popup9.matches(':top-layer'));
     await sendTab();
     assert_equals(document.activeElement,popup9Invoker,'Focus should move to the invoking element');
-    assert_true(popup9.matches(':popup-open'),'popup should stay open');
+    assert_true(popup9.matches(':top-layer'),'popup should stay open');
     popup9.hidePopup();
   },'Moving focus back to the active trigger element should not dismiss the popup');
 
@@ -327,13 +327,13 @@
     const popup9 = document.querySelector('#p9');
     const inside9After = document.querySelector('#inside9after');
     const popup9Invoker = document.querySelector('#b9after');
-    assert_false(popup9.matches(':popup-open'));
+    assert_false(popup9.matches(':top-layer'));
     popup9.showPopup(); // Trigger directly
     await clickOn(inside9After);
-    assert_true(popup9.matches(':popup-open'));
+    assert_true(popup9.matches(':top-layer'));
     await sendTab();
     assert_equals(document.activeElement,popup9Invoker,'Focus should move to the invoking element');
-    assert_true(popup9.matches(':popup-open'),'popup should stay open - even though the trigger wasn\'t used, it points to this popup');
+    assert_true(popup9.matches(':top-layer'),'popup should stay open - even though the trigger wasn\'t used, it points to this popup');
   },'Moving focus back to an inactive trigger element should also *not* dismiss the popup');
 </script>
 
@@ -365,51 +365,51 @@
 const convPopup4 = document.querySelector('#convoluted_p4');
 promise_test(async () => {
   convPopup1.showPopup(); // Programmatically open p1
-  assert_true(convPopup1.matches(':popup-open'));
+  assert_true(convPopup1.matches(':top-layer'));
   convPopup1.querySelector('button').click(); // Click to invoke p2
-  assert_true(convPopup1.matches(':popup-open'));
-  assert_true(convPopup2.matches(':popup-open'));
+  assert_true(convPopup1.matches(':top-layer'));
+  assert_true(convPopup2.matches(':top-layer'));
   convPopup2.querySelector('button').click(); // Click to invoke p3
-  assert_true(convPopup1.matches(':popup-open'));
-  assert_true(convPopup2.matches(':popup-open'));
-  assert_true(convPopup3.matches(':popup-open'));
+  assert_true(convPopup1.matches(':top-layer'));
+  assert_true(convPopup2.matches(':top-layer'));
+  assert_true(convPopup3.matches(':top-layer'));
   convPopup3.querySelector('button').click(); // Click to invoke p4
-  assert_true(convPopup1.matches(':popup-open'));
-  assert_true(convPopup2.matches(':popup-open'));
-  assert_true(convPopup3.matches(':popup-open'));
-  assert_true(convPopup4.matches(':popup-open'));
+  assert_true(convPopup1.matches(':top-layer'));
+  assert_true(convPopup2.matches(':top-layer'));
+  assert_true(convPopup3.matches(':top-layer'));
+  assert_true(convPopup4.matches(':top-layer'));
   convPopup4.firstElementChild.click(); // Click within p4
-  assert_true(convPopup1.matches(':popup-open'));
-  assert_true(convPopup2.matches(':popup-open'));
-  assert_true(convPopup3.matches(':popup-open'));
-  assert_true(convPopup4.matches(':popup-open'));
+  assert_true(convPopup1.matches(':top-layer'));
+  assert_true(convPopup2.matches(':top-layer'));
+  assert_true(convPopup3.matches(':top-layer'));
+  assert_true(convPopup4.matches(':top-layer'));
   convPopup1.hidePopup();
-  assert_false(convPopup1.matches(':popup-open'));
-  assert_false(convPopup2.matches(':popup-open'));
-  assert_false(convPopup3.matches(':popup-open'));
-  assert_false(convPopup4.matches(':popup-open'));
+  assert_false(convPopup1.matches(':top-layer'));
+  assert_false(convPopup2.matches(':top-layer'));
+  assert_false(convPopup3.matches(':top-layer'));
+  assert_false(convPopup4.matches(':top-layer'));
 },'Ensure circular/convoluted ancestral relationships are functional');
 
 promise_test(async () => {
   convPopup1.showPopup(); // Programmatically open p1
   convPopup1.querySelector('button').click(); // Click to invoke p2
-  assert_true(convPopup1.matches(':popup-open'));
-  assert_true(convPopup2.matches(':popup-open'));
-  assert_false(convPopup3.matches(':popup-open'));
-  assert_false(convPopup4.matches(':popup-open'));
+  assert_true(convPopup1.matches(':top-layer'));
+  assert_true(convPopup2.matches(':top-layer'));
+  assert_false(convPopup3.matches(':top-layer'));
+  assert_false(convPopup4.matches(':top-layer'));
   convPopup4.showPopup(); // Programmatically open p4
-  assert_true(convPopup1.matches(':popup-open'),'popup1 stays open because it is a DOM ancestor of popup4');
-  assert_false(convPopup2.matches(':popup-open'),'popup2 closes because it isn\'t connected to popup4 via active invokers');
-  assert_true(convPopup4.matches(':popup-open'));
+  assert_true(convPopup1.matches(':top-layer'),'popup1 stays open because it is a DOM ancestor of popup4');
+  assert_false(convPopup2.matches(':top-layer'),'popup2 closes because it isn\'t connected to popup4 via active invokers');
+  assert_true(convPopup4.matches(':top-layer'));
   convPopup4.firstElementChild.click(); // Click within p4
-  assert_true(convPopup1.matches(':popup-open'),'nothing changes');
-  assert_false(convPopup2.matches(':popup-open'));
-  assert_true(convPopup4.matches(':popup-open'));
+  assert_true(convPopup1.matches(':top-layer'),'nothing changes');
+  assert_false(convPopup2.matches(':top-layer'));
+  assert_true(convPopup4.matches(':top-layer'));
   convPopup1.hidePopup();
-  assert_false(convPopup1.matches(':popup-open'));
-  assert_false(convPopup2.matches(':popup-open'));
-  assert_false(convPopup3.matches(':popup-open'));
-  assert_false(convPopup4.matches(':popup-open'));
+  assert_false(convPopup1.matches(':top-layer'));
+  assert_false(convPopup2.matches(':top-layer'));
+  assert_false(convPopup3.matches(':top-layer'));
+  assert_false(convPopup4.matches(':top-layer'));
 },'Ensure circular/convoluted ancestral relationships are functional, with a direct showPopup()');
 </script>
 
@@ -431,30 +431,30 @@
   popup.showPopup();
   hint.showPopup();
   async.showPopup();
-  assert_true(popup.matches(':popup-open'));
-  assert_true(hint.matches(':popup-open'));
-  assert_true(async.matches(':popup-open'));
+  assert_true(popup.matches(':top-layer'));
+  assert_true(hint.matches(':top-layer'));
+  assert_true(async.matches(':top-layer'));
   // The hint was opened last, so clicking it shouldn't close anything:
   await clickOn(hint);
-  assert_true(popup.matches(':popup-open'),'popup should stay open');
-  assert_true(hint.matches(':popup-open'),'hint should stay open');
-  assert_true(async.matches(':popup-open'),'async does not light dismiss');
+  assert_true(popup.matches(':top-layer'),'popup should stay open');
+  assert_true(hint.matches(':top-layer'),'hint should stay open');
+  assert_true(async.matches(':top-layer'),'async does not light dismiss');
   // Clicking outside should close the hint and popup, but not the async:
   await clickOn(outside);
-  assert_false(popup.matches(':popup-open'),'popup should close');
-  assert_false(hint.matches(':popup-open'),'hint should close');
-  assert_true(async.matches(':popup-open'),'async does not light dismiss');
+  assert_false(popup.matches(':top-layer'),'popup should close');
+  assert_false(hint.matches(':top-layer'),'hint should close');
+  assert_true(async.matches(':top-layer'),'async does not light dismiss');
   async.hidePopup();
-  assert_false(async.matches(':popup-open'));
+  assert_false(async.matches(':top-layer'));
   popup.showPopup();
   hint.showPopup();
-  assert_true(popup.matches(':popup-open'));
-  assert_true(hint.matches(':popup-open'));
+  assert_true(popup.matches(':top-layer'));
+  assert_true(hint.matches(':top-layer'));
   // Clicking on the popup should close the hint:
   await clickOn(popup);
-  assert_true(popup.matches(':popup-open'),'popup should stay open');
-  assert_false(hint.matches(':popup-open'),'hint should light dismiss');
+  assert_true(popup.matches(':top-layer'),'popup should stay open');
+  assert_false(hint.matches(':top-layer'),'hint should light dismiss');
   popup.hidePopup();
-  assert_false(popup.matches(':popup-open'));
+  assert_false(popup.matches(':top-layer'));
 },'Light dismiss of mixed popup types');
 </script>
diff --git a/testing/web-platform/tests/html/semantics/popups/popup-not-keyboard-focusable.tentative.html b/testing/web-platform/tests/html/semantics/popups/popup-not-keyboard-focusable.tentative.html
index 39d98396c8940..4deb76d0d7691 100644
--- a/testing/web-platform/tests/html/semantics/popups/popup-not-keyboard-focusable.tentative.html
+++ b/testing/web-platform/tests/html/semantics/popups/popup-not-keyboard-focusable.tentative.html
@@ -23,12 +23,12 @@
   b1.focus();
   assert_equals(document.activeElement,b1);
   popup.showPopup();
-  assert_true(popup.matches(':popup-open'));
+  assert_true(popup.matches(':top-layer'));
   assert_equals(document.activeElement,b1);
   // Tab once
   await new test_driver.send_keys(document.body,'\uE004'); // Tab
   assert_equals(document.activeElement, b2, 'Keyboard focus should skip the open popup');
-  assert_false(popup.matches(':popup-open'),'changing focus should close the popup');
+  assert_false(popup.matches(':top-layer'),'changing focus should close the popup');
 
   // Add a focusable button to the popup and make sure we can focus that
   const button = document.createElement('button');
@@ -39,8 +39,8 @@
   // Tab once
   await new test_driver.send_keys(document.body,'\uE004'); // Tab
   assert_equals(document.activeElement, button, 'Keyboard focus should go to the contained button');
-  assert_true(popup.matches(':popup-open'),'changing focus to the popup should leave it showing');
+  assert_true(popup.matches(':top-layer'),'changing focus to the popup should leave it showing');
   popup.hidePopup();
-  assert_false(popup.matches(':popup-open'));
+  assert_false(popup.matches(':top-layer'));
 }, "Popup should not be keyboard focusable");
 </script>
diff --git a/testing/web-platform/tests/html/semantics/popups/popup-removal-2.tentative.html b/testing/web-platform/tests/html/semantics/popups/popup-removal-2.tentative.html
index 0204c3c913412..02e74297eeca2 100644
--- a/testing/web-platform/tests/html/semantics/popups/popup-removal-2.tentative.html
+++ b/testing/web-platform/tests/html/semantics/popups/popup-removal-2.tentative.html
@@ -16,13 +16,13 @@
       const frame2Doc = document.getElementById('frame2').contentDocument;
       const popup = frame1Doc.querySelector('[popup]');
       assert_true(!!popup);
-      assert_false(popup.matches(':popup-open'));
+      assert_false(popup.matches(':top-layer'));
       popup.showPopup();
-      assert_true(popup.matches(':popup-open'));
+      assert_true(popup.matches(':top-layer'));
       frame2Doc.body.appendChild(popup);
-      assert_false(popup.matches(':popup-open'));
+      assert_false(popup.matches(':top-layer'));
       popup.showPopup();
-      assert_true(popup.matches(':popup-open'));
+      assert_true(popup.matches(':top-layer'));
     }, 'Moving popup between documents shouldn\'t cause issues');
   };
 </script>
diff --git a/testing/web-platform/tests/html/semantics/popups/popup-removal.tentative.html b/testing/web-platform/tests/html/semantics/popups/popup-removal.tentative.html
index 02201dc2af838..525448eed1c71 100644
--- a/testing/web-platform/tests/html/semantics/popups/popup-removal.tentative.html
+++ b/testing/web-platform/tests/html/semantics/popups/popup-removal.tentative.html
@@ -16,9 +16,9 @@
     });
   }
   const popup = document.querySelector('[popup]');
-  assert_false(popup.matches(':popup-open'));
+  assert_false(popup.matches(':top-layer'));
   popup.showPopup();
-  assert_true(popup.matches(':popup-open'));
+  assert_true(popup.matches(':top-layer'));
   popup.remove(); // Shouldn't cause any issues
   document.body.click(); // Shouldn't cause light dismiss problems
   await loadCompleted(); // The document should finish loading
diff --git a/testing/web-platform/tests/html/semantics/popups/popup-shadow-dom.tentative.html b/testing/web-platform/tests/html/semantics/popups/popup-shadow-dom.tentative.html
index 922bf1630f4a0..8df874def480a 100644
--- a/testing/web-platform/tests/html/semantics/popups/popup-shadow-dom.tentative.html
+++ b/testing/web-platform/tests/html/semantics/popups/popup-shadow-dom.tentative.html
@@ -58,7 +58,7 @@
   test(function() {
     const popup = getPopupReferences('test1')[0];
     popup.showPopup();
-    assert_true(popup.matches(':popup-open'));
+    assert_true(popup.matches(':top-layer'));
     assert_true(popupVisible(popup));
   }, "Popups located inside shadow DOM can still be shown");
 </script>
@@ -84,12 +84,12 @@
   test(function() {
     const [popup1,popup2] = getPopupReferences('test2');
     popup1.showPopup();
-    assert_true(popup1.matches(':popup-open'));
+    assert_true(popup1.matches(':top-layer'));
     assert_true(popupVisible(popup1));
     popup2.showPopup();
-    assert_false(popup1.matches(':popup-open'), 'popup1 open'); // P1 was closed by P2
+    assert_false(popup1.matches(':top-layer'), 'popup1 open'); // P1 was closed by P2
     assert_false(popupVisible(popup1), 'popup1 visible');
-    assert_true(popup2.matches(':popup-open'), 'popup2 open'); // P2 is open
+    assert_true(popup2.matches(':top-layer'), 'popup2 open'); // P2 is open
     assert_true(popupVisible(popup2), 'popup2 visible');
   }, "anchor references do not cross shadow boundaries");
 </script>
@@ -113,18 +113,18 @@
   test(function() {
     const [popup1,popup2] = getPopupReferences('test3');
     popup1.showPopup();
-    assert_true(popup1.matches(':popup-open'));
+    assert_true(popup1.matches(':top-layer'));
     assert_true(popupVisible(popup1));
     // Showing popup2 should not close popup1, since it is a flat
     // tree ancestor of popup2's anchor button.
     popup2.showPopup();
-    assert_true(popup2.matches(':popup-open'));
+    assert_true(popup2.matches(':top-layer'));
     assert_true(popupVisible(popup2));
-    assert_true(popup1.matches(':popup-open'));
+    assert_true(popup1.matches(':top-layer'));
     assert_true(popupVisible(popup1));
     popup1.hidePopup();
-    assert_false(popup2.matches(':popup-open'));
-    assert_false(popup1.matches(':popup-open'));
+    assert_false(popup2.matches(':top-layer'));
+    assert_false(popup1.matches(':top-layer'));
   }, "anchor references use the flat tree not the DOM tree");
 </script>
 
@@ -150,13 +150,13 @@
     popup1.showPopup();
     popup2.showPopup();
     // Both 1 and 2 should be open at this point.
-    assert_true(popup1.matches(':popup-open'), 'popup1 not open');
+    assert_true(popup1.matches(':top-layer'), 'popup1 not open');
     assert_true(popupVisible(popup1));
-    assert_true(popup2.matches(':popup-open'), 'popup2 not open');
+    assert_true(popup2.matches(':top-layer'), 'popup2 not open');
     assert_true(popupVisible(popup2));
     // This should hide both of them.
     popup1.hidePopup();
-    assert_false(popup2.matches(':popup-open'));
+    assert_false(popup2.matches(':top-layer'));
     assert_false(popupVisible(popup2));
   }, "The popup stack is preserved across shadow-inclusive ancestors");
 </script>
diff --git a/testing/web-platform/tests/html/semantics/popups/popup-stacking.tentative.html b/testing/web-platform/tests/html/semantics/popups/popup-stacking.tentative.html
index 160a4a573b751..2cf540c96d238 100644
--- a/testing/web-platform/tests/html/semantics/popups/popup-stacking.tentative.html
+++ b/testing/web-platform/tests/html/semantics/popups/popup-stacking.tentative.html
@@ -89,18 +89,18 @@
     const clickToActivate = example.querySelector('.clickme');
     test(function() {
       assert_true(!!descr && !!ancestor && !!child);
-      assert_false(ancestor.matches(':popup-open'));
-      assert_false(child.matches(':popup-open'));
+      assert_false(ancestor.matches(':top-layer'));
+      assert_false(child.matches(':top-layer'));
       ancestor.showPopup();
       if (clickToActivate)
         clickToActivate.click();
       else
         child.showPopup();
-      assert_true(child.matches(':popup-open'));
-      assert_true(ancestor.matches(':popup-open'));
+      assert_true(child.matches(':top-layer'));
+      assert_true(ancestor.matches(':top-layer'));
       ancestor.hidePopup();
-      assert_false(ancestor.matches(':popup-open'));
-      assert_false(child.matches(':popup-open'));
+      assert_false(ancestor.matches(':top-layer'));
+      assert_false(child.matches(':top-layer'));
     },descr);
   }
 
@@ -109,7 +109,7 @@
   function assertState(...states) {
     assert_equals(popups.length,states.length);
     for(let i=0;i<popups.length;++i) {
-      assert_equals(popups[i].matches(':popup-open'),states[i],`Popup #${i+1} incorrect state`);
+      assert_equals(popups[i].matches(':top-layer'),states[i],`Popup #${i+1} incorrect state`);
     }
   }
   test(function() {
diff --git a/testing/web-platform/tests/html/semantics/popups/popup-top-layer-interactions.tentative.html b/testing/web-platform/tests/html/semantics/popups/popup-top-layer-interactions.tentative.html
index 53ded3ed0eba3..69cc436a3d1f8 100644
--- a/testing/web-platform/tests/html/semantics/popups/popup-top-layer-interactions.tentative.html
+++ b/testing/web-platform/tests/html/semantics/popups/popup-top-layer-interactions.tentative.html
@@ -22,7 +22,7 @@
     createElement: () => Object.assign(document.createElement('div'), {popup: 'popup'}),
     trigger: function() {this.element.showPopup()},
     close: function() {this.element.hidePopup()},
-    isTopLayer: function() {return this.element.matches(':popup-open')},
+    isTopLayer: function() {return this.element.matches(':top-layer')},
   },
   {
     type: types.modalDialog,
diff --git a/testing/web-platform/tests/html/semantics/popups/popup-types.tentative.html b/testing/web-platform/tests/html/semantics/popups/popup-types.tentative.html
index 74a1b916440d0..e3d24acfd9955 100644
--- a/testing/web-platform/tests/html/semantics/popups/popup-types.tentative.html
+++ b/testing/web-platform/tests/html/semantics/popups/popup-types.tentative.html
@@ -12,10 +12,10 @@
 
 <script>
 function assert_state_1(popupOpen,hintOpen,asyncOpen,async2Open) {
-  assert_equals(popup.matches(':popup-open'),popupOpen,'popup open state is incorrect');
-  assert_equals(hint.matches(':popup-open'),hintOpen,'hint open state is incorrect');
-  assert_equals(async.matches(':popup-open'),asyncOpen,'async open state is incorrect');
-  assert_equals(async2.matches(':popup-open'),async2Open,'async2 open state is incorrect');
+  assert_equals(popup.matches(':top-layer'),popupOpen,'popup open state is incorrect');
+  assert_equals(hint.matches(':top-layer'),hintOpen,'hint open state is incorrect');
+  assert_equals(async.matches(':top-layer'),asyncOpen,'async open state is incorrect');
+  assert_equals(async2.matches(':top-layer'),async2Open,'async2 open state is incorrect');
 }
 test(() => {
   assert_state_1(false,false,false,false);
@@ -67,10 +67,10 @@
 <div id=hint2 popup=hint anchor=anchorid>Hint anchored to popup</div>
 <script>
 function assert_state_2(popup1Open,popup2Open,popup3Open,hintOpen) {
-  assert_equals(popup1.matches(':popup-open'),popup1Open,'popup1 open state is incorrect');
-  assert_equals(popup2.matches(':popup-open'),popup2Open,'popup2 open state is incorrect');
-  assert_equals(popup3.matches(':popup-open'),popup3Open,'popup3 open state is incorrect');
-  assert_equals(hint2.matches(':popup-open'),hintOpen,'hint2 open state is incorrect');
+  assert_equals(popup1.matches(':top-layer'),popup1Open,'popup1 open state is incorrect');
+  assert_equals(popup2.matches(':top-layer'),popup2Open,'popup2 open state is incorrect');
+  assert_equals(popup3.matches(':top-layer'),popup3Open,'popup3 open state is incorrect');
+  assert_equals(hint2.matches(':top-layer'),hintOpen,'hint2 open state is incorrect');
 }
 test(() => {
   assert_state_2(false,false,false,false);