<!DOCTYPE html>
<meta charset="utf-8" />
<title>Popover light dismiss behavior</title>
<meta name="timeout" content="long">
<link rel="author" href="mailto:[email protected]">
<link rel=help href="https://open-ui.org/components/popover.research.explainer">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="resources/popover-utils.js"></script>
<style>
[popover] {
/* Position most popovers at the bottom-right, out of the way */
inset:auto;
bottom:0;
right:0;
}
[popover]::backdrop {
/* This should *not* affect anything: */
pointer-events: auto;
}
</style>
<button id=b1t popovertarget='p1'>Popover 1</button>
<button id=b1s popovertarget='p1' popovertargetaction=show>Popover 1</button>
<span id=outside>Outside all popovers</span>
<div popover id=p1>
<span id=inside1>Inside popover 1</span>
<button id=b2 popovertarget='p2' popovertargetaction=show>Popover 2</button>
<span id=inside1after>Inside popover 1 after button</span>
<div popover id=p2>
<span id=inside2>Inside popover 2</span>
</div>
</div>
<button id=after_p1 tabindex="0">Next control after popover1</button>
<style>
#p1 {top: 50px;}
#p2 {top: 120px;}
</style>
<script>
const popover1 = document.querySelector('#p1');
const button1toggle = document.querySelector('#b1t');
const button1show = document.querySelector('#b1s');
const inside1After = document.querySelector('#inside1after');
const button2 = document.querySelector('#b2');
const popover2 = document.querySelector('#p2');
const outside = document.querySelector('#outside');
const inside1 = document.querySelector('#inside1');
const inside2 = document.querySelector('#inside2');
const afterp1 = document.querySelector('#after_p1');
let popover1HideCount = 0;
popover1.addEventListener('beforetoggle',(e) => {
if (e.newState !== "closed")
return;
++popover1HideCount;
e.preventDefault(); // 'beforetoggle' should not be cancellable.
});
let popover2HideCount = 0;
popover2.addEventListener('beforetoggle',(e) => {
if (e.newState !== "closed")
return;
++popover2HideCount;
e.preventDefault(); // 'beforetoggle' should not be cancellable.
});
promise_test(async () => {
assert_false(popover1.matches(':popover-open'));
popover1.showPopover();
assert_true(popover1.matches(':popover-open'));
let p1HideCount = popover1HideCount;
await clickOn(outside);
assert_false(popover1.matches(':popover-open'));
assert_equals(popover1HideCount,p1HideCount+1);
},'Clicking outside a popover will dismiss the popover');
promise_test(async (t) => {
const controller = new AbortController();
t.add_cleanup(() => controller.abort());
function addListener(eventName) {
document.addEventListener(eventName,(e) => e.preventDefault(),{signal:controller.signal,capture: true});
}
addListener('pointerdown');
addListener('pointerup');
addListener('mousedown');
addListener('mouseup');
assert_false(popover1.matches(':popover-open'));
popover1.showPopover();
assert_true(popover1.matches(':popover-open'));
let p1HideCount = popover1HideCount;
await clickOn(outside);
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(':popover-open'));
popover1.showPopover();
await waitForRender();
p1HideCount = popover1HideCount;
await clickOn(inside1);
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(':popover-open'));
popover1.showPopover();
await waitForRender();
assert_true(popover1.matches(':popover-open'));
await new test_driver.Actions()
.pointerMove(0, 0, {origin: outside})
.pointerDown()
.send();
await waitForRender();
assert_true(popover1.matches(':popover-open'),'pointerdown (outside the popover) should not hide the popover');
await new test_driver.Actions()
.pointerUp()
.send();
await waitForRender();
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(':popover-open'));
popover1.showPopover();
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(':popover-open'),`A synthetic "${eventName}" event should not hide the popover`);
}
await testOne('pointerup');
await testOne('pointerdown');
await testOne('mouseup');
await testOne('mousedown');
},'Synthetic events can\'t close popovers');
promise_test(async (t) => {
t.add_cleanup(() => popover1.hidePopover());
popover1.showPopover();
await clickOn(inside1After);
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(':popover-open'));
},'Moving focus outside the popover should not dismiss the popover');
promise_test(async () => {
popover1.showPopover();
popover2.showPopover();
await waitForRender();
p1HideCount = popover1HideCount;
let p2HideCount = popover2HideCount;
await clickOn(inside2);
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(':popover-open'));
assert_false(popover2.matches(':popover-open'));
},'Clicking inside a child popover shouldn\'t close either popover');
promise_test(async () => {
popover1.showPopover();
popover2.showPopover();
await waitForRender();
p1HideCount = popover1HideCount;
p2HideCount = popover2HideCount;
await clickOn(inside1);
assert_true(popover1.matches(':popover-open'));
assert_equals(popover1HideCount,p1HideCount);
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(':popover-open'));
await waitForRender();
p1HideCount = popover1HideCount;
await clickOn(button1show);
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(':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(':popover-open'));
assert_false(popover2.matches(':popover-open'));
await clickOn(button2);
assert_true(popover2.matches(':popover-open'),'button2 should activate popover2');
p2HideCount = popover2HideCount;
await clickOn(button2);
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(':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(':popover-open'));
assert_true(popover2.matches(':popover-open'));
p2HideCount = popover2HideCount;
await clickOn(button2);
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(':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(':popover-open'));
await waitForRender();
p1HideCount = popover1HideCount;
await clickOn(button1show);
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(':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(':popover-open'));
await waitForRender();
p1HideCount = popover1HideCount;
await clickOn(button1toggle);
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();
popover2.showPopover(); // Popover1 is an ancestral element for popover2.
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})
.pointerDown({button: drag_actions.ButtonType.LEFT})
.pointerMove(0,0,{origin: popover1})
.pointerUp({button: drag_actions.ButtonType.LEFT})
.send();
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(':popover-open'));
},'Dragging from an open popover outside an open popover should leave the popover open');
</script>
<button id=b3 popovertarget=p3>Popover 3 - button 3
<div popover id=p4>Inside popover 4</div>
</button>
<div popover id=p3>Inside popover 3</div>
<div popover id=p5>Inside popover 5
<button popovertarget=p3>Popover 3 - button 4 - unused</button>
</div>
<style>
#p3 {top:100px;}
#p4 {top:200px;}
#p5 {top:200px;}
</style>
<script>
const popover3 = document.querySelector('#p3');
const popover4 = document.querySelector('#p4');
const popover5 = document.querySelector('#p5');
const button3 = document.querySelector('#b3');
promise_test(async () => {
await clickOn(button3);
assert_true(popover3.matches(':popover-open'),'invoking element should open popover');
popover4.showPopover();
assert_true(popover4.matches(':popover-open'));
assert_false(popover3.matches(':popover-open'),'popover3 is unrelated to popover4');
popover4.hidePopover(); // Cleanup
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(':popover-open'));
assert_false(popover3.matches(':popover-open'));
popover3.showPopover();
assert_true(popover3.matches(':popover-open'));
assert_false(popover5.matches(':popover-open'),'Popover 5 was not invoked from popover3\'s invoker');
popover3.hidePopover();
assert_false(popover3.matches(':popover-open'));
},'An invoking element that was not used to invoke the popover is not part of the ancestor chain');
</script>
<my-element id="myElement">
<template shadowrootmode="open">
<button id=b7 popovertarget=p7 popovertargetaction=show tabindex="0">Popover7</button>
<div popover id=p7 style="top: 100px;">
<p>Popover content.</p>
<input id="inside7" type="text" placeholder="some text">
</div>
</template>
</my-element>
<script>
const button7 = document.querySelector('#myElement').shadowRoot.querySelector('#b7');
const popover7 = document.querySelector('#myElement').shadowRoot.querySelector('#p7');
const inside7 = document.querySelector('#myElement').shadowRoot.querySelector('#inside7');
promise_test(async () => {
button7.click();
assert_true(popover7.matches(':popover-open'),'invoking element should open popover');
inside7.click();
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(':popover-open'));
await clickOn(outside);
assert_false(popover7.matches(':popover-open'));
},'Clicking outside a shadow DOM popover should close that popover');
</script>
<div popover id=p8>
<button tabindex="0">Button</button>
<span id=inside8after>Inside popover 8 after button</span>
</div>
<button id=p8invoker popovertarget=p8 tabindex="0">Popover8 invoker (no action)</button>
<script>
promise_test(async () => {
const popover8 = document.querySelector('#p8');
const inside8After = document.querySelector('#inside8after');
const popover8Invoker = document.querySelector('#p8invoker');
assert_false(popover8.matches(':popover-open'));
popover8.showPopover();
await clickOn(inside8After);
assert_true(popover8.matches(':popover-open'));
await sendTab();
assert_equals(document.activeElement,popover8Invoker,'Focus should move to the invoker element');
assert_true(popover8.matches(':popover-open'),'popover should stay open');
popover8.hidePopover(); // Cleanup
},'Moving focus back to the invoker element should not dismiss the popover');
</script>
<!-- Convoluted ancestor relationship -->
<div popover id=convoluted_p1>Popover 1
<button popovertarget=convoluted_p2>Open Popover 2</button>
<div popover id=convoluted_p2>Popover 2
<button popovertarget=convoluted_p3>Open Popover 3</button>
<button popovertarget=convoluted_p2 popovertargetaction=show>Self-linked invoker</button>
</div>
<div popover id=convoluted_p3>Popover 3
<button popovertarget=convoluted_p4>Open Popover 4</button>
</div>
<div popover id=convoluted_p4><p>Popover 4</p></div>
</div>
<button onclick="convoluted_p1.showPopover()" tabindex="0">Open convoluted popover</button>
<style>
#convoluted_p1 {top:50px;}
#convoluted_p2 {top:150px;}
#convoluted_p3 {top:250px;}
#convoluted_p4 {top:350px;}
</style>
<script>
const convPopover1 = document.querySelector('#convoluted_p1');
const convPopover2 = document.querySelector('#convoluted_p2');
const convPopover3 = document.querySelector('#convoluted_p3');
const convPopover4 = document.querySelector('#convoluted_p4');
promise_test(async () => {
convPopover1.showPopover(); // Programmatically open p1
assert_true(convPopover1.matches(':popover-open'));
convPopover1.querySelector('button').click(); // Click to invoke p2
assert_true(convPopover1.matches(':popover-open'));
assert_true(convPopover2.matches(':popover-open'));
convPopover2.querySelector('button').click(); // Click to invoke p3
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(':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(':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(':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(':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(':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(':popover-open'),'nothing changes');
assert_false(convPopover2.matches(':popover-open'));
assert_true(convPopover4.matches(':popover-open'));
convPopover1.hidePopover();
assert_false(convPopover1.matches(':popover-open'));
assert_false(convPopover2.matches(':popover-open'));
assert_false(convPopover3.matches(':popover-open'));
assert_false(convPopover4.matches(':popover-open'));
},'Ensure circular/convoluted ancestral relationships are functional, with a direct showPopover()');
</script>
<div popover id=p13>Popover 1
<div popover id=p14>Popover 2
<div popover id=p15>Popover 3</div>
</div>
</div>
<style>
#p13 {top: 100px;}
#p14 {top: 200px;}
#p15 {top: 300px;}
</style>
<script>
promise_test(async () => {
const p13 = document.querySelector('#p13');
const p14 = document.querySelector('#p14');
const p15 = document.querySelector('#p15');
p13.showPopover();
p14.showPopover();
p15.showPopover();
p15.addEventListener('beforetoggle', (e) => {
if (e.newState !== "closed")
return;
p14.hidePopover();
},{once:true});
assert_true(p13.matches(':popover-open') && p14.matches(':popover-open') && p15.matches(':popover-open'),'all three should be open');
p14.hidePopover();
assert_true(p13.matches(':popover-open'),'p13 should still be open');
assert_false(p14.matches(':popover-open'));
assert_false(p15.matches(':popover-open'));
p13.hidePopover(); // Cleanup
},'Hide the target popover during "hide all popovers until"');
</script>
<div id=p16 popover>Popover 16
<div id=p17 popover>Popover 17</div>
<div id=p18 popover>Popover 18</div>
</div>
<script>
promise_test(async () => {
p16.showPopover();
p18.showPopover();
let events = [];
const logEvents = (e) => {events.push(`${e.newState==='open' ? 'show' : 'hide'} ${e.target.id}`)};
p16.addEventListener('beforetoggle', logEvents);
p17.addEventListener('beforetoggle', logEvents);
p18.addEventListener('beforetoggle', (e) => {
logEvents(e);
p17.showPopover();
});
p16.hidePopover();
assert_array_equals(events,['hide p18','show p17','hide p16'],'There should not be a hide event for p17');
assert_false(p16.matches(':popover-open'));
assert_false(p17.matches(':popover-open'));
assert_false(p18.matches(':popover-open'));
},'Show a sibling popover during "hide all popovers until"');
</script>
<div id=p19 popover>Popover 19</div>
<div id=p20 popover>Popover 20</div>
<button id=example2 tabindex="0">Example 2</button>
<script>
promise_test(async () => {
p19.showPopover();
let events = [];
const logEvents = (e) => {events.push(`${e.newState==='open' ? 'show' : 'hide'} ${e.target.id}`)};
p19.addEventListener('beforetoggle', (e) => {
logEvents(e);
p20.showPopover();
});
p20.addEventListener('beforetoggle', logEvents);
p19.hidePopover();
assert_array_equals(events,['hide p19','show p20'],'There should not be a second hide event for 19');
assert_false(p19.matches(':popover-open'));
assert_true(p20.matches(':popover-open'));
p20.hidePopover(); // Cleanup
},'Show an unrelated popover during "hide popover"');
</script>
<div id=p21 popover>21
<div id=p22 popover>22</div>
<div id=p23 popover>23</div>
<div id=p24 popover>24</div>
</div>
<script>
promise_test(async () => {
p21.showPopover();
p22.showPopover();
let events = [];
const logEvents = (e) => { events.push(`${e.newState === 'open' ? 'show' : 'hide'} ${e.target.id}`) };
p22.addEventListener('beforetoggle', (e) => {
logEvents(e);
p24.showPopover()
});
p23.addEventListener('beforetoggle', logEvents);
p24.addEventListener('beforetoggle', logEvents);
p23.showPopover();
assert_array_equals(events, ['show p23', 'hide p22', 'show p24'], 'hiding p24 does not fire event');
assert_false(p22.matches(':popover-open'));
assert_true(p23.matches(':popover-open'));
assert_false(p24.matches(':popover-open'));
p21.hidePopover(); // Cleanup
},'Show other auto popover during "hide all popover until"');
</script>
<div id=p25 popover>
<div id=p26 popover>26</div>
<div id=p27 popover>27</div>
<div id=p28 popover>28</div>
</div>
<script>
promise_test(async () => {
p25.showPopover();
p26.showPopover();
let events = [];
const logEvents = (e) => { events.push(`${e.newState === 'open' ? 'show' : 'hide'} ${e.target.id}`) };
p26.addEventListener('beforetoggle', (e) => {
logEvents(e);
p28.showPopover();
});
p27.addEventListener('beforetoggle', logEvents);
p28.addEventListener('beforetoggle', (e) => {
logEvents(e);
p27.showPopover();
});
p27.showPopover();
assert_array_equals(events, ['show p27', 'hide p26', 'show p28', 'show p27'], 'Nested showPopover should not fire event for its HideAllPopoversUntil');
assert_false(p26.matches(':popover-open'));
assert_true(p27.matches(':popover-open'));
assert_false(p28.matches(':popover-open'));
p25.hidePopover(); // Cleanup
}, 'Nested showPopover');
</script>
<div id=p29 popover>Popover 29</div>
<button id=b29 popovertarget=p29>Open popover 29</button>
<iframe id=iframe29 width=100 height=30></iframe>
<script>
promise_test(async () => {
let iframe_url = (new URL("/common/blank.html", location.href)).href;
iframe29.src = iframe_url;
iframe29.contentDocument.body.style.height = '100%';
assert_false(p29.matches(':popover-open'),'initially hidden');
p29.showPopover();
assert_true(p29.matches(':popover-open'),'showing');
let actions = new test_driver.Actions();
// Using the iframe's contentDocument as the origin would throw an error, so
// we are using iframe29 as the origin instead.
const iframe_box = iframe29.getBoundingClientRect();
await actions
.pointerMove(1,1,{origin: b29})
.pointerDown({button: actions.ButtonType.LEFT})
.pointerMove(iframe_box.width / 2, iframe_box.height / 2, {origin: iframe29})
.pointerUp({button: actions.ButtonType.LEFT})
.send();
assert_true(p29.matches(':popover-open'), 'popover should be open after pointerUp in iframe.');
actions = new test_driver.Actions();
await actions
.pointerMove(iframe_box.width / 2, iframe_box.height / 2, {origin: iframe29})
.pointerDown({button: actions.ButtonType.LEFT})
.pointerMove(1,1,{origin: b29})
.pointerUp({button: actions.ButtonType.LEFT})
.send();
assert_true(p29.matches(':popover-open'), 'popover should be open after pointerUp on main frame button.');
},`Pointer down in one document and pointer up in another document shouldn't dismiss popover`);
</script>
<div id=p30 popover>Popover 30</div>
<button id=b30 popovertarget=p30>Open popover 30</button>
<button id=b30b>Non-invoker</button>
<script>
promise_test(async () => {
assert_false(p30.matches(':popover-open'),'initially hidden');
p30.showPopover();
assert_true(p30.matches(':popover-open'),'showing');
let actions = new test_driver.Actions();
await actions
.pointerMove(2,2,{origin: b30})
.pointerDown({button: actions.ButtonType.LEFT})
.pointerMove(2,2,{origin: b30b})
.pointerUp({button: actions.ButtonType.LEFT})
.send();
await waitForRender();
assert_true(p30.matches(':popover-open'),'showing after pointerup');
},`Pointer down inside invoker and up outside that invoker shouldn't dismiss popover`);
</script>
Codebase Browser
chromium