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 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.');
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('Popover
');
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');
};
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");
@@ -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");
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.');
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;
}
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 @@
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');
@@ -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');
@@ -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');
@@ -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');
@@ -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()');
@@ -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');
}
@@ -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"');
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");
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');
};
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");
@@ -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");
@@ -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");
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 {
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.');
@@ -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.');
@@ -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.');
@@ -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.');
@@ -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.');
@@ -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.');
@@ -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.');
@@ -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.`);
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 , 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 , 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)');
@@ -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)');
@@ -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)');
@@ -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)');
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`);
}
}