mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-09-21 00:38:56 +00:00
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:
parent
bc0729f5d2
commit
91e4fb248b
Notes:
github-actions[bot]
2025-02-16 19:41:05 +00:00
Author: https://github.com/Gingeh
Commit: 91e4fb248b
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3537
Reviewed-by: https://github.com/tcl3 ✅
15 changed files with 607 additions and 56 deletions
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue