tor-browser

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

anchor-scroll-007.html (1912B)

      1 <!DOCTYPE html>
      2 <title>Tests that scroll adjustment still applies when using another anchor in default anchor's scroll container</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#needs-scroll-adjustment">
      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: 400px;
     16  height: 400px;
     17  overflow: scroll;
     18  position: relative;
     19 }
     20 
     21 #spacer {
     22  width: 1000px;
     23  height: 1000px;
     24 }
     25 
     26 .anchor {
     27  width: 50px;
     28  height: 50px;
     29  position: absolute;
     30  background: orange;
     31 }
     32 
     33 #anchor1 {
     34  anchor-name: --a1;
     35  left: 300px;
     36  top: 100px;
     37 }
     38 
     39 #anchor2 {
     40  anchor-name: --a2;
     41  left: 200px;
     42  top: 200px;
     43 }
     44 
     45 #anchor3 {
     46  anchor-name: --a3;
     47  left: 100px;
     48  top: 300px;
     49 }
     50 
     51 /* Uses different anchors in insets instead of the default anchor.
     52 * Still scroll-adjusted because they are in the same scroll container. */
     53 #target {
     54  position: fixed;
     55  width: 50px;
     56  height: 50px;
     57  left: anchor(--a3 left);
     58  top: anchor(--a1 top);
     59  position-anchor: --a2;
     60  background: lime;
     61 }
     62 </style>
     63 
     64 <div id="scroller">
     65  <div id="spacer"></div>
     66  <div class="anchor" id="anchor1"></div>
     67  <div class="anchor" id="anchor2"></div>
     68  <div class="anchor" id="anchor3"></div>
     69 </div>
     70 <div id="target"></div>
     71 
     72 <script>
     73 promise_test(async () => {
     74  await waitUntilNextAnimationFrame();
     75  assert_equals(target.getBoundingClientRect().left, 100);
     76  assert_equals(target.getBoundingClientRect().top, 100);
     77 
     78  scroller.scrollLeft = 50;
     79  await waitUntilNextAnimationFrame();
     80  assert_equals(target.getBoundingClientRect().left, 50);
     81 
     82  scroller.scrollTop = 50;
     83  await waitUntilNextAnimationFrame();
     84  assert_equals(target.getBoundingClientRect().top, 50);
     85 }, '#target3 is scroll-adjusted in both axises');
     86 </script>