tor-browser

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

getComputedStyle-insets-relpos-inline.html (2141B)

      1 <!doctype html>
      2 <title>getComputedStyle OOF inset resolved against relpos inline container</title>
      3 <link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value">
      4 <link rel="author" href="mailto:xiaochengh@chromium.org">
      5 <link rel="stylesheet" href="/fonts/ahem.css">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 
      9 <style>
     10 .ifc {
     11  position: relative;
     12  width: max-content;
     13  font: 20px/1 Ahem;
     14  margin-bottom: 2em;
     15 }
     16 
     17 .relpos {
     18  position: relative;
     19  background: yellow;
     20  color: yellow;
     21 }
     22 
     23 .target {
     24  position: absolute;
     25  background: green;
     26  width: 5em;
     27  height: 1em;
     28  top: 1em;
     29 }
     30 
     31 .fix-start {
     32  inset-inline-start: 0;
     33 }
     34 
     35 .fix-end {
     36  inset-inline-end: 0;
     37 }
     38 </style>
     39 
     40 <div class="ifc">
     41  Lorem
     42  <span class="relpos">
     43    ipsum dolor
     44    <div class="target fix-start" id="target1"></div>
     45    <div class="target fix-end" id="target2"></div>
     46  </span>
     47  sit amet
     48 </div>
     49 
     50 <div class="ifc">
     51  Lorem
     52  <span class="relpos" dir="rtl">
     53    ipsum dolor
     54    <div class="target fix-start" id="target3" dir="ltr"></div>
     55    <div class="target fix-end" id="target4" dir="ltr"></div>
     56  </span>
     57  sit amet
     58 </div>
     59 <script>
     60 setup({ explicit_done: true });
     61 
     62 document.fonts.ready.then(() => {
     63  test(() => {
     64    let style = getComputedStyle(target1);
     65    assert_equals(style.left, '0px');
     66    assert_equals(style.right, '140px');
     67  }, 'OOF with left fixed right auto in relpos inline container');
     68 
     69  test(() => {
     70    let style = getComputedStyle(target2);
     71    assert_equals(style.left, '140px');
     72    assert_equals(style.right, '0px');
     73  }, 'OOF with left auto right fixed in relpos inline container');
     74 
     75  test(() => {
     76    let style = getComputedStyle(target3);
     77    assert_equals(style.left, '0px');
     78    assert_equals(style.right, '140px');
     79  }, 'OOF with left fixed right auto in relpos inline container with mixed directions');
     80 
     81  test(() => {
     82    let style = getComputedStyle(target4);
     83    assert_equals(style.left, '140px');
     84    assert_equals(style.right, '0px');
     85  }, 'OOF with left auto right fixed in relpos inline container with mixed directions');
     86 
     87  done();
     88 });
     89 </script>