tor-browser

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

anchor.html (2793B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 
      4 <head>
      5  <script src="/resources/testharness.js"></script>
      6  <script src="/resources/testharnessreport.js"></script>
      7  <script src="/resources/testdriver.js"></script>
      8  <script src="/resources/testdriver-vendor.js"></script>
      9  <script src="/resources/testdriver-actions.js"></script>
     10  <script src="/wai-aria/scripts/aria-utils.js"></script>
     11  <style>
     12    body {
     13      margin: 0;
     14    }
     15 
     16    [popover] {
     17      position: absolute;
     18      left: anchor(right);
     19      top: anchor(top);
     20      margin: 0;
     21    }
     22  </style>
     23 </head>
     24 
     25 <body>
     26  <div>
     27    <x-anchor id="x-anchor-1">
     28      <template shadowrootmode="open" shadowrootreferencetarget="anchor">
     29        <style>
     30          div {
     31            width: 100px;
     32            height: 100px;
     33          }
     34 
     35          #anchor {
     36            background-color: yellow;
     37          }
     38        </style>
     39 
     40        <div></div>
     41        <div id="anchor"></div>
     42      </template>
     43    </x-anchor>
     44    <div id="popover-1" popover anchor="x-anchor-1">Popover content</div>
     45  </div>
     46 
     47  <div>
     48    <x-anchor-2 id="x-anchor-2"></x-anchor-2>
     49    <div id="popover-2" popover anchor="x-anchor-2">Popover content</div>
     50  </div>
     51  <script>
     52    const customAnchor = document.querySelector('x-anchor-2');
     53    customAnchor.attachShadow({ mode: 'open', referenceTarget: 'anchor' });
     54    customAnchor.shadowRoot.innerHTML =`
     55 <style>
     56 div {
     57 width: 100px;
     58 height: 100px;
     59 }
     60 
     61 #anchor {
     62 background-color: yellow;
     63 }
     64 </style>
     65 
     66 <div></div>
     67 <div id="anchor"></div>`;
     68  </script>
     69 
     70  <div>
     71    <x-anchor id="x-anchor-3">
     72      <template shadowrootmode="open" shadowrootreferencetarget="anchor">
     73        <style>
     74          div {
     75            width: 100px;
     76            height: 100px;
     77          }
     78 
     79          #anchor {
     80            background-color: yellow;
     81          }
     82        </style>
     83 
     84        <div></div>
     85        <div id="anchor"></div>
     86      </template>
     87    </x-anchor>
     88    <div id="popover-3" popover>Popover content</div>
     89  </div>
     90 
     91  <script>
     92    function testPopoverAnchor(id, name) {
     93      test(function () {
     94        const popover = document.getElementById(id);
     95        popover.showPopover();
     96        assert_equals(popover.offsetLeft, 100, "popover.offsetLeft");
     97        assert_equals(popover.offsetTop, 100, "popover.offsetTop");
     98        // Clean up the test context for future tests.
     99        popover.parentElement.remove();
    100      }, name);
    101    }
    102    testPopoverAnchor('popover-1', "ShadowRoot ReferenceTarget works with anchor attribute.");
    103    testPopoverAnchor('popover-2', "ShadowRoot ReferenceTarget works with anchor attribute via options.");
    104    document.getElementById('popover-3').anchorElement = document.getElementById('x-anchor-3');
    105    testPopoverAnchor('popover-3', "ShadowRoot ReferenceTarget works with .anchorElement property.");
    106  </script>
    107 </body>
    108 
    109 </html>