tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

popover-anchor-nested-display.tentative.html (1127B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <link rel=author href="mailto:xiaochengh@chromium.org">
      4 <link rel=help href="https://open-ui.org/components/popover.research.explainer">
      5 <link rel=help href="https://html.spec.whatwg.org/multipage/popover.html">
      6 <link rel=match href="popover-anchor-nested-display-ref.html">
      7 
      8 <button id=main-menu-button popovertarget=main-menu>Show menu</button>
      9 
     10 <div id=main-menu popover anchor=main-menu-button>
     11  <div>Foo</div>
     12  <button id=nested-menu-button popovertarget=nested-menu>
     13    Show nested menu
     14  </button>
     15  <div>Bar</div>
     16 </div>
     17 
     18 <div id=nested-menu popover anchor=nested-menu-button>
     19  Baz
     20 </div>
     21 
     22 <style>
     23 #main-menu-button {
     24  position: absolute;
     25  top: 200px;
     26  left: 100px;
     27  width: 100px;
     28 }
     29 
     30 #main-menu {
     31  top: anchor(top);
     32  left: anchor(right);
     33  width: 150px;
     34  line-height: 20px;
     35 }
     36 
     37 #nested-menu-button {
     38  width: 100%;
     39 }
     40 
     41 #nested-menu {
     42  top: anchor(top);
     43  left: anchor(right);
     44 }
     45 
     46 [popover] {
     47  border: 0;
     48  margin: 0;
     49  padding: 0;
     50 }
     51 </style>
     52 
     53 <script>
     54 document.getElementById('main-menu-button').click();
     55 document.getElementById('nested-menu-button').click();
     56 </script>