diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-programmatic-scroll.tentative.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-programmatic-scroll.tentative.html | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-programmatic-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-programmatic-scroll.tentative.html new file mode 100644 index 0000000000..c10746f854 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-programmatic-scroll.tentative.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title> CSS Scroll Snap 2 Test: scroll-start-*</title> + <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> +</head> + +<body onload="runTest()"> + <style> + #scroller { + height: 100px; + width: 100px; + overflow: scroll; + scroll-start: 10vh 200px; + } + + .spacer { + width: 200vw; + height: 200vh; + border: solid 1px green; + } + </style> + <div id="scroller"> + <div class="spacer" id="spacer"></div> + </div> + <script> + function runTest() { + // scroll position declared by scroll-start. + const scroll_start_top = 0.1 * window.innerHeight; + const scroll_start_left = 200; + + // target position of the programmatic scroll. + const target_scroll_top = 100; + const target_scroll_left = 100; + + promise_test(async (t) => { + // verify that we are starting from the offsets indicated by scroll start. + assert_equals(scroller.scrollTop, scroll_start_top, + "scroll-start: <length> sets initial scroll position vertically"); + assert_equals(scroller.scrollLeft, scroll_start_left, + "scroll-start: <length> sets initial scroll position horizontally"); + + // verify that the programmatic scroll should result in an actual scroll. + assert_not_equals(target_scroll_top, scroll_start_top, + "programmatic scroll should not be a nop vertically"); + assert_not_equals(target_scroll_left, scroll_start_left, + "programmatic scroll should not be a nop horizontally"); + + scroller.scrollTop = target_scroll_top; + scroller.scrollLeft = target_scroll_left; + // verify that programmtic scroll succeeded. + assert_equals(scroller.scrollTop, target_scroll_top, + "programmatic scroll succeeds vertically"); + assert_equals(scroller.scrollLeft, target_scroll_left, + "programmatic scroll succeeds horizontally"); + + // Trigger a layout change. + scroller.style.height = "200px"; + scroller.style.width = "200px"; + let spacer = document.getElementById("spacer"); + spacer.style.height = "300vh"; + spacer.style.width = "300vw"; + assert_equals(getComputedStyle(spacer)["height"], + `${3 * window.innerHeight}px`); + assert_equals(getComputedStyle(spacer)["width"], + `${3 * window.innerWidth}px`); + + // Verify that the layout change did not affect the scroll position. + assert_equals(scroller.scrollTop, target_scroll_top, + "layout change after programmatic scroll doesn't apply scroll-start " + + "vertically"); + assert_equals(scroller.scrollLeft, target_scroll_left, + "layout change after programmatic scroll doesn't apply scroll-start " + + "horizontally"); + }, "scroll-start is not applied after a programmatic scroll"); + } + </script> +</body>
\ No newline at end of file |