tor-browser

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

popover-anchor-change-display.tentative.html (1286B)

      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-change-display-ref.html">
      7 <script src="resources/popover-utils.js"></script>
      8 
      9 <p>There should be a green box attached to the right side of each orange box.</p>
     10 
     11 <div class=ex>
     12  <div class=anchor id=anchor1></div>
     13  <div id=popover1 popover=manual defaultopen></div>
     14 </div>
     15 
     16 <div class=ex>
     17  <div class=anchor id=will-be-anchor2></div>
     18  <div id=popover2 popover=manual anchor=anchor2 defaultopen></div>
     19 </div>
     20 
     21 <script>
     22 showDefaultopenPopoversOnLoad();
     23 
     24 function runTest() {
     25  document.body.offsetLeft; // Force layout
     26 
     27  document.getElementById('popover1').setAttribute('anchor', 'anchor1');
     28  document.getElementById('will-be-anchor2').setAttribute('id', 'anchor2');
     29 }
     30 window.addEventListener('load', runTest);
     31 </script>
     32 
     33 <style>
     34  .ex {
     35    margin: 25px;
     36  }
     37  .ex div {
     38    width: 100px;
     39    height: 100px;
     40  }
     41  .anchor {
     42    background: orange;
     43  }
     44  [popover] {
     45    inset: auto;
     46    background: lime;
     47    padding:0;
     48    border:0;
     49    left: anchor(right);
     50    top: anchor(top);
     51  }
     52 </style>