tor-browser

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

anchor-scroll-004.html (2105B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>Tests anchor positioned scrolling with relatively positioned inline containers</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#scroll">
      5 <link rel="author" href="mailto:xiaochengh@chromium.org">
      6 <link rel="stylesheet" href="/fonts/ahem.css">
      7 <script src="/resources/testharness.js"></script>
      8 <script src="/resources/testharnessreport.js"></script>
      9 <script src="support/test-common.js"></script>
     10 
     11 <style>
     12 body {
     13  margin: 0;
     14 }
     15 
     16 .cb {
     17  position: relative;
     18  font: 20px/1 Ahem;
     19 }
     20 
     21 .scroller {
     22  display: inline-block;
     23  overflow-x: scroll;
     24  width: 160px;
     25  white-space: nowrap;
     26 }
     27 
     28 .anchor {
     29  anchor-name: --a;
     30  color: orange;
     31 }
     32 
     33 .target {
     34  position: absolute;
     35  position-anchor: --a;
     36  top: anchor(bottom);
     37  left: anchor(left);
     38  color: lime;
     39 }
     40 </style>
     41 
     42 <div>
     43  <span class="cb">
     44    <span class="scroller" id="scroller1">
     45      before
     46      <span class="anchor" id="anchor1">anchor</span>
     47      after
     48    </span>
     49    <span class="target" id="target1">target</span>
     50  </span>
     51 
     52  <br>
     53  <br>
     54 
     55  <span class="cb">
     56    <span class="scroller" id="scroller2">
     57      before
     58      <span class="anchor" id="anchor2">anchor</span>
     59      after
     60    </span>
     61    <span class="target" id="target2">target</span>
     62  </span>
     63 </div>
     64 
     65 <script>
     66 promise_test(async () => {
     67  await document.fonts.load('20px/1 Ahem');
     68 
     69  await waitUntilNextAnimationFrame();
     70  await waitUntilNextAnimationFrame();
     71 
     72  assert_equals(target1.getBoundingClientRect().left, 140);
     73  assert_equals(target2.getBoundingClientRect().left, 140);
     74 }, 'Initial position of the targets');
     75 
     76 promise_test(async () => {
     77  scroller1.scrollLeft = 20;
     78  await waitUntilNextAnimationFrame();
     79  await waitUntilNextAnimationFrame();
     80 
     81  assert_equals(target1.getBoundingClientRect().left, 120);
     82 }, '#target1 should scroll with #anchor1');
     83 
     84 promise_test(async () => {
     85  scroller2.scrollLeft = 40;
     86  await waitUntilNextAnimationFrame();
     87  await waitUntilNextAnimationFrame();
     88 
     89  assert_equals(target2.getBoundingClientRect().left, 100);
     90 }, '#target2 should scroll with #anchor2');
     91 </script>