Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-scroll-snap-2/scroll-start/scroll-start-with-programmatic-scroll.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS Scroll Snap 2 Test: scroll-start-*</title>
<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>