tor-browser

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

scroll-state-scrolled-scrollbar-track-clicks.html (2210B)

      1 <!DOCTYPE html>
      2 <title>@container: scroll-state(scrolled) scrollbar track click scroll</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <script src="/resources/testdriver.js"></script>
      7 <script src="/resources/testdriver-actions.js"></script>
      8 <script src="/resources/testdriver-vendor.js"></script>
      9 <script src="/web-animations/testcommon.js"></script>
     10 <script src="/dom/events/scrolling/scroll_support.js"></script>
     11 <script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script>
     12 <style>
     13  #scroller {
     14    width: 200px;
     15    height: 200px;
     16    container-type: scroll-state;
     17    overflow-y: scroll;
     18  }
     19  #filler {
     20    height: 600px;
     21  }
     22  #target {
     23    --none: no;
     24    --y: no;
     25    @container scroll-state(scrolled: none) {
     26      --none: yes;
     27    }
     28    @container scroll-state(scrolled: y) {
     29      --y: yes;
     30    }
     31  }
     32 </style>
     33 <div id="scroller">
     34  <div id="filler">
     35    <div id="target"></div>
     36  </div>
     37 </div>
     38 <script>
     39  setup(() => assert_implements_scroll_state_container_queries());
     40 
     41  function scrollbar_track_click(track_position) {
     42    return new test_driver.Actions()
     43        .addPointer("TestPointer", "mouse")
     44        .pointerMove(Math.round(track_position.x), Math.round(track_position.y))
     45        .pointerDown()
     46        .pointerUp()
     47        .send();
     48  }
     49 
     50  promise_test(async t => {
     51    // Skip test on platforms that do not have a visible scrollbar (e.g.
     52    // overlay scrollbar).
     53    const scrollbar_width = scroller.offsetWidth - scroller.clientWidth;
     54    if (scrollbar_width == 0) {
     55      return;
     56    }
     57 
     58    assert_equals(scroller.scrollTop, 0);
     59 
     60    let scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller);
     61 
     62    /* Scrollbar should be located on top right side */
     63    const track_position = { x: 200, y: 150 };
     64    await scrollbar_track_click(track_position);
     65 
     66    await scrollEndPromise;
     67    await waitForAnimationFrames(2);
     68 
     69    assert_not_equals(scroller.scrollTop, 0);
     70    assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes");
     71 
     72  }, "Scrollbar track click scroll");
     73 
     74 </script>