tor-browser

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

anchor-getComputedStyle-003.html (1912B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>Tests that getComputedStyle() returns used position fallback style</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 
     10 <style>
     11 body {
     12  margin: 0;
     13 }
     14 
     15 .cb {
     16  position: relative;
     17  width: 400px;
     18  height: 400px;
     19  background: lightgray;
     20 }
     21 
     22 .anchor {
     23  position: absolute;
     24  width: 100px;
     25  height: 100px;
     26  background: orange;
     27 }
     28 
     29 .target {
     30  position: absolute;
     31  left: 999999px;
     32  width: 100px;
     33  height: 100px;
     34  background: lime;
     35  position-try-fallbacks: --pf, --pf2;
     36 }
     37 
     38 @position-try --pf {
     39  top: anchor(top);
     40  left: anchor(right);
     41 }
     42 @position-try --pf2 {
     43  top: anchor(top);
     44  right: anchor(left);
     45  left: auto;
     46 }
     47 
     48 #anchor1 {
     49  top: 0;
     50  left: 0;
     51  anchor-name: --a1;
     52 }
     53 
     54 #target1 {
     55  position-anchor: --a1;
     56 }
     57 
     58 #anchor2 {
     59  top: 200px;
     60  right: 0;
     61  anchor-name: --a2;
     62 }
     63 
     64 #target2 {
     65  position-anchor: --a2;
     66 }
     67 </style>
     68 
     69 <div class="cb">
     70  <div id="anchor1" class="anchor">anchor1</div>
     71  <div id="anchor2" class="anchor">anchor2</div>
     72 
     73  <div id="target1" class="target">target1</div>
     74  <div id="target2" class="target">target2</div>
     75 </div>
     76 
     77 <script>
     78 test(() => {
     79  const style1 = getComputedStyle(target1);
     80  assert_equals(style1.top, '0px');
     81  assert_equals(style1.left, '100px');
     82  assert_equals(style1.right, '200px');
     83 }, 'getComputedStyle() should return and absolutize the first @try rule style for target1');
     84 
     85 test(() => {
     86  const style2 = getComputedStyle(target2);
     87  assert_equals(style2.top, '200px');
     88  assert_equals(style2.left, '200px');
     89  assert_equals(style2.right, '100px');
     90 }, 'getComputedStyle() should return and absolutize the second @try rule style for target2');
     91 </script>