86 lines
2.8 KiB
HTML
86 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title> CSS Scroll Snap 2 Test: Snap Events with pseudo-element targets.</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#snap-events">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/testdriver.js"></script>
|
|
<script src="/resources/testdriver-actions.js"></script>
|
|
<script src="/resources/testdriver-vendor.js"></script>
|
|
<script src="/css/css-scroll-snap/snap-events/resources/common.js"></script>
|
|
<script src="/css/css-scroll-snap/snap-events/resources/user-scroll-common.js"></script>
|
|
<script src="/dom/events/scrolling/scroll_support.js"></script>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
.scroller {
|
|
overflow: scroll;
|
|
width: 200px;
|
|
height: 200px;
|
|
border: solid 1px black;
|
|
scroll-snap-type: y mandatory;
|
|
position: absolute;
|
|
resize: both;
|
|
}
|
|
.space {
|
|
height: 300vh;
|
|
width: 300vw;
|
|
position: absolute;
|
|
}
|
|
.scroller::before, .scroller::after {
|
|
scroll-snap-align: start;
|
|
height: 50px;
|
|
width: 50px;
|
|
color: white;
|
|
display: block;
|
|
}
|
|
.scroller::before {
|
|
content: "before";
|
|
background-color: blue;
|
|
}
|
|
.scroller::after {
|
|
content: "after";
|
|
background-color: orange;
|
|
margin-top: 100px;
|
|
}
|
|
</style>
|
|
<div class="scroller" id="scroller">
|
|
<div class="space"></div>
|
|
</div>
|
|
|
|
<script>
|
|
const start_pos = {
|
|
x: scroller.clientWidth / 2,
|
|
y: scroller.clientHeight / 2,
|
|
};
|
|
const end_pos = { x: scroller.clientWidth / 2, y: 0 };
|
|
// The top of the ::after pseudo element is the sum of the
|
|
// ::before pseudo-element's height (50) and the ::after
|
|
// pseudo-element's margin-top (100).
|
|
const after_pseudo_element_top = 50 + 100;
|
|
const test_data = {
|
|
scroller: scroller,
|
|
scrolling_function: async () => {
|
|
await snap_event_touch_scroll_helper(start_pos, end_pos);
|
|
},
|
|
expected_snap_targets: { block: scroller, inline: null },
|
|
expected_scroll_offsets: {
|
|
x: 0,
|
|
y: after_pseudo_element_top,
|
|
}
|
|
};
|
|
|
|
promise_test(async (t) => {
|
|
await test_scrollsnapchange(t, test_data);
|
|
}, "snapTarget for scrollsnapchange is the owning element when a snap area " +
|
|
"belongs to a pseudo-element");
|
|
|
|
promise_test(async (t) => {
|
|
await test_snap_event(t, test_data, "scrollsnapchanging");
|
|
}, "snapTarget for scrollsnapchanging is the owning element when a snap area " +
|
|
"belongs to a pseudo-element");
|
|
</script>
|
|
</body>
|
|
</html>
|