From f592757f5b4c014312ab23915f18eb39e756eaa5 Mon Sep 17 00:00:00 2001
From: Mason Freed <masonf@chromium.org>
Date: Fri, 31 Mar 2023 13:16:03 -0700
Subject: [PATCH] Convert `:open` to `:popover-open` for popovers

See [1]/[2] for more context, but there are cases where `:open` is
ambiguous for popovers. If multiple elements support `:open/:closed`,
and [popover] can be applied to any of them, there are situations
where an element is both open and closed. For example,
`<details popover>` can be closed as a details element and open as
a popover, which makes it match both `:open` and `:closed`. It seems
that really `:open` and `:closed` should match *elements* that can
open and close, and not things that can be made to open or close
via an attribute or other mechanism such as JS.

This CL adds `:popover-open` which only applies to popovers in the open
state, and it removes `:open` and `:closed` support for popovers. It also converts all of the popover WPTs to use `:popover-open` instead
of either `:open` or `:closed`.

[1] https://github.com/w3c/csswg-drafts/issues/8637
[2] https://github.com/whatwg/html/pull/9077

Bug: 1307772
Fixed: 1429670
Change-Id: I8d840512166ccdb5d5c8abbb7192bbce7177ee88
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4373888
Reviewed-by: Joey Arhar <jarhar@chromium.org>
Auto-Submit: Mason Freed <masonf@chromium.org>
Commit-Queue: Mason Freed <masonf@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1124869}
---
 .../selectmenu-parts-structure.tentative.html |  10 +-
 ...popover-position-with-zoom.tentative.html} |   0
 ...electmenu-popover-position.tentative.html} |   0
 ...html => selectmenu-popover.tentative.html} |   0
 .../hide-other-popover-side-effects.html      |   2 +-
 .../light-dismiss-event-ordering.html         |   6 +-
 .../popovers/popover-anchor-nesting.html      |   8 +-
 .../popovers/popover-attribute-basic.html     |  67 +++--
 .../popovers/popover-document-open.html       |   8 +-
 html/semantics/popovers/popover-events.html   |  46 ++--
 html/semantics/popovers/popover-focus-2.html  |  14 +-
 .../popovers/popover-focus-child-dialog.html  |   6 +-
 html/semantics/popovers/popover-focus.html    |  34 +--
 .../popovers/popover-hidden-display.html      |   4 +-
 .../popovers/popover-inside-display-none.html |   2 +-
 .../popovers/popover-invoking-attribute.html  |  16 +-
 .../popover-light-dismiss-on-scroll.html      |   2 +-
 .../popovers/popover-light-dismiss.html       | 236 +++++++++---------
 .../popover-not-keyboard-focusable.html       |   8 +-
 .../semantics/popovers/popover-removal-2.html |   8 +-
 html/semantics/popovers/popover-removal.html  |   4 +-
 .../popovers/popover-shadow-dom.html          |  34 +--
 html/semantics/popovers/popover-stacking.html |  14 +-
 .../popover-target-element-disabled.html      |  64 ++---
 .../popover-top-layer-combinations.html       |  15 +-
 .../popover-top-layer-interactions.html       |   2 +-
 .../popover-types-with-hints.tentative.html   |  54 ++--
 html/semantics/popovers/popover-types.html    |   6 +-
 .../popovers/resources/popover-utils.js       |   8 +-
 29 files changed, 342 insertions(+), 336 deletions(-)
 rename html/semantics/forms/the-selectmenu-element/{selectmenu-popup-position-with-zoom.tentative.html => selectmenu-popover-position-with-zoom.tentative.html} (100%)
 rename html/semantics/forms/the-selectmenu-element/{selectmenu-popup-position.tentative.html => selectmenu-popover-position.tentative.html} (100%)
 rename html/semantics/forms/the-selectmenu-element/{selectmenu-popup.tentative.html => selectmenu-popover.tentative.html} (100%)

diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-parts-structure.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-parts-structure.tentative.html
index 4f49d3f0ea9354..08c283322d54a3 100644
--- a/html/semantics/forms/the-selectmenu-element/selectmenu-parts-structure.tentative.html
+++ b/html/semantics/forms/the-selectmenu-element/selectmenu-parts-structure.tentative.html
@@ -208,13 +208,13 @@
     const selectMenu1Popover = document.getElementById("selectMenu1-popover");
     const selectMenu1Button = document.getElementById("selectMenu1-button");
     const selectMenu1Child2 = document.getElementById("selectMenu1-child2");
-    assert_false(selectMenu1Popover.matches(':open'));
+    assert_false(selectMenu1Popover.matches(':popover-open'));
     selectMenu1Button.click();
-    assert_false(selectMenu1Popover.matches(':open'), "Clicking a button part that is a descendant of the listbox part should have no effect");
+    assert_false(selectMenu1Popover.matches(':popover-open'), "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(selectMenu1Popover.matches(':open'));
+    assert_true(selectMenu1Popover.matches(':popover-open'));
     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(selectMenu2Popover.matches(':open'));
+    assert_false(selectMenu2Popover.matches(':popover-open'));
     await clickOn(selectMenu2Button);
-    assert_false(selectMenu2Popover.matches(':open'), "Clicking a button part should not show an invalid listbox part");
+    assert_false(selectMenu2Popover.matches(':popover-open'), "Clicking a button part should not show an invalid listbox part");
 
     assert_equals(selectMenu2.value, "three");
     await clickOn(selectMenu2Button);
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-popup-position-with-zoom.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-popover-position-with-zoom.tentative.html
similarity index 100%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-popup-position-with-zoom.tentative.html
rename to html/semantics/forms/the-selectmenu-element/selectmenu-popover-position-with-zoom.tentative.html
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-popup-position.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-popover-position.tentative.html
similarity index 100%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-popup-position.tentative.html
rename to html/semantics/forms/the-selectmenu-element/selectmenu-popover-position.tentative.html
diff --git a/html/semantics/forms/the-selectmenu-element/selectmenu-popup.tentative.html b/html/semantics/forms/the-selectmenu-element/selectmenu-popover.tentative.html
similarity index 100%
rename from html/semantics/forms/the-selectmenu-element/selectmenu-popup.tentative.html
rename to html/semantics/forms/the-selectmenu-element/selectmenu-popover.tentative.html
diff --git a/html/semantics/popovers/hide-other-popover-side-effects.html b/html/semantics/popovers/hide-other-popover-side-effects.html
index 9fe6673d2ee9c8..7cc95a95e907df 100644
--- a/html/semantics/popovers/hide-other-popover-side-effects.html
+++ b/html/semantics/popovers/hide-other-popover-side-effects.html
@@ -16,6 +16,6 @@
   });
   assert_throws_dom('InvalidStateError', () => popover2.showPopover(),
     "popover1's beforetoggle event handler removes popover2 so showPopover should throw.");
-  assert_false(popover2.matches(':open'), 'popover2 should not match :open once it is closed.');
+  assert_false(popover2.matches(':popover-open'), 'popover2 should not match :popover-open once it is closed.');
 }, 'Removing a popover while it is opening and force closing another popover should throw an exception.');
 </script>
diff --git a/html/semantics/popovers/light-dismiss-event-ordering.html b/html/semantics/popovers/light-dismiss-event-ordering.html
index 4bfcecc4b05931..be39050ac6bab9 100644
--- a/html/semantics/popovers/light-dismiss-event-ordering.html
+++ b/html/semantics/popovers/light-dismiss-event-ordering.html
@@ -28,7 +28,7 @@
       }, {capture, once: true});
       // Click away from the popover to activate light dismiss.
       await clickOn(target);
-      assert_equals(document.querySelectorAll(':open').length, 0,
+      assert_equals(document.querySelectorAll(':popover-open').length, 0,
         'The popover should be closed via light dismiss even when preventDefault is called.');
 
       popover.showPopover();
@@ -37,7 +37,7 @@
       }, {capture, once: true});
       // Click away from the popover to activate light dismiss.
       await clickOn(target);
-      assert_equals(document.querySelectorAll(':open').length, 0,
+      assert_equals(document.querySelectorAll(':popover-open').length, 0,
         'The popover should be closed via light dismiss even when stopPropagation is called.');
 
     }, `Tests the interactions between popover light dismiss and pointer/mouse events. eventName: ${eventName}, capture: ${capture}`);
@@ -75,7 +75,7 @@
   assert_array_equals(events, expectedEvents,
     'pointer and popover events should be fired in the correct order.');
 
-  assert_equals(document.querySelectorAll(':open').length, 0,
+  assert_equals(document.querySelectorAll(':popover-open').length, 0,
     'The popover should be closed via light dismiss.');
 
 }, 'Tests the order of pointer/mouse events during popover light dismiss.');
diff --git a/html/semantics/popovers/popover-anchor-nesting.html b/html/semantics/popovers/popover-anchor-nesting.html
index e3e712b937ab9c..c3ea4f21658aec 100644
--- a/html/semantics/popovers/popover-anchor-nesting.html
+++ b/html/semantics/popovers/popover-anchor-nesting.html
@@ -40,15 +40,15 @@
     setup({ explicit_done: true });
 
     popover2.showPopover();
-    assert_false(popover1.matches(':open'));
-    assert_true(popover2.matches(':open'));
+    assert_false(popover1.matches(':popover-open'));
+    assert_true(popover2.matches(':popover-open'));
     await clickOn(button1);
     test(t => {
       // Button1 is the anchor for popover1, and an ancestor of popover2.
       // Since popover2 is open, but not popover1, button1 should not be
       // the anchor of any open popover. So popover2 should be closed.
-      assert_false(popover2.matches(':open'));
-      assert_true(popover1.matches(':open'));
+      assert_false(popover2.matches(':popover-open'));
+      assert_true(popover1.matches(':popover-open'));
     },'Nested popovers (inside anchor elements) do not affect light dismiss');
 
     done();
diff --git a/html/semantics/popovers/popover-attribute-basic.html b/html/semantics/popovers/popover-attribute-basic.html
index 56d746e9dbe93b..8d8ff0aacdd64f 100644
--- a/html/semantics/popovers/popover-attribute-basic.html
+++ b/html/semantics/popovers/popover-attribute-basic.html
@@ -154,25 +154,25 @@
   test((t) => {
     const popover = createPopover(t);
     popover.showPopover();
-    assert_true(popover.matches(':open'));
+    assert_true(popover.matches(':popover-open'));
     if (popoverHintSupported()) {
       popover.setAttribute('popover','hint'); // Change popover type
-      assert_false(popover.matches(':open'));
+      assert_false(popover.matches(':popover-open'));
       popover.showPopover();
-      assert_true(popover.matches(':open'));
+      assert_true(popover.matches(':popover-open'));
     }
     popover.setAttribute('popover','manual');
-    assert_false(popover.matches(':open'));
+    assert_false(popover.matches(':popover-open'));
     popover.showPopover();
-    assert_true(popover.matches(':open'));
+    assert_true(popover.matches(':popover-open'));
     popover.setAttribute('popover','invalid');
-    assert_true(popover.matches(':open'),'From "manual" to "invalid" (which is interpreted as "manual") should not close the popover');
+    assert_true(popover.matches(':popover-open'),'From "manual" to "invalid" (which is interpreted as "manual") should not close the popover');
     popover.setAttribute('popover','auto');
-    assert_false(popover.matches(':open'),'From "invalid" ("manual") to "auto" should hide the popover');
+    assert_false(popover.matches(':popover-open'),'From "invalid" ("manual") to "auto" should hide the popover');
     popover.showPopover();
-    assert_true(popover.matches(':open'));
+    assert_true(popover.matches(':popover-open'));
     popover.setAttribute('popover','invalid');
-    assert_false(popover.matches(':open'),'From "auto" to "invalid" (which is interpreted as "manual") should close the popover');
+    assert_false(popover.matches(':popover-open'),'From "auto" to "invalid" (which is interpreted as "manual") should close the popover');
   },'Changing attribute values should close open popovers');
 
   const validTypes = popoverHintSupported() ? ["auto","hint","manual"] : ["auto","manual"];
@@ -181,21 +181,34 @@
       const popover = createPopover(t);
       popover.setAttribute('popover',type);
       popover.showPopover();
-      assert_true(popover.matches(':open'));
+      assert_true(popover.matches(':popover-open'));
       popover.remove();
-      assert_false(popover.matches(':open'));
+      assert_false(popover.matches(':popover-open'));
       document.body.appendChild(popover);
-      assert_false(popover.matches(':open'));
+      assert_false(popover.matches(':popover-open'));
     },`Removing a visible popover=${type} element from the document should close the popover`);
 
     test((t) => {
       const popover = createPopover(t);
       popover.setAttribute('popover',type);
       popover.showPopover();
-      assert_true(popover.matches(':open'));
+      assert_true(popover.matches(':popover-open'));
       assert_false(popover.matches(':modal'));
       popover.hidePopover();
     },`A showing popover=${type} does not match :modal`);
+
+    test((t) => {
+      const popover = createPopover(t);
+      popover.setAttribute('popover',type);
+      assert_false(popover.matches(':popover-open'));
+      assert_false(popover.matches(':open'),'popovers never match :open');
+      assert_false(popover.matches(':closed'),'popovers never match :closed');
+      popover.showPopover();
+      assert_true(popover.matches(':popover-open'));
+      assert_false(popover.matches(':open'),'popovers never match :open');
+      assert_false(popover.matches(':closed'),'popovers never match :closed');
+      popover.hidePopover();
+    },`A popover=${type} never matches :open or :closed`);
   });
 
   test((t) => {
@@ -209,11 +222,11 @@
         return;
       popover.setAttribute('popover','manual');
     },{once: true});
-    assert_true(other_popover.matches(':open'));
-    assert_false(popover.matches(':open'));
+    assert_true(other_popover.matches(':popover-open'));
+    assert_false(popover.matches(':popover-open'));
     assert_throws_dom('InvalidStateError', () => popover.showPopover());
-    assert_false(other_popover.matches(':open'),'unrelated popover is hidden');
-    assert_false(popover.matches(':open'),'popover is not shown if its type changed during show');
+    assert_false(other_popover.matches(':popover-open'),'unrelated popover is hidden');
+    assert_false(popover.matches(':popover-open'),'popover is not shown if its type changed during show');
   },`Changing the popover type in a "beforetoggle" event handler should throw an exception (during showPopover())`);
 
   test((t) => {
@@ -236,11 +249,11 @@
         return;
       assert_true(nested_popover_hidden,'The nested popover should be hidden first');
     },{once: true});
-    assert_true(popover.matches(':open'));
-    assert_true(other_popover.matches(':open'));
+    assert_true(popover.matches(':popover-open'));
+    assert_true(other_popover.matches(':popover-open'));
     assert_throws_dom('InvalidStateError', () => popover.hidePopover());
-    assert_false(other_popover.matches(':open'),'unrelated popover is hidden');
-    assert_false(popover.matches(':open'),'popover is still hidden if its type changed during hide event');
+    assert_false(other_popover.matches(':popover-open'),'unrelated popover is hidden');
+    assert_false(popover.matches(':popover-open'),'popover is still hidden if its type changed during hide event');
     assert_throws_dom("InvalidStateError",() => other_popover.hidePopover(),'Nested popover should already be hidden');
   },`Changing the popover type in a "beforetoggle" event handler should throw an exception (during hidePopover())`);
 
@@ -277,7 +290,7 @@
             const popover = createPopover(t);
             setPopoverValue(popover,type,method);
             popover.showPopover();
-            assert_true(popover.matches(':open'));
+            assert_true(popover.matches(':popover-open'));
             let gotEvent = false;
             popover.addEventListener('beforetoggle', (e) => {
               if (e.newState !== "closed")
@@ -288,7 +301,7 @@
             setPopoverValue(popover,newType,method);
             if (type===interpretedType(newType,method)) {
               // Keeping the type the same should not hide it or fire events.
-              assert_true(popover.matches(':open'),'popover should remain open when not changing the type');
+              assert_true(popover.matches(':popover-open'),'popover should remain open when not changing the type');
               assert_false(gotEvent);
               try {
                 popover.hidePopover(); // Cleanup
@@ -297,7 +310,7 @@
               // Changing the type at all should hide the popover. The hide event
               // handler should run, set a new type, and that type should end up
               // as the final result.
-              assert_false(popover.matches(':open'));
+              assert_false(popover.matches(':popover-open'));
               if (inEventType === undefined || (method ==="idl" && inEventType === null)) {
                 assert_throws_dom("NotSupportedError",() => popover.showPopover(),'We should have removed the popover attribute, so showPopover should throw');
               } else {
@@ -306,16 +319,16 @@
                 assert_equals(popover.popover, interpretedType(inEventType,method),'IDL attribute');
                 // Make sure the type is really correct, via behavior.
                 popover.showPopover(); // Show it
-                assert_true(popover.matches(':open'),'Popover should function');
+                assert_true(popover.matches(':popover-open'),'Popover should function');
                 await clickOn(outsideElement); // Try to light dismiss
                 switch (interpretedType(inEventType,method)) {
                   case 'manual':
-                    assert_true(popover.matches(':open'),'A popover=manual should not light-dismiss');
+                    assert_true(popover.matches(':popover-open'),'A popover=manual should not light-dismiss');
                     popover.hidePopover();
                     break;
                   case 'auto':
                   case 'hint':
-                    assert_false(popover.matches(':open'),'A popover=auto should light-dismiss');
+                    assert_false(popover.matches(':popover-open'),'A popover=auto should light-dismiss');
                     break;
                 }
               }
diff --git a/html/semantics/popovers/popover-document-open.html b/html/semantics/popovers/popover-document-open.html
index db43fd02b92f06..80ac86acedab24 100644
--- a/html/semantics/popovers/popover-document-open.html
+++ b/html/semantics/popovers/popover-document-open.html
@@ -13,17 +13,17 @@
     test((t) => {
       const popover1 = document.querySelector('#popover1');
       popover1.showPopover();
-      assert_true(popover1.matches(':open'));
+      assert_true(popover1.matches(':popover-open'));
       assert_true(!document.querySelector('#popover2'));
       document.open();
       document.write('<!DOCTYPE html><div popover id=popover2>Popover</div>');
       document.close();
       assert_true(!document.querySelector('#popover1'),'popover1 should be removed from the document');
       assert_true(!!document.querySelector('#popover2'),'popover2 should be in the document');
-      assert_false(popover1.matches(':open'),'popover1 should have been hidden when it was removed from the document');
-      assert_false(popover1.matches(':open'),'popover2 shouldn\'t be showing yet');
+      assert_false(popover1.matches(':popover-open'),'popover1 should have been hidden when it was removed from the document');
+      assert_false(popover1.matches(':popover-open'),'popover2 shouldn\'t be showing yet');
       popover2.showPopover();
-      assert_true(popover2.matches(':open'),'popover2 should be able to be shown');
+      assert_true(popover2.matches(':popover-open'),'popover2 should be able to be shown');
       popover2.hidePopover();
     },'document.open should not break popovers');
   };
diff --git a/html/semantics/popovers/popover-events.html b/html/semantics/popovers/popover-events.html
index 95cd5ad2add38e..4d58001f7ddeae 100644
--- a/html/semantics/popovers/popover-events.html
+++ b/html/semantics/popovers/popover-events.html
@@ -22,7 +22,7 @@
   for(const method of ["listener","attribute"]) {
     promise_test(async t => {
       const {popover,signal} = getPopoverAndSignal(t);
-      assert_false(popover.matches(':open'));
+      assert_false(popover.matches(':popover-open'));
       let showCount = 0;
       let afterShowCount = 0;
       let hideCount = 0;
@@ -33,15 +33,13 @@
           if (e.newState === "open") {
             ++showCount;
             assert_equals(e.oldState,"closed",'The "beforetoggle" event should be fired before the popover is open');
-            assert_true(e.target.matches(':closed'),'The popover should be in the :closed state when the opening event fires.');
-            assert_false(e.target.matches(':open'),'The popover should *not* be in the :open state when the opening event fires.');
+            assert_false(e.target.matches(':popover-open'),'The popover should *not* be in the :popover-open state when the opening event fires.');
             assert_true(e.cancelable,'beforetoggle should be cancelable only for the "show" transition');
           } else {
             ++hideCount;
             assert_equals(e.newState,"closed",'Popover toggleevent states should be "open" and "closed"');
             assert_equals(e.oldState,"open",'The "beforetoggle" event should be fired before the popover is closed')
-            assert_true(e.target.matches(':open'),'The popover should be in the :open state when the hiding event fires.');
-            assert_false(e.target.matches(':closed'),'The popover should *not* be in the :closed state when the hiding event fires.');
+            assert_true(e.target.matches(':popover-open'),'The popover should be in the :popover-open state when the hiding event fires.');
             assert_false(e.cancelable,'beforetoggle should be cancelable only for the "show" transition');
             e.preventDefault(); // beforetoggle should be cancelable only for the "show" transition
           }
@@ -52,14 +50,12 @@
           if (e.newState === "open") {
             ++afterShowCount;
             if (document.body.contains(e.target)) {
-              assert_true(e.target.matches(':open'),'The popover should be in the :open state when the after opening event fires.');
-              assert_false(e.target.matches(':closed'),'The popover should *not* be in the :closed state when the after opening event fires.');
+              assert_true(e.target.matches(':popover-open'),'The popover should be in the :popover-open state when the after opening event fires.');
             }
           } else {
             ++afterHideCount;
             assert_equals(e.newState,"closed",'Popover toggleevent states should be "open" and "closed"');
-            assert_true(e.target.matches(':closed'),'The popover should be in the :closed state when the after hiding event fires.');
-            assert_false(e.target.matches(':open'),'The popover should *not* be in the :open state when the after hiding event fires.');
+            assert_false(e.target.matches(':popover-open'),'The popover should *not* be in the :popover-open state when the after hiding event fires.');
           }
           e.preventDefault(); // "toggle" should not be cancelable.
         }
@@ -85,7 +81,7 @@
       assert_equals(0,afterShowCount);
       assert_equals(0,afterHideCount);
       popover.showPopover();
-      assert_true(popover.matches(':open'));
+      assert_true(popover.matches(':popover-open'));
       assert_equals(1,showCount);
       assert_equals(0,hideCount);
       assert_equals(0,afterShowCount);
@@ -93,9 +89,9 @@
       await waitForRender();
       assert_equals(1,afterShowCount,'toggle show is fired asynchronously');
       assert_equals(0,afterHideCount);
-      assert_true(popover.matches(':open'));
+      assert_true(popover.matches(':popover-open'));
       popover.hidePopover();
-      assert_false(popover.matches(':open'));
+      assert_false(popover.matches(':popover-open'));
       assert_equals(1,showCount);
       assert_equals(1,hideCount);
       assert_equals(1,afterShowCount);
@@ -106,7 +102,7 @@
       // No additional events
       await waitForRender();
       await waitForRender();
-      assert_false(popover.matches(':open'));
+      assert_false(popover.matches(':popover-open'));
       assert_equals(1,showCount);
       assert_equals(1,hideCount);
       assert_equals(1,afterShowCount);
@@ -123,14 +119,14 @@
       if (cancel)
         e.preventDefault();
     }, {signal});
-    assert_false(popover.matches(':open'));
+    assert_false(popover.matches(':popover-open'));
     popover.showPopover();
-    assert_false(popover.matches(':open'),'The "beforetoggle" event should be cancelable for the "opening" transition');
+    assert_false(popover.matches(':popover-open'),'The "beforetoggle" event should be cancelable for the "opening" transition');
     cancel = false;
     popover.showPopover();
-    assert_true(popover.matches(':open'));
+    assert_true(popover.matches(':popover-open'));
     popover.hidePopover();
-    assert_false(popover.matches(':open'));
+    assert_false(popover.matches(':popover-open'));
   }, 'The "beforetoggle" event is cancelable for the "opening" transition');
 
   promise_test(async t => {
@@ -138,14 +134,14 @@
     popover.addEventListener('beforetoggle',(e) => {
       assert_not_equals(e.newState,"closed",'The "beforetoggle" event was fired for the closing transition');
     }, {signal});
-    assert_false(popover.matches(':open'));
+    assert_false(popover.matches(':popover-open'));
     popover.showPopover();
-    assert_true(popover.matches(':open'));
+    assert_true(popover.matches(':popover-open'));
     t.add_cleanup(() => {document.body.appendChild(popover);});
     popover.remove();
     await waitForRender(); // Check for async events also
     await waitForRender(); // Check for async events also
-    assert_false(popover.matches(':open'));
+    assert_false(popover.matches(':popover-open'));
   }, 'The "beforetoggle" event is not fired for element removal');
 
   promise_test(async t => {
@@ -190,31 +186,31 @@
 
     resetEvents();
     assertOnly('none');
-    assert_false(popover.matches(':open'));
+    assert_false(popover.matches(':popover-open'));
     popover.showPopover();
     await waitForRender();
-    assert_true(popover.matches(':open'));
+    assert_true(popover.matches(':popover-open'));
     assertOnly('singleShow','Single event should have been fired, which is a "show"');
 
     resetEvents();
     popover.hidePopover();
     popover.showPopover(); // Immediate re-show
     await waitForRender();
-    assert_true(popover.matches(':open'));
+    assert_true(popover.matches(':popover-open'));
     assertOnly('coalescedShow','Single coalesced event should have been fired, which is a "show"');
 
     resetEvents();
     popover.hidePopover();
     await waitForRender();
     assertOnly('singleHide','Single event should have been fired, which is a "hide"');
-    assert_false(popover.matches(':open'));
+    assert_false(popover.matches(':popover-open'));
 
     resetEvents();
     popover.showPopover();
     popover.hidePopover(); // Immediate re-hide
     await waitForRender();
     assertOnly('coalescedHide','Single coalesced event should have been fired, which is a "hide"');
-    assert_false(popover.matches(':open'));
+    assert_false(popover.matches(':popover-open'));
   }, 'The "toggle" event is coalesced');
 };
 </script>
diff --git a/html/semantics/popovers/popover-focus-2.html b/html/semantics/popovers/popover-focus-2.html
index 74ccc456ab6d83..5a7f5da8f7b52d 100644
--- a/html/semantics/popovers/popover-focus-2.html
+++ b/html/semantics/popovers/popover-focus-2.html
@@ -61,7 +61,7 @@
   await sendTab();
   assert_equals(document.activeElement,invoker1);
   await sendEnter(); // Activate the invoker
-  assert_true(popover1.matches(':open'), 'popover1 should be invoked by invoker1');
+  assert_true(popover1.matches(':popover-open'), 'popover1 should be invoked by invoker1');
   assert_equals(document.activeElement,invoker1,'Focus should not move when popover is shown');
   await sendTab();
   assert_equals(document.activeElement,inside_popover1,'Focus should move from invoker into the open popover');
@@ -70,14 +70,14 @@
   await verifyFocusOrder([button1, button2, invoker1, inside_popover1, invoker2, inside_popover2, button3, button4]);
   invoker2.focus();
   await sendEnter(); // Activate the nested invoker
-  assert_true(popover2.matches(':open'), 'popover2 should be invoked by nested invoker');
+  assert_true(popover2.matches(':popover-open'), 'popover2 should be invoked by nested invoker');
   assert_equals(document.activeElement,invoker2,'Focus should stay on the invoker');
   await sendTab();
   assert_equals(document.activeElement,inside_popover3,'Focus should move into nested popover');
   await sendTab();
   assert_equals(document.activeElement,invoker3);
   await sendEnter(); // Activate the (empty) nested invoker
-  assert_true(popover3.matches(':open'), 'popover3 should be invoked by nested invoker');
+  assert_true(popover3.matches(':popover-open'), 'popover3 should be invoked by nested invoker');
   assert_equals(document.activeElement,invoker3,'Focus should stay on the invoker');
   await sendTab();
   assert_equals(document.activeElement,inside_popover2,'Focus should skip popover without focusable content, going back to higher scope');
@@ -120,10 +120,10 @@
   invoker.focus(); // Make sure button is focused.
   assert_equals(document.activeElement,invoker);
   await sendEnter(); // Activate the invoker
-  assert_true(popover.matches(':open'), 'popover should be invoked by invoker');
+  assert_true(popover.matches(':popover-open'), 'popover should be invoked by invoker');
   assert_equals(document.activeElement,hideButton,'Hide button should be focused due to autofocus attribute');
   await sendEnter(); // Activate the hide invoker
-  assert_false(popover.matches(':open'), 'popover should be hidden by invoker');
+  assert_false(popover.matches(':popover-open'), 'popover should be hidden by invoker');
   assert_equals(document.activeElement,invoker,'Focus should be returned to the invoker');
 }, "Popover focus returns when popover is hidden by invoker");
 </script>
@@ -141,14 +141,14 @@
   invoker.focus(); // Make sure button is focused.
   assert_equals(document.activeElement,invoker);
   invoker.click(); // Activate the invoker
-  assert_true(popover.matches(':open'), 'popover should be invoked by invoker');
+  assert_true(popover.matches(':popover-open'), 'popover should be invoked by invoker');
   assert_equals(document.activeElement,invoker,'invoker should still be focused');
   await sendTab();
   assert_equals(document.activeElement,popover.querySelector('button'),'next up is the popover');
   await sendTab();
   assert_equals(document.activeElement,otherElement,'next focus stop is outside the popover');
   await sendEscape(); // Close the popover via ESC
-  assert_false(popover.matches(':open'), 'popover should be hidden');
+  assert_false(popover.matches(':popover-open'), 'popover should be hidden');
   assert_equals(document.activeElement,otherElement,'focus does not move because it was not inside the popover');
 }, "Popover focus only returns to invoker when focus is within the popover");
 </script>
diff --git a/html/semantics/popovers/popover-focus-child-dialog.html b/html/semantics/popovers/popover-focus-child-dialog.html
index c07d313c9e995f..051eef14a7ccc7 100644
--- a/html/semantics/popovers/popover-focus-child-dialog.html
+++ b/html/semantics/popovers/popover-focus-child-dialog.html
@@ -25,7 +25,7 @@
   document.activeElement.blur();
   popover1.showPopover();
 
-  assert_true(popover1.matches(':open'), 'The popover should be open.');
+  assert_true(popover1.matches(':popover-open'), 'The popover should be open.');
   assert_true(childdialog.hasAttribute('open'), 'The dialog should be open.');
   assert_equals(document.activeElement, document.body, 'Nothing should have gotten focused.');
 }, 'Popovers should not initially focus child dialog elements.');
@@ -38,8 +38,8 @@
   document.activeElement.blur();
   popover2.showPopover();
 
-  assert_true(popover2.matches(':open'), 'The parent popover should be open.');
-  assert_true(childpopover.matches(':open'), 'The child popover should be open.');
+  assert_true(popover2.matches(':popover-open'), 'The parent popover should be open.');
+  assert_true(childpopover.matches(':popover-open'), 'The child popover should be open.');
   assert_equals(document.activeElement, document.body, 'Nothing should have gotten focused.');
 }, 'Popovers should not initially focus child popover elements.');
 </script>
diff --git a/html/semantics/popovers/popover-focus.html b/html/semantics/popovers/popover-focus.html
index aad9ab99dc2042..915a1bcade3279 100644
--- a/html/semantics/popovers/popover-focus.html
+++ b/html/semantics/popovers/popover-focus.html
@@ -91,7 +91,7 @@
         expectedFocusedElement = priorFocus;
       }
       assert_true(!!expectedFocusedElement);
-      assert_false(popover.matches(':open'));
+      assert_false(popover.matches(':popover-open'));
 
       // Directly show and hide the popover:
       priorFocus.focus();
@@ -130,7 +130,7 @@
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popover.showPopover()`);
       assert_equals(popover.popover, 'auto', 'All popovers in this test should start as popover=auto');
       popover.popover = 'manual';
-      assert_false(popover.matches(':open'), 'Changing the popover type should hide the popover');
+      assert_false(popover.matches(':popover-open'), 'Changing the popover type should hide the popover');
       assert_equals(document.activeElement, priorFocus, 'prior element should get focus when the type is changed');
       assert_false(isElementVisible(popover));
       popover.popover = 'auto';
@@ -152,7 +152,7 @@
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popover.showPopover()`);
       const dialog = document.body.appendChild(document.createElement('dialog'));
       dialog.showModal();
-      assert_false(popover.matches(':open'), 'Opening a modal dialog should hide the popover');
+      assert_false(popover.matches(':popover-open'), 'Opening a modal dialog should hide the popover');
       assert_not_equals(document.activeElement, priorFocus, 'prior element should *not* get focus when a modal dialog is shown');
       assert_false(isElementVisible(popover));
       dialog.close();
@@ -162,7 +162,7 @@
       const button = addInvoker(t, popover);
       priorFocus.focus();
       button.click();
-      assert_true(popover.matches(':open'));
+      assert_true(popover.matches(':popover-open'));
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by button.click()`);
 
       // Make sure Escape works in the invoker case:
@@ -173,19 +173,19 @@
       // Make sure we can directly focus the (already open) popover:
       priorFocus.focus();
       button.click();
-      assert_true(popover.matches(':open'));
+      assert_true(popover.matches(':popover-open'));
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by button.click()`);
       popover.focus();
       assert_equals(document.activeElement, popover.hasAttribute('tabindex') ? popover : expectedFocusedElement, `${testName} directly focus with popover.focus()`);
       button.click(); // Button is set to toggle the popover
-      assert_false(popover.matches(':open'));
+      assert_false(popover.matches(':popover-open'));
       assert_equals(document.activeElement, priorFocus, 'prior element should get focus on button-toggled hide');
       assert_false(isElementVisible(popover));
     }, "Popover focus test: " + testName);
 
     promise_test(async t => {
       const priorFocus = addPriorFocus(t);
-      assert_false(popover.matches(':open'), 'popover should start out hidden');
+      assert_false(popover.matches(':popover-open'), 'popover should start out hidden');
       let button = addInvoker(t, popover);
       assert_equals(button.getAttribute('popovertarget'), popover.id, 'This test assumes the button uses `popovertarget`.');
       assert_not_equals(button, priorFocus, 'Stranger things have happened');
@@ -193,9 +193,9 @@
       priorFocus.focus();
       assert_equals(document.activeElement, priorFocus);
       popover.showPopover();
-      assert_true(popover.matches(':open'));
+      assert_true(popover.matches(':popover-open'));
       await clickOn(button); // This will *not* light dismiss, but will "toggle" the popover.
-      assert_false(popover.matches(':open'));
+      assert_false(popover.matches(':popover-open'));
       assert_equals(document.activeElement, button, 'focus should move to the button when clicked, and should stay there when the popover closes');
       assert_false(isElementVisible(popover));
 
@@ -206,13 +206,13 @@
       t.add_cleanup(() => button.remove());
       priorFocus.focus();
       popover.showPopover();
-      assert_true(popover.matches(':open'));
+      assert_true(popover.matches(':popover-open'));
       const changesFocus = !popover.hasAttribute('data-no-focus');
       if (changesFocus) {
         assert_not_equals(document.activeElement, priorFocus, 'focus should shift for this element');
       }
       await clickOn(button);
-      assert_false(popover.matches(':open'), 'clicking button should hide the popover');
+      assert_false(popover.matches(':popover-open'), 'clicking button should hide the popover');
       assert_equals(document.activeElement, priorFocus, 'Contained button should return focus to the previously focused element');
       assert_false(isElementVisible(popover));
 
@@ -221,9 +221,9 @@
       document.body.appendChild(button);
       priorFocus.focus();
       popover.showPopover();
-      assert_true(popover.matches(':open'));
+      assert_true(popover.matches(':popover-open'));
       await clickOn(button); // This will light dismiss the popover, focus the prior focus, then focus this button.
-      assert_false(popover.matches(':open'), 'clicking button should hide the popover (via light dismiss)');
+      assert_false(popover.matches(':popover-open'), 'clicking button should hide the popover (via light dismiss)');
       assert_equals(document.activeElement, button, 'Focus should go to unrelated button on light dismiss');
       assert_false(isElementVisible(popover));
     }, "Popover button click focus test: " + testName);
@@ -234,12 +234,12 @@
         return;
       }
       const priorFocus = addPriorFocus(t);
-      assert_false(popover.matches(':open'), 'popover should start out hidden');
+      assert_false(popover.matches(':popover-open'), 'popover should start out hidden');
 
       // Move the prior focus out of the document
       priorFocus.focus();
       popover.showPopover();
-      assert_true(popover.matches(':open'));
+      assert_true(popover.matches(':popover-open'));
       const newFocus = document.activeElement;
       assert_not_equals(newFocus, priorFocus, 'focus should shift for this element');
       priorFocus.remove();
@@ -252,11 +252,11 @@
       // Move the prior focus inside the (already open) popover
       priorFocus.focus();
       popover.showPopover();
-      assert_true(popover.matches(':open'));
+      assert_true(popover.matches(':popover-open'));
       assert_false(popover.contains(priorFocus), 'Start with a non-contained prior focus');
       popover.appendChild(priorFocus); // Move inside the popover
       assert_true(popover.contains(priorFocus));
-      assert_true(popover.matches(':open'), 'popover should stay open');
+      assert_true(popover.matches(':popover-open'), 'popover should stay open');
       popover.hidePopover();
       assert_false(isElementVisible(popover));
       assert_not_equals(document.activeElement, priorFocus, 'focused element is display:none inside the popover');
diff --git a/html/semantics/popovers/popover-hidden-display.html b/html/semantics/popovers/popover-hidden-display.html
index 936c57fc17e52c..db61802db60adf 100644
--- a/html/semantics/popovers/popover-hidden-display.html
+++ b/html/semantics/popovers/popover-hidden-display.html
@@ -24,10 +24,10 @@
   [popover].toplayer {
     background: red;
   }
-  [popover].toplayer:open {
+  [popover].toplayer:popover-open {
     background: green;
   }
-  [popover].nottoplayer:open {
+  [popover].nottoplayer:popover-open {
     background: red;
   }
 </style>
diff --git a/html/semantics/popovers/popover-inside-display-none.html b/html/semantics/popovers/popover-inside-display-none.html
index a25cf14d1ce039..24ce7c6fc6c09b 100644
--- a/html/semantics/popovers/popover-inside-display-none.html
+++ b/html/semantics/popovers/popover-inside-display-none.html
@@ -14,6 +14,6 @@
 <script>
   const popover = document.querySelector('[popover]');
   popover.showPopover();
-  if (!popover.matches(':open'))
+  if (!popover.matches(':popover-open'))
     document.body.appendChild(document.createTextNode('FAIL'));
 </script>
diff --git a/html/semantics/popovers/popover-invoking-attribute.html b/html/semantics/popovers/popover-invoking-attribute.html
index 9b7a714f6dcdc0..22e7dc14a17f1d 100644
--- a/html/semantics/popovers/popover-invoking-attribute.html
+++ b/html/semantics/popovers/popover-invoking-attribute.html
@@ -90,19 +90,19 @@
               document.body.appendChild(popover);
               test.add_cleanup(() => {popover.remove();});
               assert_equals(invoker.popoverTargetElement,popover,'target element should be returned once it\'s in the document');
-              assert_false(popover.matches(':open'));
+              assert_false(popover.matches(':popover-open'));
               await testcase.invokeFn(invoker);
               assert_equals(document.activeElement,invoker,'Focus should end up on the invoker');
               expectedBehavior = testcase.getExpectedLogic(action);
               switch (expectedBehavior) {
                 case "toggle":
                 case "show":
-                  assert_true(popover.matches(':open'),'Toggle or show should show the popover');
+                  assert_true(popover.matches(':popover-open'),'Toggle or show should show the popover');
                   popover.hidePopover(); // Hide the popover
                   break;
                 case "hide":
                 case "none":
-                  assert_false(popover.matches(':open'),'Hide or none should leave the popover hidden');
+                  assert_false(popover.matches(':popover-open'),'Hide or none should leave the popover hidden');
                   break;
                 default:
                   assert_unreached();
@@ -112,18 +112,18 @@
                 // a control that has no expected behavior may hide an open popover via light dismiss.
                 return;
               }
-              assert_false(popover.matches(':open'));
+              assert_false(popover.matches(':popover-open'));
               popover.showPopover(); // Show the popover directly
               assert_equals(document.activeElement,invoker,'The popover should not shift focus');
-              assert_true(popover.matches(':open'));
+              assert_true(popover.matches(':popover-open'));
               await testcase.invokeFn(invoker);
               switch (expectedBehavior) {
                 case "toggle":
                 case "hide":
-                  assert_false(popover.matches(':open'),'Toggle or hide should hide the popover');
+                  assert_false(popover.matches(':popover-open'),'Toggle or hide should hide the popover');
                   break;
                 case "show":
-                  assert_true(popover.matches(':open'),'Show should leave the popover showing');
+                  assert_true(popover.matches(':popover-open'),'Show should leave the popover showing');
                   break;
                 default:
                   assert_unreached();
@@ -163,7 +163,7 @@
   });
 
 async function assertState(expectOpen,expectShow,expectHide) {
-  assert_equals(popover.matches(':open'),expectOpen,'Popover open state is incorrect');
+  assert_equals(popover.matches(':popover-open'),expectOpen,'Popover 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/html/semantics/popovers/popover-light-dismiss-on-scroll.html b/html/semantics/popovers/popover-light-dismiss-on-scroll.html
index a4bb4b452b0d4a..382addadef1e04 100644
--- a/html/semantics/popovers/popover-light-dismiss-on-scroll.html
+++ b/html/semantics/popovers/popover-light-dismiss-on-scroll.html
@@ -40,7 +40,7 @@
   const popovers = document.querySelectorAll('[popover]');
   function assertAll(showing) {
     for(let popover of popovers) {
-      assert_equals(popover.matches(':open'),showing);
+      assert_equals(popover.matches(':popover-open'),showing);
     }
   }
   async_test(t => {
diff --git a/html/semantics/popovers/popover-light-dismiss.html b/html/semantics/popovers/popover-light-dismiss.html
index 41c1100adac124..0cb13979407e4f 100644
--- a/html/semantics/popovers/popover-light-dismiss.html
+++ b/html/semantics/popovers/popover-light-dismiss.html
@@ -61,12 +61,12 @@
     e.preventDefault(); // 'beforetoggle' should not be cancellable.
   });
   promise_test(async () => {
-    assert_false(popover1.matches(':open'));
+    assert_false(popover1.matches(':popover-open'));
     popover1.showPopover();
-    assert_true(popover1.matches(':open'));
+    assert_true(popover1.matches(':popover-open'));
     let p1HideCount = popover1HideCount;
     await clickOn(outside);
-    assert_false(popover1.matches(':open'));
+    assert_false(popover1.matches(':popover-open'));
     assert_equals(popover1HideCount,p1HideCount+1);
   },'Clicking outside a popover will dismiss the popover');
 
@@ -80,54 +80,54 @@
     addListener('pointerup');
     addListener('mousedown');
     addListener('mouseup');
-    assert_false(popover1.matches(':open'));
+    assert_false(popover1.matches(':popover-open'));
     popover1.showPopover();
-    assert_true(popover1.matches(':open'));
+    assert_true(popover1.matches(':popover-open'));
     let p1HideCount = popover1HideCount;
     await clickOn(outside);
-    assert_false(popover1.matches(':open'),'preventDefault should not prevent light dismiss');
+    assert_false(popover1.matches(':popover-open'),'preventDefault should not prevent light dismiss');
     assert_equals(popover1HideCount,p1HideCount+1);
   },'Canceling pointer events should not keep clicks from light dismissing popovers');
 
   promise_test(async () => {
-    assert_false(popover1.matches(':open'));
+    assert_false(popover1.matches(':popover-open'));
     popover1.showPopover();
     await waitForRender();
     p1HideCount = popover1HideCount;
     await clickOn(inside1);
-    assert_true(popover1.matches(':open'));
+    assert_true(popover1.matches(':popover-open'));
     assert_equals(popover1HideCount,p1HideCount);
     popover1.hidePopover();
   },'Clicking inside a popover does not close that popover');
 
   promise_test(async () => {
-    assert_false(popover1.matches(':open'));
+    assert_false(popover1.matches(':popover-open'));
     popover1.showPopover();
     await waitForRender();
-    assert_true(popover1.matches(':open'));
+    assert_true(popover1.matches(':popover-open'));
     const actions = new test_driver.Actions();
     await actions.pointerMove(0, 0, {origin: outside})
       .pointerDown({button: actions.ButtonType.LEFT})
       .send();
     await waitForRender();
-    assert_true(popover1.matches(':open'),'pointerdown (outside the popover) should not hide the popover');
+    assert_true(popover1.matches(':popover-open'),'pointerdown (outside the popover) should not hide the popover');
     await actions.pointerUp({button: actions.ButtonType.LEFT})
       .send();
     await waitForRender();
-    assert_false(popover1.matches(':open'),'pointerup (outside the popover) should trigger light dismiss');
+    assert_false(popover1.matches(':popover-open'),'pointerup (outside the popover) should trigger light dismiss');
   },'Popovers close on pointerup, not pointerdown');
 
   promise_test(async (t) => {
     t.add_cleanup(() => popover1.hidePopover());
-    assert_false(popover1.matches(':open'));
+    assert_false(popover1.matches(':popover-open'));
     popover1.showPopover();
-    assert_true(popover1.matches(':open'));
+    assert_true(popover1.matches(':popover-open'));
     async function testOne(eventName) {
       document.body.dispatchEvent(new PointerEvent(eventName));
       document.body.dispatchEvent(new MouseEvent(eventName));
       document.body.dispatchEvent(new ProgressEvent(eventName));
       await waitForRender();
-      assert_true(popover1.matches(':open'),`A synthetic "${eventName}" event should not hide the popover`);
+      assert_true(popover1.matches(':popover-open'),`A synthetic "${eventName}" event should not hide the popover`);
     }
     await testOne('pointerup');
     await testOne('pointerdown');
@@ -139,10 +139,10 @@
     t.add_cleanup(() => popover1.hidePopover());
     popover1.showPopover();
     await clickOn(inside1After);
-    assert_true(popover1.matches(':open'));
+    assert_true(popover1.matches(':popover-open'));
     await sendTab();
     assert_equals(document.activeElement,afterp1,'Focus should move to a button outside the popover');
-    assert_true(popover1.matches(':open'));
+    assert_true(popover1.matches(':popover-open'));
   },'Moving focus outside the popover should not dismiss the popover');
 
   promise_test(async () => {
@@ -152,13 +152,13 @@
     p1HideCount = popover1HideCount;
     let p2HideCount = popover2HideCount;
     await clickOn(inside2);
-    assert_true(popover1.matches(':open'),'popover1 should be open');
-    assert_true(popover2.matches(':open'),'popover2 should be open');
+    assert_true(popover1.matches(':popover-open'),'popover1 should be open');
+    assert_true(popover2.matches(':popover-open'),'popover2 should be open');
     assert_equals(popover1HideCount,p1HideCount,'popover1');
     assert_equals(popover2HideCount,p2HideCount,'popover2');
     popover1.hidePopover();
-    assert_false(popover1.matches(':open'));
-    assert_false(popover2.matches(':open'));
+    assert_false(popover1.matches(':popover-open'));
+    assert_false(popover2.matches(':popover-open'));
   },'Clicking inside a child popover shouldn\'t close either popover');
 
   promise_test(async () => {
@@ -168,89 +168,89 @@
     p1HideCount = popover1HideCount;
     p2HideCount = popover2HideCount;
     await clickOn(inside1);
-    assert_true(popover1.matches(':open'));
+    assert_true(popover1.matches(':popover-open'));
     assert_equals(popover1HideCount,p1HideCount);
-    assert_false(popover2.matches(':open'));
+    assert_false(popover2.matches(':popover-open'));
     assert_equals(popover2HideCount,p2HideCount+1);
     popover1.hidePopover();
   },'Clicking inside a parent popover should close child popover');
 
   promise_test(async () => {
     await clickOn(button1show);
-    assert_true(popover1.matches(':open'));
+    assert_true(popover1.matches(':popover-open'));
     await waitForRender();
     p1HideCount = popover1HideCount;
     await clickOn(button1show);
-    assert_true(popover1.matches(':open'),'popover1 should stay open');
+    assert_true(popover1.matches(':popover-open'),'popover1 should stay open');
     assert_equals(popover1HideCount,p1HideCount,'popover1 should not get hidden and reshown');
     popover1.hidePopover(); // Cleanup
-    assert_false(popover1.matches(':open'));
+    assert_false(popover1.matches(':popover-open'));
   },'Clicking on invoking element, after using it for activation, shouldn\'t close its popover');
 
   promise_test(async () => {
     popover1.showPopover();
-    assert_true(popover1.matches(':open'));
-    assert_false(popover2.matches(':open'));
+    assert_true(popover1.matches(':popover-open'));
+    assert_false(popover2.matches(':popover-open'));
     await clickOn(button2);
-    assert_true(popover2.matches(':open'),'button2 should activate popover2');
+    assert_true(popover2.matches(':popover-open'),'button2 should activate popover2');
     p2HideCount = popover2HideCount;
     await clickOn(button2);
-    assert_true(popover2.matches(':open'),'popover2 should stay open');
+    assert_true(popover2.matches(':popover-open'),'popover2 should stay open');
     assert_equals(popover2HideCount,p2HideCount,'popover2 should not get hidden and reshown');
     popover1.hidePopover(); // Cleanup
-    assert_false(popover1.matches(':open'));
-    assert_false(popover2.matches(':open'));
+    assert_false(popover1.matches(':popover-open'));
+    assert_false(popover2.matches(':popover-open'));
   },'Clicking on invoking element, after using it for activation, shouldn\'t close its popover (nested case)');
 
   promise_test(async () => {
     popover1.showPopover();
     popover2.showPopover();
-    assert_true(popover1.matches(':open'));
-    assert_true(popover2.matches(':open'));
+    assert_true(popover1.matches(':popover-open'));
+    assert_true(popover2.matches(':popover-open'));
     p2HideCount = popover2HideCount;
     await clickOn(button2);
-    assert_true(popover2.matches(':open'),'popover2 should stay open');
+    assert_true(popover2.matches(':popover-open'),'popover2 should stay open');
     assert_equals(popover2HideCount,p2HideCount,'popover2 should not get hidden and reshown');
     popover1.hidePopover(); // Cleanup
-    assert_false(popover1.matches(':open'));
-    assert_false(popover2.matches(':open'));
+    assert_false(popover1.matches(':popover-open'));
+    assert_false(popover2.matches(':popover-open'));
   },'Clicking on invoking element, after using it for activation, shouldn\'t close its popover (nested case, not used for invocation)');
 
   promise_test(async () => {
     popover1.showPopover(); // Directly show the popover
-    assert_true(popover1.matches(':open'));
+    assert_true(popover1.matches(':popover-open'));
     await waitForRender();
     p1HideCount = popover1HideCount;
     await clickOn(button1show);
-    assert_true(popover1.matches(':open'),'popover1 should stay open');
+    assert_true(popover1.matches(':popover-open'),'popover1 should stay open');
     assert_equals(popover1HideCount,p1HideCount,'popover1 should not get hidden and reshown');
     popover1.hidePopover(); // Cleanup
-    assert_false(popover1.matches(':open'));
+    assert_false(popover1.matches(':popover-open'));
   },'Clicking on invoking element, even if it wasn\'t used for activation, shouldn\'t close its popover');
 
   promise_test(async () => {
     popover1.showPopover(); // Directly show the popover
-    assert_true(popover1.matches(':open'));
+    assert_true(popover1.matches(':popover-open'));
     await waitForRender();
     p1HideCount = popover1HideCount;
     await clickOn(button1toggle);
-    assert_false(popover1.matches(':open'),'popover1 should be hidden by popovertarget');
+    assert_false(popover1.matches(':popover-open'),'popover1 should be hidden by popovertarget');
     assert_equals(popover1HideCount,p1HideCount+1,'popover1 should get hidden only once by popovertarget');
   },'Clicking on popovertarget element, even if it wasn\'t used for activation, should hide it exactly once');
 
   promise_test(async () => {
     popover1.showPopover();
-    assert_true(popover1.matches(':open'));
+    assert_true(popover1.matches(':popover-open'));
     await waitForRender();
     await clickOn(popover1anchor);
-    assert_false(popover1.matches(':open'),'popover1 should close');
+    assert_false(popover1.matches(':popover-open'),'popover1 should close');
   },'Clicking on anchor element (that isn\'t an invoking element) shouldn\'t prevent its popover from being closed');
 
   promise_test(async () => {
     popover1.showPopover();
     popover2.showPopover(); // Popover1 is an ancestral element for popover2.
-    assert_true(popover1.matches(':open'));
-    assert_true(popover2.matches(':open'));
+    assert_true(popover1.matches(':popover-open'));
+    assert_true(popover2.matches(':popover-open'));
     const drag_actions = new test_driver.Actions();
     // Drag *from* popover2 *to* popover1 (its ancestor).
     await drag_actions.pointerMove(0,0,{origin: popover2})
@@ -258,10 +258,10 @@
       .pointerMove(0,0,{origin: popover1})
       .pointerUp({button: drag_actions.ButtonType.LEFT})
       .send();
-    assert_true(popover1.matches(':open'),'popover1 should be open');
-    assert_true(popover2.matches(':open'),'popover1 should be open');
+    assert_true(popover1.matches(':popover-open'),'popover1 should be open');
+    assert_true(popover2.matches(':popover-open'),'popover1 should be open');
     popover1.hidePopover();
-    assert_false(popover2.matches(':open'));
+    assert_false(popover2.matches(':popover-open'));
   },'Dragging from an open popover outside an open popover should leave the popover open');
 </script>
 
@@ -284,24 +284,24 @@
   const button3 = document.querySelector('#b3');
   promise_test(async () => {
     await clickOn(button3);
-    assert_true(popover3.matches(':open'),'invoking element should open popover');
+    assert_true(popover3.matches(':popover-open'),'invoking element should open popover');
     popover4.showPopover();
-    assert_true(popover4.matches(':open'));
-    assert_false(popover3.matches(':open'),'popover3 is unrelated to popover4');
+    assert_true(popover4.matches(':popover-open'));
+    assert_false(popover3.matches(':popover-open'),'popover3 is unrelated to popover4');
     popover4.hidePopover(); // Cleanup
-    assert_false(popover4.matches(':open'));
+    assert_false(popover4.matches(':popover-open'));
   },'A popover inside an invoking element doesn\'t participate in that invoker\'s ancestor chain');
 
   promise_test(async () => {
     popover5.showPopover();
-    assert_true(popover5.matches(':open'));
-    assert_false(popover3.matches(':open'));
+    assert_true(popover5.matches(':popover-open'));
+    assert_false(popover3.matches(':popover-open'));
     popover3.showPopover();
-    assert_true(popover3.matches(':open'));
-    assert_true(popover5.matches(':open'));
+    assert_true(popover3.matches(':popover-open'));
+    assert_true(popover5.matches(':popover-open'));
     popover5.hidePopover();
-    assert_false(popover3.matches(':open'));
-    assert_false(popover5.matches(':open'));
+    assert_false(popover3.matches(':popover-open'));
+    assert_false(popover5.matches(':popover-open'));
   },'An invoking element that was not used to invoke the popover can still be part of the ancestor chain');
 </script>
 
@@ -325,7 +325,7 @@
     await new test_driver.Actions()
        .scroll(0, 0, 0, 50, {origin: popover6})
        .send();
-    assert_true(popover6.matches(':open'),'popover6 should stay open');
+    assert_true(popover6.matches(':popover-open'),'popover6 should stay open');
     assert_equals(popover6.scrollTop,50,'popover6 should be scrolled');
     popover6.hidePopover();
   },'Scrolling within a popover should not close the popover');
@@ -349,18 +349,18 @@
   }
   promise_test(async () => {
     button7.click();
-    assert_true(popover7.matches(':open'),'invoking element should open popover');
+    assert_true(popover7.matches(':popover-open'),'invoking element should open popover');
     inside7.click();
-    assert_true(popover7.matches(':open'));
+    assert_true(popover7.matches(':popover-open'));
     popover7.hidePopover();
   },'Clicking inside a shadow DOM popover does not close that popover');
 
   promise_test(async () => {
     button7.click();
     inside7.click();
-    assert_true(popover7.matches(':open'));
+    assert_true(popover7.matches(':popover-open'));
     await clickOn(outside);
-    assert_false(popover7.matches(':open'));
+    assert_false(popover7.matches(':popover-open'));
   },'Clicking outside a shadow DOM popover should close that popover');
 </script>
 
@@ -374,13 +374,13 @@
     const popover8 = document.querySelector('#p8');
     const inside8After = document.querySelector('#inside8after');
     const popover8Anchor = document.querySelector('#p8anchor');
-    assert_false(popover8.matches(':open'));
+    assert_false(popover8.matches(':popover-open'));
     popover8.showPopover();
     await clickOn(inside8After);
-    assert_true(popover8.matches(':open'));
+    assert_true(popover8.matches(':popover-open'));
     await sendTab();
     assert_equals(document.activeElement,popover8Anchor,'Focus should move to the anchor element');
-    assert_true(popover8.matches(':open'),'popover should stay open');
+    assert_true(popover8.matches(':popover-open'),'popover should stay open');
     popover8.hidePopover();
   },'Moving focus back to the anchor element should not dismiss the popover');
 </script>
@@ -413,51 +413,51 @@
 const convPopover4 = document.querySelector('#convoluted_p4');
 promise_test(async () => {
   convPopover1.showPopover(); // Programmatically open p1
-  assert_true(convPopover1.matches(':open'));
+  assert_true(convPopover1.matches(':popover-open'));
   convPopover1.querySelector('button').click(); // Click to invoke p2
-  assert_true(convPopover1.matches(':open'));
-  assert_true(convPopover2.matches(':open'));
+  assert_true(convPopover1.matches(':popover-open'));
+  assert_true(convPopover2.matches(':popover-open'));
   convPopover2.querySelector('button').click(); // Click to invoke p3
-  assert_true(convPopover1.matches(':open'));
-  assert_true(convPopover2.matches(':open'));
-  assert_true(convPopover3.matches(':open'));
+  assert_true(convPopover1.matches(':popover-open'));
+  assert_true(convPopover2.matches(':popover-open'));
+  assert_true(convPopover3.matches(':popover-open'));
   convPopover3.querySelector('button').click(); // Click to invoke p4
-  assert_true(convPopover1.matches(':open'));
-  assert_true(convPopover2.matches(':open'));
-  assert_true(convPopover3.matches(':open'));
-  assert_true(convPopover4.matches(':open'));
+  assert_true(convPopover1.matches(':popover-open'));
+  assert_true(convPopover2.matches(':popover-open'));
+  assert_true(convPopover3.matches(':popover-open'));
+  assert_true(convPopover4.matches(':popover-open'));
   convPopover4.firstElementChild.click(); // Click within p4
-  assert_true(convPopover1.matches(':open'));
-  assert_true(convPopover2.matches(':open'));
-  assert_true(convPopover3.matches(':open'));
-  assert_true(convPopover4.matches(':open'));
+  assert_true(convPopover1.matches(':popover-open'));
+  assert_true(convPopover2.matches(':popover-open'));
+  assert_true(convPopover3.matches(':popover-open'));
+  assert_true(convPopover4.matches(':popover-open'));
   convPopover1.hidePopover();
-  assert_false(convPopover1.matches(':open'));
-  assert_false(convPopover2.matches(':open'));
-  assert_false(convPopover3.matches(':open'));
-  assert_false(convPopover4.matches(':open'));
+  assert_false(convPopover1.matches(':popover-open'));
+  assert_false(convPopover2.matches(':popover-open'));
+  assert_false(convPopover3.matches(':popover-open'));
+  assert_false(convPopover4.matches(':popover-open'));
 },'Ensure circular/convoluted ancestral relationships are functional');
 
 promise_test(async () => {
   convPopover1.showPopover(); // Programmatically open p1
   convPopover1.querySelector('button').click(); // Click to invoke p2
-  assert_true(convPopover1.matches(':open'));
-  assert_true(convPopover2.matches(':open'));
-  assert_false(convPopover3.matches(':open'));
-  assert_false(convPopover4.matches(':open'));
+  assert_true(convPopover1.matches(':popover-open'));
+  assert_true(convPopover2.matches(':popover-open'));
+  assert_false(convPopover3.matches(':popover-open'));
+  assert_false(convPopover4.matches(':popover-open'));
   convPopover4.showPopover(); // Programmatically open p4
-  assert_true(convPopover1.matches(':open'),'popover1 stays open because it is a DOM ancestor of popover4');
-  assert_false(convPopover2.matches(':open'),'popover2 closes because it isn\'t connected to popover4 via active invokers');
-  assert_true(convPopover4.matches(':open'));
+  assert_true(convPopover1.matches(':popover-open'),'popover1 stays open because it is a DOM ancestor of popover4');
+  assert_false(convPopover2.matches(':popover-open'),'popover2 closes because it isn\'t connected to popover4 via active invokers');
+  assert_true(convPopover4.matches(':popover-open'));
   convPopover4.firstElementChild.click(); // Click within p4
-  assert_true(convPopover1.matches(':open'),'nothing changes');
-  assert_false(convPopover2.matches(':open'));
-  assert_true(convPopover4.matches(':open'));
+  assert_true(convPopover1.matches(':popover-open'),'nothing changes');
+  assert_false(convPopover2.matches(':popover-open'));
+  assert_true(convPopover4.matches(':popover-open'));
   convPopover1.hidePopover();
-  assert_false(convPopover1.matches(':open'));
-  assert_false(convPopover2.matches(':open'));
-  assert_false(convPopover3.matches(':open'));
-  assert_false(convPopover4.matches(':open'));
+  assert_false(convPopover1.matches(':popover-open'));
+  assert_false(convPopover2.matches(':popover-open'));
+  assert_false(convPopover3.matches(':popover-open'));
+  assert_false(convPopover4.matches(':popover-open'));
 },'Ensure circular/convoluted ancestral relationships are functional, with a direct showPopover()');
 </script>
 
@@ -479,31 +479,31 @@
     auto.showPopover();
     hint.showPopover();
     manual.showPopover();
-    assert_true(auto.matches(':open'));
-    assert_true(hint.matches(':open'));
-    assert_true(manual.matches(':open'));
+    assert_true(auto.matches(':popover-open'));
+    assert_true(hint.matches(':popover-open'));
+    assert_true(manual.matches(':popover-open'));
     // Clicking the hint will close the auto, but not the manual.
     await clickOn(hint);
-    assert_false(auto.matches(':open'),'auto should be hidden');
-    assert_true(hint.matches(':open'),'hint should stay open');
-    assert_true(manual.matches(':open'),'manual does not light dismiss');
+    assert_false(auto.matches(':popover-open'),'auto should be hidden');
+    assert_true(hint.matches(':popover-open'),'hint should stay open');
+    assert_true(manual.matches(':popover-open'),'manual does not light dismiss');
     // Clicking outside should close the hint, but not the manual:
     await clickOn(outside);
-    assert_false(auto.matches(':open'));
-    assert_false(hint.matches(':open'),'hint should close');
-    assert_true(manual.matches(':open'),'manual does not light dismiss');
+    assert_false(auto.matches(':popover-open'));
+    assert_false(hint.matches(':popover-open'),'hint should close');
+    assert_true(manual.matches(':popover-open'),'manual does not light dismiss');
     manual.hidePopover();
-    assert_false(manual.matches(':open'));
+    assert_false(manual.matches(':popover-open'));
     auto.showPopover();
     hint.showPopover();
-    assert_true(auto.matches(':open'));
-    assert_true(hint.matches(':open'));
+    assert_true(auto.matches(':popover-open'));
+    assert_true(hint.matches(':popover-open'));
     // Clicking on the auto should close the hint:
     await clickOn(auto);
-    assert_true(auto.matches(':open'),'auto should stay open');
-    assert_false(hint.matches(':open'),'hint should light dismiss');
+    assert_true(auto.matches(':popover-open'),'auto should stay open');
+    assert_false(hint.matches(':popover-open'),'hint should light dismiss');
     auto.hidePopover();
-    assert_false(auto.matches(':open'));
+    assert_false(auto.matches(':popover-open'));
   },'Light dismiss of mixed popover types including hints');
 }
 </script>
@@ -530,10 +530,10 @@
       return;
     p14.hidePopover();
   },{once:true});
-  assert_true(p13.matches(':open') && p14.matches(':open') && p15.matches(':open'),'all three should be open');
+  assert_true(p13.matches(':popover-open') && p14.matches(':popover-open') && p15.matches(':popover-open'),'all three should be open');
   assert_throws_dom('InvalidStateError',() => p14.hidePopover(),'should throw because the event listener has already hidden the popover');
-  assert_true(p13.matches(':open'),'p13 should still be open');
-  assert_false(p14.matches(':open'));
-  assert_false(p15.matches(':open'));
+  assert_true(p13.matches(':popover-open'),'p13 should still be open');
+  assert_false(p14.matches(':popover-open'));
+  assert_false(p15.matches(':popover-open'));
 },'Hide the target popover during "hide all popovers until"');
 </script>
diff --git a/html/semantics/popovers/popover-not-keyboard-focusable.html b/html/semantics/popovers/popover-not-keyboard-focusable.html
index cd0b60c3ce65df..5246073c960180 100644
--- a/html/semantics/popovers/popover-not-keyboard-focusable.html
+++ b/html/semantics/popovers/popover-not-keyboard-focusable.html
@@ -24,12 +24,12 @@
   b1.focus();
   assert_equals(document.activeElement,b1);
   popover.showPopover();
-  assert_true(popover.matches(':open'));
+  assert_true(popover.matches(':popover-open'));
   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 popover');
-  assert_true(popover.matches(':open'),'changing focus should not close the popover');
+  assert_true(popover.matches(':popover-open'),'changing focus should not close the popover');
   popover.hidePopover();
 
   // Add a focusable button to the popover and make sure we can focus that
@@ -41,8 +41,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(popover.matches(':open'),'changing focus to the popover should leave it showing');
+  assert_true(popover.matches(':popover-open'),'changing focus to the popover should leave it showing');
   popover.hidePopover();
-  assert_false(popover.matches(':open'));
+  assert_false(popover.matches(':popover-open'));
 }, "Popover should not be keyboard focusable");
 </script>
diff --git a/html/semantics/popovers/popover-removal-2.html b/html/semantics/popovers/popover-removal-2.html
index e84124d8bef326..b21c0bb557f0b4 100644
--- a/html/semantics/popovers/popover-removal-2.html
+++ b/html/semantics/popovers/popover-removal-2.html
@@ -17,13 +17,13 @@
       const frame2Doc = document.getElementById('frame2').contentDocument;
       const popover = frame1Doc.querySelector('[popover]');
       assert_true(!!popover);
-      assert_false(popover.matches(':open'));
+      assert_false(popover.matches(':popover-open'));
       popover.showPopover();
-      assert_true(popover.matches(':open'));
+      assert_true(popover.matches(':popover-open'));
       frame2Doc.body.appendChild(popover);
-      assert_false(popover.matches(':open'));
+      assert_false(popover.matches(':popover-open'));
       popover.showPopover();
-      assert_true(popover.matches(':open'));
+      assert_true(popover.matches(':popover-open'));
     }, 'Moving popover between documents shouldn\'t cause issues');
   };
 </script>
diff --git a/html/semantics/popovers/popover-removal.html b/html/semantics/popovers/popover-removal.html
index e6ad5d9c004858..d2b664b4642d34 100644
--- a/html/semantics/popovers/popover-removal.html
+++ b/html/semantics/popovers/popover-removal.html
@@ -17,9 +17,9 @@
     });
   }
   const popover = document.querySelector('[popover]');
-  assert_false(popover.matches(':open'));
+  assert_false(popover.matches(':popover-open'));
   popover.showPopover();
-  assert_true(popover.matches(':open'));
+  assert_true(popover.matches(':popover-open'));
   popover.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/html/semantics/popovers/popover-shadow-dom.html b/html/semantics/popovers/popover-shadow-dom.html
index 2be3b12498960e..9279a121bea73d 100644
--- a/html/semantics/popovers/popover-shadow-dom.html
+++ b/html/semantics/popovers/popover-shadow-dom.html
@@ -58,7 +58,7 @@
   test(function() {
     const popover = getPopoverReferences('test1')[0];
     popover.showPopover();
-    assert_true(popover.matches(':open'));
+    assert_true(popover.matches(':popover-open'));
     assert_true(isElementVisible(popover));
     popover.hidePopover(); // Cleanup
   }, "Popovers located inside shadow DOM can still be shown");
@@ -85,12 +85,12 @@
   test(function() {
     const [popover1,popover2] = getPopoverReferences('test2');
     popover1.showPopover();
-    assert_true(popover1.matches(':open'));
+    assert_true(popover1.matches(':popover-open'));
     assert_true(isElementVisible(popover1));
     popover2.showPopover();
-    assert_false(popover1.matches(':open'), 'popover1 open'); // P1 was closed by P2
+    assert_false(popover1.matches(':popover-open'), 'popover1 open'); // P1 was closed by P2
     assert_false(isElementVisible(popover1), 'popover1 visible');
-    assert_true(popover2.matches(':open'), 'popover2 open'); // P2 is open
+    assert_true(popover2.matches(':popover-open'), 'popover2 open'); // P2 is open
     assert_true(isElementVisible(popover2), 'popover2 visible');
     popover2.hidePopover(); // Cleanup
   }, "anchor references do not cross shadow boundaries");
@@ -115,20 +115,20 @@
   promise_test(async function() {
     const [popover1,popover2] = getPopoverReferences('test3');
     popover1.showPopover();
-    assert_true(popover1.matches(':open'));
+    assert_true(popover1.matches(':popover-open'));
     assert_true(isElementVisible(popover1));
     // Showing popover2 should not close popover1, since it is a flat
     // tree ancestor of popover2's anchor button.
     popover2.showPopover();
-    assert_true(popover2.matches(':open'));
+    assert_true(popover2.matches(':popover-open'));
     assert_true(isElementVisible(popover2));
-    assert_true(popover1.matches(':open'));
+    assert_true(popover1.matches(':popover-open'));
     assert_true(isElementVisible(popover1));
     popover1.hidePopover();
     await waitForRender();
-    assert_false(popover1.matches(':open'));
+    assert_false(popover1.matches(':popover-open'));
     assert_false(isElementVisible(popover1));
-    assert_false(popover2.matches(':open'));
+    assert_false(popover2.matches(':popover-open'));
     assert_false(isElementVisible(popover2));
   }, "anchor references use the flat tree not the DOM tree");
 </script>
@@ -155,16 +155,16 @@
     popover1.showPopover();
     popover2.showPopover();
     // Both 1 and 2 should be open at this point.
-    assert_true(popover1.matches(':open'), 'popover1 not open');
+    assert_true(popover1.matches(':popover-open'), 'popover1 not open');
     assert_true(isElementVisible(popover1));
-    assert_true(popover2.matches(':open'), 'popover2 not open');
+    assert_true(popover2.matches(':popover-open'), 'popover2 not open');
     assert_true(isElementVisible(popover2));
     // This should hide both of them.
     popover1.hidePopover();
     await waitForRender();
-    assert_false(popover1.matches(':open'));
+    assert_false(popover1.matches(':popover-open'));
     assert_false(isElementVisible(popover1));
-    assert_false(popover2.matches(':open'));
+    assert_false(popover2.matches(':popover-open'));
     assert_false(isElementVisible(popover2));
   }, "The popover stack is preserved across shadow-inclusive ancestors");
 </script>
@@ -189,16 +189,16 @@
     popover1.showPopover();
     popover2.showPopover();
     // Both 1 and 2 should be open at this point.
-    assert_true(popover1.matches(':open'), 'popover1 not open');
+    assert_true(popover1.matches(':popover-open'), 'popover1 not open');
     assert_true(isElementVisible(popover1));
-    assert_true(popover2.matches(':open'), 'popover2 not open');
+    assert_true(popover2.matches(':popover-open'), 'popover2 not open');
     assert_true(isElementVisible(popover2));
     // This should hide both of them.
     popover1.hidePopover();
     await waitForRender();
-    assert_false(popover1.matches(':open'));
+    assert_false(popover1.matches(':popover-open'));
     assert_false(isElementVisible(popover1));
-    assert_false(popover2.matches(':open'));
+    assert_false(popover2.matches(':popover-open'));
     assert_false(isElementVisible(popover2));
   }, "Popover ancestor relationships are within a root, not within the document");
 </script>
diff --git a/html/semantics/popovers/popover-stacking.html b/html/semantics/popovers/popover-stacking.html
index a18333577c0787..7452fae7da3098 100644
--- a/html/semantics/popovers/popover-stacking.html
+++ b/html/semantics/popovers/popover-stacking.html
@@ -90,18 +90,18 @@
     const clickToActivate = example.querySelector('.clickme');
     test(function() {
       assert_true(!!descr && !!ancestor && !!child);
-      assert_false(ancestor.matches(':open'));
-      assert_false(child.matches(':open'));
+      assert_false(ancestor.matches(':popover-open'));
+      assert_false(child.matches(':popover-open'));
       ancestor.showPopover();
       if (clickToActivate)
         clickToActivate.click();
       else
         child.showPopover();
-      assert_true(child.matches(':open'));
-      assert_true(ancestor.matches(':open'));
+      assert_true(child.matches(':popover-open'));
+      assert_true(ancestor.matches(':popover-open'));
       ancestor.hidePopover();
-      assert_false(ancestor.matches(':open'));
-      assert_false(child.matches(':open'));
+      assert_false(ancestor.matches(':popover-open'));
+      assert_false(child.matches(':popover-open'));
     },descr);
   }
 
@@ -110,7 +110,7 @@
   function assertState(...states) {
     assert_equals(popovers.length,states.length);
     for(let i=0;i<popovers.length;++i) {
-      assert_equals(popovers[i].matches(':open'),states[i],`Popover #${i+1} incorrect state`);
+      assert_equals(popovers[i].matches(':popover-open'),states[i],`Popover #${i+1} incorrect state`);
     }
   }
   test(function() {
diff --git a/html/semantics/popovers/popover-target-element-disabled.html b/html/semantics/popovers/popover-target-element-disabled.html
index 59392f428ae3ea..bf1f297148442f 100644
--- a/html/semantics/popovers/popover-target-element-disabled.html
+++ b/html/semantics/popovers/popover-target-element-disabled.html
@@ -12,9 +12,9 @@
 test(() => {
   outerpopover.showPopover();
   innerpopover.showPopover();
-  assert_true(innerpopover.matches(':open'),
+  assert_true(innerpopover.matches(':popover-open'),
     'The inner popover should be able to open successfully.');
-  assert_false(outerpopover.matches(':open'),
+  assert_false(outerpopover.matches(':popover-open'),
     'The outer popover should be closed by opening the inner one.');
 }, 'Disabled popover*target buttons should not affect the popover heirarchy.');
 </script>
@@ -27,15 +27,15 @@
 test(() => {
   outerpopover2.showPopover();
   innerpopover2.showPopover();
-  assert_true(innerpopover2.matches(':open'),
+  assert_true(innerpopover2.matches(':popover-open'),
     'The inner popover should be able to open successfully.');
-  assert_true(outerpopover2.matches(':open'),
+  assert_true(outerpopover2.matches(':popover-open'),
     'The outer popover should stay open when opening the inner one.');
 
   togglebutton2.disabled = true;
-  assert_false(innerpopover2.matches(':open'),
+  assert_false(innerpopover2.matches(':popover-open'),
     'The inner popover should be closed when the hierarchy is broken.');
-  assert_false(outerpopover2.matches(':open'),
+  assert_false(outerpopover2.matches(':popover-open'),
     'The outer popover should be closed when the hierarchy is broken.');
 }, 'Disabling popover*target buttons when popovers are open should still cause all popovers to be closed when the formerly outer popover is closed.');
 </script>
@@ -48,15 +48,15 @@
 test(() => {
   outerpopover3.showPopover();
   innerpopover3.showPopover();
-  assert_true(innerpopover3.matches(':open'),
+  assert_true(innerpopover3.matches(':popover-open'),
     'The inner popover should be able to open successfully.');
-  assert_true(outerpopover3.matches(':open'),
+  assert_true(outerpopover3.matches(':popover-open'),
     'The outer popover should stay open when opening the inner one.');
 
   togglebutton3.disabled = true;
-  assert_false(innerpopover3.matches(':open'),
+  assert_false(innerpopover3.matches(':popover-open'),
     'The inner popover be should be closed when the hierarchy is broken.');
-  assert_false(outerpopover3.matches(':open'),
+  assert_false(outerpopover3.matches(':popover-open'),
     'The outer popover be should be closed when the hierarchy is broken.');
 }, 'Disabling popover*target buttons when popovers are open should still cause all popovers to be closed when the formerly inner popover is closed.');
 </script>
@@ -70,15 +70,15 @@
 test(() => {
   outerpopover4.showPopover();
   innerpopover4.showPopover();
-  assert_true(innerpopover4.matches(':open'),
+  assert_true(innerpopover4.matches(':popover-open'),
     'The inner popover should be able to open successfully.');
-  assert_true(outerpopover4.matches(':open'),
+  assert_true(outerpopover4.matches(':popover-open'),
     'The outer popover should stay open when opening the inner one.');
 
   togglebutton4.setAttribute('form', 'submitform');
-  assert_false(innerpopover4.matches(':open'),
+  assert_false(innerpopover4.matches(':popover-open'),
     'The inner popover be should be closed when the hierarchy is broken.');
-  assert_false(outerpopover4.matches(':open'),
+  assert_false(outerpopover4.matches(':popover-open'),
     'The outer popover be should be closed when the hierarchy is broken.');
 }, 'Setting the form attribute on popover*target buttons when popovers are open should close all popovers.');
 </script>
@@ -91,15 +91,15 @@
 test(() => {
   outerpopover5.showPopover();
   innerpopover5.showPopover();
-  assert_true(innerpopover5.matches(':open'),
+  assert_true(innerpopover5.matches(':popover-open'),
     'The inner popover should be able to open successfully.');
-  assert_true(outerpopover5.matches(':open'),
+  assert_true(outerpopover5.matches(':popover-open'),
     'The outer popover should stay open when opening the inner one.');
 
   togglebutton5.setAttribute('type', 'text');
-  assert_false(innerpopover5.matches(':open'),
+  assert_false(innerpopover5.matches(':popover-open'),
     'The inner popover be should be closed when the hierarchy is broken.');
-  assert_false(outerpopover5.matches(':open'),
+  assert_false(outerpopover5.matches(':popover-open'),
     'The outer popover be should be closed when the hierarchy is broken.');
 }, 'Changing the input type on a popover*target button when popovers are open should close all popovers.');
 </script>
@@ -112,15 +112,15 @@
 test(() => {
   outerpopover6.showPopover();
   innerpopover6.showPopover();
-  assert_true(innerpopover6.matches(':open'),
+  assert_true(innerpopover6.matches(':popover-open'),
     'The inner popover should be able to open successfully.');
-  assert_true(outerpopover6.matches(':open'),
+  assert_true(outerpopover6.matches(':popover-open'),
     'The outer popover should stay open when opening the inner one.');
 
   togglebutton6.remove();
-  assert_false(innerpopover6.matches(':open'),
+  assert_false(innerpopover6.matches(':popover-open'),
     'The inner popover be should be closed when the hierarchy is broken.');
-  assert_false(outerpopover6.matches(':open'),
+  assert_false(outerpopover6.matches(':popover-open'),
     'The outer popover be should be closed when the hierarchy is broken.');
 }, 'Disconnecting popover*target buttons when popovers are open should close all popovers.');
 </script>
@@ -133,15 +133,15 @@
 test(() => {
   outerpopover7.showPopover();
   innerpopover7.showPopover();
-  assert_true(innerpopover7.matches(':open'),
+  assert_true(innerpopover7.matches(':popover-open'),
     'The inner popover should be able to open successfully.');
-  assert_true(outerpopover7.matches(':open'),
+  assert_true(outerpopover7.matches(':popover-open'),
     'The outer popover should stay open when opening the inner one.');
 
   togglebutton7.setAttribute('popovertarget', 'otherpopover7');
-  assert_false(innerpopover7.matches(':open'),
+  assert_false(innerpopover7.matches(':popover-open'),
     'The inner popover be should be closed when the hierarchy is broken.');
-  assert_false(outerpopover7.matches(':open'),
+  assert_false(outerpopover7.matches(':popover-open'),
     'The outer popover be should be closed when the hierarchy is broken.');
 }, 'Changing the popovertarget attribute to break the chain should close all popovers.');
 </script>
@@ -158,19 +158,19 @@
   outerpopover8.showPopover();
   middlepopover8.showPopover();
   innerpopover8.showPopover();
-  assert_true(innerpopover8.matches(':open'),
+  assert_true(innerpopover8.matches(':popover-open'),
     'The inner popover should be able to open successfully.');
-  assert_true(middlepopover8.matches(':open'),
+  assert_true(middlepopover8.matches(':popover-open'),
     'The middle popover should stay open when opening the inner one.');
-  assert_true(outerpopover8.matches(':open'),
+  assert_true(outerpopover8.matches(':popover-open'),
     'The outer popover should stay open when opening the inner one.');
 
   togglebutton8.setAttribute('popovertarget', 'otherpopover8');
-  assert_true(innerpopover8.matches(':open'),
+  assert_true(innerpopover8.matches(':popover-open'),
     'The inner popover should remain open.');
-  assert_true(middlepopover8.matches(':open'),
+  assert_true(middlepopover8.matches(':popover-open'),
     'The middle popover should remain open.');
-  assert_true(outerpopover8.matches(':open'),
+  assert_true(outerpopover8.matches(':popover-open'),
     'The outer popover should remain open.');
 }, `Modifying popovertarget on a button which doesn't break the chain shouldn't close any popovers.`);
 </script>
diff --git a/html/semantics/popovers/popover-top-layer-combinations.html b/html/semantics/popovers/popover-top-layer-combinations.html
index 95f666e0c9d7ed..8db327d7d1f009 100644
--- a/html/semantics/popovers/popover-top-layer-combinations.html
+++ b/html/semantics/popovers/popover-top-layer-combinations.html
@@ -35,16 +35,15 @@
 const isDialog = (ex) => ex instanceof HTMLDialogElement;
 const isFullscreen = (ex) => ex.classList.contains('fullscreen');
 function ensureIsOpenPopover(ex,message) {
-  // Because :open will eventually support <dialog>, this does extra work to
-  // verify we're dealing with an :open Popover. Note that this will also throw
+  // Because :popover-open will eventually support <dialog>, this does extra work to
+  // verify we're dealing with an :popover-open Popover. Note that this will also throw
   // if this is an element with the `popover` attribute that has been made
   // visible via an explicit `display:block` style rule.
   message = message || 'Error';
-  assert_true(ex.matches(':open'),`${message}: Popover doesn\'t match :open`);
-  assert_false(ex.matches(':closed'),`${message}: Popover matches :closed`);
+  assert_true(ex.matches(':popover-open'),`${message}: Popover doesn\'t match :popover-open`);
   ex.hidePopover(); // Shouldn't throw if this is a showing popover
   ex.showPopover(); // Show it again to avoid state change
-  assert_true(ex.matches(':open') && !ex.matches(':closed'),`${message}: Sanity`);
+  assert_true(ex.matches(':popover-open'),`${message}: Sanity`);
 }
 window.onload = () => requestAnimationFrame(() => requestAnimationFrame(() => {
   const examples = Array.from(document.querySelectorAll('#examples>*'));
@@ -62,7 +61,7 @@
         ex.showPopover(); // Should not throw
         ensureIsOpenPopover(ex,'showPopover should work');
         ex.hidePopover(); // Should not throw
-        assert_true(ex.matches(':closed'),'hidePopover should work');
+        assert_false(ex.matches(':popover-open'),'hidePopover should work');
       }
       assert_false(isElementVisible(ex));
 
@@ -120,7 +119,7 @@
       document.body.appendChild(button);
       button.popoverTargetElement = ex;
       button.popoverTargetAction = "toggle";
-      assert_true(ex.matches(':closed'));
+      assert_false(ex.matches(':popover-open'));
       await clickOn(button);
       ensureIsOpenPopover(ex,'Invoking element should be able to invoke all popovers');
       ex.hidePopover();
@@ -138,7 +137,7 @@
       }
       ex.appendChild(button); // Add button to the element, so it's visible to click
       await clickOn(button);
-      assert_true(ex.matches(':closed'),'The invoker click should have failed on the already-open dialog/fullscreen');
+      assert_false(ex.matches(':popover-open'),'The invoker click should have failed on the already-open dialog/fullscreen');
       if (isDialog(ex)) {
         ex.close();
       } else {
diff --git a/html/semantics/popovers/popover-top-layer-interactions.html b/html/semantics/popovers/popover-top-layer-interactions.html
index 6e707cb45be77d..95da47a5e20df3 100644
--- a/html/semantics/popovers/popover-top-layer-interactions.html
+++ b/html/semantics/popovers/popover-top-layer-interactions.html
@@ -24,7 +24,7 @@
     createElement: () => Object.assign(document.createElement('div'), {popover: 'auto'}),
     trigger: function() {this.element.showPopover()},
     close: function() {this.element.hidePopover()},
-    isTopLayer: function() {return this.element.matches(':open')},
+    isTopLayer: function() {return this.element.matches(':popover-open')},
   },
   {
     type: types.modalDialog,
diff --git a/html/semantics/popovers/popover-types-with-hints.tentative.html b/html/semantics/popovers/popover-types-with-hints.tentative.html
index 39d24a0ad437e7..06282a2aa1f559 100644
--- a/html/semantics/popovers/popover-types-with-hints.tentative.html
+++ b/html/semantics/popovers/popover-types-with-hints.tentative.html
@@ -17,10 +17,10 @@
     const manual = document.currentScript.parentElement.querySelectorAll('[popover=manual]')[0];
     const manual2 = document.currentScript.parentElement.querySelectorAll('[popover=manual]')[1];
     function assert_state_1(autoOpen,hintOpen,manualOpen,manual2Open) {
-      assert_equals(auto.matches(':open'),autoOpen,'auto open state is incorrect');
-      assert_equals(hint.matches(':open'),hintOpen,'hint open state is incorrect');
-      assert_equals(manual.matches(':open'),manualOpen,'manual open state is incorrect');
-      assert_equals(manual2.matches(':open'),manual2Open,'manual2 open state is incorrect');
+      assert_equals(auto.matches(':popover-open'),autoOpen,'auto open state is incorrect');
+      assert_equals(hint.matches(':popover-open'),hintOpen,'hint open state is incorrect');
+      assert_equals(manual.matches(':popover-open'),manualOpen,'manual open state is incorrect');
+      assert_equals(manual2.matches(':popover-open'),manual2Open,'manual2 open state is incorrect');
     }
     test(() => {
       assert_state_1(false,false,false,false);
@@ -81,10 +81,10 @@
     const popover3 = document.currentScript.parentElement.querySelectorAll('[popover=""]')[2];
     const hint = document.currentScript.parentElement.querySelector('[popover=hint]');
     function assert_state_2(popover1Open,popover2Open,popover3Open,hintOpen) {
-      assert_equals(popover1.matches(':open'),popover1Open,'popover1 open state is incorrect');
-      assert_equals(popover2.matches(':open'),popover2Open,'popover2 open state is incorrect');
-      assert_equals(popover3.matches(':open'),popover3Open,'popover3 open state is incorrect');
-      assert_equals(hint.matches(':open'),hintOpen,'hint open state is incorrect');
+      assert_equals(popover1.matches(':popover-open'),popover1Open,'popover1 open state is incorrect');
+      assert_equals(popover2.matches(':popover-open'),popover2Open,'popover2 open state is incorrect');
+      assert_equals(popover3.matches(':popover-open'),popover3Open,'popover3 open state is incorrect');
+      assert_equals(hint.matches(':popover-open'),hintOpen,'hint open state is incorrect');
     }
     test(() => {
       assert_state_2(false,false,false,false);
@@ -110,11 +110,11 @@
     const hint1 = document.currentScript.parentElement.querySelectorAll('[popover=hint]')[0];
     const hint2 = document.currentScript.parentElement.querySelectorAll('[popover=hint]')[1];
     hint1.showPopover();
-    assert_true(hint1.matches(':open'));
-    assert_false(hint2.matches(':open'));
+    assert_true(hint1.matches(':popover-open'));
+    assert_false(hint2.matches(':popover-open'));
     hint2.showPopover();
-    assert_false(hint1.matches(':open'));
-    assert_true(hint2.matches(':open'));
+    assert_false(hint1.matches(':popover-open'));
+    assert_true(hint2.matches(':popover-open'));
     hint2.hidePopover();
   },'If a popover=hint is shown, it should hide any other open popover=hint pop-ups, including ancestral pop-ups. (You can\'t nest popover=hint)');
   </script>
@@ -129,11 +129,11 @@
     const hint = document.currentScript.parentElement.querySelector('[popover=hint]');
     const auto = document.currentScript.parentElement.querySelector('[popover=""]');
     hint.showPopover();
-    assert_true(hint.matches(':open'));
-    assert_false(auto.matches(':open'));
+    assert_true(hint.matches(':popover-open'));
+    assert_false(auto.matches(':popover-open'));
     auto.showPopover();
-    assert_false(hint.matches(':open'));
-    assert_true(auto.matches(':open'));
+    assert_false(hint.matches(':popover-open'));
+    assert_true(auto.matches(':popover-open'));
     auto.hidePopover();
   },'If a popover=auto is shown, it should hide any open popover=hint, including if the popover=hint is an ancestral pop-up of the popover=auto. (You can\'t nest a popover=auto inside a popover=hint)');
   </script>
@@ -151,15 +151,15 @@
     const hint = document.currentScript.parentElement.querySelector('[popover=hint]');
     auto.showPopover();
     auto2.showPopover();
-    assert_true(auto.matches(':open'));
-    assert_true(auto2.matches(':open'));
+    assert_true(auto.matches(':popover-open'));
+    assert_true(auto2.matches(':popover-open'));
     hint.showPopover(); // This should hide auto2, since it is nested in auto1.
-    assert_true(auto.matches(':open'));
-    assert_false(auto2.matches(':open'));
-    assert_true(hint.matches(':open'));
+    assert_true(auto.matches(':popover-open'));
+    assert_false(auto2.matches(':popover-open'));
+    assert_true(hint.matches(':popover-open'));
     auto.hidePopover(); // Should hide both auto and hint.
-    assert_false(auto.matches(':open'));
-    assert_false(hint.matches(':open'));
+    assert_false(auto.matches(':popover-open'));
+    assert_false(hint.matches(':popover-open'));
   },'If you: a) show a popover=auto (call it D), then b) show a descendent popover=hint of D (call it T), then c) hide D, then T should be hidden. (A popover=hint can be nested inside a popover=auto)');
   </script>
 </div>
@@ -173,11 +173,11 @@
     const hint = document.currentScript.parentElement.querySelector('[popover=hint]');
     auto.showPopover();
     hint.showPopover();
-    assert_true(auto.matches(':open'));
-    assert_true(hint.matches(':open'));
+    assert_true(auto.matches(':popover-open'));
+    assert_true(hint.matches(':popover-open'));
     auto.hidePopover();
-    assert_false(auto.matches(':open'));
-    assert_true(hint.matches(':open'));
+    assert_false(auto.matches(':popover-open'));
+    assert_true(hint.matches(':popover-open'));
     hint.hidePopover();
   },'If you: a) show a popover=auto (call it D), then b) show a non-descendent popover=hint of D (call it T), then c) hide D, then T should be left showing. (Non-nested popover=hint can stay open when unrelated popover=autos are hidden)');
   </script>
diff --git a/html/semantics/popovers/popover-types.html b/html/semantics/popovers/popover-types.html
index 9941f322828569..e6d7d967bbc9c1 100644
--- a/html/semantics/popovers/popover-types.html
+++ b/html/semantics/popovers/popover-types.html
@@ -15,9 +15,9 @@
   const manual = container.querySelectorAll('[popover=manual]')[0];
   const manual2 = container.querySelectorAll('[popover=manual]')[1];
   function assert_state_1(autoOpen,manualOpen,manual2Open) {
-    assert_equals(auto.matches(':open'),autoOpen,'auto open state is incorrect');
-    assert_equals(manual.matches(':open'),manualOpen,'manual open state is incorrect');
-    assert_equals(manual2.matches(':open'),manual2Open,'manual2 open state is incorrect');
+    assert_equals(auto.matches(':popover-open'),autoOpen,'auto open state is incorrect');
+    assert_equals(manual.matches(':popover-open'),manualOpen,'manual open state is incorrect');
+    assert_equals(manual2.matches(':popover-open'),manual2Open,'manual2 open state is incorrect');
   }
   test(() => {
     assert_state_1(false,false,false);
diff --git a/html/semantics/popovers/resources/popover-utils.js b/html/semantics/popovers/resources/popover-utils.js
index b8b5817851167e..04d2a2cbe75ef1 100644
--- a/html/semantics/popovers/resources/popover-utils.js
+++ b/html/semantics/popovers/resources/popover-utils.js
@@ -90,7 +90,7 @@ function showDefaultopenPopoversOnLoad() {
           return;
         switch (p.popover) {
           case 'auto':
-            if (!document.querySelector('[popover]:open'))
+            if (!document.querySelector('[popover]:popover-open'))
               p.showPopover();
             return;
           case 'manual':
@@ -121,12 +121,10 @@ function assertPopoverVisibility(popover, isPopover, expectedVisibility, message
   // Check other things related to being visible or not:
   if (isVisible) {
     assert_not_equals(window.getComputedStyle(popover).display,'none');
-    assert_equals(popover.matches(':open'),isPopover,`${message}: Visible popovers should match :open`);
-    assert_false(popover.matches(':closed'),`${message}: Visible popovers and *all* non-popovers should *not* match :closed`);
+    assert_equals(popover.matches(':popover-open'),isPopover,`${message}: Visible popovers should match :popover-open`);
   } else {
     assert_equals(window.getComputedStyle(popover).display,'none',`${message}: Non-showing popovers should have display:none`);
-    assert_false(popover.matches(':open'),`${message}: Non-showing popovers should *not* match :open`);
-    assert_equals(popover.matches(':closed'),isPopover,`${message}: Non-showing popovers should match :closed`);
+    assert_false(popover.matches(':popover-open'),`${message}: Non-showing popovers should *not* match :popover-open`);
   }
 }