diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-scroll-snap-2/scroll-start-target/scroll-start-target-with-user-programmatic-scroll.tentative.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-scroll-snap-2/scroll-start-target/scroll-start-target-with-user-programmatic-scroll.tentative.html | 125 |
1 files changed, 125 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start-target/scroll-start-target-with-user-programmatic-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start-target/scroll-start-target-with-user-programmatic-scroll.tentative.html new file mode 100644 index 0000000000..2d487e9b85 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start-target/scroll-start-target-with-user-programmatic-scroll.tentative.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title> CSS Scroll Snap 2 Test: scroll-start-target*</title> + <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start-target"> + <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> + .spacer { + width: 1000px; + height: 1000px; + } + + .scroller { + width: 300px; + height: 300px; + border: solid 1px black; + overflow: scroll; + margin: 0px; + position: absolute; + } + + .box { + position: absolute; + width: 200px; + height: 200px; + } + + .top_left { + top: 0px; + left: 0px; + background-color: red; + } + + .center { + top: 200px; + left: 200px; + background-color: purple; + scroll-start-target: auto auto; + } + + .bottom_right { + top: 400px; + left: 400px; + background-color: yellow; + } + </style> + <div class="scroller" id="user_scroller"> + <div class="spacer"></div> + <div class="top_left box" id="user_top_left_box"></div> + <div class="center box"></div> + <div class="bottom_right box"></div> + </div> + <div class="scroller" id="programmatic_scroller" style="left: 500px"> + <div class="spacer"></div> + <div class="top_left box" id="programmatic_top_left_box"></div> + <div class="center box"></div> + <div class="bottom_right box"></div> + </div> + <script> + async function user_scroll(scroller, current_offset, target_offset) { + return new test_driver.Actions().scroll(0, 0, + target_offset.x - current_offset.x, + target_offset.y - current_offset.y, { origin: scroller }) + .send(); + } + + function programmatic_scroll(scroller, current_offset, target_offset) { + scroller.scrollTo(target_offset.x, target_offset.y); + } + + async function test_scroll_start_target(test, scroller, msg, scrolling_function) { + await waitForCompositorCommit(); + let top_left_box = document.getElementById("user_top_left_box"); + + let expected_scroll_top = top_left_box.getBoundingClientRect().height; + let expected_scroll_left = top_left_box.getBoundingClientRect().width; + + assert_approx_equals(scroller.scrollTop, expected_scroll_top, 1, + "scroll-start-target sets initial vertical scroll position"); + assert_approx_equals(scroller.scrollLeft, expected_scroll_left, 1, + "scroll-start-target sets initial horizontal scroll position"); + + let scrollend_promise = new Promise((resolve) => { + scroller.addEventListener("scrollend", resolve); + }); + const current_offset = { x: scroller.scrollLeft, y: scroller.scrollTop }; + const target_offset = { + x: current_offset.x + 100, + y: current_offset.y + 100 + }; + await scrolling_function(scroller, current_offset, target_offset); + + // Only wait for scrollend if it is supported. + if (window.onscrollend == null || window.onscrollend != undefined) { + await scrollend_promise; + } + assert_approx_equals(scroller.scrollTop, target_offset.y, 1, + `${msg} (vertical)`); + assert_approx_equals(scroller.scrollLeft, target_offset.x, 1, + `${msg} (horizontal)`); + } + + promise_test(async (t) => { + let scroller = document.getElementById("user_scroller"); + const msg = "user scroll is not overriden in by scroll-start-target"; + await test_scroll_start_target(t, scroller, msg, user_scroll); + }, "scroll-start-target does not override user scroll"); + + promise_test(async (t) => { + let scroller = document.getElementById("programmatic_scroller"); + const msg = "programmatic scroll is not overriden in by scroll-start-target"; + await test_scroll_start_target(t, scroller, msg, programmatic_scroll); + }, "scroll-start-target does not override programmatic scroll"); + </script> +</body>
\ No newline at end of file |