commit c7fab23dcfbed628d5f55c08b300e9963b69f600 parent 4396c4f9a46bf379977d215a86135358d09cdfca Author: David Awogbemila <awogbemila@chromium.org> Date: Mon, 17 Nov 2025 21:50:07 +0000 Bug 2000517 [wpt PR 56042] - Remove scroll-start, a=testonly Automatic update from web-platform-tests Remove scroll-start The CSS working group opted[1] not to adopt scroll-start and we don't have plans to continue the feature. [1] https://github.com/w3c/csswg-drafts/issues/6985#issuecomment-2166073296 Bug: 40909052 Change-Id: I6f971b7350735773bf88240ace8b4273bef065ce Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7155568 Reviewed-by: David Awogbemila <awogbemila@chromium.org> Commit-Queue: David Awogbemila <awogbemila@chromium.org> Reviewed-by: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1545249} -- wpt-commits: b92b5b7948c66966715824ded44eae64dc5848bf wpt-pr: 56042 Diffstat:
20 files changed, 0 insertions(+), 1481 deletions(-)
diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-start/parsing/scroll-start-computed.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-start/parsing/scroll-start-computed.html @@ -1,140 +0,0 @@ -<!DOCTYPE html> -<html> - -<head> - <meta charset="utf-8"> - <title> CSS Scroll Snap 2 Test: scroll-start-* computed values</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="/css/support/computed-testcommon.js"></script> -</head> - -<body> - <div id="target"></div> - <script> - test_computed_value("scroll-start", "start"); - test_computed_value("scroll-start", "start start", "start"); - test_computed_value("scroll-start", "100px"); - test_computed_value("scroll-start", "50%"); - test_computed_value("scroll-start", "center"); - test_computed_value("scroll-start", "100px 200px"); - test_computed_value("scroll-start", "50% 100px"); - test_computed_value("scroll-start", "start 50%"); - test_computed_value("scroll-start", "center start", "center"); - test_computed_value("scroll-start", "end center"); - test_computed_value("scroll-start", "top end"); - test_computed_value("scroll-start", "bottom top"); - test_computed_value("scroll-start", "left bottom"); - test_computed_value("scroll-start", "right left"); - test_computed_value("scroll-start", "auto right"); - test_computed_value("scroll-start", "calc(1px)", "1px") - test_computed_value("scroll-start", "calc(1px) start", "1px") - - test_computed_value("scroll-start-block", "100px"); - test_computed_value("scroll-start-block", "50%"); - test_computed_value("scroll-start-block", "start"); - test_computed_value("scroll-start-block", "center"); - test_computed_value("scroll-start-block", "end"); - test_computed_value("scroll-start-block", "top"); - test_computed_value("scroll-start-block", "bottom"); - test_computed_value("scroll-start-block", "left"); - test_computed_value("scroll-start-block", "right"); - test_computed_value("scroll-start-block", "auto"); - test_computed_value("scroll-start-block", "calc(-1px)", "0px"); - - test_computed_value("scroll-start-inline", "100px"); - test_computed_value("scroll-start-inline", "50%"); - test_computed_value("scroll-start-inline", "start"); - test_computed_value("scroll-start-inline", "center"); - test_computed_value("scroll-start-inline", "end"); - test_computed_value("scroll-start-inline", "top"); - test_computed_value("scroll-start-inline", "bottom"); - test_computed_value("scroll-start-inline", "left"); - test_computed_value("scroll-start-inline", "right"); - test_computed_value("scroll-start-inline", "auto"); - test_computed_value("scroll-start-inline", "calc(-1px)", "0px"); - - test_computed_value("scroll-start-x", "100px"); - test_computed_value("scroll-start-x", "50%"); - test_computed_value("scroll-start-x", "start"); - test_computed_value("scroll-start-x", "center"); - test_computed_value("scroll-start-x", "end"); - test_computed_value("scroll-start-x", "top"); - test_computed_value("scroll-start-x", "bottom"); - test_computed_value("scroll-start-x", "left"); - test_computed_value("scroll-start-x", "right"); - test_computed_value("scroll-start-x", "auto"); - test_computed_value("scroll-start-x", "calc(-1px)", "0px"); - - test_computed_value("scroll-start-y", "100px"); - test_computed_value("scroll-start-y", "50%"); - test_computed_value("scroll-start-y", "start"); - test_computed_value("scroll-start-y", "center"); - test_computed_value("scroll-start-y", "end"); - test_computed_value("scroll-start-y", "top"); - test_computed_value("scroll-start-y", "bottom"); - test_computed_value("scroll-start-y", "left"); - test_computed_value("scroll-start-y", "right"); - test_computed_value("scroll-start-y", "auto"); - test_computed_value("scroll-start-y", "calc(-1px)", "0px"); - - target.style = ""; - - // Test logical-physical mapping. - test((t) => { - t.add_cleanup(() => { target.style = ""; }); - target.style.scrollStartBlock = "100px"; - assert_equals(getComputedStyle(target).scrollStartX, "auto"); - assert_equals(getComputedStyle(target).scrollStartY, "100px"); - }, "scroll-start-block maps to scroll-start-y in horizontal writing mode."); - test((t) => { - t.add_cleanup(() => { target.style = ""; }); - target.style.scrollStartInline = "200px"; - assert_equals(getComputedStyle(target).scrollStartX, "200px"); - assert_equals(getComputedStyle(target).scrollStartY, "auto"); - }, "scroll-start-inline maps to scroll-start-x in horizontal writing mode."); - test((t) => { - t.add_cleanup(() => { target.style = ""; }); - target.style.scrollStartX = "100px"; - assert_equals(getComputedStyle(target).scrollStartBlock, "auto"); - assert_equals(getComputedStyle(target).scrollStartInline, "100px"); - }, "scroll-start-x maps to scroll-start-inline in horizontal writing mode."); - test((t) => { - t.add_cleanup(() => { target.style = ""; }); - target.style.scrollStartY = "200px"; - assert_equals(getComputedStyle(target).scrollStartBlock, "200px"); - assert_equals(getComputedStyle(target).scrollStartInline, "auto"); - }, "scroll-start-y maps to scroll-start-block in horizontal writing mode."); - test((t) => { - t.add_cleanup(() => { target.style = ""; }); - target.style.scrollStartBlock = "100px"; - target.style.writingMode = "vertical-lr"; - assert_equals(getComputedStyle(target).scrollStartX, "100px"); - assert_equals(getComputedStyle(target).scrollStartY, "auto"); - }, "scroll-start-block maps to scroll-start-x in vertical writing mode."); - test((t) => { - t.add_cleanup(() => { target.style = ""; }); - target.style.scrollStartInline = "200px"; - target.style.writingMode = "vertical-lr"; - assert_equals(getComputedStyle(target).scrollStartX, "auto"); - assert_equals(getComputedStyle(target).scrollStartY, "200px"); - }, "scroll-start-inline maps to scroll-start-y in vertical writing mode."); - test((t) => { - t.add_cleanup(() => { target.style = ""; }); - target.style.scrollStartX = "100px"; - target.style.writingMode = "vertical-lr"; - assert_equals(getComputedStyle(target).scrollStartBlock, "100px"); - assert_equals(getComputedStyle(target).scrollStartInline, "auto"); - }, "scroll-start-x maps to scroll-start-block in vertical writing mode."); - test((t) => { - t.add_cleanup(() => { target.style = ""; }); - target.style.scrollStartY = "200px"; - target.style.writingMode = "vertical-lr"; - assert_equals(getComputedStyle(target).scrollStartBlock, "auto"); - assert_equals(getComputedStyle(target).scrollStartInline, "200px"); - }, "scroll-start-y maps to scroll-start-inline in vertical writing mode."); - </script> -</body> - -</html> -\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-start/parsing/scroll-start-invalid.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-start/parsing/scroll-start-invalid.html @@ -1,48 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <meta charset="utf-8"> - <title> CSS Scroll Snap 2 Test: scroll-start-block with invalid values</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="/css/support/parsing-testcommon.js"></script> -</head> -<body> - <script> - test_invalid_value("scroll-start", "-100px"); - test_invalid_value("scroll-start", "-50%"); - test_invalid_value("scroll-start", "invalid_keyword"); - test_invalid_value("scroll-start", "-100px -50%"); - test_invalid_value("scroll-start", "-50% invalid_keyword"); - test_invalid_value("scroll-start", "invalid_keyword invalid_keyword"); - test_invalid_value("scroll-start", "-100px - 100px"); - test_invalid_value("scroll-start", "-50% -100px"); - test_invalid_value("scroll-start", "invalid_keyword -50%"); - test_invalid_value("scroll-start", "-100px invalid_keyword"); - test_invalid_value("scroll-start", "-50% -50%"); - test_invalid_value("scroll-start", "invalid_keyword -100px"); - test_invalid_value("scroll-start", "100px 200px 300px"); - - test_invalid_value("scroll-start-block", "-100px"); - test_invalid_value("scroll-start-block", "-50%"); - test_invalid_value("scroll-start-block", "invalid_keyword"); - test_invalid_value("scroll-start-block", "100px 200px"); - - test_invalid_value("scroll-start-inline", "-100px"); - test_invalid_value("scroll-start-inline", "-50%"); - test_invalid_value("scroll-start-inline", "invalid_keyword"); - test_invalid_value("scroll-start-inline", "100px 200px"); - - test_invalid_value("scroll-start-x", "-100px"); - test_invalid_value("scroll-start-x", "-50%"); - test_invalid_value("scroll-start-x", "invalid_keyword"); - test_invalid_value("scroll-start-x", "100px 200px"); - - test_invalid_value("scroll-start-y", "-100px"); - test_invalid_value("scroll-start-y", "-50%"); - test_invalid_value("scroll-start-y", "invalid_keyword"); - test_invalid_value("scroll-start-y", "100px 200px"); - </script> -</body> -</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-start/parsing/scroll-start-shorthand.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-start/parsing/scroll-start-shorthand.html @@ -1,63 +0,0 @@ -<!DOCTYPE html> -<html> -<head> -<meta charset="utf-8"> -<title>CSS Scroll Snap 2 Test: scroll-start sets longhands</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="/css/support/shorthand-testcommon.js"></script> -</head> - -<body> - <script> - test_shorthand_value('scroll-start', '100px', { - 'scroll-start-block': '100px', - 'scroll-start-inline': 'start', - }); - test_shorthand_value('scroll-start', '50%', { - 'scroll-start-block': '50%', - 'scroll-start-inline': 'start', - }); - test_shorthand_value('scroll-start', 'center', { - 'scroll-start-block': 'center', - 'scroll-start-inline': 'start', - }); - test_shorthand_value('scroll-start', '100px 200px', { - 'scroll-start-block': '100px', - 'scroll-start-inline': '200px', - }); - test_shorthand_value('scroll-start', '100px 50%', { - 'scroll-start-block': '100px', - 'scroll-start-inline': '50%', - }); - test_shorthand_value('scroll-start', '100px center', { - 'scroll-start-block': '100px', - 'scroll-start-inline': 'center', - }); - test_shorthand_value('scroll-start', '50% 200px', { - 'scroll-start-block': '50%', - 'scroll-start-inline': '200px', - }); - test_shorthand_value('scroll-start', '50% 25%', { - 'scroll-start-block': '50%', - 'scroll-start-inline': '25%', - }); - test_shorthand_value('scroll-start', '50% center', { - 'scroll-start-block': '50%', - 'scroll-start-inline': 'center', - }); - test_shorthand_value('scroll-start', 'center 200px', { - 'scroll-start-block': 'center', - 'scroll-start-inline': '200px', - }); - test_shorthand_value('scroll-start', 'center 25%', { - 'scroll-start-block': 'center', - 'scroll-start-inline': '25%', - }); - test_shorthand_value('scroll-start', 'center end', { - 'scroll-start-block': 'center', - 'scroll-start-inline': 'end', - }); - </script> -</body> -\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-start/parsing/scroll-start-valid.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-start/parsing/scroll-start-valid.html @@ -1,81 +0,0 @@ -<!DOCTYPE html> -<html> - -<head> - <meta charset="utf-8"> - <title> CSS Scroll Snap 2 Test: scroll-start-block with valid values</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="/css/support/parsing-testcommon.js"></script> -</head> - -<body> - <script> - test_valid_value("scroll-start", "start"); - test_valid_value("scroll-start", "start start", "start"); - test_valid_value("scroll-start", "50%"); - test_valid_value("scroll-start", "center"); - test_valid_value("scroll-start", "100px 200px"); - test_valid_value("scroll-start", "50% 100px"); - test_valid_value("scroll-start", "start 50%"); - test_valid_value("scroll-start", "center start", "center"); - test_valid_value("scroll-start", "end center"); - test_valid_value("scroll-start", "top end"); - test_valid_value("scroll-start", "bottom top"); - test_valid_value("scroll-start", "left bottom"); - test_valid_value("scroll-start", "right left"); - test_valid_value("scroll-start", "auto right"); - test_valid_value("scroll-start", "calc(1px) auto"); - - test_valid_value("scroll-start-block", "100px"); - test_valid_value("scroll-start-block", "50%"); - test_valid_value("scroll-start-block", "start"); - test_valid_value("scroll-start-block", "center"); - test_valid_value("scroll-start-block", "end"); - test_valid_value("scroll-start-block", "top"); - test_valid_value("scroll-start-block", "bottom"); - test_valid_value("scroll-start-block", "left"); - test_valid_value("scroll-start-block", "right"); - test_valid_value("scroll-start-block", "auto"); - test_valid_value("scroll-start-block", "calc(-1px)"); - - test_valid_value("scroll-start-inline", "100px"); - test_valid_value("scroll-start-inline", "50%"); - test_valid_value("scroll-start-inline", "start"); - test_valid_value("scroll-start-inline", "center"); - test_valid_value("scroll-start-inline", "end"); - test_valid_value("scroll-start-inline", "top"); - test_valid_value("scroll-start-inline", "bottom"); - test_valid_value("scroll-start-inline", "left"); - test_valid_value("scroll-start-inline", "right"); - test_valid_value("scroll-start-inline", "auto"); - test_valid_value("scroll-start-inline", "calc(-1px)"); - - test_valid_value("scroll-start-x", "100px"); - test_valid_value("scroll-start-x", "50%"); - test_valid_value("scroll-start-x", "start"); - test_valid_value("scroll-start-x", "center"); - test_valid_value("scroll-start-x", "end"); - test_valid_value("scroll-start-x", "top"); - test_valid_value("scroll-start-x", "bottom"); - test_valid_value("scroll-start-x", "left"); - test_valid_value("scroll-start-x", "right"); - test_valid_value("scroll-start-x", "auto"); - test_valid_value("scroll-start-x", "calc(-1px)"); - - test_valid_value("scroll-start-y", "100px"); - test_valid_value("scroll-start-y", "50%"); - test_valid_value("scroll-start-y", "start"); - test_valid_value("scroll-start-y", "center"); - test_valid_value("scroll-start-y", "end"); - test_valid_value("scroll-start-y", "top"); - test_valid_value("scroll-start-y", "bottom"); - test_valid_value("scroll-start-y", "left"); - test_valid_value("scroll-start-y", "right"); - test_valid_value("scroll-start-y", "auto"); - test_valid_value("scroll-start-y", "calc(-1px)"); - </script> -</body> - -</html> -\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-start/scroll-start-display-toggled.tentative.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-start/scroll-start-display-toggled.tentative.html @@ -1,78 +0,0 @@ -<!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/scroll-start/scroll-start-fieldset.tentative.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-start/scroll-start-fieldset.tentative.html @@ -1,149 +0,0 @@ -<!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/scroll-start/scroll-start-overflow-toggled.tentative.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-start/scroll-start-overflow-toggled.tentative.html @@ -1,67 +0,0 @@ -<!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 new Promise(r => requestAnimationFrame(r)); - 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> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-start/scroll-start-root.tentative.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-start/scroll-start-root.tentative.html @@ -1,33 +0,0 @@ -<!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/scroll-start/scroll-start-vertical-lr.tentative.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-start/scroll-start-vertical-lr.tentative.html @@ -1,133 +0,0 @@ -<!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/scroll-start/scroll-start-with-anchor-navigation-inner-frame.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-start/scroll-start-with-anchor-navigation-inner-frame.html @@ -1,38 +0,0 @@ -<!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/scroll-start/scroll-start-with-anchor-navigation.tentative.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-start/scroll-start-with-anchor-navigation.tentative.html @@ -1,56 +0,0 @@ -<!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/scroll-start/scroll-start-with-fragment-navigation-inner-frame.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-start/scroll-start-with-fragment-navigation-inner-frame.html @@ -1,36 +0,0 @@ -<!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/scroll-start/scroll-start-with-fragment-navigation.tentative.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-start/scroll-start-with-fragment-navigation.tentative.html @@ -1,30 +0,0 @@ -<!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/scroll-start/scroll-start-with-programmatic-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-start/scroll-start-with-programmatic-scroll.tentative.html @@ -1,82 +0,0 @@ -<!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/scroll-start/scroll-start-with-scroll-snap.tentative.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-start/scroll-start-with-scroll-snap.tentative.html @@ -1,70 +0,0 @@ -<!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/scroll-start/scroll-start-with-text-fragment-navigation-target.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-start/scroll-start-with-text-fragment-navigation-target.html @@ -1,74 +0,0 @@ -<!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/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 < 1.0) { - 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> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-start/scroll-start-with-text-fragment-navigation.tentative.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-start/scroll-start-with-text-fragment-navigation.tentative.html @@ -1,49 +0,0 @@ -<!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/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/scroll-start/scroll-start-with-user-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-start/scroll-start-with-user-scroll.tentative.html @@ -1,91 +0,0 @@ -<!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/scroll-start/scroll-start.tentative.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-start/scroll-start.tentative.html @@ -1,122 +0,0 @@ -<!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/scroll-start/stash.py b/testing/web-platform/tests/css/css-scroll-snap/scroll-start/stash.py @@ -1,27 +0,0 @@ -# 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/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/scroll-start') - return u"ok" - else: - # Request for result data from test page - value = request.server.stash.take(key, u'/css/css-scroll-snap/scroll-start') - return value