commit 0e8c3f2ac1b482df8b4acd6d915a568f1476d748
parent 9cda45439e518f453bbfcd5b750611c42ba30002
Author: Dominic Farolino <dom@chromium.org>
Date: Tue, 21 Oct 2025 10:30:39 +0000
Bug 1994833 [wpt PR 55363] - Menu: implement anchor positioning for <menulist> elements, a=testonly
Automatic update from web-platform-tests
Menu: implement anchor positioning for <menulist> elements
This CL introduces two new internal pseudo classes to support menulist
anchor positioning:
- internal-menulist-popover-with-menubar-anchor
- internal-menulist-popover-with-menulist-anchor
These trigger anchor positioning styles that are specific to whether a
menulist's implicit anchor is a menuitem inside a menubar vs another
menulist.
This CL does not include a pseudo class for when the implicit anchor is
a button element, and does not include anchor positioning fallback
styles.
Bug: 422803239
Change-Id: Ic40e6c14529323a0e34f31b87e3f97909de91c0f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7011927
Reviewed-by: Mason Freed <masonf@chromium.org>
Commit-Queue: Dominic Farolino <dom@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1530985}
--
wpt-commits: 03a3ce595e7b51e4a27fc948fa47827a1412aff5
wpt-pr: 55363
Diffstat:
2 files changed, 104 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/html/semantics/menu/tentative/menuitem-anchor-positioning-ref.html b/testing/web-platform/tests/html/semantics/menu/tentative/menuitem-anchor-positioning-ref.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<style>
+ #menubar {
+ width: 300px;
+ background: lightblue;
+ }
+ .menuitem {
+ background: red;
+ padding: 1em;
+ width: 100px;
+ border: 0;
+ }
+ #menubar > .menuitem {
+ display: inline-block;
+ }
+ /*
+ Only buttons can trigger popovers, so style buttons like menuitems, and
+ reset some of their default styles.
+ */
+ button {
+ box-sizing: content-box;
+ font-size: unset;
+ font-family: unset;
+ text-align: unset;
+ }
+ /* Unset some default popover styles to style them like menulists */
+ div[popover] {
+ height: 150px;
+ background: green;
+ border: 0;
+ padding: 0;
+ margin: 0;
+ }
+
+ #menulist-with-menubar-anchor {
+ position: absolute;
+ /* Below and span-right, by default. */
+ position-area: block-end span-inline-end;
+ }
+
+ #menulist-with-menulist-anchor {
+ position: absolute;
+ /* To the right, with its top aligned to the implicit anchor's top */
+ position-area: inline-end span-block-end;
+ }
+</style>
+
+<div id=menubar>
+ <div class=menuitem>Nothing</div>
+ <button class=menuitem id=trigger popovertarget=menulist-with-menubar-anchor>Trigger</button>
+</div>
+
+<div popover id=menulist-with-menubar-anchor>
+ <button class=menuitem id=trigger2 popovertarget=menulist-with-menulist-anchor>Trigger 2</button>
+</div>
+
+<div popover id=menulist-with-menulist-anchor>
+ <div class=menuitem>Most nested item</div>
+</div>
+
+<script>
+ trigger.click();
+ trigger2.click();
+</script>
diff --git a/testing/web-platform/tests/html/semantics/menu/tentative/menuitem-anchor-positioning.html b/testing/web-platform/tests/html/semantics/menu/tentative/menuitem-anchor-positioning.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=author href=mailto:dom@chromium.org>
+<link rel=help href=https://open-ui.org/components/menu.explainer>
+<link rel="match" href="menuitem-anchor-positioning-ref.html">
+
+<style>
+ menubar {
+ display: block;
+ width: 300px;
+ background: lightblue;
+ }
+ menuitem {
+ display: inline-block;
+ background: red;
+ width: 100px;
+ }
+ menulist {
+ height: 150px;
+ background: green;
+ }
+</style>
+
+<menubar>
+ <menuitem>Nothing</menuitem>
+ <menuitem id="trigger" command="toggle-menu" commandfor="menulist">Trigger</menuitem>
+</menubar>
+
+<menulist id="menulist">
+ <menuitem id=trigger2 command=toggle-menu commandfor=submenu>Trigger 2</menuitem>
+</menulist>
+
+<menulist id="submenu">
+ <menuitem>Most nested item</menuitem>
+</menulist>
+
+<script>
+ trigger.click();
+ trigger2.click();
+</script>
