tor-browser

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

scroll-marker-activation-specified-direction-position.html (2357B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Overflow Test: ::scroll-marker activation scrolls into view with doesn't override specified direction position with `start`</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-activation">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="/resources/testdriver.js"></script>
      8 <script src="/resources/testdriver-actions.js"></script>
      9 <script src="/resources/testdriver-vendor.js"></script>
     10 <style>
     11  .toc {
     12    overflow: auto;
     13    overscroll-behavior: contain;
     14    height: 150px;
     15    scroll-marker-group: before links;
     16    counter-reset: --section;
     17    padding-left: 200px;
     18 
     19    &::scroll-marker-group {
     20      position: absolute;
     21      width: 200px;
     22    }
     23 
     24    & div {
     25      counter-increment: --section;
     26      scroll-snap-align: end;
     27 
     28      &::scroll-marker {
     29        font-size: 1rem;
     30        display: block;
     31        content: counter(--section) ". " attr(data-label);
     32      }
     33 
     34      &::scroll-marker:target-current {
     35        color: ActiveText;
     36      }
     37    }
     38  }
     39 </style>
     40 <div id="scroller" class="toc">
     41  <div data-label="Introduction">
     42    <h3>Introduction</h3>
     43    <p>Lorem ipsum</p>
     44    <p>Lorem ipsum</p>
     45  </div>
     46 
     47  <div id="target" data-label="Focus">
     48    <h3>Focus Behavior</h3>
     49    <p>Lorem ipsum</p>
     50    <p>Lorem ipsum</p>
     51    <p>Lorem ipsum</p>
     52    <p>Lorem ipsum</p>
     53    <p>Lorem ipsum</p>
     54    <p>Lorem ipsum</p>
     55    <p>Lorem ipsum</p>
     56    <p>Lorem ipsum</p>
     57  </div>
     58 
     59  <div data-label="Roles">
     60    <h3>Roles</h3>
     61    <p>Lorem ipsum</p>
     62    <p>Lorem ipsum</p>
     63    <p>Lorem ipsum</p>
     64    <p>Lorem ipsum</p>
     65    <p>Lorem ipsum</p>
     66    <p>Lorem ipsum</p>
     67  </div>
     68 </div>
     69 <script>
     70  promise_test(async t => {
     71    const secondScrollMarkerX = 34;
     72    const secondScrollMarkerY = 37;
     73    await new test_driver.Actions()
     74      .pointerMove(secondScrollMarkerX, secondScrollMarkerY)
     75      .pointerDown()
     76      .pointerUp()
     77      .send();
     78    const scrollMarkerActivationScrollTop = scroller.scrollTop;
     79    scroller.scrollTop = 0; // reset scrollTop to 0
     80    target.scrollIntoView({block: "end"});
     81    assert_equals(scrollMarkerActivationScrollTop, scroller.scrollTop, "scroll marker activation shouldn scroll into view with specified direction position `end` and not default `start`");
     82  });
     83 </script>