tor-browser

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

anchor-scroll-chained-fallback.html (1101B)

      1 <!DOCTYPE html>
      2 <title>Tests scroll adjustments of element anchored to another anchored element with fallback</title>
      3 <link rel="author" href="mailto:wangxianzhu@chromium.org">
      4 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
      5 <link rel="match" href="reference/anchor-scroll-chained-fallback-ref.html">
      6 <style>
      7 body {
      8  margin: 0;
      9 }
     10 
     11 div {
     12  width: 100px;
     13  height: 100px;
     14 }
     15 
     16 #scroller {
     17  overflow: scroll;
     18  width: 300px;
     19  height: 300px;
     20 }
     21 
     22 #anchor {
     23  anchor-name: --a1;
     24  background: orange;
     25  margin: 250px 0;
     26 }
     27 
     28 #anchored1 {
     29  position: absolute;
     30  position-anchor: --a1;
     31  background: green;
     32  position-try-fallbacks: --fallback;
     33  anchor-name: --a2;
     34  left: anchor(left);
     35  bottom: anchor(top);
     36 }
     37 
     38 #anchored2 {
     39  position: absolute;
     40  position-anchor: --a2;
     41  left: anchor(left);
     42  top: anchor(bottom);
     43  background: lime;
     44 }
     45 
     46 @position-try --fallback {
     47  left: anchor(right);
     48  top: anchor(top);
     49  bottom: auto;
     50 }
     51 
     52 </style>
     53 
     54 <div id="scroller">
     55  <div id="anchor"></div>
     56 </div>
     57 <div id="anchored1"></div>
     58 <div id="anchored2"></div>
     59 
     60 <script>
     61 scroller.scrollTop = 200;
     62 </script>