91 lines
No EOL
3.3 KiB
HTML
91 lines
No EOL
3.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>
|
|
<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> |