tor-browser

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

anchor-position-top-layer-005.html (928B)

      1 <!DOCTYPE html>
      2 <title>Non-top-layer element cannot anchor to top-layer element</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#target-anchor-element">
      4 <link rel="author" href="mailto:xiaochengh@chromium.org">
      5 <link rel="match" href="anchor-position-top-layer-ref.html">
      6 
      7 <style>
      8 #anchor {
      9  position: absolute;
     10  top: 300px;
     11  left: 200px;
     12  width: 100px;
     13  height: 100px;
     14  background: orange;
     15  anchor-name: --a;
     16 }
     17 
     18 #target {
     19  position: fixed;
     20  top: anchor(bottom, 200px);
     21  left: anchor(left, 300px);
     22  width: 100px;
     23  height: 100px;
     24  background: lime;
     25  position-anchor: --a;
     26 }
     27 
     28 body {
     29  margin: 0;
     30  height: 300vh;
     31 }
     32 
     33 dialog {
     34  margin: 0;
     35  border: 0;
     36  padding: 0;
     37  inset: auto;
     38  outline: none;
     39 }
     40 
     41 dialog::backdrop {
     42  background: transparent;
     43 }
     44 </style>
     45 
     46 <dialog id="anchor"></dialog>
     47 <div id="target"></div>
     48 
     49 <script>
     50 anchor.showModal();
     51 document.scrollingElement.scrollTop = 100;
     52 </script>