tor-browser

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

anchor-getComputedStyle-001.html (3894B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>Tests that getComputedStyle() resolves anchor functions</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1">
      5 <link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
      6 <link rel="author" href="mailto:xiaochengh@chromium.org">
      7 <script src="/resources/testharness.js"></script>
      8 <script src="/resources/testharnessreport.js"></script>
      9 <style>
     10 .vrl { writing-mode: vertical-rl; }
     11 .htb { writing-mode: horizontal-tb; }
     12 .ltr { direction: ltr; }
     13 .rtl { direction: rtl; }
     14 
     15 .cb {
     16  transform: scale(1);
     17  width: 200px;
     18  height: 150px;
     19  outline: 1px dashed black;
     20 }
     21 
     22 .padding-10 {
     23  box-sizing: border-box;
     24  padding: 10px;
     25 }
     26 
     27 .anchor {
     28  width: 40px;
     29  height: 30px;
     30  background: orange;
     31  anchor-name: --a;
     32  position: relative;
     33  top: 50px;
     34  left: 60px;
     35 }
     36 
     37 .anchored-topleft {
     38  position: absolute;
     39  width: anchor-size(--a width);
     40  height: anchor-size(--a height);
     41  bottom: anchor(--a top);
     42  right: anchor(--a left);
     43  background: lime;
     44 }
     45 
     46 .anchored-bottomright {
     47  position: absolute;
     48  width: anchor-size(--a width);
     49  height: anchor-size(--a height);
     50  top: anchor(--a bottom);
     51  left: anchor(--a right);
     52  background: lime;
     53 }
     54 </style>
     55 
     56 <div class=cb id=test1>
     57  <div class=anchor></div>
     58  <div class=anchored-topleft></div>
     59  <div class=anchored-bottomright></div>
     60 </div>
     61 <script>
     62 test(() => {
     63  const container = document.getElementById('test1');
     64 
     65  const topleft = container.querySelector('.anchored-topleft');
     66  assert_equals(getComputedStyle(topleft).bottom, '100px');
     67  assert_equals(getComputedStyle(topleft).right, '140px');
     68  assert_equals(getComputedStyle(topleft).width, '40px');
     69  assert_equals(getComputedStyle(topleft).height, '30px');
     70 
     71  const bottomright = container.querySelector('.anchored-bottomright');
     72  assert_equals(getComputedStyle(bottomright).top, '80px');
     73  assert_equals(getComputedStyle(bottomright).left, '100px');
     74  assert_equals(getComputedStyle(bottomright).width, '40px');
     75  assert_equals(getComputedStyle(bottomright).height, '30px');
     76 }, 'Basic case');
     77 </script>
     78 
     79 <div class="cb vrl" id=test2>
     80  <div class=anchor></div>
     81  <div class="anchored-topleft htb ltr"></div>
     82  <div class="anchored-bottomright htb rtl"></div>
     83 </div>
     84 <script>
     85 test(() => {
     86  const container = document.getElementById('test2');
     87 
     88  const topleft = container.querySelector('.anchored-topleft');
     89  assert_equals(getComputedStyle(topleft).bottom, '100px');
     90  assert_equals(getComputedStyle(topleft).right, '-20px');
     91  assert_equals(getComputedStyle(topleft).width, '40px');
     92  assert_equals(getComputedStyle(topleft).height, '30px');
     93 
     94  const bottomright = container.querySelector('.anchored-bottomright');
     95  assert_equals(getComputedStyle(bottomright).top, '80px');
     96  assert_equals(getComputedStyle(bottomright).left, '260px');
     97  assert_equals(getComputedStyle(bottomright).width, '40px');
     98  assert_equals(getComputedStyle(bottomright).height, '30px');
     99 }, 'Mixed writing modes and directions');
    100 </script>
    101 
    102 <div class="cb padding-10" id=test3>
    103  <div class=anchor></div>
    104  <div class=anchored-topleft></div>
    105  <div class=anchored-bottomright></div>
    106 </div>
    107 <script>
    108 test(() => {
    109  const container = document.getElementById('test3');
    110 
    111  const topleft = container.querySelector('.anchored-topleft');
    112  assert_equals(getComputedStyle(topleft).bottom, '90px');
    113  assert_equals(getComputedStyle(topleft).right, '130px');
    114  assert_equals(getComputedStyle(topleft).width, '40px');
    115  assert_equals(getComputedStyle(topleft).height, '30px');
    116 
    117  const bottomright = container.querySelector('.anchored-bottomright');
    118  assert_equals(getComputedStyle(bottomright).top, '90px');
    119  assert_equals(getComputedStyle(bottomright).left, '110px');
    120  assert_equals(getComputedStyle(bottomright).width, '40px');
    121  assert_equals(getComputedStyle(bottomright).height, '30px');
    122 }, 'With containing block padding');
    123 </script>