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
122 lines
No EOL
4.7 KiB
HTML
122 lines
No EOL
4.7 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>
|
|
.spacer {
|
|
width: 500px;
|
|
height: 500px;
|
|
border: solid 1px green;
|
|
}
|
|
|
|
.scroller {
|
|
width: 100px;
|
|
height: 100px;
|
|
border: solid 1px black;
|
|
overflow: scroll;
|
|
}
|
|
</style>
|
|
<div id="lengthscroller" class="scroller" style="scroll-start: 100px">
|
|
<div class="spacer"></div>
|
|
</div>
|
|
<div id="percentscroller" class="scroller" style="scroll-start: 25%">
|
|
<div class="spacer"></div>
|
|
</div>
|
|
<div id="calcscroller" class="scroller" style="scroll-start: calc(50px)">
|
|
<div class="spacer"></div>
|
|
</div>
|
|
<div id="startscroller" class="scroller" style="scroll-start: start">
|
|
<div class="spacer"></div>
|
|
</div>
|
|
<div id="centerscroller" class="scroller" style="scroll-start: center">
|
|
<div class="spacer"></div>
|
|
</div>
|
|
<div id="endscroller" class="scroller" style="scroll-start: end">
|
|
<div class="spacer"></div>
|
|
</div>
|
|
<div id="topscroller" class="scroller" style="scroll-start: top">
|
|
<div class="spacer"></div>
|
|
</div>
|
|
<div id="bottomscroller" class="scroller" style="scroll-start: bottom">
|
|
<div class="spacer"></div>
|
|
</div>
|
|
<div id="leftscroller" class="scroller" style="scroll-start: auto left">
|
|
<div class="spacer"></div>
|
|
</div>
|
|
<div id="rightscroller" class="scroller" style="scroll-start: auto right">
|
|
<div class="spacer"></div>
|
|
</div>
|
|
<div id="clampedscroller" class="scroller" style="scroll-start: 1000px 1000px">
|
|
<div class="spacer"></div>
|
|
</div>
|
|
<script>promise_test(async (t) => {
|
|
let length_scroller = document.getElementById("lengthscroller");
|
|
assert_equals(length_scroller.scrollTop, 100,
|
|
"scroll-start: <length> sets initial scroll position");
|
|
|
|
let percent_scroller = document.getElementById("percentscroller");
|
|
const percent_scroll_top = 0.25 * (percent_scroller.scrollHeight -
|
|
percent_scroller.clientHeight);
|
|
assert_approx_equals(percent_scroller.scrollTop, percent_scroll_top, 1,
|
|
"scroll-start: <percent> sets initial scroll position");
|
|
|
|
let calc_scroller = document.getElementById("calcscroller");
|
|
assert_equals(calc_scroller.scrollTop, 50,
|
|
"scroll-start: <calc> sets initial scroll position");
|
|
|
|
let start_scroller = document.getElementById("startscroller");
|
|
assert_equals(start_scroller.scrollTop, 0,
|
|
"scroll-start: start sets initial scroll position");
|
|
|
|
let center_scroller = document.getElementById("centerscroller");
|
|
const center_scroll_top = 0.5 * (center_scroller.scrollHeight -
|
|
center_scroller.clientHeight);
|
|
assert_approx_equals(center_scroller.scrollTop, center_scroll_top, 1,
|
|
"scroll-start: center sets initial scroll position");
|
|
|
|
let end_scroller = document.getElementById("endscroller");
|
|
const end_scroll_top = end_scroller.scrollHeight -
|
|
end_scroller.clientHeight;
|
|
assert_equals(end_scroller.scrollTop, end_scroll_top,
|
|
"scroll-start: end sets initial scroll position");
|
|
|
|
let top_scroller = document.getElementById("topscroller");
|
|
assert_equals(top_scroller.scrollTop, 0,
|
|
"scroll-start: top sets initial scroll position");
|
|
|
|
let bottom_scroller = document.getElementById("bottomscroller");
|
|
const bottom_scroll_top = bottom_scroller.scrollHeight -
|
|
bottom_scroller.clientHeight;
|
|
assert_equals(bottom_scroller.scrollTop, bottom_scroll_top,
|
|
"scroll-start: bottom sets initial scroll position");
|
|
|
|
let left_scroller = document.getElementById("leftscroller");
|
|
assert_equals(left_scroller.scrollLeft, 0,
|
|
"scroll-start: left sets initial scroll position");
|
|
|
|
let right_scroller = document.getElementById("rightscroller");
|
|
const right_scroll_top = right_scroller.scrollWidth -
|
|
right_scroller.clientWidth;
|
|
assert_equals(right_scroller.scrollLeft, right_scroll_top,
|
|
"scroll-start: right sets initial scroll position");
|
|
|
|
let clamped_scroller = document.getElementById("clampedscroller");
|
|
const clamped_scroll_top = clamped_scroller.scrollHeight -
|
|
clamped_scroller.clientHeight;
|
|
const clamped_scroll_left = clamped_scroller.scrollWidth -
|
|
clamped_scroller.clientWidth;
|
|
assert_equals(clamped_scroller.scrollTop, clamped_scroll_top,
|
|
"scroll-start is clamped to max vertical scroll offset");
|
|
assert_equals(clamped_scroller.scrollLeft, clamped_scroll_left,
|
|
"scroll-start is clamped to max horizontal scroll offset");
|
|
});
|
|
</script>
|
|
</body> |