tor-browser

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

anchor-name-cross-shadow.html (1331B)

      1 <!DOCTYPE html>
      2 <title>Tests that the anchor element can be in a different tree scope</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#target-anchor-element">
      4 <link rel="author" href="mailto:xiaochengh@chromium.org">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <style>
      8 .cb {
      9  position: absolute;
     10 }
     11 
     12 #host1::part(anchor) {
     13  anchor-name: --a1;
     14  margin-left: 15px;
     15 }
     16 #target1 {
     17  position: absolute;
     18  left: anchor(--a1 left);
     19 }
     20 </style>
     21 
     22 <div class="cb">
     23  <div id="host1"></div>
     24  <div id="target1"></div>
     25 </div>
     26 
     27 <div class="cb">
     28  <div id="host2"></div>
     29 </div>
     30 
     31 <script>
     32 test(() => {
     33  host1.attachShadow({mode: 'open'}).innerHTML = '<div part="anchor"></div>';
     34  assert_equals(target1.offsetLeft, 15);
     35 }, 'Should be able to set anchor-name to a shadow DOM part and anchor to it');
     36 
     37 test(() => {
     38  let shadow = host2.attachShadow({mode: 'open'});
     39  shadow.innerHTML = `
     40    <style>
     41      :host {
     42        anchor-name: --a2;
     43        margin-left: 15px;
     44      }
     45      #target2 {
     46        position: absolute;
     47        left: anchor(--a2 left);
     48      }
     49    </style>
     50    <div id="target2"></div>
     51  `;
     52  assert_equals(shadow.getElementById('target2').offsetLeft, 15);
     53 }, 'Should be able to set anchor-name to the shadow host and anchor to it');
     54 </script>