tor-browser

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

anchor-position-borders-002.html (2295B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos">
      3 <link rel="author" href="mailto:kojii@chromium.org">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <style>
      7 .cb {
      8  position: relative;
      9  border-bottom: 2px solid gray;
     10 }
     11 .not-positioned-cb {
     12  transform: translate(0, 0);  /* Make it a containing block. */
     13 }
     14 .scroller { overflow: scroll; }
     15 .borders { border-width: 5px 6px 7px 8px; border-style: solid; }
     16 .spacer {
     17  height: 9px;
     18 }
     19 .anchor1 {
     20  anchor-name: --a1;
     21  margin-right: 50px;
     22  width: 31px;
     23  height: 31px;
     24  background: red;
     25 }
     26 .target {
     27  position: absolute;
     28  left: anchor(--a1 left);
     29  right: anchor(--a1 right);
     30  top: anchor(--a1 top);
     31  bottom: anchor(--a1 bottom);
     32  background: lime;
     33 }
     34 </style>
     35 <body>
     36  <div class="spacer"></div>
     37  <div class="cb scroller" dir="rtl">
     38    <div class="spacer"></div>
     39    <div class="anchor1"></div>
     40    <div class="target"></div>
     41  </div>
     42  <div class="cb scroller borders" dir="rtl">
     43    <div class="spacer"></div>
     44    <div class="anchor1"></div>
     45    <div class="target"></div>
     46  </div>
     47  <div class="cb">
     48    <div class="scroller borders" dir="rtl">
     49      <div class="spacer"></div>
     50      <div class="anchor1"></div>
     51    </div>
     52    <div class="target"></div>
     53  </div>
     54  <div class="cb scroller borders" dir="rtl">
     55    <div class="not-positioned-cb">
     56      <div class="spacer"></div>
     57      <div class="anchor1"></div>
     58    </div>
     59    <div class="target"></div>
     60  </div>
     61  <div class="cb scroller borders" dir="rtl">
     62    <div class="not-positioned-cb scroller borders">
     63      <div class="spacer"></div>
     64      <div class="anchor1"></div>
     65    </div>
     66    <div class="target"></div>
     67  </div>
     68 <script>
     69 function getBoundingClientRectAsArray(element) {
     70  const rect = element.getBoundingClientRect();
     71  return [rect.left, rect.top, rect.right, rect.bottom];
     72 }
     73 
     74 const anchors = document.getElementsByClassName('anchor1');
     75 const targets = document.getElementsByClassName('target');
     76 for (let i = 0; i < targets.length; ++i) {
     77  test(() => {
     78    const anchor = anchors[i];
     79    const target = targets[i];
     80    assert_array_equals(getBoundingClientRectAsArray(anchor),
     81                        getBoundingClientRectAsArray(target));
     82  });
     83 }
     84 </script>
     85 </body>