| <!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> |
| <style> |
| .spacer { |
| width: 500px; |
| height: 500px; |
| border: solid 1px green; |
| } |
| |
| legend { |
| background-color: #000; |
| color: #fff; |
| padding: 0px 0px; |
| } |
| |
| input { |
| margin: 0rem; |
| } |
| |
| .scroller { |
| width: 100px; |
| height: 100px; |
| border: solid 1px black; |
| overflow: scroll; |
| padding-block-start: 0px; |
| padding-block-end: 0px; |
| } |
| </style> |
| <fieldset id="scroller" class="scroller"> |
| <div class="spacer"></div> |
| </fieldset> |
| <script> |
| let scroller = document.getElementById("scroller"); |
| // fieldsets' clientHeight and scrollHeight can be affected by the presence of |
| // a scrollbar which has been anecdotally measured to be 15 on several |
| // platforms. |
| const scrollbar_width = 15; |
| const max_vertical_scroll_offset = scroller.scrollHeight - |
| scroller.clientHeight; |
| // The fieldset's width is set based on the size of its contents: |
| // https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element |
| // "For the purpose of calculating the min-content inline size, use the |
| // greater of the min-content inline size of the rendered legend and the |
| // min-content inline size of the anonymous fieldset content box." |
| // So only bother checking vertical scrolling as the adjusted width might |
| // not permit horizontal scrolling. |
| let test_cases = [ |
| { |
| scroll_start: "100px 200px", |
| expectation: { |
| scrollTop: 100, |
| msg: "scroll-start: <length> sets initial scroll position", |
| } |
| }, |
| { |
| scroll_start: "25% 75%", |
| expectation: { |
| scrollTop: 0.25 * max_vertical_scroll_offset, |
| msg: "scroll-start: <percent> sets initial scroll position", |
| } |
| }, |
| { |
| scroll_start: "calc(50px) calc(75px)", |
| expectation: { |
| scrollTop: 50, |
| msg: "scroll-start: <calc> sets initial scroll position", |
| } |
| }, |
| { |
| scroll_start: "start", |
| expectation: { |
| scrollTop: 0, |
| msg: "scroll-start: start sets initial scroll position", |
| } |
| }, |
| { |
| scroll_start: "center center", |
| expectation: { |
| scrollTop: 0.5 * max_vertical_scroll_offset, |
| msg: "scroll-start: center sets initial scroll position", |
| } |
| }, |
| { |
| scroll_start: "end end", |
| expectation: { |
| scrollTop: max_vertical_scroll_offset, |
| msg: "scroll-start: end sets initial scroll position", |
| } |
| }, |
| { |
| scroll_start: "top top", |
| expectation: { |
| scrollTop: 0, |
| msg: "scroll-start: top sets initial scroll position", |
| } |
| }, |
| { |
| scroll_start: "bottom bottom", |
| expectation: { |
| scrollTop: max_vertical_scroll_offset, |
| msg: "scroll-start: bottom sets initial scroll position", |
| } |
| }, |
| { |
| scroll_start: "1000px 2000px", |
| expectation: { |
| scrollTop: max_vertical_scroll_offset, |
| msg: "scroll-start is clamped", |
| } |
| } |
| ]; |
| |
| async function resetScroller(scroll_start) { |
| scroller.style.display = "none"; |
| assert_equals(getComputedStyle(scroller)["display"], "none"); |
| |
| scroller.style["scroll-start"] = scroll_start; |
| |
| scroller.style.display = "block"; |
| assert_equals(getComputedStyle(scroller)["display"], "block"); |
| assert_equals(scroller.style.scrollStart, scroll_start); |
| } |
| |
| async function test_scroll_start(scroll_start, expectation) { |
| await resetScroller(scroll_start); |
| |
| assert_approx_equals(scroller.scrollTop, expectation.scrollTop, |
| scrollbar_width, expectation.msg); |
| } |
| |
| |
| promise_test(async () => { |
| for (let test_case of test_cases) { |
| await test_scroll_start(test_case.scroll_start, |
| test_case.expectation); |
| } |
| }, "scroll-start sets default position of fieldset element"); |
| </script> |
| </body> |
