tor-browser

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

position-area-in-grid.html (3662B)

      1 <!DOCTYPE html>
      2 <title>CSS Anchor Positioning: position-area positioning inside grid</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <!--
      7    Grid:
      8 
      9          100      100      100      100
     10      +--------+--------+--------+--------+
     11      |        |        |        |        |
     12  100 |        |        |        |        |
     13      |        |        |        |        |
     14      +--------+--------+--------+--------+
     15      |        |        |XXXXXXXX|XXXXXXXX|
     16  100 |        |        |XXXXXXXX|XXXXXXXX|
     17      |        |        |XXXXXXXX|XXXXXXXX|
     18      +--------+--------+--------+--------+
     19      |        |        |XXXXXXXX|XXXXXXXX|
     20  100 |        |        |XXXXXXXX|XXXXXXXX|
     21      |        |        |XXXXXXXX|XXXXXXXX|
     22      +--------+--------+--------+--------+
     23      |        |        |        |        |
     24  100 |        |        |        |        |
     25      |        |        |        |        |
     26      +--------+--------+--------+--------+
     27 
     28 
     29    Inset regions:
     30 
     31          100        150           150
     32      +--------+-------------+------------+
     33      |        |             |            |
     34      |        |             |            |
     35  150 |        |             |            |
     36      |        |             |            |
     37      |        |             |            |
     38      +--------+-------------+------------+
     39      |        |             |            |
     40   75 |        |             |            |
     41      |        |             |            |
     42      +--------+-------------+------------+
     43      |        |             |            |
     44      |        |             |            |
     45  175 |        |             |            |
     46      |        |             |            |
     47      |        |             |            |
     48      +--------+-------------+------------+
     49 
     50  -->
     51 
     52 <style>
     53  #container {
     54    display: grid;
     55    grid: 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr;
     56    position: relative;
     57    width: 400px;
     58    height: 400px;
     59    outline: 1px solid;
     60  }
     61 
     62  #anchor {
     63    position: absolute;
     64    left: 100px;
     65    top: 150px;
     66    width: 150px;
     67    height: 75px;
     68    anchor-name: --anchor;
     69    background: blue;
     70  }
     71 
     72  #anchored {
     73    grid-row-start: 2;
     74    grid-row-end: span 2;
     75    grid-column-start: 3;
     76    grid-column-end: auto;
     77    position: absolute;
     78    align-self: stretch;
     79    justify-self: stretch;
     80    position-anchor: --anchor;
     81    border: solid orange;
     82  }
     83 </style>
     84 
     85 <div id="container">
     86  <div id="anchor"></div>
     87  <div id="anchored"></div>
     88 </div>
     89 <script>
     90  function test_position_area(position_area, insets, expected_offsets) {
     91    anchored.style.positionArea = position_area;
     92    for (const [prop, value] of Object.entries(insets)) {
     93      anchored.style[prop] = value;
     94    }
     95 
     96    test(() => {
     97      assert_equals(anchored.offsetLeft, expected_offsets.left, "Check expected offsetLeft");
     98      assert_equals(anchored.offsetTop, expected_offsets.top, "Check expected offsetTop");
     99      assert_equals(anchored.offsetWidth, expected_offsets.width, "Check expected offsetWidth");
    100      assert_equals(anchored.offsetHeight, expected_offsets.height, "Check expected offsetHeight");
    101    }, "Offsets for position-area: " + position_area + " and insets: " + JSON.stringify(insets));
    102  }
    103 
    104  test_position_area("span-bottom span-left", {left:"auto", right:"auto", top:"auto", bottom:"auto"},
    105                  {left:100, top:150, width:150, height:150});
    106 
    107  test_position_area("span-bottom span-left", {left:"10px", right:"10px", top:"10px", bottom:"10px"},
    108                  {left:110, top:160, width:130, height:130});
    109 </script>