| <!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> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| <script src="/resources/testdriver-vendor.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> |
| <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 user scroll. |
| const target_scroll_delta = 100; |
| const target_scroll_top = scroll_start_top + target_scroll_delta; |
| const target_scroll_left = scroll_start_left + target_scroll_delta; |
| |
| 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 user scroll should result in an actual scroll. |
| assert_not_equals(target_scroll_top, scroll_start_top, |
| "user scroll should not be nop vertically"); |
| assert_not_equals(target_scroll_left, scroll_start_left, |
| "user scroll should not be nop horizontally"); |
| |
| let scrollend_promise = new Promise((resolve) => { |
| scroller.onscrollend = () => { resolve(); } |
| }); |
| await new test_driver.Actions().scroll(0, 0, |
| target_scroll_delta, |
| target_scroll_delta, |
| { origin: scroller }).send(); |
| |
| await scrollend_promise; |
| assert_equals(scroller.scrollTop, target_scroll_top, |
| "user scroll succeeds vertically"); |
| assert_equals(scroller.scrollLeft, target_scroll_left, |
| "user 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 user scroll does not apply scroll-start " + |
| "vertically"); |
| assert_equals(scroller.scrollLeft, target_scroll_left, |
| "layout change after user scroll does not apply scroll-start " + |
| "horizontally"); |
| }, "scroll-start is not applied after user a scroll"); |
| } |
| </script> |
| <div id="scroller"> |
| <div class="spacer" id="spacer"></div> |
| </div> |
| </body> |
