tor-browser

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

position-sticky-get-bounding-client-rect.html (2857B)

      1 <!DOCTYPE html>
      2 <title>Sticky positioned element should be observable by getBoundingClientRect.</title>
      3 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
      4 <meta name="viewport" content="width=device-width,initial-scale=1">
      5 <meta name="assert" content="This test checks that sticky positioned element
      6 should be observable by getBoundingClientRect." />
      7 
      8 <script src="/resources/testharness.js"></script>
      9 <script src="/resources/testharnessreport.js"></script>
     10 
     11 <style>
     12 body {
     13  margin: 0;
     14 }
     15 
     16 .container {
     17  overflow: scroll;
     18  width: 200px;
     19  height: 200px;
     20 }
     21 
     22 .spacer {
     23  width: 2000px;
     24  height: 2000px;
     25 }
     26 
     27 .box {
     28  width: 100px;
     29  height: 100px;
     30  background-color: green;
     31 }
     32 
     33 .sticky {
     34  position: sticky;
     35  top: 50px;
     36  left: 20px;
     37 }
     38 </style>
     39 
     40 <div id="scroller1" class="container">
     41  <div id="sticky1" class="sticky box"></div>
     42  <div class="spacer"></div>
     43 </div>
     44 
     45 <script>
     46 test(() => {
     47  var sticky = document.getElementById('sticky1');
     48  assert_equals(sticky.getBoundingClientRect().top, 50);
     49  document.getElementById('scroller1').scrollTop = 100;
     50  assert_equals(sticky.getBoundingClientRect().top, 50);
     51  sticky.style.position = 'relative';
     52  assert_equals(sticky.getBoundingClientRect().top, -50);
     53  sticky.style.position = 'sticky';
     54  assert_equals(sticky.getBoundingClientRect().top, 50);
     55 }, 'sticky positioned element should be observable by getBoundingClientRect.');
     56 </script>
     57 
     58 <div id="scroller2" class="container">
     59  <div class="spacer"></div>
     60 </div>
     61 
     62 <script>
     63 test(() => {
     64  var scroller = document.getElementById('scroller2');
     65  scroller.scrollTop = 100;
     66  scroller.scrollLeft = 75;
     67 
     68  var sticky = document.createElement('div');
     69  sticky.className = 'sticky box';
     70  scroller.insertBefore(sticky, scroller.querySelector('.spacer'));
     71 
     72  var sticky_bounds = sticky.getBoundingClientRect();
     73  var scroller_bounds = scroller.getBoundingClientRect();
     74  assert_equals(sticky_bounds.top, scroller_bounds.top + 50);
     75  assert_equals(sticky_bounds.left, scroller_bounds.left + 20);
     76 }, 'getBoundingClientRect should be correct for sticky after script insertion');
     77 </script>
     78 
     79 <div id="scroller3" class="container">
     80  <div id="sticky3" class="sticky box"></div>
     81  <div class="spacer"></div>
     82 </div>
     83 
     84 <script>
     85 test(() => {
     86  var scroller = document.getElementById('scroller3');
     87  var sticky = document.getElementById('sticky3');
     88  scroller.scrollTop = 100;
     89  scroller.scrollLeft = 75;
     90 
     91  var div = document.createElement('div');
     92  div.style.height = '65px';
     93  scroller.insertBefore(div, sticky);
     94 
     95  var sticky_bounds = sticky.getBoundingClientRect();
     96  var scroller_bounds = scroller.getBoundingClientRect();
     97  assert_equals(sticky_bounds.top, scroller_bounds.top + 50);
     98  assert_equals(sticky_bounds.left, scroller_bounds.left + 20);
     99 }, 'getBoundingClientRect should be correct for sticky after script-caused layout');
    100 </script>