diff --git a/html/semantics/popovers/hide-other-popover-side-effects.html b/html/semantics/popovers/hide-other-popover-side-effects.html
index 9fe6673d2ee9c8..0a83ba4d5e0faf 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'), 'popover2 should not match :popover 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..e0203b700d3d39 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').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').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').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..259ddae1be6539 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'));
+ assert_true(popover2.matches(':popover'));
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'));
+ assert_true(popover1.matches(':popover'));
},'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..1a8c08968c82bb 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'));
if (popoverHintSupported()) {
popover.setAttribute('popover','hint'); // Change popover type
- assert_false(popover.matches(':open'));
+ assert_false(popover.matches(':popover'));
popover.showPopover();
- assert_true(popover.matches(':open'));
+ assert_true(popover.matches(':popover'));
}
popover.setAttribute('popover','manual');
- assert_false(popover.matches(':open'));
+ assert_false(popover.matches(':popover'));
popover.showPopover();
- assert_true(popover.matches(':open'));
+ assert_true(popover.matches(':popover'));
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'),'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'),'From "invalid" ("manual") to "auto" should hide the popover');
popover.showPopover();
- assert_true(popover.matches(':open'));
+ assert_true(popover.matches(':popover'));
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'),'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,18 +181,18 @@
const popover = createPopover(t);
popover.setAttribute('popover',type);
popover.showPopover();
- assert_true(popover.matches(':open'));
+ assert_true(popover.matches(':popover'));
popover.remove();
- assert_false(popover.matches(':open'));
+ assert_false(popover.matches(':popover'));
document.body.appendChild(popover);
- assert_false(popover.matches(':open'));
+ assert_false(popover.matches(':popover'));
},`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'));
assert_false(popover.matches(':modal'));
popover.hidePopover();
},`A showing popover=${type} does not match :modal`);
@@ -209,11 +209,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'));
+ assert_false(popover.matches(':popover'));
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'),'unrelated popover is hidden');
+ assert_false(popover.matches(':popover'),'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 +236,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'));
+ assert_true(other_popover.matches(':popover'));
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'),'unrelated popover is hidden');
+ assert_false(popover.matches(':popover'),'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 +277,7 @@
const popover = createPopover(t);
setPopoverValue(popover,type,method);
popover.showPopover();
- assert_true(popover.matches(':open'));
+ assert_true(popover.matches(':popover'));
let gotEvent = false;
popover.addEventListener('beforetoggle', (e) => {
if (e.newState !== "closed")
@@ -288,7 +288,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'),'popover should remain open when not changing the type');
assert_false(gotEvent);
try {
popover.hidePopover(); // Cleanup
@@ -297,7 +297,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'));
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 +306,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'),'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'),'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'),'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..b120fbbb0f1bca 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'));
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'),'popover1 should have been hidden when it was removed from the document');
+ assert_false(popover1.matches(':popover'),'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'),'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..e6e01b657e687c 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'));
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'),'The popover should *not* be in the :popover 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'),'The popover should be in the :popover 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'),'The popover should be in the :popover 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'),'The popover should *not* be in the :popover 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'));
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'));
popover.hidePopover();
- assert_false(popover.matches(':open'));
+ assert_false(popover.matches(':popover'));
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'));
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'));
popover.showPopover();
- assert_false(popover.matches(':open'),'The "beforetoggle" event should be cancelable for the "opening" transition');
+ assert_false(popover.matches(':popover'),'The "beforetoggle" event should be cancelable for the "opening" transition');
cancel = false;
popover.showPopover();
- assert_true(popover.matches(':open'));
+ assert_true(popover.matches(':popover'));
popover.hidePopover();
- assert_false(popover.matches(':open'));
+ assert_false(popover.matches(':popover'));
}, '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'));
popover.showPopover();
- assert_true(popover.matches(':open'));
+ assert_true(popover.matches(':popover'));
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'));
}, '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'));
popover.showPopover();
await waitForRender();
- assert_true(popover.matches(':open'));
+ assert_true(popover.matches(':popover'));
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'));
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'));
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'));
}, '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..d0f3da9cc02bd8 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'), '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'), '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'), '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'), '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'), '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'), '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'), '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..465b403bdae037 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'), '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'), 'The parent popover should be open.');
+ assert_true(childpopover.matches(':popover'), '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..92c2c76da374e1 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'));
// 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'), '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'), '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'));
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'));
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'));
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'), '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'));
await clickOn(button); // This will *not* light dismiss, but will "toggle" the popover.
- assert_false(popover.matches(':open'));
+ assert_false(popover.matches(':popover'));
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'));
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'), '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'));
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'), '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'), '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'));
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'));
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'), '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..edd63a3ec1849e 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 {
background: green;
}
- [popover].nottoplayer:open {
+ [popover].nottoplayer:popover {
background: red;
}
diff --git a/html/semantics/popovers/popover-inside-display-none.html b/html/semantics/popovers/popover-inside-display-none.html
index a25cf14d1ce039..784310ad591b1e 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..fb0b05193f26a3 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'));
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'),'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'),'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'));
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'));
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'),'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'),'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'),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..5854baeb910a3d 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'),showing);
}
}
async_test(t => {
diff --git a/html/semantics/popovers/popover-light-dismiss.html b/html/semantics/popovers/popover-light-dismiss.html
index dce9561f55feec..486c689ee34255 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'));
popover1.showPopover();
- assert_true(popover1.matches(':open'));
+ assert_true(popover1.matches(':popover'));
let p1HideCount = popover1HideCount;
await clickOn(outside);
- assert_false(popover1.matches(':open'));
+ assert_false(popover1.matches(':popover'));
assert_equals(popover1HideCount,p1HideCount+1);
},'Clicking outside a popover will dismiss the popover');
@@ -80,53 +80,53 @@
addListener('pointerup');
addListener('mousedown');
addListener('mouseup');
- assert_false(popover1.matches(':open'));
+ assert_false(popover1.matches(':popover'));
popover1.showPopover();
- assert_true(popover1.matches(':open'));
+ assert_true(popover1.matches(':popover'));
let p1HideCount = popover1HideCount;
await clickOn(outside);
- assert_false(popover1.matches(':open'),'preventDefault should not prevent light dismiss');
+ assert_false(popover1.matches(':popover'),'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'));
popover1.showPopover();
await waitForRender();
p1HideCount = popover1HideCount;
await clickOn(inside1);
- assert_true(popover1.matches(':open'));
+ assert_true(popover1.matches(':popover'));
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'));
popover1.showPopover();
await waitForRender();
- assert_true(popover1.matches(':open'));
+ assert_true(popover1.matches(':popover'));
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'),'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'),'pointerup (outside the popover) should trigger light dismiss');
},'Popovers close on pointerup, not pointerdown');
promise_test(async () => {
- assert_false(popover1.matches(':open'));
+ assert_false(popover1.matches(':popover'));
popover1.showPopover();
- assert_true(popover1.matches(':open'));
+ assert_true(popover1.matches(':popover'));
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'),`A synthetic "${eventName}" event should not hide the popover`);
}
await testOne('pointerup');
await testOne('pointerdown');
@@ -138,10 +138,10 @@
promise_test(async () => {
popover1.showPopover();
await clickOn(inside1After);
- assert_true(popover1.matches(':open'));
+ assert_true(popover1.matches(':popover'));
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'));
popover1.hidePopover();
},'Moving focus outside the popover should not dismiss the popover');
@@ -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'),'popover1 should be open');
+ assert_true(popover2.matches(':popover'),'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'));
+ assert_false(popover2.matches(':popover'));
},'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'));
assert_equals(popover1HideCount,p1HideCount);
- assert_false(popover2.matches(':open'));
+ assert_false(popover2.matches(':popover'));
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'));
await waitForRender();
p1HideCount = popover1HideCount;
await clickOn(button1show);
- assert_true(popover1.matches(':open'),'popover1 should stay open');
+ assert_true(popover1.matches(':popover'),'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'));
},'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'));
+ assert_false(popover2.matches(':popover'));
await clickOn(button2);
- assert_true(popover2.matches(':open'),'button2 should activate popover2');
+ assert_true(popover2.matches(':popover'),'button2 should activate popover2');
p2HideCount = popover2HideCount;
await clickOn(button2);
- assert_true(popover2.matches(':open'),'popover2 should stay open');
+ assert_true(popover2.matches(':popover'),'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'));
+ assert_false(popover2.matches(':popover'));
},'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'));
+ assert_true(popover2.matches(':popover'));
p2HideCount = popover2HideCount;
await clickOn(button2);
- assert_true(popover2.matches(':open'),'popover2 should stay open');
+ assert_true(popover2.matches(':popover'),'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'));
+ assert_false(popover2.matches(':popover'));
},'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'));
await waitForRender();
p1HideCount = popover1HideCount;
await clickOn(button1show);
- assert_true(popover1.matches(':open'),'popover1 should stay open');
+ assert_true(popover1.matches(':popover'),'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'));
},'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'));
await waitForRender();
p1HideCount = popover1HideCount;
await clickOn(button1toggle);
- assert_false(popover1.matches(':open'),'popover1 should be hidden by popovertarget');
+ assert_false(popover1.matches(':popover'),'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'));
await waitForRender();
await clickOn(popover1anchor);
- assert_false(popover1.matches(':open'),'popover1 should close');
+ assert_false(popover1.matches(':popover'),'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'));
+ assert_true(popover2.matches(':popover'));
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'),'popover1 should be open');
+ assert_true(popover2.matches(':popover'),'popover1 should be open');
popover1.hidePopover();
- assert_false(popover2.matches(':open'));
+ assert_false(popover2.matches(':popover'));
},'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'),'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'));
+ assert_false(popover3.matches(':popover'),'popover3 is unrelated to popover4');
popover4.hidePopover(); // Cleanup
- assert_false(popover4.matches(':open'));
+ assert_false(popover4.matches(':popover'));
},'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'));
+ assert_false(popover3.matches(':popover'));
popover3.showPopover();
- assert_true(popover3.matches(':open'));
- assert_true(popover5.matches(':open'));
+ assert_true(popover3.matches(':popover'));
+ assert_true(popover5.matches(':popover'));
popover5.hidePopover();
- assert_false(popover3.matches(':open'));
- assert_false(popover5.matches(':open'));
+ assert_false(popover3.matches(':popover'));
+ assert_false(popover5.matches(':popover'));
},'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'),'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'),'invoking element should open popover');
inside7.click();
- assert_true(popover7.matches(':open'));
+ assert_true(popover7.matches(':popover'));
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'));
await clickOn(outside);
- assert_false(popover7.matches(':open'));
+ assert_false(popover7.matches(':popover'));
},'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'));
popover8.showPopover();
await clickOn(inside8After);
- assert_true(popover8.matches(':open'));
+ assert_true(popover8.matches(':popover'));
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'),'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'));
convPopover1.querySelector('button').click(); // Click to invoke p2
- assert_true(convPopover1.matches(':open'));
- assert_true(convPopover2.matches(':open'));
+ assert_true(convPopover1.matches(':popover'));
+ assert_true(convPopover2.matches(':popover'));
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'));
+ assert_true(convPopover2.matches(':popover'));
+ assert_true(convPopover3.matches(':popover'));
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'));
+ assert_true(convPopover2.matches(':popover'));
+ assert_true(convPopover3.matches(':popover'));
+ assert_true(convPopover4.matches(':popover'));
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'));
+ assert_true(convPopover2.matches(':popover'));
+ assert_true(convPopover3.matches(':popover'));
+ assert_true(convPopover4.matches(':popover'));
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'));
+ assert_false(convPopover2.matches(':popover'));
+ assert_false(convPopover3.matches(':popover'));
+ assert_false(convPopover4.matches(':popover'));
},'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'));
+ assert_true(convPopover2.matches(':popover'));
+ assert_false(convPopover3.matches(':popover'));
+ assert_false(convPopover4.matches(':popover'));
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'),'popover1 stays open because it is a DOM ancestor of popover4');
+ assert_false(convPopover2.matches(':popover'),'popover2 closes because it isn\'t connected to popover4 via active invokers');
+ assert_true(convPopover4.matches(':popover'));
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'),'nothing changes');
+ assert_false(convPopover2.matches(':popover'));
+ assert_true(convPopover4.matches(':popover'));
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'));
+ assert_false(convPopover2.matches(':popover'));
+ assert_false(convPopover3.matches(':popover'));
+ assert_false(convPopover4.matches(':popover'));
},'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'));
+ assert_true(hint.matches(':popover'));
+ assert_true(manual.matches(':popover'));
// 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'),'auto should be hidden');
+ assert_true(hint.matches(':popover'),'hint should stay open');
+ assert_true(manual.matches(':popover'),'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'));
+ assert_false(hint.matches(':popover'),'hint should close');
+ assert_true(manual.matches(':popover'),'manual does not light dismiss');
manual.hidePopover();
- assert_false(manual.matches(':open'));
+ assert_false(manual.matches(':popover'));
auto.showPopover();
hint.showPopover();
- assert_true(auto.matches(':open'));
- assert_true(hint.matches(':open'));
+ assert_true(auto.matches(':popover'));
+ assert_true(hint.matches(':popover'));
// 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'),'auto should stay open');
+ assert_false(hint.matches(':popover'),'hint should light dismiss');
auto.hidePopover();
- assert_false(auto.matches(':open'));
+ assert_false(auto.matches(':popover'));
},'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') && p14.matches(':popover') && p15.matches(':popover'),'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'),'p13 should still be open');
+ assert_false(p14.matches(':popover'));
+ assert_false(p15.matches(':popover'));
},'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..3cf0c1604655f3 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'));
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'),'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'),'changing focus to the popover should leave it showing');
popover.hidePopover();
- assert_false(popover.matches(':open'));
+ assert_false(popover.matches(':popover'));
}, "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..cf2cff41e2c260 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'));
popover.showPopover();
- assert_true(popover.matches(':open'));
+ assert_true(popover.matches(':popover'));
frame2Doc.body.appendChild(popover);
- assert_false(popover.matches(':open'));
+ assert_false(popover.matches(':popover'));
popover.showPopover();
- assert_true(popover.matches(':open'));
+ assert_true(popover.matches(':popover'));
}, '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..ce62960d88c978 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'));
popover.showPopover();
- assert_true(popover.matches(':open'));
+ assert_true(popover.matches(':popover'));
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..c88db91f417a81 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'));
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'));
assert_true(isElementVisible(popover1));
popover2.showPopover();
- assert_false(popover1.matches(':open'), 'popover1 open'); // P1 was closed by P2
+ assert_false(popover1.matches(':popover'), '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'), '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'));
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'));
assert_true(isElementVisible(popover2));
- assert_true(popover1.matches(':open'));
+ assert_true(popover1.matches(':popover'));
assert_true(isElementVisible(popover1));
popover1.hidePopover();
await waitForRender();
- assert_false(popover1.matches(':open'));
+ assert_false(popover1.matches(':popover'));
assert_false(isElementVisible(popover1));
- assert_false(popover2.matches(':open'));
+ assert_false(popover2.matches(':popover'));
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'), 'popover1 not open');
assert_true(isElementVisible(popover1));
- assert_true(popover2.matches(':open'), 'popover2 not open');
+ assert_true(popover2.matches(':popover'), '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'));
assert_false(isElementVisible(popover1));
- assert_false(popover2.matches(':open'));
+ assert_false(popover2.matches(':popover'));
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'), 'popover1 not open');
assert_true(isElementVisible(popover1));
- assert_true(popover2.matches(':open'), 'popover2 not open');
+ assert_true(popover2.matches(':popover'), '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'));
assert_false(isElementVisible(popover1));
- assert_false(popover2.matches(':open'));
+ assert_false(popover2.matches(':popover'));
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..7c3bc2b0a8b509 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'));
+ assert_false(child.matches(':popover'));
ancestor.showPopover();
if (clickToActivate)
clickToActivate.click();
else
child.showPopover();
- assert_true(child.matches(':open'));
- assert_true(ancestor.matches(':open'));
+ assert_true(child.matches(':popover'));
+ assert_true(ancestor.matches(':popover'));
ancestor.hidePopover();
- assert_false(ancestor.matches(':open'));
- assert_false(child.matches(':open'));
+ assert_false(ancestor.matches(':popover'));
+ assert_false(child.matches(':popover'));
},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'),
'The inner popover should be able to open successfully.');
- assert_false(outerpopover.matches(':open'),
+ assert_false(outerpopover.matches(':popover'),
'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'),
'The inner popover should be able to open successfully.');
- assert_true(outerpopover2.matches(':open'),
+ assert_true(outerpopover2.matches(':popover'),
'The outer popover should stay open when opening the inner one.');
togglebutton2.disabled = true;
- assert_false(innerpopover2.matches(':open'),
+ assert_false(innerpopover2.matches(':popover'),
'The inner popover should be closed when the hierarchy is broken.');
- assert_false(outerpopover2.matches(':open'),
+ assert_false(outerpopover2.matches(':popover'),
'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'),
'The inner popover should be able to open successfully.');
- assert_true(outerpopover3.matches(':open'),
+ assert_true(outerpopover3.matches(':popover'),
'The outer popover should stay open when opening the inner one.');
togglebutton3.disabled = true;
- assert_false(innerpopover3.matches(':open'),
+ assert_false(innerpopover3.matches(':popover'),
'The inner popover be should be closed when the hierarchy is broken.');
- assert_false(outerpopover3.matches(':open'),
+ assert_false(outerpopover3.matches(':popover'),
'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'),
'The inner popover should be able to open successfully.');
- assert_true(outerpopover4.matches(':open'),
+ assert_true(outerpopover4.matches(':popover'),
'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'),
'The inner popover be should be closed when the hierarchy is broken.');
- assert_false(outerpopover4.matches(':open'),
+ assert_false(outerpopover4.matches(':popover'),
'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'),
'The inner popover should be able to open successfully.');
- assert_true(outerpopover5.matches(':open'),
+ assert_true(outerpopover5.matches(':popover'),
'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'),
'The inner popover be should be closed when the hierarchy is broken.');
- assert_false(outerpopover5.matches(':open'),
+ assert_false(outerpopover5.matches(':popover'),
'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'),
'The inner popover should be able to open successfully.');
- assert_true(outerpopover6.matches(':open'),
+ assert_true(outerpopover6.matches(':popover'),
'The outer popover should stay open when opening the inner one.');
togglebutton6.remove();
- assert_false(innerpopover6.matches(':open'),
+ assert_false(innerpopover6.matches(':popover'),
'The inner popover be should be closed when the hierarchy is broken.');
- assert_false(outerpopover6.matches(':open'),
+ assert_false(outerpopover6.matches(':popover'),
'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'),
'The inner popover should be able to open successfully.');
- assert_true(outerpopover7.matches(':open'),
+ assert_true(outerpopover7.matches(':popover'),
'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'),
'The inner popover be should be closed when the hierarchy is broken.');
- assert_false(outerpopover7.matches(':open'),
+ assert_false(outerpopover7.matches(':popover'),
'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'),
'The inner popover should be able to open successfully.');
- assert_true(middlepopover8.matches(':open'),
+ assert_true(middlepopover8.matches(':popover'),
'The middle popover should stay open when opening the inner one.');
- assert_true(outerpopover8.matches(':open'),
+ assert_true(outerpopover8.matches(':popover'),
'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'),
'The inner popover should remain open.');
- assert_true(middlepopover8.matches(':open'),
+ assert_true(middlepopover8.matches(':popover'),
'The middle popover should remain open.');
- assert_true(outerpopover8.matches(':open'),
+ assert_true(outerpopover8.matches(':popover'),
'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..f94eeec6d5f417 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