78 lines
No EOL
2.6 KiB
HTML
78 lines
No EOL
2.6 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>
|
|
<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> |