tor-browser

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

scroll-target-margin-006.html (1946B)

      1 <!DOCTYPE html>
      2 <html>
      3 <title>scrollIntoView() and scroll-margin applied to an inline element</title>
      4 <link rel='author' title='Martin Robinson' href='http://igalia.com'>
      5 <link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-margin'>
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 
      9 <style type='text/css'>
     10  .container {
     11    border: solid black 1px;
     12    height: 40px;
     13    width: 40px;
     14    overflow: auto;
     15  }
     16 </style>
     17 
     18 <div class="container">
     19  <div style="height: 1000px; width: 2000px;"></div>
     20  <div style="width: 2000px;">
     21    <span>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
     22    <span id="target">TARGETTARGETTARGETTARGET</span>
     23    <span>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
     24  </div>
     25  <div style="height: 1000px; width: 2000px;"></div>
     26 </div>
     27 
     28 <script>
     29 
     30 test(() => {
     31  target.scrollIntoView();
     32  const scroller = target.parentElement.parentElement;
     33  let expectedScrollPosition = [scroller.scrollLeft - 20, scroller.scrollTop - 20];
     34  scroller.scrollTo(0, 0);
     35 
     36  target.style.scrollMarginTop = "20px";
     37  target.style.scrollMarginLeft = "20px";
     38  target.scrollIntoView();
     39  assert_equals(scroller.scrollLeft, expectedScrollPosition[0]);
     40  assert_equals(scroller.scrollTop, expectedScrollPosition[1]);
     41 
     42  target.style.scrollMarginTop = "0px";
     43  target.style.scrollMarginLeft = "0px";
     44 
     45  scroller.scrollTo(2000, 2000);
     46  target.scrollIntoView({"block": "end", "inline": "end"});
     47  expectedScrollPosition = [scroller.scrollLeft + 20, scroller.scrollTop + 20];
     48  scroller.scrollTo(2000, 2000);
     49 
     50  target.style.scrollMarginBottom = "20px";
     51  target.style.scrollMarginRight = "20px";
     52  target.scrollIntoView({"block": "end", "inline": "end"});
     53  assert_equals(scroller.scrollLeft, expectedScrollPosition[0]);
     54  assert_equals(scroller.scrollTop, expectedScrollPosition[1]);
     55 
     56 }, "scroll-margin is taken into account when scrolling an inline element into view");
     57 </script>