tor-browser

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

position-try-fallbacks-003.html (4437B)

      1 <!DOCTYPE html>
      2 <title>position-try-fallbacks:flip-block, only switch fallback if the current option doesn't fit</title>
      3 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
      4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-try-fallbacks">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="support/test-common.js"></script>
      8 <style>
      9  #anchor {
     10    anchor-name: --a;
     11    margin-top: 200px;
     12    margin-left: 100px;
     13    width: 150px;
     14    height: 50px;
     15    background: blue;
     16  }
     17  #anchored1 {
     18    position: absolute;
     19    position-anchor: --a;
     20    position-area: top left;
     21    position-try-fallbacks: flip-block;
     22    position-visibility: always;
     23    width: 100px;
     24    height: 100px;
     25    background: hotpink;
     26  }
     27  #anchored2 {
     28    position: absolute;
     29    position-anchor: --a;
     30    position-area: top right;
     31    position-try-fallbacks: flip-block;
     32    position-visibility: always;
     33    width: 100px;
     34    height: 300px;
     35    background: yellow;
     36  }
     37 </style>
     38 
     39 <div style="position:relative; width:400px; height:400px;">
     40 <div id="scroller" style="overflow-y:scroll; scrollbar-width: none; width:400px; height:400px;">
     41  <div id="anchor"></div>
     42  <div style="height:1000px;"></div>
     43  <div id="anchored1"></div>
     44  <div id="anchored2"></div>
     45 </div>
     46 
     47 <script>
     48  async function redisplay() {
     49    anchored1.style.display = "none";
     50    anchored2.style.display = "none";
     51    await waitUntilNextAnimationFrame();
     52    await waitUntilNextAnimationFrame();
     53    anchored1.style.display = "block";
     54    anchored2.style.display = "block";
     55    await waitUntilNextAnimationFrame();
     56    await waitUntilNextAnimationFrame();
     57  }
     58 
     59  promise_test(async () => {
     60    await waitUntilNextAnimationFrame();
     61    await waitUntilNextAnimationFrame();
     62    // Both options fits. Pick the first one.
     63    assert_equals(anchored1.offsetTop, 100);
     64    // None of the options for #anchor2 fits. Use the first one.
     65    assert_equals(anchored2.offsetTop, 0);
     66  }, 'initial position');
     67 
     68  promise_test(async () => {
     69    scroller.scrollTop = 100;
     70    await waitUntilNextAnimationFrame();
     71    await waitUntilNextAnimationFrame();
     72    assert_equals(anchored1.offsetTop, 0);
     73    assert_equals(anchored2.offsetTop, 0);
     74  }, 'scroll to 100');
     75 
     76  promise_test(async () => {
     77    scroller.scrollTop = 101;
     78    await waitUntilNextAnimationFrame();
     79    await waitUntilNextAnimationFrame();
     80    // The first option for #anchored1 no longer fits. Move to the second one,
     81    // which fits.
     82    assert_equals(anchored1.offsetTop, 149);
     83    // None of the options for #anchor2 fits. Keep using the first one.
     84    assert_equals(anchored2.offsetTop, 0);
     85  }, 'scroll to 101');
     86 
     87  promise_test(async () => {
     88    scroller.scrollTop = 100;
     89    await waitUntilNextAnimationFrame();
     90    await waitUntilNextAnimationFrame();
     91    // The first option fits again, but stay at the second option, since that
     92    // one too still fits.
     93    assert_equals(anchored1.offsetTop, 150);
     94 
     95    assert_equals(anchored2.offsetTop, 0);
     96  }, 'scroll back to 100');
     97 
     98  promise_test(async () => {
     99    await redisplay();
    100    // Redisplaying the anchored element should go through the options over
    101    // again, which means that the first options will be chosen.
    102    assert_equals(anchored1.offsetTop, 0);
    103    assert_equals(anchored2.offsetTop, 0);
    104  }, 'redisplay at 100');
    105 
    106  promise_test(async () => {
    107    scroller.scrollTop = 200;
    108    await waitUntilNextAnimationFrame();
    109    await waitUntilNextAnimationFrame();
    110    // The first option no longer fits. Move to the second one, which fits.
    111    assert_equals(anchored1.offsetTop, 50);
    112 
    113    assert_equals(anchored2.offsetTop, 50);
    114  }, 'scroll to 200');
    115 
    116 
    117  promise_test(async () => {
    118    scroller.scrollTop = 300;
    119    await waitUntilNextAnimationFrame();
    120    await waitUntilNextAnimationFrame();
    121    assert_equals(anchored1.offsetTop, -50);
    122 
    123    // The second option now fits.
    124    assert_equals(anchored2.offsetTop, -50);
    125  }, 'scroll to 300');
    126 
    127  promise_test(async () => {
    128    scroller.scrollTop = 0;
    129    await waitUntilNextAnimationFrame();
    130    await waitUntilNextAnimationFrame();
    131 
    132    // The second option still fits.
    133    assert_equals(anchored1.offsetTop, 250);
    134 
    135    // The second option no longer fits, but neither does the first one. Stay at
    136    // the second one.
    137    assert_equals(anchored2.offsetTop, 100);
    138  }, 'scroll back to 0');
    139 </script>