tor-browser

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

popover-anchor-nested-display-ref.html (965B)

      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 
      7 <button id=main-menu-button>Show menu</button>
      8 
      9 <div id=main-menu>
     10  <div>Foo</div>
     11  <button id=nested-menu-button>
     12    Show nested menu
     13  </button>
     14  <div>Bar</div>
     15 </div>
     16 
     17 <div id=nested-menu>
     18  Baz
     19 </div>
     20 
     21 <style>
     22 #main-menu-button {
     23  position: absolute;
     24  top: 200px;
     25  left: 100px;
     26  width: 100px;
     27 }
     28 
     29 #main-menu {
     30  position: absolute;
     31  top: 200px;;
     32  left: 200px;
     33  width: 150px;
     34  line-height: 20px;
     35 }
     36 
     37 #nested-menu-button {
     38  width: 100%;
     39 }
     40 
     41 #nested-menu {
     42  position: absolute;
     43  top: 220px;
     44  left: 350px;
     45 }
     46 
     47 [popover] {
     48  border: 0;
     49  margin: 0;
     50  padding: 0;
     51 }
     52 </style>
     53 
     54 <script>
     55 document.getElementById('main-menu-button').click();
     56 document.getElementById('nested-menu-button').click();
     57 </script>