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
28 lines
752 B
HTML
28 lines
752 B
HTML
<!DOCTYPE html>
|
|
<link rel=stylesheet href=resources/menu-elements-styles.css>
|
|
|
|
<style>
|
|
body { background-color: orange; }
|
|
</style>
|
|
|
|
<div class="menubar">
|
|
<button class="menuitem" id=invoker popovertarget=menulist>Menubar item A</button>
|
|
<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 menulist-with-menubar-anchor" popover id=menulist>
|
|
<div class="menuitem">Menulist item A</div>
|
|
<div class="menuitem">Menulist item B</div>
|
|
<hr>
|
|
<div class="menuitem">Menulist item C</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('menulist').showPopover(
|
|
{source: document.getElementById('invoker')});
|
|
</script>
|