Joey Arhar
a44d576a3d
Automatic update from web-platform-tests Use position/sizing CSS from ::picker(select) for menulist - display:flex with flex-direction:column does the same thing as display:block which ::picker(select) uses, so use display:block instead. - ::picker(select) uses position:fixed instead of position:absolute, so use that instead. This doesn't seem to change much. - positioning when there is no invoker should match popovers, so use margin:0 and inset:auto. - When there are too many menuitems to fit in the viewport, the menuitem should create a scrollbar rather than extending the length of the document. max-block-size:stretch and overflow:auto achieve this just like ::picker(select). - ::picker(select) doesn't use border-radius and there isn't a good reason to add one here, so remove the commented out border-radius. Bug: 406566432 Change-Id: Ifde6be60446e97ec4b59450fd698bc6c1174ff3e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7801896 Reviewed-by: Joey Arhar <jarhar@chromium.org> Reviewed-by: David Grogan <dgrogan@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1622129} -- wpt-commits: bfd80385df09e425680fe4525c2ef849712e9a6d wpt-pr: 59531
31 lines
738 B
HTML
31 lines
738 B
HTML
<!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="menu-elements-default-style-ref.html">
|
|
|
|
<style>
|
|
body { background-color: orange; }
|
|
</style>
|
|
|
|
<menubar>
|
|
<menuitem id=invoker>Menubar item A</menuitem>
|
|
<menuitem>Menubar item B</menuitem>
|
|
<menuitem>Menubar item C</menuitem>
|
|
</menubar>
|
|
|
|
<br>
|
|
|
|
<menulist>
|
|
<menuitem>Menulist item A</menuitem>
|
|
<menuitem>Menulist item B</menuitem>
|
|
<hr>
|
|
<menuitem>Menulist item C</menuitem>
|
|
</menulist>
|
|
|
|
<script>
|
|
const menulist = document.querySelector('menulist');
|
|
const invoker = document.getElementById('invoker');
|
|
menulist.showPopover({source: invoker});
|
|
</script>
|