<!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>
Codebase Browser
chromium