tor-browser

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

scroll-state-scrolled-user-touch-scroll.html (2370B)

      1 <!DOCTYPE html>
      2 <title>@container: scroll-state(scrolled) user touch 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="/css/css-conditional/container-queries/support/cq-testcommon.js"></script>
     11 <style>
     12  #scroller {
     13    width: 200px;
     14    height: 200px;
     15    container-type: scroll-state;
     16    overflow-y: scroll;
     17  }
     18  #filler {
     19    height: 600px;
     20  }
     21  #target {
     22    --none: no;
     23    --top: no;
     24    --bottom: no;
     25    @container scroll-state(scrolled: none) {
     26      --none: yes;
     27    }
     28    @container scroll-state(scrolled: top) {
     29      --top: yes;
     30    }
     31    @container scroll-state(scrolled: bottom) {
     32      --bottom: yes;
     33    }
     34  }
     35 </style>
     36 <div id="scroller">
     37  <div id="filler">
     38    <div id="target"></div>
     39  </div>
     40 </div>
     41 <script>
     42  setup(() => assert_implements_scroll_state_container_queries());
     43 
     44  function touch_scroll(start_pos, end_pos, duration) {
     45    return new test_driver.Actions()
     46        .addPointer("TestPointer", "touch")
     47        .pointerMove(Math.round(start_pos.x), Math.round(start_pos.y))
     48        .pointerDown()
     49        .addTick()
     50        .pause(200)
     51        .pointerMove(Math.round(end_pos.x), Math.round(end_pos.y), {duration: duration})
     52        .addTick()
     53        .pointerUp()
     54        .send();
     55  }
     56 
     57  promise_test(async t => {
     58    // Scrollbar element position
     59    const start_pos = {
     60      x: 100,
     61      y: 100,
     62    };
     63    const end_pos = { x: 100, y: 0 };
     64 
     65    await touch_scroll(start_pos, end_pos, 1000);
     66    await waitForAnimationFrames(2);
     67    assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "yes");
     68 
     69  }, "Panning gesture scroll is a relative scroll");
     70 
     71  promise_test(async t => {
     72    // Scrollbar element position
     73    const start_pos = {
     74      x: 100,
     75      y: 100,
     76    };
     77    const end_pos = { x: 100, y: 150 };
     78 
     79    await touch_scroll(start_pos, end_pos, 10);
     80    await waitForAnimationFrames(2);
     81    assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes");
     82 
     83  }, "Fling gesture scroll is a relative scroll");
     84 
     85 </script>