Bug 1640632 [wpt PR 23753] - Add test to fire scrollend events for user scrolls, a=testonly
authorcathiechen <cathiechen@igalia.com>
Thu, 04 Jun 2020 16:04:45 +0000
changeset 533928 b081c705bcb72e231d62f7dfc372986cb920a844
parent 533927 e666c82d5ec6613e9b2c92d48a920355a15f542c
child 533929 31b1efa0874481e5b787f0114040212fae7b2a55
push id37480
push userncsoregi@mozilla.com
push dateThu, 04 Jun 2020 22:00:12 +0000
treeherdermozilla-central@e33aea19d0c5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1640632, 23753
milestone79.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1640632 [wpt PR 23753] - Add test to fire scrollend events for user scrolls, a=testonly Automatic update from web-platform-tests Add test to fire scrollend events for user scrolls (#23753) Add test for firing scrollend event for user scrolling. The user scrolling includes dragging, press scrollbar, dragging scrollbar thumb, and send DOWN key scrolling. -- wpt-commits: c99723afe33bc5b265e41c1a9446eaff7f8e0d57 wpt-pr: 23753 Differential Revision: https://phabricator.services.mozilla.com/D78327
testing/web-platform/tests/dom/events/scrolling/scroll_support.js
testing/web-platform/tests/dom/events/scrolling/scrollend-event-for-user-scroll.html
--- a/testing/web-platform/tests/dom/events/scrolling/scroll_support.js
+++ b/testing/web-platform/tests/dom/events/scrolling/scroll_support.js
@@ -78,8 +78,20 @@ function touchScrollInTarget(pixels_to_s
       .pointerUp()
       .send();
 }
 
 // Trigger fling by doing pointerUp right after pointerMoves.
 function touchFlingInTarget(pixels_to_scroll, target, direction) {
   touchScrollInTarget(pixels_to_scroll, target, direction, 0 /* pause_time */);
 }
+
+function mouseActionsInTarget(target, origin, delta, pause_time_in_ms = 100) {
+  return new test_driver.Actions()
+    .addPointer("pointer1", "mouse")
+    .pointerMove(origin.x, origin.y, { origin: target })
+    .pointerDown()
+    .pointerMove(origin.x + delta.x, origin.y + delta.y, { origin: target })
+    .pointerMove(origin.x + delta.x * 2, origin.y + delta.y * 2, { origin: target })
+    .pause(pause_time_in_ms)
+    .pointerUp()
+    .send();
+}
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/dom/events/scrolling/scrollend-event-for-user-scroll.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html>
+<head>
+<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="scroll_support.js"></script>
+<style>
+    #targetDiv {
+        width: 200px;
+        height: 200px;
+        overflow: scroll;
+    }
+
+    #innerDiv {
+        width: 400px;
+        height: 400px;
+    }
+</style>
+</head>
+<body style="margin:0" onload=runTest()>
+    <div id="targetDiv">
+        <div id="innerDiv">
+        </div>
+    </div>
+</body>
+
+<script>
+var target_div = document.getElementById('targetDiv');
+var scrollend_arrived = false;
+
+function onScrollEnd(event) {
+    assert_false(event.cancelable);
+    assert_false(event.bubbles);
+    scrollend_arrived = true;
+}
+
+function resetTargetScrollState() {
+    target_div.scrollTop = 0;
+    target_div.scrollLeft = 0;
+}
+
+function checkFinalPosition(target, position, pause_time_in_ms) {
+    return new Promise((resolve, reject) => {
+        step_timeout(() => {
+            resolve();
+            assert_equals(position.x, target.scrollLeft);
+            assert_equals(position.y, target.scrollTop);
+        }, pause_time_in_ms);
+    });
+}
+
+target_div.addEventListener("scrollend", onScrollEnd);
+
+function runTest() {
+    promise_test(async (t) => {
+        // Make sure that no scrollend event is sent to window.
+        window.addEventListener("scrollend",
+            t.unreached_func("window got unexpected scrollend event."));
+        await waitForCompositorCommit();
+        scrollend_arrived = false;
+
+        // Perform drag action on target div and wait for target_div to get scrollend event.
+        var origin = { x: target_div.offsetWidth / 2, y: target_div.offsetHeight - 50 };
+        var delta = { x: 0, y: 40 };
+        await mouseActionsInTarget(target_div, origin, delta, 300);
+        await waitFor(() => { return scrollend_arrived; },
+            'target_div did not receive scrollend event after dragging scroll on target.');
+        assert_true(target_div.scrollTop > 0);
+        await checkFinalPosition(target_div, {x: target_div.scrollLeft, y: target_div.scrollTop}, 300);
+    }, 'Tests that the target_div gets scrollend event when dragging scroll on target.');
+
+    promise_test(async (t) => {
+        resetTargetScrollState();
+        // Make sure that no scrollend event is sent to window.
+        window.addEventListener("scrollend",
+            t.unreached_func("window got unexpected scrollend event."));
+        await waitForCompositorCommit();
+        scrollend_arrived = false;
+
+        // Hit the scrollbar of target div and wait for target_div to get scrollend event.
+        var scrollbar_width = target_div.offsetWidth - target_div.clientWidth;
+        assert_true(scrollbar_width > 0, "This test requires scrollbar.");
+        var origin = {x: target_div.offsetWidth - scrollbar_width / 2, y: target_div.offsetHeight - 50};
+        var delta = {x: 0, y: 0};
+        await mouseActionsInTarget(target_div, origin, delta, 100);
+        await waitFor(() => { return scrollend_arrived; },
+            'target_div did not receive scrollend event after clicking scrollbar on target.');
+        assert_true(target_div.scrollTop > 0);
+        await checkFinalPosition(target_div, { x: target_div.scrollLeft, y: target_div.scrollTop }, 300);
+    }, 'Tests that the target_div gets scrollend event when click scrollbar on target.');
+
+    promise_test(async (t) => {
+        resetTargetScrollState();
+        // Make sure that no scrollend event is sent to window.
+        window.addEventListener("scrollend",
+            t.unreached_func("window got unexpected scrollend event."));
+        await waitForCompositorCommit();
+        scrollend_arrived = false;
+
+
+        // Drag the thumb of target div.
+        var scrollbar_width = target_div.offsetWidth - target_div.clientWidth;
+        assert_true(scrollbar_width > 0, "This test requires scrollbar.");
+        var origin = { x: target_div.offsetWidth - scrollbar_width / 2, y: 50 };
+        var delta = { x: 0, y: 20 };
+        await mouseActionsInTarget(target_div, origin, delta, 100);
+        await waitFor(() => { return scrollend_arrived; },
+            'target_div did not receive scrollend event after dragging the thumb of target.');
+        assert_true(target_div.scrollTop > 0);
+        await checkFinalPosition(target_div, { x: target_div.scrollLeft, y: target_div.scrollTop }, 300);
+    }, 'Tests that the target_div gets scrollend event when drag the thumb of target.');
+
+    promise_test(async (t) => {
+        resetTargetScrollState();
+        // Make sure that no scrollend event is sent to window.
+        window.addEventListener("scrollend",
+            t.unreached_func("window got unexpected scrollend event."));
+        await waitForCompositorCommit();
+        scrollend_arrived = false;
+
+        // Hit and active the target div.
+        var origin = { x: target_div.offsetWidth / 2, y: target_div.offsetHeight / 2};
+        var delta = { x: 0, y: 0 };
+        await mouseActionsInTarget(target_div, origin, delta, 100);
+        // Send DOWN key to the target div.
+        window.test_driver.send_keys(target_div, '\ue015');
+
+        await waitFor(() => { return scrollend_arrived; },
+            'target_div did not receive scrollend event after sending DOWN key to target.');
+        assert_true(target_div.scrollTop > 0);
+        await checkFinalPosition(target_div, { x: target_div.scrollLeft, y: target_div.scrollTop }, 300);
+    }, 'Tests that the target_div gets scrollend event when send DOWN key to target.');
+}
+</script>
+</html>