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