wpt/css/css-scroll-snap/unrelated-gesture-scroll-during-snap.html at master · 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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html>
  <head>
    <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1" />
    <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>
    <script src="support/common.js"></script>
  </head>
  <body>
    <style>
      .scroller {
        border: solid 1px black;
        overflow-y: scroll;
        height: 200px;
        width: 200px;
        display: inline-block;
        background-color: yellow;
        position: relative;
      }
      .snapcontainer {
        scroll-snap-type: y mandatory;
      }
      .snaparea {
        scroll-snap-align: start;
        margin-bottom: 120%;
        height: 40px;
        width: 50px;
        background-color: green;
      }
      .space {
        height: 500vh;
        width: 500vw;
        position: absolute;
      }
    </style>
    <div>
      <div id="plaincontainer" class="scroller">
        <div class="snaparea"></div>
        <div class="snaparea"></div>
        <div class="snaparea"></div>
        <div class="snaparea"></div>
        <div class="snaparea"></div>
      </div>
      <div id="snapcontainer1" class="scroller snapcontainer">
        <div class="snaparea"></div>
        <div class="snaparea"></div>
        <div class="snaparea"></div>
        <div class="snaparea"></div>
        <div class="snaparea"></div>
      </div>
      <div id="snapcontainer2" class="scroller snapcontainer">
        <div class="snaparea"></div>
        <div class="snaparea"></div>
        <div class="snaparea"></div>
        <div class="snaparea"></div>
        <div class="snaparea"></div>
      </div>
    </div>
    <script>
      const plaincontainer = document.getElementById("plaincontainer");
      const snapcontainer1 = document.getElementById("snapcontainer1");
      const snapcontainer2 = document.getElementById("snapcontainer2");

      async function test_unrelated_gesture_during_snap(t,
                                                     snapcontainer,
                                                     other_container,
                                                     inputs,
                                                     expectations) {
        await waitForScrollReset(t, snapcontainer);
        await waitForScrollReset(t, other_container);
        await waitForCompositorCommit();

        assert_equals(snapcontainer.scrollTop, 0, "snapcontainer is reset.");
        assert_equals(other_container.scrollTop, 0, `${other_container.id} is ` +
                      `reset.`);
        const scrollend_promises = [
          waitForScrollendEventNoTimeout(snapcontainer),
          waitForScrollendEventNoTimeout(other_container)
        ];
        let last_scroll_top = snapcontainer.scrollTop;
        async function scroll_listener() {
          // If scrollTop is decreasing we are snapping back (absolute-scroll
          // case).
          // If scrollTop is increasing past the initial scroll amount we are
          // snapping forward (relative-scroll case).
          if (snapcontainer.scrollTop < last_scroll_top ||
              (snapcontainer.scrollTop > last_scroll_top &&
               snapcontainer.scrollTop > snap_scroll_amt)) {
            snapcontainer.removeEventListener("scroll", scroll_listener);
            await new test_driver.Actions().scroll(0, 0, 0, inputs.scroll_amt,
                                            { origin: other_container }).send();
          }
          last_scroll_top = snapcontainer.scrollTop;
        }
        snapcontainer.addEventListener("scroll", scroll_listener);

        // The snap areas are separated by margin-bottom: 120%. Scrolling to
        // almost halfway should snap back to 0.
        const snap_scroll_amt = snapcontainer.clientHeight / 2;
        await new test_driver.Actions().scroll(0, 0, 0, snap_scroll_amt,
                                         { origin: snapcontainer })
                                         .send();

        await Promise.all(scrollend_promises);
        const second_snap_offset =
            snapcontainer.querySelectorAll(".snaparea")[1].offsetTop;
        assert_true(snapcontainer.scrollTop === 0 ||
                    snapcontainer.scrollTop === second_snap_offset,
          "snapcontainer snaps to a snap point (0 or " +
          second_snap_offset + "), got " + snapcontainer.scrollTop);
        assert_equals(other_container.scrollTop, expectations.expectedScrollTop,
          `${other_container.id} is at expected scroll offset.`);
      }

      promise_test(async (t) => {
        await test_unrelated_gesture_during_snap(t, snapcontainer1,
                                                 plaincontainer,
                                                { scroll_amt: 100 },
                                                { expectedScrollTop: 100 });
      }, "gesture on separate scroll container works while another container "+
         "snaps");

      promise_test(async (t) => {
        // scrolling the full clientHeight of snapcontainer2 should result in
        // snapping to its second snap area.
        const scroll_amt = snapcontainer2.clientHeight;
        const expectedScrollTop = snapcontainer2.querySelectorAll(".snaparea")[1].offsetTop;
        await test_unrelated_gesture_during_snap(t, snapcontainer1,
                                                 snapcontainer2,
                                                 { scroll_amt: scroll_amt },
                                                 { expectedScrollTop: expectedScrollTop});
      }, "gesture on separate snap container works while another container "+
         "snaps");
    </script>
  </body>
</html>