tor-browser

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

helper_scroll_linked_effect_anchor.html (2014B)

      1 <!DOCTYPE html>
      2 <html>
      3 <meta charset="utf-8">
      4 <script src="/tests/SimpleTest/paint_listener.js"></script>
      5 <script src="apz_test_utils.js"></script>
      6 <script src="apz_test_native_event_utils.js"></script>
      7 <title>Scroll Linked Effect for anchor tests</title>
      8 
      9 <style>
     10 .abs-container {
     11  position: absolute;
     12 }
     13 
     14 .anchor {
     15  width: 150px;
     16  height: 50px;
     17  background: purple;
     18  anchor-name: --foo;
     19  position: absolute;
     20  left: 500px;
     21 }
     22 
     23 .scroller {
     24  border: 1px solid;
     25  height: 600px;
     26  width: 500px;
     27  overflow: scroll;
     28  position: absolute;
     29  top: 40px;
     30 }
     31 
     32 .anchor-queryh {
     33  width: 100px;
     34  height: 25px;
     35  background: pink;
     36  position: absolute;
     37  position-anchor: --foo;
     38  top: 200px;
     39  left: anchor(right);
     40  position-visibility: always;
     41 }
     42 
     43 .anchor-queryv {
     44  width: 100px;
     45  height: 25px;
     46  background: pink;
     47  position: absolute;
     48  position-anchor: --foo;
     49  top: anchor(bottom);
     50  position-visibility: always;
     51 }
     52 
     53 .filler {
     54  width: 2000px;
     55  height: 750px;
     56 }
     57 
     58 </style>
     59 <div class="abs-container">
     60  <div class="scroller">
     61    <div class="filler"></div>
     62    <div class="anchor">Anchor</div>
     63    <div class="filler"></div>
     64  </div>
     65  <div class="anchor-queryh">Queried horz</div>
     66  <div class="anchor-queryv">Queried vert</div>
     67 </div>
     68 
     69 <script>
     70 async function test() {
     71 
     72  // Make sure every element gets repainted on every tick
     73  function toggleBg() {
     74    document.documentElement.style.background == "white"
     75      ? document.documentElement.style.background = "black"
     76      : document.documentElement.style.background = "white";
     77    window.requestAnimationFrame(toggleBg);
     78  }
     79  window.requestAnimationFrame(toggleBg);
     80 
     81  await new Promise(r => window.requestAnimationFrame(r));
     82  // we are now in the mid-way through refresh driver tick, before painting
     83  await new Promise(r => setTimeout(r, 0));
     84  // we are now after the painting
     85 
     86  ok(SpecialPowers.DOMWindowUtils.hasScrollLinkedEffect,
     87     "scroll-linked effect found");
     88 }
     89 
     90 waitUntilApzStable()
     91 .then(test)
     92 .then(subtestDone, subtestFailed);
     93 </script>