commit 9816ee147508d064e9911db22965f5dff5164110
parent 2405f9139e05cd90d83bd9c0bf6edad2f09c76f4
Author: Dominic Farolino <dom@chromium.org>
Date: Thu, 6 Nov 2025 21:32:53 +0000
Bug 1997456 [wpt PR 55776] - [menu]: Add more default styles, a=testonly
Automatic update from web-platform-tests
[menu]: Add more default styles
This CL adds some basic default styles to the menubar, menulist, and
menuitem elements in the UA style sheet. The styles were inspired by
customizable select (specifically, I used the styles appearing in
https://crrev.com/c/6170442 as an initial reference), as well as test
sites masonf@ built for these menu elements.
While this CL makes the menu elements finally usable, a follow-up to
this CL will include more styles for the following:
1. <fieldset> styles rules for menulists
2. <hr> style rules for menulists
3. More niche styles for the menuitem element
- This includes `cursor`, and `white-space` and their associated
tests. Note that `user-select` styles are added in
https://crrev.com/c/7068555.
4. Anchor positioning fallback
One issue that was discovered in this CL was with applying
`border-radius` to menu item elements. The same border radius value was
causing very subtle pixel deltas, specifically on the border corners,
between the reference file and the actual implementation. For now this
CL omits this style, with a TODO to investigate so we can land it
separately.
R=masonf
Bug: 422803239
Change-Id: Iee53c91efd9aebddc14c3566c279d454025920b6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7089148
Commit-Queue: Dominic Farolino <dom@chromium.org>
Reviewed-by: Mason Freed <masonf@chromium.org>
Reviewed-by: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1538263}
--
wpt-commits: 038b671e1163dc968f76790e6cfeccf78073bb46
wpt-pr: 55776
Diffstat:
5 files changed, 89 insertions(+), 91 deletions(-)
diff --git a/testing/web-platform/tests/html/semantics/menu/tentative/menu-elements-default-style-ref.html b/testing/web-platform/tests/html/semantics/menu/tentative/menu-elements-default-style-ref.html
@@ -1,36 +1,21 @@
<!DOCTYPE html>
-<style>
- .menubar {
- display: inline-block;
- }
-
- .menulist {
- display: block;
- }
-
- .menuitem {
- padding: 1em;
- }
+<link rel=stylesheet href=resources/menu-elements-styles.css>
- .menubar .menuitem {
- display: inline-block;
- }
-
- .menulist .menuitem {
- display: block;
- }
+<style>
+body { background-color: orange; }
</style>
<div class="menubar">
- <div class="menuitem">Item A</div>
- <div class="menuitem">Item B</div>
- <div class="menuitem">Item C</div>
+ <div class="menuitem">Menubar item A</div>
+ <div class="menuitem">Menubar item B</div>
+ <div class="menuitem">Menubar item C</div>
</div>
+<!-- A <br> here because menubars are inline(-flex) by default -->
<br>
<div class="menulist">
- <div class="menuitem">Item A</div>
- <div class="menuitem">Item B</div>
- <div class="menuitem">Item C</div>
+ <div class="menuitem">Menulist item A</div>
+ <div class="menuitem">Menulist item B</div>
+ <div class="menuitem">Menulist item C</div>
</div>
diff --git a/testing/web-platform/tests/html/semantics/menu/tentative/menu-elements-default-style.html b/testing/web-platform/tests/html/semantics/menu/tentative/menu-elements-default-style.html
@@ -4,21 +4,25 @@
<link rel=help href=https://open-ui.org/components/menu.explainer>
<link rel="match" href="menu-elements-default-style-ref.html">
+<style>
+body { background-color: orange; }
+</style>
+
<menubar>
- <menuitem>Item A</menuitem>
- <menuitem>Item B</menuitem>
- <menuitem>Item C</menuitem>
+ <menuitem>Menubar item A</menuitem>
+ <menuitem>Menubar item B</menuitem>
+ <menuitem>Menubar item C</menuitem>
</menubar>
<br>
<menulist>
- <menuitem>Item A</menuitem>
- <menuitem>Item B</menuitem>
- <menuitem>Item C</menuitem>
+ <menuitem>Menulist item A</menuitem>
+ <menuitem>Menulist item B</menuitem>
+ <menuitem>Menulist item C</menuitem>
</menulist>
<script>
const menulist = document.querySelector("menulist");
menulist.showPopover();
-</script>
-\ No newline at end of file
+</script>
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
@@ -1,60 +1,28 @@
<!DOCTYPE html>
+<link rel=stylesheet href=resources/menu-elements-styles.css>
<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.
- */
+ /* 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;
+ background: unset;
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=menubar>
<div class=menuitem>Nothing</div>
- <button class=menuitem id=trigger popovertarget=menulist-with-menubar-anchor>Trigger</button>
+ <button class=menuitem id=trigger popovertarget=top-menulist>Trigger</button>
</div>
-<div popover id=menulist-with-menubar-anchor>
- <button class=menuitem id=trigger2 popovertarget=menulist-with-menulist-anchor>Trigger 2</button>
+<div popover class="menulist menulist-with-menubar-anchor" id=top-menulist>
+ <button class=menuitem id=trigger2 popovertarget=sub-menulist>Trigger 2</button>
</div>
-<div popover id=menulist-with-menulist-anchor>
+<div popover class="menulist menulist-with-menulist-anchor" id=sub-menulist>
<div class=menuitem>Most nested item</div>
</div>
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
@@ -4,23 +4,6 @@
<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>
diff --git a/testing/web-platform/tests/html/semantics/menu/tentative/resources/menu-elements-styles.css b/testing/web-platform/tests/html/semantics/menu/tentative/resources/menu-elements-styles.css
@@ -0,0 +1,59 @@
+.menubar > .menuitem {
+ display: inline-flex;
+}
+
+.menulist .menuitem {
+ display: flex;
+}
+
+.menubar {
+ display: inline-flex;
+ flex-direction: row;
+ gap: 0.5em;
+ width: max-content;
+ background-color: transparent;
+ border: 1px solid currentColor;
+ border-radius: 0.25em;
+ padding: 0.25em;
+}
+
+.menulist {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ width: max-content;
+ min-width: 150px;
+ color: CanvasText;
+ background-color: Canvas;
+ border: 1px solid currentColor;
+ /* TODO(domfarolino): Enable this. See the related documentation in the
+ * Chromium UA style sheet for this. */
+ /* border-radius: 0.25em; */
+ padding: 0.25em;
+
+ /* Unset native popover margin */
+ margin: 0;
+}
+
+/* Menulists whose implicit anchor is a menuitem in a menubar. */
+.menulist-with-menubar-anchor {
+ position: absolute;
+ /* Below and span-right, by default. */
+ position-area: block-end span-inline-end;
+}
+
+/* Menulists whose implicit anchor is a menuitem in a menulist. */
+.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;
+}
+
+.menubar, .menulist {
+ .menuitem {
+ align-items: center;
+ padding: 1em;
+ min-inline-size: 24px;
+ min-block-size: max(24px, 1lh);
+ }
+}
