tor-browser

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

anchor-scroll-cleanup.html (2999B)

      1 <!DOCTYPE html>
      2 <title>Tests that anchor scrolling state doesn't stick afterwards if the stops being anchor positioned</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#scroll">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <script src="support/test-common.js"></script>
      7 
      8 <style>
      9 body {
     10  margin: 0;
     11 }
     12 
     13 .scroller {
     14  width: 100px;
     15  height: 100px;
     16  overflow-y: scroll;
     17 }
     18 
     19 .nonpos-cb {
     20  transform: scale(1);
     21 }
     22 
     23 .abspos-cb {
     24  position: absolute;
     25 }
     26 
     27 .anchor {
     28  background: orange;
     29  anchor-name: --a1;
     30  position: absolute;
     31  width: 50px;
     32  height: 50px;
     33  top: 50px;
     34 }
     35 
     36 .spacer {
     37  height: 200px;
     38 }
     39 
     40 .target {
     41  background: lime;
     42  position: absolute;
     43  width: 50px;
     44  height: 50px;
     45  top: anchor(top);
     46  left: anchor(right);
     47  position-anchor: --a1;
     48 }
     49 </style>
     50 
     51 <div class="abspos-cb" style="width: 300px; height: 400px">
     52  <div class="scroller nonpos-cb" id="scroller1">
     53    <div class="anchor" id="anchor1"></div>
     54    <div class="spacer"></div>
     55  </div>
     56  <div class="target" id="target1"></div>
     57 </div>
     58 <div class="abspos-cb" style="width: 300px; height: 400px">
     59  <div class="scroller nonpos-cb" id="scroller2">
     60    <div class="anchor" id="anchor2"></div>
     61    <div class="spacer"></div>
     62  </div>
     63  <div class="target" id="target2"></div>
     64 </div>
     65 <div class="abspos-cb" style="width: 300px; height: 400px">
     66  <div class="scroller nonpos-cb" id="scroller3">
     67    <div class="anchor" id="anchor3"></div>
     68    <div class="spacer"></div>
     69  </div>
     70  <div class="target" id="target3"></div>
     71 </div>
     72 
     73 <script>
     74 promise_test(async () => {
     75  scroller1.scrollTop = 10;
     76  await waitUntilNextAnimationFrame();
     77  await waitUntilNextAnimationFrame();
     78 
     79  assert_equals(target1.getBoundingClientRect().top, 40);
     80 
     81  anchor1.style.anchorName = "--no-match";
     82 
     83  await waitUntilNextAnimationFrame();
     84  await waitUntilNextAnimationFrame();
     85 
     86  assert_equals(target1.getBoundingClientRect().top, 100);
     87 }, 'Changing to a non-matching anchor-name should restore the box to its normal position.');
     88 
     89 promise_test(async () => {
     90  scroller2.scrollTop = 10;
     91  await waitUntilNextAnimationFrame();
     92  await waitUntilNextAnimationFrame();
     93 
     94  assert_equals(target2.getBoundingClientRect().top, 40);
     95 
     96  target2.style.positionAnchor = "--no-match";
     97 
     98  await waitUntilNextAnimationFrame();
     99  await waitUntilNextAnimationFrame();
    100 
    101  assert_equals(target2.getBoundingClientRect().top, 100);
    102 }, 'Changing to a non-matching position-anchor should restore the box to its normal position.');
    103 
    104 promise_test(async () => {
    105  scroller3.scrollTop = 10;
    106  await waitUntilNextAnimationFrame();
    107  await waitUntilNextAnimationFrame();
    108 
    109  assert_equals(target3.getBoundingClientRect().top, 40);
    110 
    111  scroller3.classList.remove("scroller");
    112 
    113  await waitUntilNextAnimationFrame();
    114  await waitUntilNextAnimationFrame();
    115 
    116  assert_equals(target3.getBoundingClientRect().top, 50);
    117 }, 'Removing the scroller should restore the box to its normal position.');
    118 
    119 </script>