tor-browser

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

position-area-anchor-getComputedStyle.html (2031B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>Tests that getComputedStyle() resolves anchor() functions w.r.t. position-area containing block</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-area">
      5 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-pos">
      6 <link rel="author" name="David Shin" href="mailto:dshin@mozilla.com">
      7 <script src="/resources/testharness.js"></script>
      8 <script src="/resources/testharnessreport.js"></script>
      9 <style>
     10 .abs-cb {
     11  width: 200px;
     12  height: 200px;
     13  border: 5px solid;
     14  position: relative;
     15 }
     16 
     17 .anchor {
     18  anchor-name: --a;
     19  width: 50px;
     20  height: 50px;
     21  margin-left: 75px;
     22  background: pink;
     23 }
     24 
     25 .positioned {
     26  position: absolute;
     27  position-anchor: --a;
     28  width: 25px;
     29  height: 25px;
     30  background: purple;
     31 }
     32 
     33 .top {
     34  bottom: anchor(top);
     35 }
     36 
     37 .bottom {
     38  top: anchor(bottom);
     39 }
     40 
     41 .left {
     42  right: anchor(left);
     43 }
     44 
     45 .right {
     46  left: anchor(right);
     47 }
     48 
     49 .bottom.right {
     50  position-area: bottom right;
     51 }
     52 
     53 .bottom.left {
     54  position-area: bottom left;
     55 }
     56 
     57 .top.right {
     58  position-area: top right;
     59 }
     60 
     61 .top.left {
     62  position-area: top left;
     63 }
     64 </style>
     65 <div id=cb class=abs-cb>
     66  <div style="height: 75px;"></div>
     67  <div class=anchor></div>
     68  <div id="top-right" class="positioned top right"></div>
     69  <div id="bottom-right" class="positioned bottom right"></div>
     70  <div id="bottom-left" class="positioned bottom left"></div>
     71  <div id="top-left" class="positioned top left"></div>
     72 </div>
     73 <script>
     74 const opposite = {
     75  'top': 'bottom',
     76  'bottom': 'top',
     77  'left': 'right',
     78  'right': 'left',
     79 };
     80 function test_positioned(y, x) {
     81  test(() => {
     82    const d = document.getElementById(`${y}-${x}`);
     83    const s = getComputedStyle(d);
     84    assert_equals(s.getPropertyValue(opposite[y]), '0px');
     85    assert_equals(s.getPropertyValue(opposite[x]), '0px');
     86  }, `Offsets for ${y} ${x} positioned`);
     87 }
     88 
     89 test_positioned('top', 'right');
     90 test_positioned('bottom', 'right');
     91 test_positioned('bottom', 'left');
     92 test_positioned('top', 'left');
     93 </script>