tor-browser

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

position-try-container-query.html (2539B)

      1 <!DOCTYPE html>
      2 <title>@position-try with container query responding to fallback widths</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <style>
      7  #relative {
      8    background: maroon;
      9    position: relative;
     10    width: 195px;
     11    height: 200px;
     12  }
     13  #target1 {
     14    container-type: inline-size;
     15    container-name: target1;
     16    position-try-fallbacks: --fallback1;
     17    background: green;
     18    position: absolute;
     19    top: 0px;
     20    left: 999999px; /* force fallback */
     21    width: 100px;
     22    height: 100px;
     23  }
     24  @position-try --fallback1 {
     25    top: 100px;
     26    left: 0px;
     27    width: 150px;
     28  }
     29  @container (width > 100px) {
     30    #inner1 {
     31      background-color: lime;
     32      width: 100px;
     33      height: 100px;
     34    }
     35  }
     36 
     37  #target2 {
     38    container-type: inline-size;
     39    container-name: target2;
     40    position-try-fallbacks: --fallback2, --fallback3;
     41    background: orange;
     42    position: absolute;
     43    top: 0px;
     44    left: 999999px; /* force fallback */
     45    width: 100px;
     46  }
     47  @position-try --fallback2 {
     48    top: 100px;
     49    left: 0px;
     50    width: 150px;
     51  }
     52  @position-try --fallback3 {
     53    top: 0px;
     54    left: 0px;
     55    width: 150px;
     56  }
     57  @container target2 (width = 150px) {
     58    #inner2 {
     59      background-color: yellow;
     60      width: 100px;
     61      height: 150px;
     62    }
     63  }
     64 </style>
     65 <div id="relative">
     66  <div id="target1">
     67    <div id="inner1"></div>
     68  </div>
     69  <div id="target2">
     70    <div id="inner2"></div>
     71  </div>
     72 </div>
     73 <script>
     74  test(() => {
     75    assert_equals(getComputedStyle(inner1).backgroundColor, "rgb(0, 255, 0)");
     76    assert_equals(getComputedStyle(inner1).width, "100px");
     77    assert_equals(getComputedStyle(inner1).height, "100px");
     78    assert_equals(getComputedStyle(target1).top, "100px");
     79    assert_equals(getComputedStyle(target1).left, "0px");
     80    assert_equals(getComputedStyle(target1).width, "150px");
     81  }, "Size container query responds to fallback width");
     82 
     83  test(() => {
     84    assert_equals(getComputedStyle(inner2).backgroundColor, "rgb(255, 255, 0)");
     85    assert_equals(getComputedStyle(inner2).width, "100px");
     86    assert_equals(getComputedStyle(inner2).height, "150px");
     87    assert_equals(getComputedStyle(target2).top, "0px");
     88    assert_equals(getComputedStyle(target2).left, "0px");
     89    assert_equals(getComputedStyle(target2).width, "150px");
     90  }, "Size container query responds to fallback width and applies height to not fit the first fallback");
     91 </script>