tor-browser

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

popover-anchor-scroll-display.tentative.html (2034B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3 <meta charset="utf-8">
      4 <link rel=author href="mailto:xiaochengh@chromium.org">
      5 <link rel=help href="https://open-ui.org/components/popover.research.explainer">
      6 <link rel=help href="https://html.spec.whatwg.org/multipage/popover.html">
      7 <link rel=match href="popover-anchor-scroll-display-ref.html">
      8 
      9 <div class=spacer style="height: 200px"></div>
     10 
     11 <p>There should be a green box attached to the right side of each orange box.</p>
     12 
     13 <!-- Example using the `anchor` implicit reference element -->
     14 <div class=ex>
     15  <div class=anchor id=anchor1></div>
     16  <div id=popover1 popover=manual anchor=anchor1></div>
     17 </div>
     18 
     19 <!-- Example using a default anchor that is not the implicit anchor -->
     20 <div class=ex>
     21  <div class=anchor id=anchor2></div>
     22  <div id=popover2 popover=manual anchor=fake-anchor></div>
     23 </div>
     24 
     25 <!-- A position:fixed fake anchor. Any popover anchored to it won't move when
     26     the document is scrolled. -->
     27 <div id=fake-anchor></div>
     28 
     29 <div class=spacer style="height: 200vh"></div>
     30 
     31 <style>
     32  .ex {
     33    margin: 25px;
     34  }
     35  .ex div {
     36    width: 100px;
     37    height: 100px;
     38  }
     39  .anchor {
     40    background: orange;
     41  }
     42  [popover] {
     43    inset: auto;
     44    background: lime;
     45    padding:0;
     46    border:0;
     47  }
     48  #popover1 {
     49    left: anchor(right);
     50    top: anchor(top);
     51  }
     52  #fake-anchor {
     53    position: fixed;
     54    anchor-name: --fake-anchor;
     55  }
     56  #anchor2 {
     57    anchor-name: --anchor2;
     58  }
     59  #popover2 {
     60    position-anchor: --anchor2;
     61    left: anchor(right);
     62    top: anchor(top);
     63  }
     64 </style>
     65 
     66 <script>
     67 function raf() {
     68  return new Promise(resolve => requestAnimationFrame(resolve));
     69 }
     70 
     71 async function runTest() {
     72  document.querySelectorAll('[popover]').forEach(
     73      popover => popover.showPopover());
     74 
     75  // Render a frame at the intial scroll position.
     76  await raf();
     77  await raf();
     78 
     79  document.documentElement.scrollTop = 100;
     80  document.documentElement.classList.remove('reftest-wait');
     81 
     82  // The popover should still be attached to the anchor.
     83 }
     84 runTest();
     85 </script>
     86 
     87 </html>