wpt/css/css-scroll-snap/snap-fling-in-large-area.html at e9f7db6899e33842a1ac46032e9982f2035aeec2 · web-platform-tests/wpt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<head>
  <title>Fling within a large target is not interrupted by scroll snap</title>
  <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/"/>
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="/resources/testdriver.js"></script>
  <script src="/resources/testdriver-actions.js"></script>
  <script src="/resources/testdriver-vendor.js"></script>
  <script src="/dom/events/scrolling/scroll_support.js"></script>
</head>
<body>
  <style>
    main {
      scroll-snap-type: y;

      overflow: auto;
      height: 100vh;
    }

    div {
      scroll-snap-align: start;
      width: 80vw;
      height: 800vh;
      background: yellow;
      border: solid black 3px;
    }
  </style>
  <main id="scroller">
    <div></div>
  </main>
  <script>
    promise_test(async (t) => {
      await waitForCompositorReady();
      const scroller = document.getElementById("scroller");
      assert_equals(scroller.scrollTop, 0, "scroller not initially scrolled");

      let initial_scroll_top = scroller.scrollTop;
      let last_scroll_top = initial_scroll_top;
      const scroll_listener = () => {
        assert_greater_than_equal(scroller.scrollTop, last_scroll_top,
          "fling did not move backwards.");
        last_scroll_top = scroller.scrollTop;
      }
      scroller.addEventListener("scroll", scroll_listener);
      // We expect pointercancel to be triggered when scrolling starts due to
      // the touch-fling. If we instead get a pointerup event, we know that
      // scrolling isn't happening and we can immediately fail the test instead
      // of waiting for a timeout.
      const pointer_promise = () => {
        return new Promise((resolve, reject) => {
          document.addEventListener("pointerup", reject, { once: true });
          document.addEventListener("pointercancel", resolve, { once: true });
        });
      };

      try {
        const scrollend_promise = waitForScrollendEventNoTimeout(scroller);
        await touchFlingInTarget(/*pixels_to_scroll*/100, scroller, "down");
        await pointer_promise;
        await scrollend_promise;
      } catch(e) {
        assert_unreached("Failed to trigger touch fling.");
      }

      assert_greater_than(last_scroll_top, initial_scroll_top,
        "received at least one scroll update.");
      assert_greater_than_equal(scroller.scrollTop, last_scroll_top,
        "fling did not move backwards at the end of the scroll.");
    }, "fling within a large area is not interrupted by scroll snap");
  </script>
</body>
</html>