tor-browser

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

anchor-in-popover.html (2298B)

      1 <!DOCTYPE html>
      2 
      3 <title>Tests that anchors in a popover are discoverable</title>
      4 
      5 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#determining">
      6 <link rel="author" title="Kiet Ho" href="mailto:kiet.ho@apple.com">
      7 
      8 <script src="/resources/testharness.js"></script>
      9 <script src="/resources/testharnessreport.js"></script>
     10 <script src="/resources/check-layout-th.js"></script>
     11 <script src="support/test-common.js"></script>
     12 
     13 <style>
     14  body {
     15    margin: 0;
     16  }
     17 
     18  #containing-block {
     19    position: relative;
     20    width: 100px;
     21    height: 100px;
     22 
     23    border: 1px black solid;
     24  }
     25 
     26  #anchor-1 {
     27    width: 50px;
     28    height: 50px;
     29 
     30    position: absolute;
     31    top: 25px;
     32    left: 25px;
     33 
     34    background: green;
     35 
     36    anchor-name: --anchor-1;
     37  }
     38 
     39  #popover-1 {
     40    margin: 0;
     41    border: 1px black solid;
     42    padding: 0;
     43 
     44    width: 100px;
     45    height: 100px;
     46 
     47    position: absolute;
     48    position-anchor: --anchor-1;
     49    position-area: bottom right;
     50  }
     51 
     52  #anchor-2 {
     53    width: 50px;
     54    height: 50px;
     55 
     56    position: absolute;
     57    top: 25px;
     58    left: 25px;
     59 
     60    background: cyan;
     61 
     62    anchor-name: --anchor-2;
     63  }
     64 
     65  #popover-2 {
     66    margin: 0;
     67    border: 1px black solid;
     68    padding: 0;
     69 
     70    width: 100px;
     71    height: 100px;
     72 
     73    position: absolute;
     74    position-anchor: --anchor-2;
     75    position-area: bottom right;
     76  }
     77 </style>
     78 
     79 <body>
     80  <div id="containing-block">
     81    <div id="anchor-1"></div>
     82  </div>
     83 
     84  <!--
     85    1px border of #containing-block
     86  + 25px gap between #containing-block and #anchor-1
     87  + 50px width of #anchor-1
     88  = 76px
     89  -->
     90  <div class="target" id="popover-1" popover data-offset-x="76" data-offset-y="76">
     91    <div id="anchor-2">
     92      <!--
     93        76px left offset of #anchor-1
     94      + 1px border of #popover-2
     95      + 25px gap between #popover-2 and #anchor-2
     96      + 50px width of #anchor-2
     97      = 152px
     98      -->
     99 
    100      <!-- #popover-2 has to be here to trigger a bug in Safari -->
    101      <div class="target" id="popover-2" popover data-offset-x="152" data-offset-y="152"></div>
    102    </div>
    103  </div>
    104 
    105 
    106  <script>
    107    const popover1 = document.getElementById("popover-1");
    108    const popover2 = document.getElementById("popover-2");
    109 
    110    popover1.showPopover();
    111    popover2.showPopover();
    112 
    113    checkLayoutForAnchorPos('.target');
    114  </script>
    115 </body>