mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-12-07 21:59:54 +00:00
100 lines
3.2 KiB
HTML
100 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<script src="../include.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;
|
|
}
|
|
|
|
#p1 {
|
|
top: 50px;
|
|
}
|
|
|
|
#p2 {
|
|
top: 120px;
|
|
}
|
|
</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>
|
|
|
|
<script>
|
|
click = function (element) {
|
|
const boundingRect = element.getBoundingClientRect();
|
|
const centerPoint = {
|
|
x: boundingRect.left + boundingRect.width / 2,
|
|
y: boundingRect.top + boundingRect.height / 2
|
|
};
|
|
internals.click(centerPoint.x, centerPoint.y);
|
|
};
|
|
|
|
test(() => {
|
|
println("p1 open: " + p1.matches(":popover-open") + " (should be false)");
|
|
println("p2 open: " + p2.matches(":popover-open") + " (should be false)");
|
|
|
|
println("Opening p1");
|
|
click(b1t);
|
|
|
|
println("p1 open: " + p1.matches(":popover-open") + " (should be true)");
|
|
println("p2 open: " + p2.matches(":popover-open") + " (should be false)");
|
|
|
|
println("Opening p2");
|
|
click(b2);
|
|
|
|
println("p1 open: " + p1.matches(":popover-open") + " (should be true)");
|
|
println("p2 open: " + p2.matches(":popover-open") + " (should be true)");
|
|
|
|
println("Clicking p2");
|
|
click(p2);
|
|
|
|
println("p1 open: " + p1.matches(":popover-open") + " (should be true)");
|
|
println("p2 open: " + p2.matches(":popover-open") + " (should be true)");
|
|
|
|
println("Clicking p1");
|
|
click(p1);
|
|
|
|
println("p1 open: " + p1.matches(":popover-open") + " (should be true)");
|
|
println("p2 open: " + p2.matches(":popover-open") + " (should be false)");
|
|
|
|
println("Clicking p1's show invoker");
|
|
click(b1s);
|
|
|
|
println("p1 open: " + p1.matches(":popover-open") + " (should be true)");
|
|
println("p2 open: " + p2.matches(":popover-open") + " (should be false)");
|
|
|
|
println("Clicking p1's toggle invoker");
|
|
click(b1t);
|
|
|
|
println("p1 open: " + p1.matches(":popover-open") + " (should be false)");
|
|
println("p2 open: " + p2.matches(":popover-open") + " (should be false)");
|
|
|
|
println("Re-opening both popovers");
|
|
click(b1t);
|
|
click(b2);
|
|
|
|
println("p1 open: " + p1.matches(":popover-open") + " (should be true)");
|
|
println("p2 open: " + p2.matches(":popover-open") + " (should be true)");
|
|
|
|
println("Clicking outside both popovers");
|
|
click(outside);
|
|
|
|
println("p1 open: " + p1.matches(":popover-open") + " (should be false)");
|
|
println("p2 open: " + p2.matches(":popover-open") + " (should be false)");
|
|
});
|
|
</script>
|