tor-browser

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

position-anchor-001.html (1146B)

      1 <!DOCTYPE html>
      2 <title>Tests the 'position-anchor' property</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#position-anchor">
      4 <link rel="author" href="mailto:xiaochengh@chromium.org">
      5 <link rel="match" href="position-anchor-ref.html">
      6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
      7 <style>
      8 .anchor {
      9  width: 100px;
     10  height: 100px;
     11  background: orange;
     12  font: 20px/1 Ahem;
     13 }
     14 
     15 .target {
     16  position: fixed;
     17  background: lime;
     18  position-try-fallbacks: --pf;
     19  left: 999999px; /* force fallback */
     20  font: 20px/1 Ahem;
     21 }
     22 
     23 @position-try --pf {
     24  top: anchor(bottom, 0px);
     25  left: anchor(left, 0px);
     26  width: anchor-size(width, 0px);
     27  height: anchor-size(height, 0px);
     28 }
     29 
     30 body {
     31  margin: 0;
     32 }
     33 
     34 #anchor1 {
     35  anchor-name: --a1;
     36  margin-left: 100px;
     37 }
     38 
     39 #target1 {
     40  position-anchor: --a1;
     41 }
     42 
     43 #anchor2 {
     44  anchor-name: --a2;
     45  margin-left: 300px;
     46  margin-top: 100px;
     47 }
     48 
     49 #target2 {
     50  position-anchor: --a2;
     51 }
     52 </style>
     53 
     54 <div id="anchor1" class="anchor">anchor1</div>
     55 <div id="anchor2" class="anchor">anchor2</div>
     56 
     57 <div id="target1" class="target">target1</div>
     58 <div id="target2" class="target">target2</div>