LibWeb: Hide unrelated popovers when showing popovers

Also hides decendant popovers when hiding.
Also hides unrelated popovers when showing dialogs.
This commit is contained in:
Gingeh 2025-02-04 10:23:09 +11:00 committed by Tim Ledbetter
commit 91e4fb248b
Notes: github-actions[bot] 2025-02-16 19:41:05 +00:00
15 changed files with 607 additions and 56 deletions

View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<script src="../include.js"></script>
<!-- opening an auto popover hides unrelated popovers -->
<!-- hiding a popover also hides its decendants -->
<div popover id=outer>
<div popover id=middle>
<div popover id=inner>
</div>
</div>
<div popover id=second>
</div>
</div>
<script>
test(() => {
const outer = document.getElementById("outer");
const middle = document.getElementById("middle");
const inner = document.getElementById("inner");
const second = document.getElementById("second");
outer.showPopover();
middle.showPopover();
inner.showPopover();
if (outer.matches(":popover-open")
&& middle.matches(":popover-open")
&& inner.matches(":popover-open")
&& !second.matches(":popover-open"))
println("PASS");
second.showPopover();
if (outer.matches(":popover-open")
&& !middle.matches(":popover-open")
&& !inner.matches(":popover-open")
&& second.matches(":popover-open"))
println("PASS");
});
</script>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<script src="../include.js"></script>
<!-- hint popovers only hide other hint popovers -->
<div popover id=auto></div>
<div popover=hint id=hint1></div>
<div popover=hint id=hint2></div>
<script>
test(() => {
const auto = document.getElementById("auto");
const hint1 = document.getElementById("hint1");
const hint2 = document.getElementById("hint2");
auto.showPopover();
hint1.showPopover();
if (auto.matches(":popover-open")
&& hint1.matches(":popover-open")
&& !hint2.matches(":popover-open"))
println("PASS");
hint2.showPopover();
if (auto.matches(":popover-open")
&& !hint1.matches(":popover-open")
&& hint2.matches(":popover-open"))
println("PASS");
auto.hidePopover();
auto.showPopover();
if (auto.matches(":popover-open")
&& !hint1.matches(":popover-open")
&& !hint2.matches(":popover-open"))
println("PASS");
});
</script>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<script src="include.js"></script>
<script src="../include.js"></script>
<div popover id="pop"></div>
<div popover id="pop2"></div>
<script>

View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<script src="../include.js"></script>
<!-- popover invokers count as parents -->
<button popovertarget=outer id=outerButton></button>
<div popover id=outer>
<button popovertarget=middle id=middleButton></button>
<button popovertarget=second id=secondButton></button>
</div>
<div popover id=middle>
<button popovertarget=inner id=innerButton></button>
</div>
<div popover id=inner></div>
<div popover id=second></div>
<script>
test(() => {
const outer = document.getElementById("outer");
const middle = document.getElementById("middle");
const inner = document.getElementById("inner");
const second = document.getElementById("second");
const outerButton = document.getElementById("outerButton");
const middleButton = document.getElementById("middleButton");
const innerButton = document.getElementById("innerButton");
const secondButton = document.getElementById("secondButton");
outerButton.click();
middleButton.click();
innerButton.click();
if (outer.matches(":popover-open")
&& middle.matches(":popover-open")
&& inner.matches(":popover-open")
&& !second.matches(":popover-open"))
println("PASS");
secondButton.click();
if (outer.matches(":popover-open")
&& !middle.matches(":popover-open")
&& !inner.matches(":popover-open")
&& second.matches(":popover-open"))
println("PASS");
});
</script>