diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-scroll-snap-2/scroll-start | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-scroll-snap-2/scroll-start')
16 files changed, 1135 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-display-toggled.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-display-toggled.tentative.html new file mode 100644 index 0000000000..088c14128e --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-display-toggled.tentative.html @@ -0,0 +1,78 @@ +<!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> + #scroller { + height: 100px; + width: 100px; + scroll-start: 100px 200px; + border: solid 1px black; + overflow: scroll; + } + + .spacer { + width: 200vw; + height: 200vh; + border: solid 1px green; + } + </style> + <div id="scroller"> + <div class="spacer"></div> + </div> + <script> + async function assertScrollPositionResetOnDisplayNone(scroller) { + return new Promise((resolve) => { + if (getComputedStyle(scroller)["display"] == "none") { + assert_equals(scroller.scrollTop, 0, "scrollTop is reset"); + assert_equals(scroller.scrollLeft, 0, "scrollLeft is reset"); + resolve(); + } else { + requestAnimationFrame(async () => { + await assertScrollPositionResetOnDisplayNone(scroller); + resove(); + }); + } + }); + } + promise_test(async (t) => { + // This tests that toggling the display of a scroller from none to block + // scroll-start does not reset the scroller's scroll position. + assert_equals(scroller.scrollTop, 100, + "scroll-start: <length> sets initial vertical scroll position"); + assert_equals(scroller.scrollLeft, 200, + "scroll-start: <length> sets initial horizontal scroll position"); + + // Scroll to somewhere other than scroll-start position. + scroller.scrollTop = 200; + scroller.scrollLeft = 100; + assert_equals(scroller.scrollTop, 200, + "vertical scroll position is programmatically adjusted"); + assert_equals(scroller.scrollLeft, 100, + "horizontal scroll position is programmatically adjusted"); + + scroller.style.display = "none"; + assert_equals(getComputedStyle(scroller)["display"], "none"); + + await assertScrollPositionResetOnDisplayNone(scroller); + + scroller.style.display = "block"; + assert_equals(getComputedStyle(scroller)["display"], "block"); + + // Verify that we are again scrolled to the position specified by scroll-start. + assert_equals(scroller.scrollTop, 200, + "scroll-start is not applied vertically after display toggle"); + assert_equals(scroller.scrollLeft, 100, + "scroll-start is not applied horizontally after display toggle"); + }, "scroll-start does not interfer with recovering saved scroll position " + + "after display toggle"); + </script> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-fieldset.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-fieldset.tentative.html new file mode 100644 index 0000000000..9a0190506e --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-fieldset.tentative.html @@ -0,0 +1,149 @@ +<!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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-overflow-toggled.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-overflow-toggled.tentative.html new file mode 100644 index 0000000000..8829519024 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-overflow-toggled.tentative.html @@ -0,0 +1,67 @@ +<!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> + #scroller { + height: 100px; + width: 100px; + scroll-start: 100px 200px; + border: solid 1px black; + overflow: scroll; + } + + .spacer { + width: 200vw; + height: 200vh; + border: solid 1px green; + } + </style> + <div id="scroller"> + <div class="spacer"></div> + </div> + <script> + promise_test(async (t) => { + // This tests that toggling the overflow of a scroller from visible to + // scroll doesn't change the scroll position to scroll-start (since + // overflow:visible to overflow:scroll doesn't cause the scroller to be laid + // out again.) + assert_equals(scroller.scrollTop, 100, + "scroll-start: <length> sets initial vertical scroll position"); + assert_equals(scroller.scrollLeft, 200, + "scroll-start: <length> sets initial horizontal scroll position"); + + // Scroll to somewhere other than scroll-start position. + scroller.scrollTop = 200; + scroller.scrollLeft = 100; + // Allow for an animation frame that might be needed for the update to take + // place. + await requestAnimationFrame(() => { }); + assert_equals(scroller.scrollTop, 200, + "vertical scroll position is programmatically adjusted"); + assert_equals(scroller.scrollLeft, 100, + "horizontal scroll position is programmatically adjusted"); + + scroller.style.overflow = "visible"; + assert_equals(getComputedStyle(scroller)["overflow"], "visible"); + scroller.style.overflow = "scroll"; + assert_equals(getComputedStyle(scroller)["overflow"], "scroll"); + + // Verify that the scroll position is not changed. + assert_equals(scroller.scrollTop, 200, + "scroll-start does not reset vertical scroll position on overflow " + + "toggle."); + assert_equals(scroller.scrollLeft, 100, + "scroll-start does not reset vertical scroll position on overflow " + + "toggle."); + }, "scroll-start sets scroller position if overflow is not visible"); + </script> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-root.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-root.tentative.html new file mode 100644 index 0000000000..a74a1131e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-root.tentative.html @@ -0,0 +1,33 @@ +<!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> + :root { + scroll-start: 10vh 200px; + } + + .spacer { + width: 200vw; + height: 200vh; + border: solid 1px green; + } + </style> + <div class="spacer"></div> + <script> + promise_test(async (t) => { + assert_equals(window.scrollX, 200, + "scroll-start: <length> sets initial scroll position"); + assert_equals(window.scrollY, 0.1 * window.innerHeight, + "scroll-start: <length> sets initial scroll position"); + }, "scroll-start sets the initial scroll position of the document"); + </script> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-vertical-lr.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-vertical-lr.tentative.html new file mode 100644 index 0000000000..7ed152fd9a --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-vertical-lr.tentative.html @@ -0,0 +1,133 @@ +<!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; + } + + .scroller { + width: 100px; + height: 100px; + border: solid 1px black; + overflow: scroll; + writing-mode: vertical-lr; + } + </style> + <div id="lengthscroller" class="scroller" style="scroll-start: 100px"> + <div class="spacer"></div> + </div> + <div id="percentscroller" class="scroller" style="scroll-start: 25%"> + <div class="spacer"></div> + </div> + <div id="calcscroller" class="scroller" style="scroll-start: calc(50px)"> + <div class="spacer"></div> + </div> + <div id="startscroller" class="scroller" style="scroll-start: start"> + <div class="spacer"></div> + </div> + <div id="centerscroller" class="scroller" style="scroll-start: center"> + <div class="spacer"></div> + </div> + <div id="endscroller" class="scroller" style="scroll-start: end"> + <div class="spacer"></div> + </div> + <div id="topscroller" class="scroller" style="scroll-start: 100px top"> + <div class="spacer"></div> + </div> + <div id="bottomscroller" class="scroller" style="scroll-start: 100px bottom"> + <div class="spacer"></div> + </div> + <div id="leftscroller" class="scroller" style="scroll-start: left 100px"> + <div class="spacer"></div> + </div> + <div id="rightscroller" class="scroller" style="scroll-start: right 100px"> + <div class="spacer"></div> + </div> + <div id="clampedscroller" class="scroller" style="scroll-start: 1000px 1000px"> + <div class="spacer"></div> + </div> + <script> + promise_test(async (t) => { + let length_scroller = document.getElementById("lengthscroller"); + assert_equals(length_scroller.scrollLeft, 100, + "scroll-start: <length> sets initial scroll position"); + + let percent_scroller = document.getElementById("percentscroller"); + const percent_scroll_left = 0.25 * (percent_scroller.scrollWidth - + percent_scroller.clientWidth); + assert_approx_equals(percent_scroller.scrollLeft, percent_scroll_left, 1, + "scroll-start: <percent> sets initial scroll position"); + + let calc_scroller = document.getElementById("calcscroller"); + assert_equals(calc_scroller.scrollLeft, 50, + "scroll-start: <calc> sets initial scroll position"); + + let start_scroller = document.getElementById("startscroller"); + assert_equals(start_scroller.scrollLeft, 0, + "scroll-start: start sets initial scroll position"); + + let center_scroller = document.getElementById("centerscroller"); + const center_scroll_top = 0.5 * (center_scroller.scrollHeight - + center_scroller.clientHeight); + assert_approx_equals(center_scroller.scrollLeft, center_scroll_top, 1, + "scroll-start: center sets initial scroll position"); + + let end_scroller = document.getElementById("endscroller"); + const end_scroll_top = end_scroller.scrollWidth - + end_scroller.clientWidth; + assert_equals(end_scroller.scrollLeft, end_scroll_top, + "scroll-start: end sets initial scroll position"); + + let top_scroller = document.getElementById("topscroller"); + assert_equals(top_scroller.scrollLeft, 100, + "scroll-start: top sets initial scroll position"); + assert_equals(top_scroller.scrollTop, 0, + "scroll-start: top sets initial scroll position"); + + let bottom_scroller = document.getElementById("bottomscroller"); + const bottom_scroll_top = bottom_scroller.scrollHeight - + bottom_scroller.clientHeight; + assert_equals(bottom_scroller.scrollLeft, 100, + "scroll-start: bottom sets initial scroll position"); + assert_equals(bottom_scroller.scrollTop, bottom_scroll_top, + "scroll-start: top sets initial scroll position"); + + let left_scroller = document.getElementById("leftscroller"); + assert_equals(left_scroller.scrollTop, 100, + "scroll-start: left sets initial scroll position"); + assert_equals(left_scroller.scrollLeft, 0, + "scroll-start: left sets initial scroll position"); + + let right_scroller = document.getElementById("rightscroller"); + const right_scroll_top = right_scroller.scrollWidth - + right_scroller.clientWidth; + assert_equals(right_scroller.scrollTop, 100, + "scroll-start: right sets initial scroll position"); + assert_equals(right_scroller.scrollLeft, right_scroll_top, + "scroll-start: right sets initial scroll position"); + + let clamped_scroller = document.getElementById("clampedscroller"); + const clamped_scroll_top = clamped_scroller.scrollWidth - + clamped_scroller.clientWidth; + const clamped_scroll_left = clamped_scroller.scrollHeight - + clamped_scroller.clientHeight; + assert_equals(clamped_scroller.scrollTop, clamped_scroll_top, + "scroll-start is clamped to max vertical scroll offset"); + assert_equals(clamped_scroller.scrollLeft, clamped_scroll_left, + "scroll-start is clamped to max horizontal scroll offset"); + }, "scroll-start sets initial scroll offset correctly in vertical " + + "writing modes"); + </script> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-anchor-navigation-inner-frame.html b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-anchor-navigation-inner-frame.html new file mode 100644 index 0000000000..c32bac913d --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-anchor-navigation-inner-frame.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + +<head> +</head> + +<body> + <style> + :root { + margin: 0px; + scroll-start: 100px; + } + + #spacer { + height: 100vh; + width: 100vw; + } + + #scroll_start_target { + width: 100px; + height: 100px; + background-color: blue; + } + + #anchor_target { + width: 100px; + height: 100px; + background-color: red; + } + </style> + <a id="anchor_target_link" href="#anchor_target"></a> + <div id="spacer"></div> + <div id="scroll_start_target"></div> + <div id="anchor_target"> + </div> +</body> + +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-anchor-navigation.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-anchor-navigation.tentative.html new file mode 100644 index 0000000000..ff5c979391 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-anchor-navigation.tentative.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title> CSS Scroll Snap 2 Test: scroll-start interaction with anchor navigation</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="/html/browsers/browsing-the-web/resources/helpers.js"></script> + <script src="/dom/events/scrolling/scroll_support.js"></script> +</head> + +<body> + <iframe id="frame" src="scroll-start-with-anchor-navigation-inner-frame.html" onload="runTest()"></iframe> + <script> + function runTest() { + promise_test(async (t) => { + let scroller = frame.contentDocument.scrollingElement; + // anchor_target is at the bottom of the frame so the frame should be + // fully scrolled down to bring it into view. + let anchor_target_scrolltop = scroller.scrollHeight - scroller.clientHeight; + let anchor_target_link = frame.contentDocument.getElementById("anchor_target_link"); + + // Expect scroll offset of 100px per scroll-start. + assert_equals(scroller.scrollTop, 100, + "scroll-start sets initial scroll offset"); + + // Scroll away from start position. + scroller.scrollTop = 200; + await waitForCompositorCommit(); + assert_equals(scroller.scrollTop, 200, + "scroll-start sets initial scroll offset"); + + anchor_target_link.click(); + await waitForHashchange(frame.contentWindow); + assert_equals(frame.contentWindow.location.hash, "#anchor_target", + "clicking anchor link navigates to target"); + + // Expect page to be fully scrolled as anchor_target is at the bottom of + // the document. + assert_equals(scroller.scrollTop, anchor_target_scrolltop, + "anchor navigation sets scroll offset"); + + frame.contentWindow.history.back(); + await waitForHashchange(frame.contentWindow); + assert_equals(frame.contentWindow.location.hash, ""); + + scroller = frame.contentDocument.scrollingElement; + assert_equals(scroller.scrollTop, 200, + "scroller returns to previous scroll position, not " + + "scroll-start"); + }, "scroll-start does not override anchor navigation."); + } + </script> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-fragment-navigation-inner-frame.html b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-fragment-navigation-inner-frame.html new file mode 100644 index 0000000000..736a26a5f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-fragment-navigation-inner-frame.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + +<head> +</head> + +<body> + <style> + :root { + margin: 0px; + scroll-start: 100px; + } + + #spacer { + height: 100vh; + width: 100vw; + } + + #box { + width: 100px; + height: 100px; + background-color: blue; + } + + #fragment_target { + width: 100px; + height: 100px; + background-color: red; + } + </style> + <div id="spacer"></div> + <div id="box"></div> + <div id="fragment_target"></div> +</body> + +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-fragment-navigation.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-fragment-navigation.tentative.html new file mode 100644 index 0000000000..6e7730b0dc --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-fragment-navigation.tentative.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title> CSS Scroll Snap 2 Test: scroll-start interaction with fragment-navigation</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> + <iframe id="frame" src="scroll-start-with-fragment-navigation-inner-frame.html#fragment_target" + onload="runTest()"></iframe> + <script> + function runTest() { + test((t) => { + let scroller = frame.contentDocument.scrollingElement; + // fragment_target is at the bottom of the frame so the frame should be + // fully scrolled down to bring it into view. + let expected_scroll_top = scroller.scrollHeight - scroller.clientHeight; + + assert_equals(frame.contentWindow.location.hash, "#fragment_target"); + assert_not_equals(100, expected_scroll_top); + assert_equals(frame.contentDocument.scrollingElement.scrollTop, + expected_scroll_top); + }, "scroll-start does not override hash fragment navigation"); + } + </script> +</body>
\ No newline at end of file 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 diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-scroll-snap.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-scroll-snap.tentative.html new file mode 100644 index 0000000000..8bdac300ba --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-scroll-snap.tentative.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title> CSS Scroll Snap 2 Test: scroll-start interaction with scroll-snap</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> + body { + margin: 0px; + } + + .spacer { + height: 200px; + width: 100px; + } + + .scroller { + height: 220px; + width: 100px; + overflow: scroll; + scroll-snap-type: both mandatory; + } + + #single_snap_scroller { + scroll-start: 100%; + } + #multi_snap_scroller { + scroll-start: 350px; + } + + .snap_point { + width: 100px; + height: 200px; + scroll-snap-align: start; + } + </style> + <div id="single_snap_scroller" class="scroller"> + <div id="top_spacer" class="spacer"></div> + <div id="lone_snap_point" class="snap_point"></div> + <div id="bottom_spacer" class="spacer"></div> + </div> + <div id="multi_snap_scroller" class="scroller"> + <div id="snap_point_1" class="snap_point"></div> + <div id="snap_point_2" class="snap_point"></div> + <div id="snap_point_3" class="snap_point"></div> + </div> + <script> + test((t) => { + assert_equals(single_snap_scroller.scrollTop, + top_spacer.getBoundingClientRect().height, + "scroller snaps to top of snap point"); + }, "snap overrides scroll-start position"); + + test((t) => { + // scroll-start sets the initial scroll offset to 350px which is closer to + // the third snap point than the second, so the scroller should snap to + // the third snap_point. + assert_equals(multi_snap_scroller.scrollTop, + multi_snap_scroller.scrollHeight - multi_snap_scroller.clientHeight, + "scroller snaps to snap point closer to start position."); + }, "scroller snaps based on scroll-start position"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-text-fragment-navigation-target.html b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-text-fragment-navigation-target.html new file mode 100644 index 0000000000..5537d47fb5 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-text-fragment-navigation-target.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html> + +<head> +</head> + +<body> + <div id="spacer"></div> + <div id="box"></div> + <div id="text_fragment_target"> + <p>Target</p> + </div> + <style> + :root { + margin: 0px; + scroll-start: 100px; + } + + #spacer { + height: 100vh; + width: 100vw; + } + + #box { + width: 100px; + height: 100px; + background-color: blue; + } + + #fragment_target { + width: 100px; + height: 100px; + background-color: red; + } + </style> + <script> + function stashResult(key, results) { + fetch(`/css/css-scroll-snap-2/scroll-start/stash.py?key=${key}`, { + method: "POST", + body: JSON.stringify(results) + }).then(() => { + window.close(); + }); + } + function record() { + let scroll_position = "UNKNOWN"; + // Expect page is scrolled all the way down as the text is at the bottom of + // the page. + const expected_scroll_top = document.scrollingElement.scrollHeight - + document.scrollingElement.clientHeight; + + if (document.scrollingElement.scrollTop == 100) { + scroll_position = "AT_SCROLL_START"; + } else if (document.scrollingElement.scrollTop == expected_scroll_top) { + scroll_position = "AT_TEXT_FRAGMENT"; + } + + const result = { + scroll_position: scroll_position + }; + + let key = (new URL(document.location)).searchParams.get("key"); + stashResult(key, result); + } + + window.onload = () => { + window.requestAnimationFrame(function () { + window.requestAnimationFrame(record); + }) + } + </script> +</body> + +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-text-fragment-navigation.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-text-fragment-navigation.tentative.html new file mode 100644 index 0000000000..7348c39501 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-text-fragment-navigation.tentative.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title> CSS Scroll Snap 2 Test: scroll-start interaction with text-fragment navigation</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> + <script src="/common/utils.js"></script> +</head> + +<body onload="runTest()"> + <script> + function fetchResult(key, resolve, reject) { + fetch(`/css/css-scroll-snap-2/scroll-start/stash.py?key=${key}`).then(response => { + return response.text(); + }).then(text => { + if (text) { + try { + let result = JSON.parse(text); + resolve(result); + } catch (e) { + reject(); + } + } else { + fetchResult(key, resolve, reject); + } + }); + } + + function runTest() { + promise_test(t => new Promise(async (resolve, reject) => { + let key = token(); + + test_driver.bless("Open a URL with a text fragment directive", () => { + window.open(`scroll-start-with-text-fragment-navigation-target.html?key=${key}#:~:text=Target`, "_blank", "noopener"); + }); + + fetchResult(key, resolve, reject); + }).then(result => { + assert_equals(result.scroll_position, "AT_TEXT_FRAGMENT"); + }), "scroll-start doesn't override text fragment navigation"); + } + </script> +</body> diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-user-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-user-scroll.tentative.html new file mode 100644 index 0000000000..c122a6ef09 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start-with-user-scroll.tentative.html @@ -0,0 +1,91 @@ +<!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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start.tentative.html new file mode 100644 index 0000000000..a35c612d7f --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/scroll-start.tentative.html @@ -0,0 +1,122 @@ +<!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; + } + + .scroller { + width: 100px; + height: 100px; + border: solid 1px black; + overflow: scroll; + } + </style> + <div id="lengthscroller" class="scroller" style="scroll-start: 100px"> + <div class="spacer"></div> + </div> + <div id="percentscroller" class="scroller" style="scroll-start: 25%"> + <div class="spacer"></div> + </div> + <div id="calcscroller" class="scroller" style="scroll-start: calc(50px)"> + <div class="spacer"></div> + </div> + <div id="startscroller" class="scroller" style="scroll-start: start"> + <div class="spacer"></div> + </div> + <div id="centerscroller" class="scroller" style="scroll-start: center"> + <div class="spacer"></div> + </div> + <div id="endscroller" class="scroller" style="scroll-start: end"> + <div class="spacer"></div> + </div> + <div id="topscroller" class="scroller" style="scroll-start: top"> + <div class="spacer"></div> + </div> + <div id="bottomscroller" class="scroller" style="scroll-start: bottom"> + <div class="spacer"></div> + </div> + <div id="leftscroller" class="scroller" style="scroll-start: auto left"> + <div class="spacer"></div> + </div> + <div id="rightscroller" class="scroller" style="scroll-start: auto right"> + <div class="spacer"></div> + </div> + <div id="clampedscroller" class="scroller" style="scroll-start: 1000px 1000px"> + <div class="spacer"></div> + </div> + <script>promise_test(async (t) => { + let length_scroller = document.getElementById("lengthscroller"); + assert_equals(length_scroller.scrollTop, 100, + "scroll-start: <length> sets initial scroll position"); + + let percent_scroller = document.getElementById("percentscroller"); + const percent_scroll_top = 0.25 * (percent_scroller.scrollHeight - + percent_scroller.clientHeight); + assert_approx_equals(percent_scroller.scrollTop, percent_scroll_top, 1, + "scroll-start: <percent> sets initial scroll position"); + + let calc_scroller = document.getElementById("calcscroller"); + assert_equals(calc_scroller.scrollTop, 50, + "scroll-start: <calc> sets initial scroll position"); + + let start_scroller = document.getElementById("startscroller"); + assert_equals(start_scroller.scrollTop, 0, + "scroll-start: start sets initial scroll position"); + + let center_scroller = document.getElementById("centerscroller"); + const center_scroll_top = 0.5 * (center_scroller.scrollHeight - + center_scroller.clientHeight); + assert_approx_equals(center_scroller.scrollTop, center_scroll_top, 1, + "scroll-start: center sets initial scroll position"); + + let end_scroller = document.getElementById("endscroller"); + const end_scroll_top = end_scroller.scrollHeight - + end_scroller.clientHeight; + assert_equals(end_scroller.scrollTop, end_scroll_top, + "scroll-start: end sets initial scroll position"); + + let top_scroller = document.getElementById("topscroller"); + assert_equals(top_scroller.scrollTop, 0, + "scroll-start: top sets initial scroll position"); + + let bottom_scroller = document.getElementById("bottomscroller"); + const bottom_scroll_top = bottom_scroller.scrollHeight - + bottom_scroller.clientHeight; + assert_equals(bottom_scroller.scrollTop, bottom_scroll_top, + "scroll-start: bottom sets initial scroll position"); + + let left_scroller = document.getElementById("leftscroller"); + assert_equals(left_scroller.scrollLeft, 0, + "scroll-start: left sets initial scroll position"); + + let right_scroller = document.getElementById("rightscroller"); + const right_scroll_top = right_scroller.scrollWidth - + right_scroller.clientWidth; + assert_equals(right_scroller.scrollLeft, right_scroll_top, + "scroll-start: right sets initial scroll position"); + + let clamped_scroller = document.getElementById("clampedscroller"); + const clamped_scroll_top = clamped_scroller.scrollHeight - + clamped_scroller.clientHeight; + const clamped_scroll_left = clamped_scroller.scrollWidth - + clamped_scroller.clientWidth; + assert_equals(clamped_scroller.scrollTop, clamped_scroll_top, + "scroll-start is clamped to max vertical scroll offset"); + assert_equals(clamped_scroller.scrollLeft, clamped_scroll_left, + "scroll-start is clamped to max horizontal scroll offset"); + }); + </script> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/stash.py b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/stash.py new file mode 100644 index 0000000000..13bb0e91ba --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap-2/scroll-start/stash.py @@ -0,0 +1,27 @@ +# Copyright 2023 The Chromium Authors +# Use of this source code is governed by a BSD-style license that can be +# found in the LICENSE file. +""" +This file allows the different windows created by +css/css-scroll-snap-2/scroll-start/scroll-start-with-text-fragment-navigation.html +to store and retrieve data. + +scroll-start-with-text-fragment-navigation.html (test file) opens a window to +scroll-start-with-text-fragment-navigation-target.html which writes some data +which the test file will eventually read. This file handles the requests from +both windows. +""" + +import time + +def main(request, response): + key = request.GET.first(b"key") + + if request.method == u"POST": + # Received result data from target page + request.server.stash.put(key, request.body, u'/css/css-scroll-snap-2/scroll-start') + return u"ok" + else: + # Request for result data from test page + value = request.server.stash.take(key, u'/css/css-scroll-snap-2/scroll-start') + return value |