tor-browser

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

position-visibility-anchors-visible-change-anchor.html (1979B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <meta charset="utf-8">
      4 <meta name="assert" content="Position-visibility should not be affected by the visibility of a previous anchor." />
      5 <title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
      6 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
      7 <link rel="match" href="position-visibility-anchors-visible-change-anchor-ref.html">
      8 <script src="/common/reftest-wait.js"></script>
      9 <script src="/common/rendering-utils.js"></script>
     10 <style>
     11  #scroll-container {
     12    overflow: hidden scroll;
     13    width: 300px;
     14    height: 100px;
     15  }
     16 
     17  .anchor {
     18    width: 100px;
     19    height: 100px;
     20    background: orange;
     21    display: inline-block;
     22  }
     23 
     24  #anchor1 {
     25    height: 200px;
     26    anchor-name: --a1;
     27  }
     28 
     29  #anchor2 {
     30    anchor-name: --a2;
     31  }
     32 
     33  #target {
     34    position-anchor: --a2;
     35    position-visibility: anchors-visible;
     36    position-area: bottom center;
     37    width: 100px;
     38    height: 100px;
     39    background: green;
     40    position: absolute;
     41    inset: 0;
     42  }
     43 </style>
     44 
     45 <div id="scroll-container">
     46  <div id="anchor1" class="anchor">anchor1</div>
     47  <div id="anchor2" class="anchor">anchor2</div>
     48  <div id="target">target</div>
     49 </div>
     50 
     51 <script>
     52  // #target should be initially visible because it is anchored to #anchor2,
     53  // which is visible.
     54  waitForAtLeastOneFrame().then(() => {
     55    // Change #target to be anchored to #anchor1.
     56    target.style.positionAnchor = '--a1';
     57    // #target should be still be visible because #anchor1 is also visible.
     58    waitForAtLeastOneFrame().then(() => {
     59      // Scroll #anchor2 out of view, with #anchor1 still in view.
     60      const scroller = document.getElementById('scroll-container');
     61      scroller.scrollTop = 100;
     62      // #target should still be visible because it is anchored to #anchor1,
     63      // which is still visible.
     64      waitForAtLeastOneFrame().then(() => {
     65        takeScreenshot();
     66      });
     67    });
     68  });
     69 </script>