Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-tree-order-over-geometric-containment.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<title>CSS Scroll Snap: geometric containment does not imply ancestry</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/dom/events/scrolling/scroll_support.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="resources/common.js"></script>
</head>
<body>
<style>
#scroller {
position: relative;
width: 200px;
height: 200px;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scrollbar-width: none;
}
.target {
position: absolute;
top: 300px;
left: 0;
scroll-snap-align: start;
}
#first {
width: 200px;
height: 200px;
}
#second {
width: 100px;
height: 100px;
}
#spacer {
height: 1000px;
}
</style>
<!-- These snap areas are siblings even though the first geometrically
contains the second. The first must win their aligned-position tie. -->
<div id="scroller">
<div id="first" class="target"></div>
<div id="second" class="target"></div>
<div id="spacer"></div>
</div>
<script>
promise_test(async t => {
const scroller = document.getElementById("scroller");
const first = document.getElementById("first");
const second = document.getElementById("second");
await waitForCompositorCommit();
await runScrollSnapSelectionVerificationTest(
t, scroller,
/* aligned_elements_x=*/[],
/* aligned_elements_y=*/[first, second],
/* axis=*/"y",
/* expected_target_x=*/null,
/* expected_target_y=*/first);
}, "A geometrically contained sibling does not supersede the first snap target");
</script>
</body>
</html>