tor-browser

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

position-sticky-scrolled-remove-sibling.html (2171B)

      1 <!DOCTYPE html>
      2 
      3  <meta charset="UTF-8">
      4 
      5  <title>CSS Positioned Layout Test: element with 'position: sticky' and removing a sibling in the vertical axis and in the horizontal axis</title>
      6 
      7  <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
      8  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
      9  <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
     10 
     11  <meta name="flags" content="">
     12 
     13  <style>
     14  div#scrollingContainerVert
     15    {
     16      background-color: red;
     17      height: 100px;
     18      overflow: auto;
     19      width: 200px;
     20    }
     21 
     22  div#scrollingContainerHoriz
     23    {
     24      background-color: red;
     25      height: 100px;
     26      overflow-x: auto;
     27      overflow-y: hidden;
     28      width: 200px;
     29    }
     30 
     31  div#elemStickyVert
     32    {
     33      background-color: green;
     34      height: 100px;
     35      position: sticky;
     36      top: 0px;
     37    }
     38 
     39  div#scrollingContainerHoriz > div
     40    {
     41      display: inline-block;
     42      height: 100%;
     43    }
     44 
     45  div#elemStickyHoriz
     46    {
     47      background-color: green;
     48      left: 0px;
     49      position: sticky;
     50      width: 200px;
     51    }
     52 
     53  div#tallItem
     54    {
     55      height: 600px;
     56    }
     57 
     58  div#wideItem
     59    {
     60      width: 600px;
     61    }
     62  </style>
     63 
     64 
     65  <script src="/resources/testharness.js"></script>
     66 
     67  <script src="/resources/testharnessreport.js"></script>
     68 
     69  <p>Test passes if there is a filled green square and <strong>no scrollbar</strong>.
     70 
     71  <div id="scrollingContainerVert">
     72 
     73    <div id="elemStickyVert"></div>
     74 
     75    <div id="tallItem"></div>
     76 
     77  </div>
     78 
     79 
     80  <div id="scrollingContainerHoriz">
     81 
     82    <div id="elemStickyHoriz"></div><div id="wideItem"></div>
     83 
     84  </div>
     85 
     86 
     87  <script>
     88  test(()=> {
     89  scrollingContainerVert.scrollTop = 600;
     90  tallItem.style.display = "none";
     91  assert_equals(scrollingContainerVert.scrollHeight, 100);
     92  }, "Sticky position and its overflow contribution in the vertical axis");
     93 
     94  test(()=> {
     95  scrollingContainerHoriz.scrollLeft = 600;
     96  wideItem.style.display = "none";
     97  assert_equals(scrollingContainerHoriz.scrollWidth, 200);
     98  }, "Sticky position and its overflow contribution in the horizontal axis");
     99  </script>