mirror of
https://github.com/servo/servo.git
synced 2025-07-01 04:23:39 +01:00
145 lines
No EOL
4.5 KiB
HTML
145 lines
No EOL
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1" />
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
body {
|
|
margin: 0px;
|
|
overflow: scroll;
|
|
scroll-snap-type: both mandatory;
|
|
}
|
|
.scroller {
|
|
overflow: scroll;
|
|
scroll-snap-type: both mandatory;
|
|
}
|
|
#div-scroller {
|
|
width: 800px;
|
|
height: 800px;
|
|
}
|
|
.content {
|
|
width: 2100px;
|
|
height: 2100px;
|
|
}
|
|
.target {
|
|
width: 1000px;
|
|
height: 1000px;
|
|
scroll-snap-align: start;
|
|
float: left;
|
|
}
|
|
</style>
|
|
|
|
<body class="scroller">
|
|
<div class="content" id="content">
|
|
<div class="target"></div>
|
|
<div class="target"></div>
|
|
<div class="target"></div>
|
|
<div class="target"></div>
|
|
</div>
|
|
|
|
<div class="scroller" id="div-scroller">
|
|
<div class="content">
|
|
<div class="target"></div>
|
|
<div class="target"></div>
|
|
<div class="target"></div>
|
|
<div class="target"></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
function format_dict(dict) {
|
|
const props = [];
|
|
for (let prop in dict) {
|
|
props.push(`${prop}: ${format_value(dict[prop])}`);
|
|
}
|
|
return `{${props.join(', ')}}`;
|
|
}
|
|
|
|
var divScroller = document.getElementById("div-scroller");
|
|
var viewport = document.scrollingElement;
|
|
[
|
|
[{left: 800}, 1000, 0],
|
|
[{top: 1200}, 0, 1000],
|
|
[{left: 1200, top: 800}, 1000, 1000]
|
|
].forEach(([input, expectedX, expectedY]) => {
|
|
test(() => {
|
|
divScroller.scrollTo(0, 0);
|
|
assert_equals(divScroller.scrollLeft, 0);
|
|
assert_equals(divScroller.scrollTop, 0);
|
|
if (input.left)
|
|
divScroller.scrollLeft = input.left;
|
|
if (input.top)
|
|
divScroller.scrollTop = input.top;
|
|
assert_equals(divScroller.scrollLeft, expectedX);
|
|
assert_equals(divScroller.scrollTop, expectedY);
|
|
}, `assign scrollLeft and scrollTop for ${format_dict(input)} on div lands on (${expectedX}, ${expectedY})`);
|
|
|
|
test(() => {
|
|
viewport.scrollTo(0, 0);
|
|
assert_equals(viewport.scrollLeft, 0);
|
|
assert_equals(viewport.scrollTop, 0);
|
|
if (input.left)
|
|
viewport.scrollLeft = input.left;
|
|
if (input.top)
|
|
viewport.scrollTop = input.top;
|
|
assert_equals(viewport.scrollLeft, expectedX);
|
|
assert_equals(viewport.scrollTop, expectedY);
|
|
}, `assign scrollLeft and scrollTop for ${format_dict(input)} on viewport-defining element lands on (${expectedX}, ${expectedY})`);
|
|
|
|
test(() => {
|
|
divScroller.scrollTo(0, 0);
|
|
assert_equals(divScroller.scrollLeft, 0);
|
|
assert_equals(divScroller.scrollTop, 0);
|
|
divScroller.scrollTo(input);
|
|
assert_equals(divScroller.scrollLeft, expectedX);
|
|
assert_equals(divScroller.scrollTop, expectedY);
|
|
}, `scrollTo(${format_dict(input)}) on div lands on (${expectedX}, ${expectedY})`);
|
|
|
|
test(() => {
|
|
divScroller.scrollTo(0, 0);
|
|
assert_equals(divScroller.scrollLeft, 0);
|
|
assert_equals(divScroller.scrollTop, 0);
|
|
divScroller.scrollBy(input);
|
|
assert_equals(divScroller.scrollLeft, expectedX);
|
|
assert_equals(divScroller.scrollTop, expectedY);
|
|
}, `scrollBy(${format_dict(input)}) on div lands on (${expectedX}, ${expectedY})`);
|
|
|
|
test(() => {
|
|
viewport.scrollTo(0, 0);
|
|
assert_equals(viewport.scrollLeft, 0);
|
|
assert_equals(viewport.scrollTop, 0);
|
|
viewport.scrollTo(input);
|
|
assert_equals(viewport.scrollLeft, expectedX);
|
|
assert_equals(viewport.scrollTop, expectedY);
|
|
}, `scrollTo(${format_dict(input)}) on viewport-defining element lands on (${expectedX}, ${expectedY})`);
|
|
|
|
test(() => {
|
|
viewport.scrollTo(0, 0);
|
|
assert_equals(viewport.scrollLeft, 0);
|
|
assert_equals(viewport.scrollTop, 0);
|
|
viewport.scrollBy(input);
|
|
assert_equals(viewport.scrollLeft, expectedX);
|
|
assert_equals(viewport.scrollTop, expectedY);
|
|
}, `scrollBy(${format_dict(input)}) on viewport-defining element lands on (${expectedX}, ${expectedY})`);
|
|
|
|
test(() => {
|
|
window.scrollTo(0, 0);
|
|
assert_equals(window.scrollX, 0);
|
|
assert_equals(window.scrollY, 0);
|
|
window.scrollTo(input);
|
|
assert_equals(window.scrollX, expectedX);
|
|
assert_equals(window.scrollY, expectedY);
|
|
}, `scrollTo(${format_dict(input)}) on window lands on (${expectedX}, ${expectedY})`);
|
|
|
|
test(() => {
|
|
window.scrollTo(0, 0);
|
|
assert_equals(window.scrollX, 0);
|
|
assert_equals(window.scrollY, 0);
|
|
window.scrollTo(input);
|
|
assert_equals(window.scrollX, expectedX);
|
|
assert_equals(window.scrollY, expectedY);
|
|
}, `scrollBy(${format_dict(input)}) on window lands on (${expectedX}, ${expectedY})`);
|
|
});
|
|
|
|
document.body.removeChild(document.getElementById("content"));
|
|
</script> |