tor-browser

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

position-sticky-nested-inline.html (2844B)

      1 <!DOCTYPE html>
      2 <title>Nested inline position:sticky elements should render correctly</title>
      3 <link rel="match" href="position-sticky-nested-inline-ref.html" />
      4 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
      5 <meta name="assert" content="This test checks that nested inline position:sticky elements render correctly" />
      6 
      7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
      8 
      9 <script src="../resources/ref-rectangle.js"></script>
     10 
     11 <style>
     12 .group {
     13  display: inline-block;
     14  position: relative;
     15  width: 150px;
     16  height: 250px;
     17 }
     18 
     19 .scroller {
     20  position: relative;
     21  width: 100px;
     22  height: 200px;
     23  overflow-x: hidden;
     24  overflow-y: auto;
     25  font: 25px/1 Ahem;
     26 }
     27 
     28 .contents {
     29  height: 500px;
     30 }
     31 
     32 .prepadding {
     33  height: 100px;
     34 }
     35 
     36 .container {
     37  height: 200px;
     38 }
     39 
     40 .innerpadding {
     41  height: 50px;
     42 }
     43 
     44 .outerIndicator {
     45  color: red;
     46  position: absolute;
     47  left: 0;
     48 }
     49 
     50 .innerIndicator {
     51  color: red;
     52  position: absolute;
     53  left: 25px;
     54 }
     55 
     56 .outerSticky {
     57  display: inline;
     58  color: green;
     59  position: sticky;
     60  top: 50px;
     61 }
     62 
     63 .innerSticky {
     64  display: inline;
     65  color: yellow;
     66  position: sticky;
     67  top: 60px;
     68 }
     69 </style>
     70 
     71 <script>
     72 window.addEventListener('load', function() {
     73  document.getElementById('scroller1').scrollTop = 50;
     74  document.getElementById('scroller2').scrollTop = 125;
     75  document.getElementById('scroller3').scrollTop = 225;
     76  createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
     77 });
     78 </script>
     79 
     80 <div>You should see three green and three yellow rectangles below. No red or blue should be visible.</div>
     81 
     82 <div class="group">
     83  <div id="scroller1" class="scroller">
     84    <div class="outerIndicator" style="top: 150px;">X</div>
     85    <div class="contents">
     86      <div class="prepadding"></div>
     87      <div class="container">
     88        <div class="innerpadding"></div>
     89        <div class="outerSticky">X<div class="innerIndicator" style="top: 0;">XX</div><div class="innerSticky">XX</div></div>
     90      </div>
     91    </div>
     92  </div>
     93 </div>
     94 
     95 <div class="group">
     96  <div id="scroller2" class="scroller">
     97    <div class="outerIndicator" style="top: 175px;">X</div>
     98    <div class="contents">
     99      <div class="prepadding"></div>
    100      <div class="container">
    101        <div class="innerpadding"></div>
    102        <div class="outerSticky">X<div class="innerIndicator" style="top: 10px;">XX</div><div class="innerSticky">XX</div></div>
    103      </div>
    104    </div>
    105  </div>
    106 </div>
    107 
    108 <div class="group">
    109  <div id="scroller3" class="scroller">
    110    <div class="outerIndicator" style="top: 200px;">X</div>
    111    <div class="contents">
    112      <div class="prepadding"></div>
    113      <div class="container">
    114        <div class="innerpadding"></div>
    115        <div class="outerSticky">X<div class="innerIndicator" style="top: 0;">XX</div><div class="innerSticky">XX</div></div>
    116      </div>
    117    </div>
    118  </div>
    119 </div>