tor-browser

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

position-area-anchor-002.html (1772B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>anchor() resolution in position-area</title>
      4 <link rel="help" href="https://www.w3.org/TR/css-anchor-position/#position-area">
      5 <link rel="match" href="position-area-anchor-002-ref.html">
      6 <link rel="author" name="David Shin" href="mailto:dshin@mozilla.com">
      7 <style>
      8 .abs-cb {
      9  width: 180px;
     10  height: 180px;
     11  position: relative;
     12  border: 5px solid;
     13 }
     14 
     15 .scroller {
     16  width: 100%;
     17  height: 100%;
     18  overflow: scroll;
     19 }
     20 
     21 .anchor {
     22  width: 60px;
     23  height: 60px;
     24  margin-left: 60px;
     25  anchor-name: --a;
     26  background: pink;
     27 }
     28 
     29 .filler {
     30  width: 1px;
     31  height: 180px;
     32 }
     33 
     34 .positioned {
     35  width: 30px;
     36  height: 30px;
     37  background: purple;
     38  position: absolute;
     39  position-anchor: --a;
     40 }
     41 
     42 .tl {
     43  position-area: top left;
     44  right: anchor(left);
     45  bottom: anchor(top);
     46 }
     47 
     48 .tr {
     49  position-area: top right;
     50  left: anchor(right);
     51  bottom: anchor(top);
     52 }
     53 
     54 .bl {
     55  position-area: bottom left;
     56  right: anchor(left);
     57  top: anchor(bottom);
     58 }
     59 
     60 .br {
     61  position-area: bottom right;
     62  left: anchor(right);
     63  top: anchor(bottom);
     64 }
     65 
     66 .dn {
     67  display: none;
     68 }
     69 
     70 </style>
     71 <div class=abs-cb>
     72  <div id=s class=scroller>
     73    <div class=filler></div>
     74    <div class=anchor></div>
     75    <div class=filler></div>
     76    <div class="positioned tl dn"></div>
     77    <div class="positioned tr dn"></div>
     78    <div class="positioned bl dn"></div>
     79    <div class="positioned br dn"></div>
     80  </div>
     81 </div>
     82 <script>
     83 function raf() {
     84  return new Promise(resolve => requestAnimationFrame(resolve));
     85 }
     86 
     87 async function runTest() {
     88  s.scrollTop = 120;
     89  await raf();
     90  await raf();
     91 
     92  for(const e of s.querySelectorAll('.positioned')) {
     93    e.classList.remove('dn');
     94  }
     95  document.documentElement.classList.remove('reftest-wait');
     96 }
     97 runTest();
     98 </script>
     99 </html>