tor-browser

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

anchor-scroll-002.html (2509B)

      1 <!DOCTYPE html>
      2 <title>Tests anchor positioned scrolling resolving name conflicts</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#scroll">
      4 <link rel="author" href="mailto:xiaochengh@chromium.org">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="support/test-common.js"></script>
      8 
      9 <style>
     10 body {
     11  margin: 0;
     12 }
     13 
     14 .scroller {
     15  width: 100px;
     16  height: 100px;
     17  overflow-y: scroll;
     18 }
     19 
     20 .nonpos-cb {
     21  transform: scale(1);
     22 }
     23 
     24 .abspos-cb {
     25  position: absolute;
     26 }
     27 
     28 .anchor {
     29  background: orange;
     30  anchor-name: --a1;
     31  position: absolute;
     32  width: 50px;
     33  height: 50px;
     34  top: 50px;
     35 }
     36 
     37 .spacer {
     38  height: 200px;
     39 }
     40 
     41 .target {
     42  background: lime;
     43  position: absolute;
     44  width: 50px;
     45  height: 50px;
     46  top: anchor(top);
     47  left: anchor(right);
     48  position-anchor: --a1;
     49 }
     50 </style>
     51 
     52 <div class="abspos-cb" style="width: 300px; height: 400px">
     53  <div class="scroller nonpos-cb" id="scroller1">
     54    <div class="anchor" id="anchor1"></div>
     55    <div class="spacer"></div>
     56  </div>
     57  <div class="target" id="target1"></div>
     58 
     59  <div class="scroller abspos-cb" style="top: 125px" id="scroller2">
     60    <div class="anchor" id="anchor2"></div>
     61    <div class="spacer"></div>
     62  </div>
     63  <div class="target" id="target2"></div>
     64 
     65  <div class="scroller abspos-cb" style="top: 250px" id="scroller3">
     66    <div class="anchor" id="anchor3"></div>
     67    <div class="spacer"></div>
     68  </div>
     69  <div class="target" id="target3"></div>
     70 </div>
     71 
     72 <script>
     73 promise_test(async () => {
     74  scroller1.scrollTop = 10;
     75  await waitUntilNextAnimationFrame();
     76  await waitUntilNextAnimationFrame();
     77 
     78  assert_equals(target1.getBoundingClientRect().top, anchor1.getBoundingClientRect().top);
     79  assert_equals(target1.getBoundingClientRect().top, 40);
     80 }, 'target1 should scroll with anchor1');
     81 
     82 promise_test(async () => {
     83  scroller2.scrollTop = 20;
     84  await waitUntilNextAnimationFrame();
     85  await waitUntilNextAnimationFrame();
     86 
     87  assert_equals(target2.getBoundingClientRect().top, anchor2.getBoundingClientRect().top);
     88  assert_equals(target2.getBoundingClientRect().top, 155);
     89 }, 'target2 should scroll with anchor2');
     90 
     91 promise_test(async () => {
     92  scroller3.scrollTop = 30;
     93  await waitUntilNextAnimationFrame();
     94  await waitUntilNextAnimationFrame();
     95 
     96  assert_equals(target3.getBoundingClientRect().top, anchor3.getBoundingClientRect().top);
     97  assert_equals(target3.getBoundingClientRect().top, 270);
     98 }, 'target3 should scroll with anchor3');
     99 </script>