tor-browser

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

position-area-anchor-001.html (2285B)

      1 <!DOCTYPE html>
      2 <title>anchor() resolution in position-area</title>
      3 
      4 <link rel="help" href="https://www.w3.org/TR/css-anchor-position/#position-area">
      5 <link rel="match" href="position-area-anchor-001-ref.html">
      6 <link rel="author" name="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
      7 
      8 <style>
      9  .container {
     10    width: 100px; height: 100px;
     11    border: solid gray;
     12    margin: 6px;
     13    position: relative;
     14    anchor-scope: all;
     15    float: left;
     16  }
     17 
     18  .block {
     19    background: silver;
     20    height: 40px;
     21    width: 40px;
     22    margin: 10px;
     23  }
     24 
     25  .anchor {
     26    position: absolute;
     27    border: solid orange;
     28    margin: 25px;
     29  }
     30  .controls .anchor,
     31  .pull-up .anchor {
     32    width: 5px;
     33    height: 5px;
     34  }
     35  .push-down .anchor {
     36    width: 40px;
     37    height: 40px;
     38  }
     39 
     40  .anchored {
     41    border: solid blue;
     42    position: absolute;
     43    position-area: span-bottom right;
     44    inset: 0;
     45    place-self: stretch;
     46  }
     47 
     48  body > div { clear: both; }
     49 </style>
     50 
     51 <div class=pull-up>
     52  <div class=container>
     53    <div class=anchor style="anchor-name: --foo"></div>
     54    <div class=block></div>
     55    <div class=anchored style="top: anchor(bottom); position-anchor: --foo"></div>
     56  </div>
     57 
     58  <div class=container>
     59    <div class=anchor style="anchor-name: --foo"></div>
     60    <div class=block style="anchor-name: --bar"></div>
     61    <div class=anchored style="top: anchor(--foo bottom); position-anchor: --bar"></div>
     62  </div>
     63 </div>
     64 
     65 <div class=push-down>
     66  <div class=container>
     67    <div class=anchor style="anchor-name: --foo"></div>
     68    <div class=block></div>
     69    <div class=anchored style="top: anchor(bottom); position-anchor: --foo"></div>
     70  </div>
     71 
     72  <div class=container>
     73    <div class=anchor style="anchor-name: --foo"></div>
     74    <div class=block style="anchor-name: --bar"></div>
     75    <div class=anchored style="top: anchor(--foo bottom); position-anchor: --bar"></div>
     76  </div>
     77 </div>
     78 
     79 <div class=controls>
     80  <div class=container>
     81    <div class=anchor style="anchor-name: --foo"></div>
     82    <div class=block></div>
     83    <div class=anchored style="top: anchor(--foo bottom)"></div>
     84  </div>
     85  <div class=container>
     86    <div class=anchor style="anchor-name: --foo"></div>
     87    <div class=block></div>
     88    <div class=anchored style="position-anchor: --foo"></div>
     89  </div>
     90 </div>