Rename :popup-open pseudo class to :top-layer

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

[1] https://open-ui.org/components/popup.research.explainer
[2] openui/open-ui#470 (comment)

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

html/semantics/forms/the-selectmenu-element/selectmenu-parts-structure.tentative.html

@@ -208,13 +208,13 @@
     const selectMenu1Popup = document.getElementById("selectMenu1-popup");
     const selectMenu1Button = document.getElementById("selectMenu1-button");
     const selectMenu1Child2 = document.getElementById("selectMenu1-child2");
-    assert_false(selectMenu1Popup.matches(':popup-open'));
+    assert_false(selectMenu1Popup.matches(':top-layer'));
     selectMenu1Button.click();
-    assert_false(selectMenu1Popup.matches(':popup-open'), "Clicking a button part that is a descendant of the listbox part should have no effect");
+    assert_false(selectMenu1Popup.matches(':top-layer'), "Clicking a button part that is a descendant of the listbox part should have no effect");
 
     assert_equals(selectMenu1.value, "one");
     await clickOn(selectMenu1);
-    assert_true(selectMenu1Popup.matches(':popup-open'));
+    assert_true(selectMenu1Popup.matches(':top-layer'));
     await clickOn(selectMenu1Child2);
     assert_equals(selectMenu1.value, "two", "Clicking an <option> should change the value");
   }, "To receive button part controller code, an element labeled as a button must not be a descendant of the listbox part in a flat tree traversal");
@@ -226,9 +226,9 @@
     const selectMenu2Child2 = document.getElementById("selectMenu2-child2");
     const selectMenu2Child4 = document.getElementById("selectMenu2-child4");
 
-    assert_false(selectMenu2Popup.matches(':popup-open'));
+    assert_false(selectMenu2Popup.matches(':top-layer'));
     await clickOn(selectMenu2Button);
-    assert_false(selectMenu2Popup.matches(':popup-open'), "Clicking a button part should not show an invalid listbox part");
+    assert_false(selectMenu2Popup.matches(':top-layer'), "Clicking a button part should not show an invalid listbox part");
 
     assert_equals(selectMenu2.value, "three");
     await clickOn(selectMenu2Button);

html/semantics/popups/popup-anchor-nesting.tentative.html

@@ -46,15 +46,15 @@
     setup({ explicit_done: true });
 
     popup2.showPopup();
-    assert_false(popup1.matches(':popup-open'));
-    assert_true(popup2.matches(':popup-open'));
+    assert_false(popup1.matches(':top-layer'));
+    assert_true(popup2.matches(':top-layer'));
     await clickOn(button1);
     test(t => {
       // Button1 is the anchor for popup1, and an ancestor of popup2.
       // Since popup2 is open, but not popup1, button1 should not be
       // the anchor of any open popup. So popup2 should be closed.
-      assert_false(popup2.matches(':popup-open'));
-      assert_true(popup1.matches(':popup-open'));
+      assert_false(popup2.matches(':top-layer'));
+      assert_true(popup1.matches(':top-layer'));
     },'Nested popups (inside anchor elements) do not affect light dismiss');
 
     done();

html/semantics/popups/popup-attribute-basic.tentative.html

@@ -22,10 +22,10 @@
     const isVisible = !!(popup.offsetWidth || popup.offsetHeight || popup.getClientRects().length);
     if (isVisible) {
       assert_not_equals(window.getComputedStyle(popup).display,'none');
-      assert_equals(isPopup,popup.matches(':popup-open'));
+      assert_equals(isPopup,popup.matches(':top-layer'));
     } else {
       assert_equals(window.getComputedStyle(popup).display,'none');
-      assert_false(popup.matches(':popup-open'));
+      assert_false(popup.matches(':top-layer'));
     }
     return isVisible;
   }
@@ -138,17 +138,17 @@
   test(() => {
     const popup = createPopup();
     popup.showPopup();
-    assert_true(popup.matches(':popup-open'));
+    assert_true(popup.matches(':top-layer'));
     popup.setAttribute('popup','hint'); // Change popup type
-    assert_false(popup.matches(':popup-open'));
+    assert_false(popup.matches(':top-layer'));
     popup.showPopup();
-    assert_true(popup.matches(':popup-open'));
+    assert_true(popup.matches(':top-layer'));
     popup.setAttribute('popup','async');
-    assert_false(popup.matches(':popup-open'));
+    assert_false(popup.matches(':top-layer'));
     popup.showPopup();
-    assert_true(popup.matches(':popup-open'));
+    assert_true(popup.matches(':top-layer'));
     popup.setAttribute('popup','invalid');
-    assert_false(popup.matches(':popup-open'));
+    assert_false(popup.matches(':top-layer'));
   },'Changing attribute values should close open popups');
 
 
@@ -157,11 +157,11 @@
       const popup = createPopup();
       popup.setAttribute('popup',type);
       popup.showPopup();
-      assert_true(popup.matches(':popup-open'));
+      assert_true(popup.matches(':top-layer'));
       popup.remove();
-      assert_false(popup.matches(':popup-open'));
+      assert_false(popup.matches(':top-layer'));
       document.body.appendChild(popup);
-      assert_false(popup.matches(':popup-open'));
+      assert_false(popup.matches(':top-layer'));
     },`Removing a visible popup=${type} element from the document should close the popup`);
   });
 </script>

html/semantics/popups/popup-defaultopen-2.tentative.html

@@ -16,8 +16,8 @@
   requestAnimationFrame(() => {
     requestAnimationFrame(() => {
       test(function(){
-        assert_true(p1.matches(':popup-open'),'The first (outermost) popup should be the one that opens in this case');
-        assert_false(p2.matches(':popup-open'),'The inner popup should not be open');
+        assert_true(p1.matches(':top-layer'),'The first (outermost) popup should be the one that opens in this case');
+        assert_false(p2.matches(':top-layer'),'The inner popup should not be open');
       }, "The defaultopen attribute should cause only the first popup to open");
     });
   });

html/semantics/popups/popup-defaultopen.tentative.html

@@ -18,25 +18,25 @@
   requestAnimationFrame(() => {
     requestAnimationFrame(() => {
       test(function(){
-        assert_true(p1.matches(':popup-open'),'defaultopen should open the popup');
+        assert_true(p1.matches(':top-layer'),'defaultopen should open the popup');
         assert_true(p1.hasAttribute('defaultopen'));
         assert_true(p1.defaultOpen,'defaultopen should be reflected in the IDL attribute');
-        assert_false(p2.matches(':popup-open'), 'Only the first popup with defaultopen should be open on load');
+        assert_false(p2.matches(':top-layer'), 'Only the first popup with defaultopen should be open on load');
         assert_true(p2.hasAttribute('defaultopen'),'defaultopen should be present/true, even if not opened');
         assert_true(p2.defaultOpen,'defaultopen should be present/true, even if not opened');
 
-        assert_false(p2b.matches(':popup-open'),'Only the first popup/hint with defaultopen should be open on load');
-        assert_true(p4.matches(':popup-open'),'defaultopen should open all async popups');
-        assert_true(p5.matches(':popup-open'),'defaultopen should open all async popups');
+        assert_false(p2b.matches(':top-layer'),'Only the first popup/hint with defaultopen should be open on load');
+        assert_true(p4.matches(':top-layer'),'defaultopen should open all async popups');
+        assert_true(p5.matches(':top-layer'),'defaultopen should open all async popups');
 
-        assert_false(p3.matches(':popup-open'));
+        assert_false(p3.matches(':top-layer'));
         p3.setAttribute('defaultopen','');
-        assert_false(p3.matches(':popup-open'), 'Changing defaultopen should not affect open status');
+        assert_false(p3.matches(':top-layer'), 'Changing defaultopen should not affect open status');
         assert_true(p3.hasAttribute('defaultopen'));
         assert_true(p3.defaultOpen,'defaultopen should still reflect to IDL');
 
         p1.removeAttribute('defaultopen');
-        assert_true(p1.matches(':popup-open'),'removing defaultopen should not close the popup');
+        assert_true(p1.matches(':top-layer'),'removing defaultopen should not close the popup');
         assert_false(p1.hasAttribute('defaultopen'),'...but it should reflect to IDL');
 
         p1.hidePopup();

html/semantics/popups/popup-events.tentative.html

@@ -31,26 +31,26 @@
   let showCount = 0;
   let hideCount = 0;
   await new Promise(resolve => window.addEventListener('load',() => resolve()));
-  assert_false(popup.matches(':popup-open'));
+  assert_false(popup.matches(':top-layer'));
   document.addEventListener('show',() => ++showCount);
   document.addEventListener('hide',() => ++hideCount);
   assert_equals(0,showCount);
   assert_equals(0,hideCount);
   popup.showPopup();
-  assert_true(popup.matches(':popup-open'));
+  assert_true(popup.matches(':top-layer'));
   await waitUntilChange(() => showCount);
   assert_equals(1,showCount);
   assert_equals(0,hideCount);
   await requestAnimationFramePromise();
-  assert_true(popup.matches(':popup-open'));
+  assert_true(popup.matches(':top-layer'));
   popup.hidePopup();
-  assert_false(popup.matches(':popup-open'));
+  assert_false(popup.matches(':top-layer'));
   await waitUntilChange(() => hideCount);
   assert_equals(1,showCount);
   assert_equals(1,hideCount);
   await requestAnimationFramePromise();
   // No additional events after animation frame
-  assert_false(popup.matches(':popup-open'));
+  assert_false(popup.matches(':top-layer'));
   assert_equals(1,showCount);
   assert_equals(1,hideCount);
 }, 'Show and hide events get properly dispatched for popups');

html/semantics/popups/popup-focus.tentative.html

@@ -132,7 +132,7 @@
         expectedFocusedElement = priorFocus;
       }
       assert_true(!!expectedFocusedElement);
-      assert_false(popup.matches(':popup-open'));
+      assert_false(popup.matches(':top-layer'));
 
       // Directly show and hide the popup:
       priorFocus.focus();
@@ -156,7 +156,7 @@
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popup.showPopup()`);
       assert_equals(popup.popup, 'popup', 'All popups in this test should start as popup=popup');
       popup.popup = 'hint';
-      assert_false(popup.matches(':popup-open'), 'Changing the popup type should hide the popup');
+      assert_false(popup.matches(':top-layer'), 'Changing the popup type should hide the popup');
       assert_equals(document.activeElement, priorFocus, 'prior element should get focus when the type is changed');
       popup.popup = 'popup';
 
@@ -165,7 +165,7 @@
       popup.showPopup();
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popup.showPopup()`);
       popup.remove();
-      assert_false(popup.matches(':popup-open'), 'Removing the popup should hide it');
+      assert_false(popup.matches(':top-layer'), 'Removing the popup should hide it');
       if (!popup.hasAttribute('data-no-focus')) {
         assert_not_equals(document.activeElement, priorFocus, 'prior element should *not* get focus when the popup is removed from the document');
       }
@@ -177,7 +177,7 @@
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popup.showPopup()`);
       const dialog = document.body.appendChild(document.createElement('dialog'));
       dialog.showModal();
-      assert_false(popup.matches(':popup-open'), 'Opening a modal dialog should hide the popup');
+      assert_false(popup.matches(':top-layer'), 'Opening a modal dialog should hide the popup');
       assert_not_equals(document.activeElement, priorFocus, 'prior element should *not* get focus when a modal dialog is shown');
       dialog.close();
       dialog.remove();
@@ -186,30 +186,30 @@
       const button = addInvoker(t, popup);
       priorFocus.focus();
       button.click();
-      assert_true(popup.matches(':popup-open'));
+      assert_true(popup.matches(':top-layer'));
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by button.click()`);
 
       // Make sure we can directly focus the (already open) popup:
       popup.focus();
       assert_equals(document.activeElement, popup.hasAttribute('tabindex') ? popup : expectedFocusedElement, `${testName} directly focus with popup.focus()`);
       button.click(); // Button is set to toggle the popup
-      assert_false(popup.matches(':popup-open'));
+      assert_false(popup.matches(':top-layer'));
       assert_equals(document.activeElement, priorFocus, 'prior element should get focus on button-toggled hide');
     }, "Popup focus test: " + testName);
 
     promise_test(async t => {
       const priorFocus = addPriorFocus(t);
-      assert_false(popup.matches(':popup-open'), 'popup should start out hidden');
+      assert_false(popup.matches(':top-layer'), 'popup should start out hidden');
       let button = addInvoker(t, popup);
       assert_equals(button.getAttribute('togglepopup'), popup.id, 'This test assumes the button uses `togglepopup`.');
       assert_not_equals(button, priorFocus, 'Stranger things have happened');
       assert_false(popup.contains(button), 'Start with a non-contained button');
       priorFocus.focus();
       assert_equals(document.activeElement, priorFocus);
       popup.showPopup();
-      assert_true(popup.matches(':popup-open'));
+      assert_true(popup.matches(':top-layer'));
       await clickOn(button); // This will not light dismiss, but will "toggle" the popup.
-      assert_false(popup.matches(':popup-open'));
+      assert_false(popup.matches(':top-layer'));
       assert_equals(document.activeElement, priorFocus, 'Focus should return to prior focus');
 
       // Same thing, but the button is contained within the popup
@@ -218,22 +218,22 @@
       popup.appendChild(button);
       priorFocus.focus();
       popup.showPopup();
-      assert_true(popup.matches(':popup-open'));
+      assert_true(popup.matches(':top-layer'));
       if (!popup.hasAttribute('data-no-focus')) {
         assert_not_equals(document.activeElement, priorFocus, 'focus should shift for this element');
       }
       await clickOn(button);
-      assert_false(popup.matches(':popup-open'), 'clicking button should hide the popup');
+      assert_false(popup.matches(':top-layer'), 'clicking button should hide the popup');
       assert_equals(document.activeElement, priorFocus, 'Contained button should return focus to the previously focused element');
 
       // Same thing, but the button is unrelated (no togglepopup)
       button = document.createElement('button');
       document.body.appendChild(button);
       priorFocus.focus();
       popup.showPopup();
-      assert_true(popup.matches(':popup-open'));
+      assert_true(popup.matches(':top-layer'));
       await clickOn(button); // This will light dismiss the popup, focus the prior focus, then focus this button.
-      assert_false(popup.matches(':popup-open'), 'clicking button should hide the popup (via light dismiss)');
+      assert_false(popup.matches(':top-layer'), 'clicking button should hide the popup (via light dismiss)');
       assert_equals(document.activeElement, button, 'Focus should go to unrelated button on light dismiss');
     }, "Popup button click focus test: " + testName);
 
@@ -243,12 +243,12 @@
         return;
       }
       const priorFocus = addPriorFocus(t);
-      assert_false(popup.matches(':popup-open'), 'popup should start out hidden');
+      assert_false(popup.matches(':top-layer'), 'popup should start out hidden');
 
       // Move the prior focus out of the document
       priorFocus.focus();
       popup.showPopup();
-      assert_true(popup.matches(':popup-open'));
+      assert_true(popup.matches(':top-layer'));
       const newFocus = document.activeElement;
       assert_not_equals(newFocus, priorFocus, 'focus should shift for this element');
       priorFocus.remove();
@@ -260,11 +260,11 @@
       // Move the prior focus inside the (already open) popup
       priorFocus.focus();
       popup.showPopup();
-      assert_true(popup.matches(':popup-open'));
+      assert_true(popup.matches(':top-layer'));
       assert_false(popup.contains(priorFocus), 'Start with a non-contained prior focus');
       popup.appendChild(priorFocus); // Move inside the popup
       assert_true(popup.contains(priorFocus));
-      assert_true(popup.matches(':popup-open'), 'popup should stay open');
+      assert_true(popup.matches(':top-layer'), 'popup should stay open');
       popup.hidePopup();
       assert_not_equals(document.activeElement, priorFocus, 'focused element is display:none inside the popup');
       document.body.appendChild(priorFocus); // Put it back

html/semantics/popups/popup-inside-display-none.tentative.html

@@ -13,6 +13,6 @@
 <script>
   const popup = document.querySelector('[popup]');
   popup.showPopup();
-  if (!popup.matches(':popup-open'))
+  if (!popup.matches(':top-layer'))
     document.body.appendChild(document.createTextNode('FAIL'));
 </script>

html/semantics/popups/popup-invoking-attribute.tentative.html

@@ -139,7 +139,7 @@
             const otherId = expectedId !== 1 ? 1 : 2;
             function assert_popup(num,state,message) {
               assert_true(num>0,`Invalid expectedId ${num}`);
-              assert_equals((num===1 ? popup1 : popup2).matches(':popup-open'),state,message || "");
+              assert_equals((num===1 ? popup1 : popup2).matches(':top-layer'),state,message || "");
             }
             assert_popup(expectedId,false);
             assert_popup(otherId,false);
@@ -205,7 +205,7 @@
 popup.addEventListener('hide',() => ++hideCount);
 
 async function assertState(expectOpen,expectShow,expectHide) {
-  assert_equals(popup.matches(':popup-open'),expectOpen,'Popup open state is incorrect');
+  assert_equals(popup.matches(':top-layer'),expectOpen,'Popup open state is incorrect');
   await new Promise(resolve => requestAnimationFrame(resolve));
   assert_equals(showCount,expectShow,'Show count is incorrect');
   assert_equals(hideCount,expectHide,'Hide count is incorrect');

html/semantics/popups/popup-light-dismiss-on-scroll.tentative.html

@@ -39,7 +39,7 @@
   const popups = document.querySelectorAll('[popup]');
   function assertAll(showing) {
     for(let popup of popups) {
-      assert_equals(popup.matches(':popup-open'),showing);
+      assert_equals(popup.matches(':top-layer'),showing);
     }
   }
   async_test(t => {