Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="apz_test_utils.js"></script>
<script src="apz_test_native_event_utils.js"></script>
<script src="/tests/SimpleTest/paint_listener.js"></script>
<style>
html {
scroll-snap-type: x mandatory;
overflow: scroll;
scroll-behavior: smooth;
}
/*
* Layout three child divs horizontally.
* Each div has a horizontal snap point, but
* doesn't have any vertical valid snap point.
*/
.container {
flex-direction: row;
display: flex;
width: 100vw;
height: 30vh;
}
.container div {
background-color: grey;
width: 30vw;
height: 100%;
margin: 10px;
scroll-snap-align: none center;
scroll-snap-stop: always;
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
<div style="height: 200vh"></div>
</body>
<script type="application/javascript">
async function test() {
const container = document.querySelector(".container");
const scrollendPromise = promiseOneEvent(window, "scrollend");
// Try to scroll down by a wheel event.
synthesizeNativeWheel(container, 50, 50, 0, -50);
// Wait for the end of the smooth scrolling triggered by above wheel event.
await scrollendPromise;
ok(window.scrollY, "`scroll-snap-type: x mandatory` doesn't trap vertical scrolling");
}
if (getPlatform() == "android") {
ok(true, "Skipping test because native wheel events are not supported on Android");
subtestDone();
} else if (getPlatform() == "linux") {
subtestDone();
} else {
waitUntilApzStable()
.then(test)
.then(subtestDone, subtestFailed);
}
</script>
</html>