forked from mirrors/gecko-dev
3fe665217d
Automatic update from web-platform-tests [css-scroll-snap-2] Rename scroll-start tests with 'tentative' Also, scroll-start-with-text-fragment-navigation.html is adjusted to the new scroll-start directory added in crrev.com/c/4628128. Bug: 1439807 Change-Id: Idfa8b0dd447bb621d0261780e3b6b93b9f952e82 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4629866 Reviewed-by: Robert Flack <flackr@chromium.org> Commit-Queue: David Awogbemila <awogbemila@chromium.org> Cr-Commit-Position: refs/heads/main@{#1161712} -- wpt-commits: 9f1dfeb0175b413db001ca619b0711efeada930b wpt-pr: 40656
82 lines
No EOL
3 KiB
HTML
82 lines
No EOL
3 KiB
HTML
<!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> |