Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 2 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-scroll-snap/single-axis-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Single-axis scroll containers split scroll snap axes</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.outer {
width: 200px;
height: 200px;
overflow: auto;
scroll-snap-type: both mandatory;
scrollbar-width: none;
}
#inner1 {
width: 200px;
height: 400px;
overflow: auto clip;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
#inner2 {
width: 400px;
height: 200px;
overflow: clip auto;
scroll-snap-type: y mandatory;
scrollbar-width: none;
}
.space {
width: 400px;
height: 400px;
background-color: blue;
}
.target {
position: relative;
left: 150px;
top: 150px;
width: 100px;
height: 100px;
background-color: red;
scroll-snap-align: center start;
}
</style>
<div class="outer" id="outer1">
<div id="inner1">
<div class="space">
<div class="target">
</div>
</div>
</div>
</div>
<div class="outer" id="outer2">
<div id="inner2">
<div class="space">
<div class="target">
</div>
</div>
</div>
</div>
<script>
test(() => {
const outer1 = document.getElementById("outer1");
const inner1 = document.getElementById("inner1");
assert_equals(inner1.scrollLeft, 150, "inner1 should snap target inline-start horizontally");
assert_equals(inner1.scrollTop, 0, "inner1 with overflow-y: clip cannot scroll vertically");
assert_equals(outer1.scrollLeft, 0, "outer1 should not snap horizontally as inner1 trapped horizontal snap");
assert_equals(outer1.scrollTop, 100, "outer1 should snap target center vertically");
}, "Single-axis scroll container with overflow-y: clip propagates vertical snap area to outer scroller");
test(() => {
const outer2 = document.getElementById("outer2");
const inner2 = document.getElementById("inner2");
assert_equals(inner2.scrollTop, 100, "inner2 should snap target center vertically");
assert_equals(inner2.scrollLeft, 0, "inner2 with overflow-x: clip cannot scroll horizontally");
assert_equals(outer2.scrollTop, 0, "outer2 should not snap vertically as inner2 trapped vertical snap");
assert_equals(outer2.scrollLeft, 150, "outer2 should snap target inline-start horizontally");
}, "Single-axis scroll container with overflow-x: clip propagates horizontal snap area to outer scroller");
</script>